在應用開發中,動畫可以為用戶界面增添生動、流暢的交互效果,提升用戶對應用的好感度。然而,濫用動畫也會導致應用性能下降,消耗過多的系統資源,甚至影響用戶體驗。關于感知流暢度請參閱提升動畫感知流暢度。
視覺感知優化
應用的卡頓會導致視覺不流暢,引起用戶不適。因此,用戶操作后應立即提供視覺反饋,以緩解不適感。
開發者可以在用戶交互動作開始時,添加動畫元素,如單擊效果、轉場縮放、加載進度條和共享動畫。這些動畫可以告知用戶當前狀態已發生變化,應用程序正在快速運作。動畫背后涉及數據計算、布局渲染和內容加載。當新界面渲染完成,動畫元素可通過漸變消失或移出屏幕等友好的方式退出視覺區域。
圖1 應用響應的兩個視角
轉場場景動效感知流暢
HarmonyOS系統為開發者提供了豐富的轉場動效庫,使開發者能夠輕松實現各種轉場動畫效果。開發者可以根據具體需求,在應用的不同場景中應用這些轉場動效,以提升用戶體驗和界面的吸引力。需要注意的是,為了最佳的用戶體驗,開發者應根據界面的功能和特點,合理選擇轉場動效,并遵循動效的使用準則,以確保轉場動效在視覺和交互上的一致性。關于轉場場景的方案選型請參閱轉場場景設計。
轉場動畫分為基礎轉場和高級模板化轉場,具體類型如下:
- 出現/消失轉場:對新增、消失的控件實現動畫效果,是通用的基礎轉場效果。
- 導航轉場:頁面的路由轉場方式,對應一個界面消失,另外一個界面出現的動畫效果,如設置應用一級菜單切換到二級界面。關于導航轉場案例請參閱導航轉場模板實現層級轉場。
- 模態轉場:新的界面覆蓋在舊的界面之上的動畫,舊的界面不消失,新的界面出現,如彈框就是典型的模態轉場動畫。關于導航轉場案例請參閱模態轉場模板實現通用轉場。
- 共享元素轉場 (一鏡到底):共享元素轉場是一種界面切換時對相同或者相似的元素做的一種位置和大小匹配的過渡動畫效果。
- 頁面轉場動畫(不推薦):頁面的路由轉場方式,可以通過在pageTransition函數中自定義頁面入場和頁面退場的轉場動效。為了實現更好的轉場效果,推薦使用導航轉場和模態轉場。
- 旋轉屏動畫增強:在原旋轉屏動畫基礎上,可配置漸隱和漸現的轉場效果。
合理動畫時長使應用感知流暢
頁面轉場動畫對提升用戶體驗至關重要。動畫時延過長會顯著影響用戶的點擊完成時延。動畫的完成時間直接影響用戶何時能開始與應用交互。動畫時延過長的主要原因是動畫時長設置過長。
常見的頁面轉場動畫時長參數有:
- Tabs組件設置TabContent切換動畫時長,即animationDuration屬性。
- Swiper組件設置子組件切換動畫時長,即duration屬性。
- 頁面間轉場(pageTransition)設置轉場動畫時長,即PageTransitionOptions對象中的duration字段。具體案例可以參考動畫時延場景案例。
使用連貫動畫使應用快速響應
通過連貫動畫,讓應用使用者在操作過程中感受到快速響應。
快速響應
通過連貫動畫,讓應用使用者在操作過程中感受到快速響應。
應用識別拖動手勢事件時需要設置合理的拖動距離,設置不合理的拖動距離會導致滑動不跟手、響應時延慢等問題。針對此類問題可以通過設置distance大小來解決。具體案例可以參考減小拖動識別距離。