良好用戶體驗的動效設計六準則
功能動畫是一種很微妙的動畫，它有一個明確的，合乎邏輯的目的。它減少了認知負荷，避免變化的盲目性，並在空間關係中建立了更好的響應。更重要的一點，動畫將用戶界面與現實生活聯繫起來。
運動可以通過合併和分離、改變形狀和大小，使物體的表面充滿活力。你可以運用功能動畫來使用戶在導航性的上下文間平滑地過渡，解釋屏幕上元素布局的變化，以及加強元素的層次結構。
成功的動效設計具備以下6條特徵。
1. 響應式的
視覺反饋在UI設計中非常重要。它之所以有效是因為它迎合了用戶對確認的自然渴望。在現實生活中，按鈕、控制項，以及對象對我們的交互產生響應，這就是人們希望事物達到的效果。
圖片來源：聰明的設計
用戶界面應該快速地響應用戶的輸入，精確到用戶觸發的地方，以及顯示新界面和創建它們的元素或操作之間的關聯。讓用戶感覺點擊這款app真是棒極了，就像知道即將發生什麼。
對象對用戶的意圖作出適當的響應。圖片來源：Material Design
2. 關聯性的
將新創建的界面與創建它們的元素或操作關聯起來。關聯背後的邏輯是幫助用戶理解視圖布局中剛剛發生的更改，以及引發更改的原因。
以下你會看到兩個菜單變化的例子。在第一個例子中，菜單從距離觸摸點很遠的地方出現，打斷了它與觸摸點之間的聯繫。
不正確示範。圖片來源：Material Design
在第二個例子中，菜單從觸摸點出現。這將元素與觸摸點聯繫起來。
正確示範。圖片來源：Material Design
另外一個例子是操作按鈕在一定條件下功能發生改變。「播放」和「暫停」按鈕可能是最常見的可切換按鈕的例子。將播放按鈕轉換為暫停按鈕意味著兩個操作是有關聯的，點擊一個按鈕可以使另一個按鈕可見。你應該用動畫讓狀態之間的轉化看起來是平滑的，而不是間斷的。
平滑過渡到播放控制項既可以告知用戶按鈕的功能，同時又為交互增加了驚喜。圖片來源：Material Design
3. 自然的
避免出乎意料的轉變。每一個運動都應該是現實世界的力所驅動的。在現實世界中，物體加速或減速受到重力和表面摩擦力的影響。類似地，在友好的用戶界面設計中，啟動和停止都不會立刻發生。
以下你會看到一個很好的例子，用戶從列表中選擇一項放大它的詳情視圖。在變化過程中，小卡片在擴展成一張大卡片時，小卡片往其目的方向移動。
正確示範。在屏幕上向上移動的元素也應該通過向上運動來表現加速的過程。圖片來源：Material Design
4. 有目的的
在正確的時間將注意力集中到正確的點上。運動，其本質上，在用戶界面中具有最高的優先順序，無論是文本段落還是靜態圖像都沒有辦法與其比擬。一個好的動畫可以幫助引導用戶進入交互的下一步。
用戶不能第一時間真正預測到將要發生的交互，但是適當的動畫能夠引導用戶，使用戶對內容的改變不會感到突兀。
Mac OS在最小化窗口時使用功能動畫。這個動畫將第一個狀態與第二個狀態連接起來。
Mac OS最小化窗口動畫
另一個很好的例子是父-子窗口轉換，用戶在列表項或卡元素中選擇一個項目，然後放大到它的詳細視圖。這種交互為用戶保留了上下文。
父-子窗口轉換動畫。圖片來源：Material Design
5. 快速的
當元素在位置或狀態之間移動時，移動速度應該足夠快，以免用戶等待。但也不能太快，要讓用戶理解轉換。
動畫不能太慢，因為這會產生不必要的延遲。
不正確示範。圖片來源：Material Design
搖晃和減緩元素的運動會延長時間。
不正確示範。圖片來源：Material Design
快速的完成動畫使用戶不必要長時間地等待動畫結束。
正確示範。圖片來源：Material Design
保持動畫簡短，因為用戶將經常看到它們。保持動畫持續時間在300毫秒以下。
正確示範。圖片來源：Material Design
6. 清晰的
動畫一次性不要太多，因為當多個元素向不同的方向或交叉路徑移動時，用戶會感到困惑。
不正確示範。圖片來源：Material Design
動畫應該清晰、簡潔和連貫。記住，對動畫而言，少即是多。所以，我們應該只關注動畫對用戶的實際幫助。
正確示範。圖片來源：Material Design
總結
最重要的是，動畫不是隨機的。每一個操作背後都有目的。運動引導並專註於最重要的東西，這樣你才不會迷失。無論你的app是有趣的，嚴肅的還是直白的，運用動畫可以幫助你為用戶提供一種清晰、快速和有用戶粘性的體驗。
人性化設計。關注每一個細節是你成功使人機交互易於使用的關鍵。
分享最新鮮的設計文章！提供最優質的設計服務！
合作微信：2762076706
文章來源微信公眾號：木梓設計
推薦閱讀：