Prinsip Animasi UI: Disney is Dead

Fotografi diprediksi akan menjadi kematian lukisan (Daguerreotype awal)

(Jika Anda ingin menerima artikel saya tentang animasi UI melalui email dan ditambahkan ke buletin saya, klik di sini.)

Media baru

Ketika Paul Delaroche menemukan Daguerreotype sekitar tahun 1839, ia dengan terkenal menyatakan, "Mulai hari ini, lukisan sudah mati!"

Hingga saat itu, satu-satunya cara untuk secara visual mendokumentasikan dunia eksternal adalah melalui penggunaan media yang diaplikasikan ke permukaan dengan tangan. Berabad-abad pengerjaan di berbagai disiplin ilmu telah menghasilkan penemuan berbagai prinsip dan teknik di berbagai media. Lintas budaya, dan seiring dengan perkembangan zaman, gaya dan bahasa visual tentang bagaimana representasi visual 'seharusnya terlihat' berevolusi - pola desain asli.

Para fotografer awal, yang berusaha membuat gambar mereka menyerupai lukisan-lukisan populer pada masa itu, sering menggunakan kombinasi teknik pencahayaan dan pencetakan untuk melembutkan gambar mereka dan menciptakan tampilan yang sungguh-sungguh. Pemahaman mereka tentang kemampuan media fotografi, terkait erat, dipengaruhi, dan dibatasi oleh pemahaman mereka tentang dunia seni lukis.

Butuh hampir seratus tahun sebelum fotografer seperti Ansel Adams, Imogen Cunningham, Edward Weston, dan yang lainnya di 'Grup f / 64' membuat terobosan signifikan ke dalam bahasa visual yang membedakan fotografi dari lukisan sebagai media yang unik - dengan visualnya sendiri. bahasa dan prinsip, dan dengan melakukan itu, mereka merevolusi domain fotografi.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney memecahkan masalah yang berbeda

Untungnya, kita menemukan diri kita pada revolusi animasi UI.

Pada tahun 1981 Ollie Johnston dan Frank Thomas merilis Disney Animation: the Illusion of Life, dan memperkenalkan apa yang sekarang dikenal sebagai '12 prinsip dasar animasi. 'Prinsip-prinsip ini memecahkan masalah bagaimana membuat' gerakan realistis 'yang terjadi ketika tubuh organik bergerak dan bereaksi dalam ruang fisik (prinsip-prinsipnya juga mencakup hal-hal seperti waktu emosi dan daya tarik karakter).

Animasi UI, sebagai bagian dari pengalaman pengguna berusia hampir 20 tahun dan masih dalam masa pertumbuhan. Ketika domain animasi UI muncul, satu-satunya alat yang tersedia untuk menggambarkan bagaimana antarmuka pengguna berperilaku dalam waktu adalah 12 prinsip animasi. Sama seperti bagaimana fotografer awal berusaha memahami fotografi melalui aturan melukis, desainer berusaha memahami animasi UI melalui aturan animasi Disney.

Di permukaan, ini bisa dimengerti karena ada beberapa tingkat tumpang tindih. Kemudahan gerak, salah satu dari 12 prinsip animasi, memperkuat rasa 'kebenaran' melalui gerak, sesuatu yang sangat penting bagi pengalaman pengguna. Tanpa pelonggaran, animasi UI terasa kikuk dan aneh.

Rincian lengkapnya terlihat ketika kita melihat lebih dekat pada 12 prinsip dalam konteks antarmuka pengguna.

Squash and Stretch memberikan bobot dan fleksibilitas pada objek, sesuatu yang merupakan pengecualian daripada aturan dalam antarmuka pengguna.

Antisipasi menciptakan perasaan bahwa sesuatu akan terjadi dan juga hampir tidak berguna dalam hal pengalaman pengguna. Ini berfungsi hanya dengan cara terbatas untuk interaksi mikro tertentu dan status tombol.

Pementasan mengacu pada tata letak animasi, yang masuk akal untuk kartun Disney karena karakternya terus bergerak, tetapi dalam pengalaman pengguna, ini hanya dianggap sebagai 'desain.'

Straight Ahead Action dan Pose to Pose adalah prinsip yang kurang dari pendekatan untuk proses menggambar / animasi yang sebenarnya: Anda dapat membuat animasi yang lebih lancar jika Anda menggambar bingkai terus menerus, atau menggunakan pose untuk berpose untuk mengatur beberapa bingkai kunci dan mengisi celah . Dalam pengalaman pengguna, proses ini bahkan tidak bisa diterjemahkan, kecuali ada animasi bingkai demi bingkai yang sebenarnya terjadi. Secara default, terlepas dari alat yang Anda gunakan, hampir semua animasi UI dibuat menggunakan kerangka kunci.

Follow Through and Overlapping Action berkaitan dengan mengikuti hukum fisika dan inersia, dan bagaimana tubuh fisik merespons, yang keduanya tidak ada hubungannya dengan antarmuka pengguna, kecuali jika Anda mengandalkan prinsip berikutnya, yang merupakan yang paling berguna dalam grup. .

Slow In dan Slow Out mengatakan bahwa objek membutuhkan waktu untuk mempercepat dan memperlambat. Ini sangat relevan karena 100% animasi UI harus menggunakan prinsip ini. Itu biasanya disebut sebagai 'pelonggaran,' dan sangat penting.

Arc (diperlukan untuk mereproduksi gerakan fisik) hampir tidak berguna untuk animasi UI, dan juga merupakan pengecualian daripada aturan.

Aksi Sekunder berguna dan bagus untuk transisi layar dan mengatur hierarki visual.

Pengaturan waktu relevan ketika menggambar karakter, tetapi dalam antarmuka pengguna, di mana gerakan harus tajam agar merasa responsif, saya merasa lebih baik untuk mengandalkan pelonggaran untuk mendesain nuansa interaksi, alih-alih durasinya.

Ketinggian berkaitan dengan tingkat realisme atau karikatur, sekali lagi, hampir tidak relevan dengan animasi UI, karena desainnya sudah ditentukan sebelumnya.

Gambar padat juga sebagian besar diperdebatkan karena animasi UI berurusan dengan perilaku objek antarmuka dari waktu ke waktu, bukan desain objek yang sebenarnya.

Banding juga berbicara tentang perawatan visual, sekali lagi tidak relevan dengan bagaimana antarmuka berperilaku dari waktu ke waktu.

Kesimpulannya

Jadi pertanyaannya tetap: mengapa 12 prinsip dasar animasi tidak menggambarkan animasi UI secara akurat?

Rinciannya dapat dipahami dengan baik melalui pengamatan sederhana: Animasi UI tidak mematuhi aturan yang sama atau memiliki prinsip yang sama dengan benda organik yang bergerak di ruang fisik. Animasi UI adalah media yang berbeda, berbeda dari fotografi dari lukisan - dengan karakteristik yang tumpang tindih (baik fotografi dan lukisan adalah komposisi visual statis yang mengandalkan cahaya dan komposisi) tetapi pada dasarnya merupakan media yang berbeda.

Secara sederhana, 12 prinsip dasar animasi tidak berlaku untuk animasi UI karena mereka menyelesaikan masalah yang berbeda.

Selama beberapa artikel berikutnya, saya akan mengeksplorasi apa prinsip-prinsip animasi UI ini, masalah apa yang dipecahkan oleh prinsip-prinsip animasi UI, bagaimana prinsip-prinsip berbeda dari teknik, dan bagaimana Anda dapat merancang dan menggunakan animasi UI dalam proyek Anda saat ini dan di masa depan untuk mempengaruhi kegunaan dan buat pengalaman pengguna yang lebih menarik dan efektif.