前端讀者 | 前端用戶體驗-UI動效設計

本文來自互聯網 @羯瑞 整理

UI動效現現在在 APP 和網頁中幾乎已經成爲了基本的組成部分，通過仔細打磨的 UI動效對於整個界面的提高是顯著的。

動效呈現出狀態切換的過程，展示了元素之間的邏輯關係，而且吸引用戶的注意力，引導他們執行有效的交互。

在設計動效的過程當中，Material Motion 的設計原則，IBM 動畫設計規則和 UX動效宣言都是不錯的設計參考和指引。遵循這些現有的規範，可以很好地提高動效自己的體驗和效果，從優秀走向卓越。今天的動效設計都是遵循着這些規範使用 InVision Studio 來進行製做的。

標籤頁切換動效

• 左側標籤切換的時候使用了淡入淡出，右側標籤頁切換使用了滑動效果。
• 內容切換的時候淡入淡出效果不錯。
• 右側經過滑動效果來展現內容，不只呈現了變化的過程，還指明瞭二者的位置關係和邏輯關係，更爲卓越。
• 當你在設計諸如標籤頁或者彈出菜單這樣的控件的時候，儘可能藉助動效讓內容的位置變化關係呈現出來，這樣不只確保了內容的可見性，並且可以讓用戶不迷惑。這個時候，滑動手勢交互和位移動效是不錯的搭配，很是符合此處內容切換的語境。

卡片的展開動效

• 卡片是最多見的 UI 元素，左側的界面中，點擊卡片以後，展開新的界面；右側界面中，點擊卡片以後，卡片擴展並填充整個屏幕。
• 點擊卡片以後，詳情頁向上滑出或者從左側滑出的設計很不錯。
• 右側經過展開動效從卡片直接過渡到詳情頁是更卓越的設計。
• 最好的動效每每可以經過變化讓人明白兩種狀態之間的內在關聯。在製做不一樣狀態之間變化的動效的時候，注意兩個界面中共享的元素，而且將它做爲橋樑，將兩個界面狀態鏈接到一塊兒。在使用 InVision Studio 建立原型的時候，這種同時存在先後兩屏中的控件會自動鏈接起來，構成動效。這一功能使得動效的構建更加便捷。

在列表中使用瀑布式展開動效

• 左邊的列表使用了較爲迅速的淡入淡出動效，而右邊的列表當中，淡入淡出以延時的方式呈現，效果相似瀑布的展開方式。
• 淡入淡出的動效讓元素遞次出現加上輕微的位移，比較天然，看起來不錯。
• 右側列表元素經過延時次第出現，位移更加明顯，形同瀑布，在視覺和體驗上更爲卓越。
• 瀑布式的展開動效只須要經過明顯的延時就可以實現，適當地控制節奏，讓整個加載速度適當的減緩而不會太慢，讓用戶可以感知到這個過程便可。谷歌建議每一個元素的延時不超過20毫秒。你能夠在 Material Motion 中看到設計的原理和更多的實例。

展開時的擴展動效

• 左側的動效是內容在頂層覆蓋列表，而右側的動效是從中間擴展將上下內容頂開。
• 經過移動、覆蓋、展開的方式來呈現詳情頁的動效，視覺上看起來不錯。
• 右側是點擊以後展開頂掉周圍的元素，和周圍的其餘的元素有所互動，這樣的動效更加優秀。
• 界面中全部的元素都應該是有「重量」的，某個 UI 控件隨着動效變化的時候，和周圍的元素髮生互動，則可以強化這種實體感。

菜單的展開動效

• 左側的動效中，菜單從底部淡入界面，而右側的動效中，菜單是從被點擊的按鈕中擴展開的。
• 右側菜單從按鈕的位置淡入進入界面的方式展示了二者的關聯，這樣的設計還不錯。
• 經過擴展動效的方式來呈現菜單的展開，讓按鈕和菜單之間的關係獲得了進一步的增強，這樣的設計更加優秀。

使用按鈕展示不一樣狀態

• 左側的按鈕經過文本說明和色彩變化來指示狀態改變，而右側按鈕則經過加載控件來展現不一樣的事件的發生。
• 好的按鈕會指示狀態的改變，哪怕是經過文原本呈現。
• 右側經過按鈕自己，視覺化地呈現加載的狀態變化，比起文本說明更加天然，也更加易於理解，這樣的設計更加優秀。
• 嘗試使用加載指示器來指示狀態的變化和進度，相似的方式有不少，重點是在於視覺化的、天然的呈現狀態的變化過程，若是搭配上色彩的變化，那麼就更好了。

吸引用戶注意的動效

• 左側僅僅是經過色彩、符號和位置來吸引注意力，而右側加入了微妙的動效來吸引用戶注意。
• 使用色彩、標識和位置來吸引用戶注意力是頗爲有效的手段。
• 右側藉助微妙天然的動效，不只可以吸引用戶注意力，並且不會形成干擾，這樣的設計更優秀。
• 對於一些重要的組件、事件或者信息，使用相似呼吸式的動效來強化效果是天然且干擾性較低的，這樣的動效設計讓元素的重要性獲得凸顯，還不會讓用戶感到反感。

在設計動效的時候，注意狀態變化的指示，元素之間關係的強化，適當地增長一些樂趣。遵循這樣的原則，總能讓動效更上一層樓。