Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Prinsip Gerakan Disney dalam Merancang Interface Animations

- Advertisement -
- Advertisement -
- Advertisement -

12 Prinsip Animasi Disney adalah salah satu panduan yang tidak dapat ditawar lagi ketika animasi tradisional dipertimbangkan. Itu dikemukakan oleh Ollie Johnston dan Frank Thomas dalam buku mereka – The Illusion of Life . Prinsip-prinsip ini awalnya dirancang untuk animasi tradisional seperti animasi karakter. Namun, prinsip-prinsip ini masih dapat diterapkan dalam mendesain animasi antarmuka. Jadi, ini hanya upaya penasaran untuk mengaitkan beberapa prinsip tersebut dalam mendesain animasi antarmuka.

Merancang Animasi Antarmuka

Squash dan Stretch

Dalam animasi, ‘Squash and Stretch’ mewakili gravitasi, massa, berat, dan fleksibilitas objek. Sebuah bola memantul dalam adegan yang membentang ketika menyentuh tanah adalah Squash and Stretch.

Dalam antarmuka, teknik ini dapat dengan mudah terkait dengan tombol. Keadaan ditekan tombol adalah Squash. Dengan mengendalikan Squash dan Stretch, kita dapat dengan mudah mendefinisikan karakter ke tombol. Selain tombol, ini dapat diterapkan ke elemen yang berinteraksi dalam suatu antarmuka.

Tombol yang tergencet dan membentang saat berinteraksi.

Squash and Stretch diterapkan ke sidebar.

Antisipasi

Antisipasi menginformasikan kepada pemirsa tentang apa yang akan terjadi. Itu mendahului tindakan yang terjadi selanjutnya. Karakter yang membawa lengannya kembali sebelum melepaskan lembing adalah antisipasi.

Dalam antarmuka, hover state adalah contoh yang bagus untuk ini. Setiap kali kita mengarahkan elemen, elemen tertentu bereaksi terhadapnya yang mengindikasikan bahwa itu dapat diklik dan sesuatu akan terjadi saat mengkliknya.

Interaksi pada hover biasanya memberi tahu kami bahwa ada tindakan yang terjadi selanjutnya.

Antarmuka yang melibatkan pengguliran horizontal biasanya cenderung untuk mengungkapkan bagian dari elemen berikutnya yang akan muncul pada gulir / geser. Ini adalah contoh yang baik dari antisipasi karena mengungkapkan info tentang hal berikutnya.

Pengaturan waktu

Dalam animasi tradisional, pewaktuan menginformasikan bagaimana bingkai digambar. Lebih banyak frame, lebih halus dan lebih lambat animasinya. Pengaturan waktu juga memberikan suasana dan karakter pada objek.

Pengaturan waktu adalah aspek mendasar dari setiap animasi antarmuka. Pengaturan waktu bersama dengan fungsi pelonggaran memainkan peran penting dalam koreografi gerak. Transisi yang panjang membuat pengguna Anda menunggu terlalu lama. Di sisi lain, pengguna Anda mungkin kehilangan sesuatu jika animasi Anda terlalu cepat. Biasanya, sebagian besar animasi antarmuka terletak di antara 200 – 600ms. Interaksi seperti hover dan umpan balik sekitar 300 ms dan gerakan rumit seperti transisi sekitar 500 ms. Anda dapat merujuk ke Desain Bahan , yang memiliki penjelasan durasi yang bagus untuk setiap jenis animasi.

Beberapa sistem desain (seperti Carbon dan Lightning ) telah mempertimbangkan gerak sebagai aspek penting dan merumuskan spesifikasi (pengaturan waktu, pelonggaran, dll.) Untuk setiap jenis transisi.

Transisi di sebelah kanan membuat pengguna menunggu terlalu lama.

Slow In dan Slow Out

Sebagian besar objek di dunia nyata akan mempercepat dan melambat saat bergerak. Kecuali ada sesuatu yang menghalangi, tidak ada gerakan tiba-tiba. Misalnya, objek jatuh bebas mulai perlahan dan kemudian mendapatkan momentum.

Kartu di sebelah kiri tidak memiliki pelonggaran. Anda dapat melihat bahwa transisi di sebelah kanan tampak lebih alami.

Menambahkan pelonggaran ke elemen antarmuka Anda memberi lebih banyak kehidupan dan membuatnya tampak lebih alami. Pengaturan waktu dan pelonggaran saja dapat digunakan secara efektif untuk mendefinisikan sistem gerak Anda.

Pementasan

Pementasan koreografi adegan. Yaitu, bagaimana objek ditempatkan dalam sebuah adegan, bagaimana dan kapan setiap animasi berlangsung dan seterusnya. Ini mengarahkan perhatian ke objek paling penting dalam adegan.

Dalam antarmuka, pementasan menentukan di mana elemen ditempatkan dan bagaimana mereka dikoreografikan saat interaksi terjadi. Ini mengarahkan perhatian pengguna ke elemen yang dimaksud.

Pertimbangkan aplikasi musik yang menyarankan musik berdasarkan minat kami. Jadi hal penting yang harus dilakukan aplikasi adalah membuat pengguna menyukai lagu jika mereka ingin mendengarkan jenis yang sama. Jadi, perlu untuk melakukan aksi LIKE secara terpisah dari elemen koreografer lainnya.

Busur

Sebuah bola yang dilempar dari ketinggian mengikuti jalur parabola. Busur membuat segalanya lebih alami.

Dalam antarmuka, elemen yang mengikuti jalur diagonal dapat dibuat lebih alami dengan mengikuti busur. Arcs dapat digunakan saat Anda ingin menyorot lintasan elemen.

Anda bisa melihat elemen mengikuti busur terlihat lebih baik daripada yang diagonal.

Aksi Sekunder

Dalam animasi, aksi sekunder digunakan untuk mendukung atau meningkatkan aksi utama suatu objek. Gerakan kepala karakter sambil berjalan adalah tindakan sekunder.

Dalam antarmuka, tindakan sekunder dapat digunakan untuk membuat tindakan utama lebih menonjol. Ini berguna di tempat-tempat di mana suatu elemen perlu memberikan umpan balik kepada pengguna. Semua interaksi mikro didasarkan pada prinsip aksi sekunder.

Reaksi sekunder dari partikel meningkatkan aksi tombol utama.

Ketinggian dan Banding

Karakter-karakter penting dalam adegan harus menarik dan pada saat yang sama, tindakan tertentu dapat dibesar-besarkan untuk mendapatkan perhatian lebih.

Dalam antarmuka, interaksi penting dapat dilebih-lebihkan untuk mendapatkan perhatian pengguna. FAB dalam desain material adalah contoh yang bagus. Keadaan statis dari FAB itu sendiri menarik karena berada dalam warna aksen dan juga mengapung di atas semua elemen. Ketika interaksi terjadi, animasi FAB dapat dilebih-lebihkan untuk menempati seluruh layar agar lebih menarik.

FAB yang dilebih-lebihkan pada interaksi.

Interaksi pada aplikasi pembayaran yang tindakan utamanya dilebih-lebihkan.

Ikuti Melalui dan Tumpang tindih Aksi

Pertimbangkan kelinci melompat dari ketinggian. Saat kelinci memulai gerakannya, telinganya mungkin memulai dengan Offset dengan tubuhnya. Dan saat mendarat, telinganya masih bergerak. Yang pertama disebut ‘Aksi Tumpang tindih’ di mana bagian-bagian berbeda dari karakter beroperasi pada tingkat yang berbeda. Yang terakhir disebut ‘Follow Through’ di mana beberapa bagian karakter masih akan bergerak bahkan setelah karakter berhenti.

Dalam antarmuka, elemen dapat dibuat untuk melampaui (Ikuti) posisi mereka sebelum beristirahat untuk membuat mereka merasa lebih alami.

Jendela modal memperlihatkan Follow Through. Itu melampaui posisi dan kemudian mengendap.

Saat digulir, kartu gambar dan teks mulai dengan laju yang berbeda menunjukkan Tumpang tindih.

Setiap interaksi dalam suatu antarmuka harus dibuat dengan hati-hati dengan konteks yang tepat untuk menjadikan pengalaman itu mendalam. Menggunakan prinsip-prinsip ini di tempat yang tepat memastikan bahwa interaksi Anda tidak asing dengan antarmuka Anda.

Banyak prinsip ini digunakan dalam produk digital saat ini dalam berbagai bentuk dan cara. Sangatlah menyenangkan mengetahui bahwa seperangkat prinsip yang dirancang tiga dekade yang lalu masih berlaku saat ini.

sumber:blog.marvelapp.com

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles