善解人意的動畫

Web動畫通常是辯論的來源。執行不佳的動畫非常明顯，而做得好的動畫無縫地融入了用戶體驗中。有效的動畫增強了網站，增加了個性或提供視覺提示以減少認知負擔。但是，一個常見的誤解將動畫訪問的可訪問性。這是不必要的；周到的設計允許兩者兼而有之。

設計動畫時考慮以下這些關鍵問題：

動畫有目的嗎？

雖然有趣的動畫適合個人投資組合，但它們不適合以任務為導向的網站，例如稅務申請服務。但是，進度條提供了寶貴的視覺反饋。

動畫會分散注意力嗎？

避免過度繁忙的動畫，這些動畫會損害基本信息。內容附近的動畫文本或循環動畫對於使用ADD或ADHD的用戶尤其分散注意力。好的動畫增強了焦點，不會破壞它。

因此，您的動畫通過初始測試。接下來是什麼？

用戶選擇退出選項

動畫應體貼運動敏感性的用戶。前庭疾病會引發頭暈或噁心。

prefers-reduced-motion媒體查詢可檢測用戶的偏好以最小動畫。此代碼片段禁用所有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>

這是一種廣泛的方法。更精緻的解決方案裁縫降低了運動效果，也許使用簡單的不透明度淡出而不是複雜的過渡。

JavaScript考慮

prefers-reduced-motion媒體查詢也適用於JavaScript：

讓MotionQuery = MatchMedia（'（（偏愛還原））'）;

const handlereducemotion =（）=> {
  if（MotionQuery.Matches）{
    //減少運動選項
  }
}

MotionQuery.Addlistener（HandlerEduceMotion）;
handlereducemotion（）

但是，僅依靠系統偏好並不是萬無一失。 UI切換可提供用戶直接控制。

滾動動畫

捲軸觸發的動畫提供了創造性的可能性，但會對用戶體驗產生負面影響。研究表明，用戶通常將緩慢的加載時間與入口動畫相混淆，從而導致延遲。

Greensock的Scrolltrigger插件提供fastScrollEnd來解決此問題。它檢測到高滾動速度並跳過動畫，以確保響應迅速的體驗。 Scrolltrigger的matchMedia()還簡化了創建減少運動友好的滾動動畫。

優先考慮目的，同理心和負責任的動畫實踐，以獲得包容性和愉快的用戶體驗。

以上是善解人意的動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！