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

Ini Dia Panduan Utama untuk Penggunaan Animasi yang Tepat di UX

- Advertisement -
- Advertisement -
- Advertisement -

Saat ini sulit untuk mengesankan atau bahkan mengejutkan dengan animasi antarmuka. Ini menunjukkan interaksi antara layar, menjelaskan cara menggunakan aplikasi atau hanya mengarahkan perhatian pengguna. Saat menjelajahi artikel tentang animasi, saya menemukan bahwa hampir semuanya menggambarkan hanya kasus penggunaan tertentu atau fakta umum tentang animasi, tetapi saya belum menemukan artikel mana pun yang semua aturan mengenai animasi antarmuka dijelaskan dengan jelas dan praktis. Nah, dalam artikel ini saya tidak akan menulis sesuatu yang baru, saya hanya ingin mengumpulkan semua prinsip & aturan utama di satu tempat, sehingga desainer lain yang ingin memulai antarmuka penghubung tidak harus mencari informasi tambahan.

Durasi dan kecepatan animasi

Ketika elemen mengubah keadaan atau posisi mereka, durasi animasi harus cukup lambat untuk memberi pengguna kemungkinan untuk melihat perubahan, tetapi pada saat yang sama cukup cepat untuk tidak menyebabkan menunggu.

Gunakan durasi yang tepat dalam animasi Anda. Jangan membuatnya terlalu cepat dan jangan biarkan pengguna cukup waktu untuk menguap

Banyak penelitian telah menemukan bahwa kecepatan optimal untuk animasi antarmuka adalah antara 200 dan 500 ms. Angka-angka ini didasarkan pada kualitas khusus otak manusia. Animasi apa pun yang lebih pendek dari 100 ms bersifat instan dan tidak akan dikenali sama sekali. Sedangkan animasi lebih lama dari 1 detik akan menyampaikan rasa penundaan dan dengan demikian menjadi membosankan bagi pengguna.

Durasi animasi yang sebaiknya Anda miliki di antarmuka Anda

Di perangkat seluler, Material Design Guidelines juga menyarankan membatasi durasi animasi hingga 200–300 ms. Sedangkan untuk tablet, durasi harus lebih lama 30% – sekitar 400-450 ms. Alasannya sederhana: ukuran layar lebih besar sehingga objek mengatasi jalur yang lebih panjang ketika mereka mengubah posisi. Pada perangkat yang dapat dikenakan, durasi harus 30% lebih pendek – sekitar 150-200 ms, karena pada layar yang lebih kecil jarak untuk bepergian lebih pendek.

Ukuran perangkat seluler memengaruhi durasi animasi

Animasi web diperlakukan dengan cara yang berbeda. Karena kita terbiasa dengan pembukaan halaman web yang hampir instan di browser, kami juga berharap untuk transit antar negara yang berbeda dengan cepat. Jadi, durasi transisi web harus berlangsung sekitar 2 kali lebih pendek dari pada perangkat seluler – antara 150-200 ms. Dalam kasus lain, pengguna pasti akan berpikir bahwa komputer membeku atau memiliki masalah dengan koneksi internet.

Tapi. Lupakan aturan ini jika Anda membuat animasi dekoratif di situs web Anda atau mencoba menarik perhatian pengguna ke elemen tertentu. Dalam kasus ini, animasi bisa lebih lama.

Layar komputer besar = Animasi lambat? Tidak mungkin!

Anda harus ingat bahwa terlepas dari platform, durasi animasi harus bergantung tidak hanya pada jarak yang ditempuh tetapi juga pada ukuran objek. Elemen atau animasi yang lebih kecil dengan perubahan kecil harus bergerak lebih cepat. Dengan demikian, animasi dengan elemen besar dan kompleks terlihat lebih baik ketika berlangsung sedikit lebih lama.

Di antara benda bergerak dengan ukuran yang sama, yang pertama berhenti adalah benda yang telah melewati jarak terpendek.

Objek kecil dibandingkan dengan objek besar bergerak lebih lambat karena mereka membuat offset yang lebih besar.

Durasi animasi berbeda tergantung pada ukuran objek dan jarak yang ditempuh

Ketika benda bertabrakan, energi tabrakan harus didistribusikan secara merata di antara mereka sesuai dengan hukum fisika. Jadi, lebih baik untuk mengecualikan efek pentalan. Gunakan hanya dalam kasus luar biasa saat itu masuk akal.

Hindari menggunakan efek memantul karena mengalihkan perhatian

Pergerakan objek harus jelas dan tajam sehingga tidak menggunakan motion blur (ya, pengguna After Effects, bukan kali ini). Sulit untuk mereproduksi efeknya bahkan pada perangkat seluler modern dan sama sekali tidak digunakan dalam animasi antarmuka.

Jangan gunakan efek blur dalam animasi Anda

Daftar item (kartu berita, daftar email, dll) harus memiliki penundaan yang sangat singkat antara penampilannya. Setiap kemunculan elemen baru harus berlangsung dari 20 hingga 25 ms. Munculnya elemen yang lebih lambat dapat mengganggu pengguna.

Animasi untuk item daftar harus berlangsung 20-25 ms

Pelonggaran

Pelonggaran membantu membuat gerakan objek lebih alami. Ini adalah salah satu prinsip penting dari animasi , yang secara menyeluruh dijelaskan dalam buku The Illusion of Life: Disney Animation , yang ditulis oleh dua animator utama Disney – Ollie Johnston dan Frank Thomas.

Agar animasi tidak terlihat mekanis dan artifisial, objek harus bergerak dengan akselerasi atau deselerasi – seperti semua objek hidup di dunia fisik.

Animasi dengan pelonggaran terlihat lebih alami dibandingkan dengan yang linier

Gerakan linear

Objek yang tidak terpengaruh oleh kekuatan fisik bergerak linear, dengan kata lain dengan kecepatan konstan. Dan hanya karena fakta ini mereka terlihat sangat tidak alami dan buatan untuk mata manusia.

Semua aplikasi untuk animasi menggunakan kurva animasi. Saya akan mencoba menjelaskan bagaimana cara membacanya dan apa artinya. Kurva menunjukkan bagaimana posisi objek (y axis)berubah selama interval waktu yang sama (x axis). Dalam kasus saat ini, gerakannya linear, sehingga objek menempuh jarak yang sama pada waktu yang sama.

Kurva gerak linear

Gerak linear dapat, misalnya, hanya digunakan ketika objek berubah warna atau transparansi. Secara umum, kita dapat menggunakannya untuk keadaan ketika suatu objek tidak mengubah posisinya.

Kemudahan atau kurva akselerasi

Kita dapat melihat pada kurva bahwa pada awalnya posisi objek berubah perlahan dan kecepatannya meningkat secara bertahap. Itu artinya objek bergerak dengan akselerasi tertentu.

Kurva percepatan

Kurva ini harus digunakan ketika benda terbang keluar dari layar dengan kecepatan penuh. Itu bisa berupa notifikasi sistem atau hanya kartu antarmuka. Namun perlu diingat bahwa jenis kurva seperti itu hanya boleh digunakan ketika benda meninggalkan layar selamanya dan kita tidak bisa mengingat atau mengembalikannya.

Kurva percepatan untuk membuang kartu keluar dari layar

Kurva animasi membantu mengekspresikan suasana hati yang tepat. Pada contoh di bawah ini, kita dapat melihat bahwa durasi gerakan dan jarak untuk semua objek adalah sama, tetapi bahkan perubahan kecil pada kurva memberi Anda kemungkinan untuk mempengaruhi suasana animasi.

Dan tentu saja, dengan mengubah kurva, Anda dapat memindahkan objek yang mirip dengan dunia nyata.

Durasi dan jarak yang sama tetapi suasana hatinya berbeda

Kemudahan atau kurva perlambatan

Ini berlawanan dengan kurva kemudahan masuk, jadi objek dengan cepat menutupi jarak jauh lalu perlahan-lahan mengurangi kecepatan sampai akhirnya berhenti.

Kurva perlambatan

Jenis kurva ini harus digunakan ketika elemen muncul di layar – itu terbang di layar dengan kecepatan penuh, secara bertahap melambat hingga benar-benar berhenti. Ini juga dapat diterapkan ke berbagai kartu atau benda yang muncul dari luar layar.

Kurva perlambatan untuk tampilan yang bagus

Kemudahan-in-out atau kurva standar

Kurva ini membuat objek mendapatkan kecepatan di awal dan kemudian perlahan-lahan menjatuhkannya kembali ke nol. Jenis gerakan itu adalah yang paling sering digunakan dalam animasi antarmuka. Setiap kali Anda ragu jenis gerakan apa yang digunakan dalam animasi Anda, gunakan kurva standar.

Kurva standar

Menurut Pedoman Desain Bahan , lebih baik menggunakan kurva asimetris untuk membuat gerakan terlihat lebih alami dan realistis. Ujung kurva harus lebih ditekankan daripada awalnya, sehingga durasi akselerasi lebih pendek dari pada memperlambat. Dalam hal ini, pengguna akan lebih memperhatikan pergerakan akhir elemen dan dengan demikian keadaan baru.

Lihat perbedaan antara kurva standar simetris dan asimetris

Ease-in-out digunakan ketika objek bergerak dari satu bagian layar ke bagian lainnya. Dalam kasus seperti itu, animasi menghindari efek yang menarik dan dramatis.

Pergerakan kartu pada layar dan kurva asimetris yang sesuai

Jenis gerakan yang sama harus digunakan ketika elemen menghilang dari layar tetapi pengguna dapat mengembalikannya ke tempat sebelumnya kapan saja. Ini menyangkut laci navigasi, antara lain.

Laci navigasi bersembunyi dari layar dengan kurva standar

Dari contoh-contoh ini mengikuti aturan mendasar yang diabaikan oleh banyak pemula – animasi awal tidak sama dengan animasi akhir. Seperti halnya dengan laci navigasi – muncul dengan kurva deselerasi dan menghilang dengan kurva standar. Selain itu, menurut Google Material Design , waktu kemunculan objek harus lebih lama untuk menarik lebih banyak perhatian.

Tampilan dan lenyapnya menu samping dipenuhi dengan deselerasi dan kurva standar yang sesuai

Suatu fungsi cubic-bezier()digunakan untuk menggambarkan kurva. Itu disebut kubik karena didasarkan pada empat poin. Titik pertama dengan koordinat 0;0(kiri bawah), dan yang terakhir dengan koordinat 1;1(kanan atas) sudah ditentukan pada grafik.

Berdasarkan hal itu, kita perlu menggambarkan hanya dua titik pada grafik, yang diberikan oleh empat argumen fungsi cubic-bezier(): dua yang pertama adalah koordinat xdan ytitik pertama, dua yang kedua adalah koordinat xdan ytitik kedua.

Untuk menyederhanakan pekerjaan Anda dengan kurva saya sarankan menggunakan situs easings.net dan cubic-bezier.com . Yang pertama berisi daftar kurva yang paling sering digunakan, parameter yang dapat Anda salin ke alat prototyping Anda. Sumber kedua memberi Anda kemungkinan untuk bermain dengan berbagai parameter kurva dan segera melihat bagaimana objek akan bergerak.

Berbagai jenis kurva dan parameternya untuk fungsi cubic-bezier ()

Koreografi dalam animasi antarmuka

Sama seperti dalam koreografi balet, gagasan utamanya adalah untuk memandu perhatian pengguna dalam satu arah yang lancar selama transisi dari satu keadaan ke keadaan lain.

Ada dua jenis koreografi – interaksi yang sama dan bawahan.

Interaksi yang setara

Interaksi yang setara berarti bahwa penampilan semua objek mematuhi satu aturan tertentu.

Dalam hal itu, penampilan semua kartu dianggap sebagai satu aliran yang memandu perhatian pengguna dalam satu arah, yaitu dari atas ke bawah. Jika kami tidak mengikuti pesanan, perhatian pengguna akan tersebar. Penampilan semua elemen sekaligus akan terlihat buruk juga.

Perhatian pengguna harus dipandu dalam satu arah yang lancar

Adapun tampilan tabular, ini sedikit lebih rumit. Di sini fokus pengguna harus diarahkan secara diagonal, sehingga menunjukkan elemen satu per satu adalah ide yang buruk. Mengungkap setiap elemen satu per satu akan membuat animasi terlalu lama, dan perhatian pengguna akan seperti zig-zag, yang salah.

Penampilan diagonal untuk tampilan kartu

Interaksi bawahan

Interaksi bawahan berarti bahwa kita memiliki satu objek pusat yang menarik perhatian semua pengguna, dan semua elemen lainnya berada di bawahnya. Jenis animasi ini memberikan rasa ketertiban dan lebih menarik perhatian pada konten utama.

Dalam kasus lain, akan sangat sulit bagi pengguna untuk mengetahui objek mana yang harus diikuti sehingga perhatiannya akan tersebar. Oleh karena itu, jika Anda memiliki beberapa elemen yang ingin dianimasikan, Anda perlu mendefinisikan dengan jelas urutan gerakannya dan menganimasikan objek seminimal mungkin pada satu waktu.

Layak menjiwai hanya satu objek pusat dan semua sisanya tunduk padanya. Jika tidak, pengguna tidak akan tahu objek apa yang harus diikuti

Menurut Desain Material , ketika objek bergerak mengubah ukurannya secara tidak proporsional, mereka harus bergerak di sepanjang busur daripada di garis lurus. Ini membantu membuat gerakan lebih alami. Dengan “tidak proporsional” Maksud saya bahwa perubahan tinggi dan lebar objek dengan kenaikan / penurunan dilakukan secara asimetris, yaitu dengan kecepatan yang berbeda (misalnya, kartu persegi berubah menjadi persegi panjang).

Gerakan objek yang secara tidak proporsional mengubah ukurannya harus diatur sepanjang busur

Gerakan di sepanjang garis digunakan ketika objek mengubah ukurannya secara proporsional. Karena pelaksanaan gerakan seperti itu jauh lebih mudah, aturan gerakan busur yang tidak proporsional sering diabaikan. Melihat contoh nyata aplikasi, Anda akan melihat dominasi gerakan linier.

Perubahan ukuran proporsional dipenuhi dalam garis lurus

Gerakan pada kurva dapat dicapai dengan dua cara: objek pertama yang disebut Vertikal keluar mulai bergerak secara horizontal dan berakhir dengan gerakan vertikal; objek kedua – Horisontal keluar – mulai bergerak secara vertikal dan berakhir dengan gerakan horizontal.

Jalur pergerakan objek di sepanjang kurva harus bertepatan dengan sumbu utama antarmuka gulir. Misalnya, pada gambar berikutnya kita dapat menggulir antarmuka ke atas dan ke bawah dan sesuai dengan kartu terbuka secara vertikal – pertama-tama ke kanan dan kemudian ke bawah. Gerakan sebaliknya dilakukan dengan cara yang berlawanan – yaitu kartu pertama kali naik secara vertikal dan berakhir bergerak secara horizontal.

Arah buka / lipat kartu harus bertepatan dengan sumbu antarmuka

Jika jalur benda yang bergerak saling bersilangan, mereka tidak dapat bergerak melalui satu sama lain. Objek harus meninggalkan ruang yang cukup untuk pergerakan objek lain dengan memperlambat atau mempercepat kecepatan mereka sendiri. Pilihan lain – mereka hanya mendorong benda lain. Kenapa begitu? Karena kami menganggap bahwa semua objek di antarmuka terletak dalam satu bidang.

Selama pergerakan, objek tidak boleh saling melewati satu sama lain, tetapi sisakan ruang untuk pergerakan objek lain

Dalam kasus lain, objek bergerak dapat naik di atas objek lain. Tetapi sekali lagi tidak ada pelarutan atau gerakan melalui benda lain. Mengapa? Karena kami percaya bahwa elemen-elemen antarmuka berperilaku sesuai dengan hukum fisika, dan tidak ada benda padat di dunia nyata yang mampu melakukan itu.

Benda bisa naik di atas benda lain lalu bergerak

Kesimpulan

Jadi, jika kita meringkas semua aturan dan prinsip yang disebutkan di atas, animasi di antarmuka harus mencerminkan gerakan yang kita ketahui dari dunia fisik – gesekan, akselerasi, dll. Meniru perilaku objek dari dunia nyata yang kita bisa buat urutan yang memungkinkan pengguna untuk memahami apa yang diharapkan dari antarmuka.

Jika animasi dibangun dengan benar, maka itu tidak mengganggu dan tidak mengalihkan pengguna dari tujuan mereka. Jika ya, Anda harus melunakkan atau menghapusnya sama sekali. Itu berarti bahwa animasi tidak boleh memperlambat pengguna atau mencegah melakukan tugas.

Tapi jangan lupa bahwa animasi lebih merupakan seni daripada sains, jadi lebih baik untuk bereksperimen dan menguji keputusan Anda pada pengguna.

sumber: uxdesign.cc

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles