Prinsip Animasi UI: Disney adalah Mati

Fotografi diramalkan adalah kematian lukisan (awal Daguerreotype)

(Sekiranya anda ingin menerima artikel saya mengenai animasi UI melalui e-mel dan tambah ke surat berita saya, klik di sini.)

Media baru

Apabila Paul Delaroche menemui Daguerreotype sekitar 1839, dia berkata, "Dari hari ini lukisan sudah mati!"

Sehingga masa itu, satu-satunya cara untuk mendokumenkan visual dunia luar adalah melalui penggunaan medium yang digunakan untuk permukaan dengan tangan. Berabad-abad ketukangan di pelbagai disiplin ilmu telah menghasilkan penemuan pelbagai prinsip dan teknik di pelbagai media. Di seluruh budaya, dan ketika era berkembang, gaya dan visual bahasa tentang bagaimana visual representasi 'harus kelihatan' berkembang - corak reka bentuk asal.

Jurugambar awal, cuba membuat imej mereka menyerupai lukisan popular hari ini, sering menggunakan gabungan teknik pencahayaan dan percetakan untuk melembutkan imej mereka dan membuat penampilan yang melukis. Pemahaman mereka mengenai media fotografi yang mampu, dikaitkan, dipengaruhi, dan terhad oleh pemahaman mereka tentang dunia lukisan.

Ia mengambil masa hampir seratus tahun sebelum jurugambar seperti Ansel Adams, Imogen Cunningham, Edward Weston, dan lain-lain dalam 'Kumpulan f / 64' membuat penemuan penting dalam bahasa visual yang membezakan fotografi selain lukisan sebagai medium yang unik - dengan visual sendiri bahasa dan prinsip, dan dalam berbuat demikian, mereka merevolusi domain fotografi.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney menyelesaikan masalah yang berbeza

Malangnya, kita mendapati diri kita dalam revolusi dalam animasi UI.

Pada tahun 1981, Ollie Johnston dan Frank Thomas telah melancarkan Animasi Disney: Illusion of Life, dan memperkenalkan apa yang kini dikenali sebagai '12 prinsip asas animasi.' Prinsip-prinsip ini menyelesaikan masalah bagaimana mencipta 'gerakan realistik' yang berlaku apabila badan-badan organik bergerak dan bertindak balas dalam ruang fizikal (prinsip juga meliputi perkara-perkara seperti masa emosi dan rayuan karakter).

Animasi UI, sebagai sebahagian daripada pengalaman pengguna berusia hampir 20 tahun dan masih di peringkat awal. Oleh kerana domain animasi UI muncul, satu-satunya alat yang tersedia untuk menerangkan bagaimana antara muka pengguna berkelakuan dalam masa adalah 12 prinsip animasi. Sama seperti bagaimana jurugambar awal cuba memahami fotografi menerusi peraturan lukisan, para pereka cuba memahami animasi UI melalui peraturan animasi Disney.

Di permukaan, ini dapat difahami kerana terdapat beberapa tahap bertindih. Pergerakan yang digerakkan, salah satu daripada 12 prinsip animasi, memperkuatkan rasa 'keadilan' melalui gerakan, sesuatu yang penting untuk pengalaman pengguna. Tanpa pelonggaran, animasi UI merasakan kikuk dan pelik.

Pecahan penuh adalah jelas apabila seseorang melihat dengan lebih dekat 12 prinsip dalam konteks antara muka pengguna.

Skuasy dan Stretch memberikan berat dan fleksibiliti kepada objek, sesuatu yang terkecuali daripada aturan dalam antara muka pengguna.

Jangkaan mewujudkan rasa bahawa sesuatu akan berlaku dan juga hampir tidak berguna ketika datang kepada pengalaman pengguna. Ia berfungsi dengan cara yang terhad untuk memilih interaksi mikro dan butang butang.

Pementasan merujuk kepada susunan animasi, yang masuk akal untuk kartun Disney kerana watak-watak sentiasa bergerak, tetapi dalam pengalaman pengguna, ini hanya dianggap sebagai 'reka bentuk'.

Tindakan Lurus ke Depan dan Pose untuk Pose adalah kurang prinsip daripada pendekatan kepada proses lukisan / animasi sebenar: anda boleh membuat animasi yang lebih cair jika anda membuat bingkai yang berterusan, atau menggunakan pose untuk menimbulkan beberapa bingkai utama dan mengisi jurang . Dalam pengalaman pengguna, proses ini hampir tidak diterjemahkan, kecuali terdapat bingkai yang sebenarnya oleh animasi bingkai yang berlaku. Secara lalai, tanpa mengira alat yang anda gunakan, hampir semua animasi UI dicipta menggunakan keyframes.

Tindakan Melalui dan Bertindan mempunyai kaitan dengan mematuhi undang-undang fizik dan inersia, dan bagaimana badan-badan fizikal bertindak balas, kedua-duanya tidak mempunyai kaitan dengan antara muka pengguna, melainkan jika anda mengira prinsip seterusnya, yang paling berguna dalam kumpulan .

Slow In dan Slow Out mengatakan bahawa objek memerlukan masa untuk mempercepat dan melambatkan. Ini amat relevan kerana 100% animasi UI harus menggunakan prinsip ini. Ia biasanya dirujuk sebagai 'pelonggaran,' dan sangat penting.

Arc (diperlukan untuk menghasilkan semula gerakan fizikal) hampir tidak berguna untuk animasi UI, dan juga pengecualian dan bukan peraturan.

Tindakan sekunder berguna dan hebat untuk peralihan skrin dan menubuhkan hierarki visual.

Masa adalah relevan apabila melukis watak-watak, tetapi dalam antara muka pengguna, di mana gerakan perlu segar untuk merasa responsif, saya merasa lebih baik bergantung pada pelonggaran untuk merancang rasa interaksi, bukan tempoh.

Keterlaluan berkait dengan derajat realisme atau karikatur, sekali lagi, tidak relevan dengan animasi UI, kerana reka bentuk telah ditentukan sebelumnya.

Lukisan pepejal juga banyak ditakrifkan sebagai tawaran animasi UI dengan tingkah laku objek antara muka dari masa ke masa, bukan reka bentuk sebenar objek itu sendiri.

Rayuan juga bercakap dengan rawatan visual, sekali lagi tidak berkaitan dengan cara antaramuka bertindak dari masa ke masa.

Kesimpulannya

Jadi persoalannya tetap: mengapa tidak 12 prinsip asas animasi dengan tepat menggambarkan animasi UI?

Pecahan ini dapat difahami dengan mudah oleh pemerhatian yang mudah: animasi UI tidak mematuhi peraturan yang sama atau mempunyai prinsip yang sama seperti badan organik bergerak dalam ruang fizikal. Animasi UI adalah medium yang berbeza, berbeza dengan fotografi dari lukisan - dengan ciri-ciri yang bertindih (kedua-dua fotografi dan lukisan adalah komposisi visual statik yang bergantung kepada cahaya dan komposisi) tetapi medium yang berbeza.

Ringkasnya, 12 prinsip asas animasi tidak digunakan untuk animasi UI kerana mereka menyelesaikan masalah yang berbeza.

Dalam beberapa artikel yang akan datang, saya akan meneroka prinsip animasi UI ini, apakah masalah yang dihadapi oleh prinsip animasi UI, bagaimana prinsipnya berbeza dari teknik, dan bagaimana anda boleh merekabentuk dan menggunakan animasi UI dalam projek semasa dan masa depan anda untuk memberi kesan kebolehgunaan dan mewujudkan pengalaman pengguna yang lebih menarik dan berkesan.