Bagaimana dan kapan Anda harus menggunakan animasi dalam aplikasi Anda?

Pikirkan sebab dan akibat. Jika saya mengarahkan tombol, saya ingin umpan balik. Jika saya bisa menyeret sesuatu, sebutkan itu. Jika ada peringatan atau notifikasi, diam-diam menarik perhatian saya padanya. Selain itu, kecuali Anda memiliki alasan yang sangat spesifik untuk animasi, jangan gunakan satu. Cobalah untuk menghindari apa pun yang dapat mengganggu jika terus berlanjut. Jika animasi tidak penting dan mengalihkan perhatian dari tujuan utama halaman, hilangkan saja.

Beberapa lokasi di mana animasi dapat dilakukan:

• Meminimalkan panel ke lokasi tertentu - animasi membantu mengajari pengguna kemana panel diminimalkan dan cara mengembalikannya.
• Menyembunyikan hal-hal otomatis, misalnya bilah navigasi - animasi menarik perhatian pengguna bahwa sesuatu baru saja menghilang dan dari mana ia dapat diambil.
• Memperbarui area yang tidak langsung di dekat area tempat perubahan yang menyebabkannya terjadi. Misalnya, mengedit data dalam daftar/kisi yang mengubah representasi visual dari data itu di panel lain.

Animasi (perubahan/gerakan) lebih menarik perhatian daripada hal-hal lain, jadi sangat bagus ketika Anda ingin menarik perhatian pada suatu tindakan yang mungkin malah meleset dari perhatian pengguna.

Namun, bahkan untuk item-item di atas, mungkin bernilai saat melakukannya hanya beberapa kali pertama - karena mata secara otomatis tertarik padanya, itu berfungsi sebagai selingan dan karenanya harus dihindari setelah "pedoman" awal telah selesai .

Anda harus selalu memiliki semacam animasi sibuk/bekerja untuk menjaga pengguna Anda dari berpikir aplikasi telah berhenti bekerja (terutama penting untuk aplikasi ajax).

Transisi cepat sederhana tidak masalah jika menambah pengalaman pengguna secara keseluruhan, tetapi jangan terlalu banyak.

Pernahkah Anda menggunakan aplikasi di mana Anda berpikir bahwa "Saya berharap pengembang akan menghabiskan banyak waktu untuk merencanakan fitur-fitur aktual seperti ketika ia merencanakan efek UI yang keren"? Ingatlah hal ini ketika Anda menambahkan animasi.

Pertanyaan bagus . Seperti biasa, itu tergantung pada aplikasinya (game mungkin harus menggunakan animasi UI lebih banyak daripada aplikasi produktivitas, misalnya), tetapi ada beberapa prinsip umum.

Kembali ketika iThings baru dan panas, semuanya harus dianimasikan, tetapi menarik melihat VS2010 dan Office 2010 dan melihat berapa banyak bukan animasi. Secara khusus, pada rollover hover/tombol fade-in Office 2010 (sementara Office 2007 melakukannya). IMO, rasanya lebih responsif. Menu masih memudar masuk/keluar (meskipun perlu dicatat bahwa menu membutuhkan waktu sekitar dua kali lebih lama untuk memudar out seperti yang mereka lakukan untuk memudar in, yang dapat meningkatkan persepsi responsif).

Secara umum, animasi harus digunakan ketika komponen UI bergerak tanpa pengguna menyeret/menggulirnya secara eksplisit . Jika pengguna menyeret ikon ke tempatnya, "scootching" ikon lain keluar dari jalan menyampaikan efek dari tindakan pengguna (meskipun kadang-kadang garis titik penyisipan sudah cukup). "Bilah informasi" pada IE/Firefox mendorong hal-hal lain ke bawah untuk mengurangi kegelisahan dan menarik perhatian pengguna. Menu Accordion dan tree telah diuji lebih baik dengan animasi karena pengguna melihat ke mana elemen-elemen lain pergi.

Saya pernah melihat penelitian yang menunjukkan bahwa pengguna dari semua tingkatan cenderung berinteraksi dengan elemen UI yang menjiwai (jika saya menemukan tautan saya akan memperbarui ini). Jadi, jika Anda menyalakan tombol lebih dari 2 detik ketika pengguna melayang di atasnya, bahkan jika tombol akan bekerja selama animasi, pengguna akan menunggu animasi untuk selesai. Untuk merasakan hal ini, periksa WPF Theme sampel. Beberapa tema memiliki animasi yang lebih panjang daripada yang lain, dan Anda dapat segera menentukan mana yang terasa lamban. Efek memudar lambat mungkin juga memberikan kontribusi kepada pengguna yang mengatakan Vista merasa lambat - pada Win7, semua animasi yang sama ada (jadi itu sama lambatnya pada prosesor/kartu grafis), tetapi banyak yang lebih pendek.

OTOH, fitur baru google.com memudar dalam hal, dan pencarian gambar google sekarang fitur lightbox. Jadi tren berjalan dua arah.

Singkatnya, animasi memiliki dua efek kuat pada otak yang dapat Anda gunakan:

• Mengurangi muatan kognitif: Mereka memungkinkan pengguna untuk melihat apa yang terjadi di antara dua keadaan, jadi otaknya tidak harus "mengisi celah". Ini membuat pengguna merasa semuanya lebih jelas dan mudah digunakan --> Memanfaatkan animasi secara ekstensif untuk transisi (cf Apple)

• Menarik perhatian pengguna: Manusia benar-benar baik untuk mendeteksi pergerakan di tempat yang tidak langsung mereka lihat. Ini dilakukan berkat sel batang kami , sel yang digunakan untuk mendeteksi gerakan, yang sangat padat di tepi luar retina (harus ada hubungannya dengan kelangsungan hidup di lingkungan yang bermusuhan) -> Gunakan animasi jika sesuatu yang sangat penting terjadi di lokasi yang jauh.

Efek ini sangat kuat karena mereka terhubung langsung ke otak reptil kita. Kuat dan berbahaya sekaligus.

Saat membuat animasi untuk aplikasi web/asli, saya selalu mengambil pendekatan github, semacam hampir "mengganggu pengguna" selama setengah detik, saat konten dimuat. Temukan bagian paling lambat dari aplikasi (terutama bagian di mana Anda menekan tombol dan selama setengah detik, sepertinya tidak ada yang terjadi, dan menemukan beberapa cara untuk melakukan animasi, ini untuk meminimalkan frustrasi bagi pengguna (" Saya menekan tombol tetapi tidak ada yang terjadi "), harap dicatat bahwa maksud saya bukan roda pemuatan yang berputar, atau semacam animasi pemuatan, maksud saya seperti animasi geser atau semacamnya, untuk menciptakan ilusi licin , UI cepat, (lihat: https://github.com/github/linguist setiap kali Anda mengklik sesuatu ada animasi slide ini yang membuat github tampak super cepat dan halus), harap dicatat jangan berlebihan ini (menggunakan teknik ini pada bagian aplikasi Anda yang mengambil> 500 ms) Saya merasa seperti 500 ms, adalah angka ajaib, tetapi bereksperimen dan temukan milik Anda.

Anda harus bertanya: apakah animasi ini membantu pengguna mengetahui apa yang terjadi? Saya mematikan efek jin OS X dengan segera, tetapi saya menghargai animasi diminimalkan/kembalikan yang sederhana karena cepat dan memberikan petunjuk tambahan tentang apa yang baru saja terjadi. Begitu juga dengan Spaces/Expose. Atau mungkin ini adalah transisi pudar yang pendek, sederhana, lembut yang membuat sesuatu tampak kurang mendadak dan lebih manusiawi.

Kemudian lagi, sedikit bakat bisa menjadi merek dagang Anda, seperti 'Lucas lap' dari Star Wars.

Animasi memiliki tujuan, dan tujuan itu adalah memvisualisasikan perubahan dalam keadaan.

Lebih mudah untuk grok ketika Anda berpikir tentang animasi deklaratif seperti jenis yang ada di CSS modern seperti yang diajukan oleh webkit. Dalam konteks ini, Anda menentukan bagaimana elemen terlihat dalam keadaan tertentu, dan kemudian memberi tahu CSS bagaimana mereka terlihat dalam keadaan yang berbeda. Bagaimana Anda menentukan negara? Dengan aturan CSS, seperti nama kelas dan id. Jadi misalnya (dan maafkan saya karena menggunakan kode di sini!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

Apa yang kami uraikan di sini adalah kotak yang terbuka, dan kami memberi tahu kode cara menghidupkan antara dua aturan CSS. Ini membuat mereka menyatakan, dan ketika Anda menyadari itu, menerapkan animasi ke aplikasi Anda tiba-tiba menjadi jauh lebih logis. Alih-alih berpikir dalam hal apa animasi berjalan di mana, Anda melihat animasi sebagai produk sampingan dari perubahan negara; indikator bahwa sesuatu telah terjadi atau umpan balik kepada pengguna bahwa perubahan sedang terjadi.

Ketika saya belajar membedakan antara "animasi" murni (dari sudut pandang pemrograman) dan "keadaan berubah" (dari sudut pandang deklaratif), itu membuat semua desain UI saya jauh lebih solid dan logis.