Animasi Empathetic

Animasi web sering menjadi sumber perdebatan. Animasi yang tidak disempurnakan adalah jelas jelas, sementara animasi yang dilakukan dengan baik menggabungkan dengan lancar ke dalam pengalaman pengguna. Animasi yang berkesan meningkatkan laman web, menambah keperibadian atau memberikan isyarat visual untuk mengurangkan beban kognitif. Walau bagaimanapun, kesalahpahaman umum mengakses akses terhadap animasi. Ini tidak perlu; Reka bentuk yang bijak membolehkan kedua -duanya.

Pertimbangkan soalan utama ini semasa merancang animasi:

Adakah animasi berfungsi dengan tujuan?

Walaupun animasi suka bermain sesuai untuk portfolio peribadi, mereka tidak sesuai untuk tapak berorientasikan tugas seperti perkhidmatan pemfailan cukai. Walau bagaimanapun, bar kemajuan memberikan maklum balas visual yang berharga.

Adakah animasi mengganggu?

Elakkan animasi yang terlalu sibuk yang mengurangkan maklumat penting. Teks animasi atau animasi gelung berhampiran kandungan boleh sangat mengganggu pengguna dengan ADD atau ADHD. Animasi yang baik meningkatkan tumpuan, ia tidak mengganggu.

Jadi, animasi anda melepasi ujian awal. Apa yang seterusnya?

Pilihan Opt-Out Pengguna

Animasi harus menjadi perhatian pengguna dengan sensitiviti gerakan. Gangguan vestibular boleh mencetuskan pening atau loya.

Pertanyaan media prefers-reduced-motion mengesan keutamaan pengguna untuk animasi yang minimum. Coretan kod ini melumpuhkan semua animasi dan peralihan CSS:

 <code>@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }</code>

Ini adalah pendekatan yang luas. Penyelesaian penyelesaian yang lebih halus mengurangkan kesan gerakan, mungkin menggunakan kelegapan mudah pudar dan bukannya peralihan yang kompleks.

Pertimbangan JavaScript

Pertanyaan media prefers-reduced-motion juga berfungsi dalam JavaScript:

 biarkan MotionQuery = MatchMedia ('(lebih suka-dikurangkan-gerakan)');

const handlereducemotion = () => {
  jika (gerakan.matches) {
    // Pilihan gerakan yang dikurangkan
  }
}

MotionQuery.AddListener (handlerEducemotion);
pengendali handlereducemotion ()

Walau bagaimanapun, bergantung semata -mata pada keutamaan sistem bukanlah masalah. Toggle UI menyediakan kawalan langsung pengguna.

Animasi tatal

Animasi yang dicetuskan tatal menawarkan kemungkinan kreatif tetapi boleh memberi kesan negatif terhadap pengalaman pengguna. Penyelidikan menunjukkan pengguna sering mengelirukan masa beban perlahan dengan animasi pintu masuk, yang membawa kepada kelewatan yang dirasakan.

Plugin Scrolltrigger Greensock menawarkan fastScrollEnd untuk menangani ini. Ia mengesan halaju tatal yang tinggi dan melangkau animasi, memastikan pengalaman responsif. Scrolltrigger's matchMedia() juga memudahkan membuat animasi tatal yang mesra-gerakan.

Mengutamakan tujuan, empati, dan amalan animasi yang bertanggungjawab untuk pengalaman pengguna yang inklusif dan menyeronokkan.

Atas ialah kandungan terperinci Animasi Empathetic. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!