一個功能完備的動效不僅要足夠微妙有趣，而且應當清晰且具有合乎邏輯的目的。動效的存在不僅降低了用戶的認知負荷，溝通不同的環節，建立更為有效的信息和交互流程。但是更為重要的是，真正優秀的動效能讓界面變得栩栩如生。

通過讓元素在形態上進行疊加、分割、延伸、形變，動效讓界面給人以更為真實、更加“物理”的質感。流暢順滑的動效幫用戶聯通起上下文，闡釋界面元素之間的關系，強化UI的層次感，消解環節與環節之間的沖突，緩解加載和過渡中的等待。

接下來，我們分析和總結一下成功的動效的六個基本特征：

1、響應

視覺反饋在界面中的作用無疑是重要的。對于用戶而言，想要確認信息的欲望是一種生物本能，在現實生活中，按鈕、控制面板等對象會對我們的操作給予反饋，那么用戶面對界面中類似的東西的時候，會有相似的期望。

所以，UI應當精準而快速的針對用戶的交互作出響應，只有這樣用戶才能將他們的操作、交互和控件的變化、效果聯系到一起，形成回路。當他們清楚的知道什么樣的操作會帶來什么樣的反饋，他們會覺得非常爽的。

2、關聯

動效要能將新創建的界面和觸發它們的操作或者控件關聯到一起。產生關聯的邏輯關系能幫用戶理解界面中的變化是如何產生的。

下面我們看看兩個菜單動效的設計案例。

第一個案例中，點擊菜單按鈕之后，菜單從遠離按鈕的地方伸展出來，這樣用戶的輸入和觸發的結果在物理距離上被割裂開了。

第二個案例中，菜單是從按鈕旁邊開始伸展開來的，距離上的關系讓用用戶清晰的知道是他們的點擊觸發了菜單出現的結果。

另外一個案例則是音樂播放器的按鈕動效設計。“播放”和“暫停”可能是最常見的按鈕設計，而這個典型的Material Design 風格的按鈕動效設計中，點擊“播放”按鈕，動效過渡，“暫停”按鈕出現，色彩和動效讓兩者之間呈現出因果關聯，流暢而非間斷。

平滑的過渡不僅讓兩者的功能呈現了出來，而且強化了兩者的邏輯關系。

3、自然

好的動效設計應當盡量避免突兀的轉變。動效中的每一個動作都應當從現實世界中獲取靈感。最簡單的一點，現實世界中物體的加速和減速都會受到重量、慣性和摩擦力的影響，類似的，在動效設計中，瞬間的啟動和停止是不合規律的。

下面的案例就很好的展示了動效中“自然”的特性。當用戶點擊小卡片的之后，卡片展開呈現出詳細信息，而其中小圓點的伸展軌跡就是符合自然規律的弧線。

4、意圖

在合適的時機將用戶的注意力引導到對的關注點上去。在界面中，動效作為動態元素先天具有更加突出的屬性。靜態的文本和圖片大都是一成不變的元素，它們無法同動效抗衡。一個優秀的動效能夠引導用戶交互自然的進入下一個步驟。

用戶第一次同某個界面進行交互的時候，他們本身是無法準確預知交互的結果的，但是動效的引導能夠讓用戶明白變化的趨勢，并且不會覺得變化是突然的。

MacOSX 的用戶點擊最小化按鈕之后，界面會收縮卷曲收納到底部的Dock中，這個動效的變化過程連接了顯示和隱藏兩個狀態，而這個特效則讓用戶了解兩者的因果關系。

下面的案例也是同樣的道理，用戶點擊表單中的項目，控件伸展，顯示詳細信息，動效構成了兩個界面之間的關系橋梁。

5、快速

當界面或者控件借助動效轉變位置和狀態的時候，動效的速度應當適中，它不能太慢，得讓用戶不會為了動效加載而等待，同樣也不能太快，得讓用戶明白和理解這個轉變的過程與關系。

盡量不要讓動效太慢，不要在逐步加載中拖延時間。

不同的元素逐個加載，每個動效都顫顫巍巍的，這樣總是不可避免的讓整個動效顯得拖沓而尷尬。

再快一點其實用戶也可以感受到細節，快速的動效能給用戶一種爽利高效的感覺。

盡量在300ms內搞定動效，在用戶能注意到細節的前提下完成過渡過程。

6、清晰

當一個動效中容納太多過程的時候，難免會讓人看不清、感到迷惑，不同的元素沿著不同的軌跡向著不同方向運動，人的眼睛很難Get到全部的過程，自然而然會感到混亂。

所以，動效設計應當清晰直觀，明確而一致。這個時候，我們常說的“少即是多”就是保持動效清晰明了的核心規則，炫技式的動效還是少做的好。

結語

設計從來都不是天馬行空、隨機做的，每一個動作背后都有其目的所在。專注于最重要的事情，才不會讓設計迷失，不會讓用戶迷路。無論你的APP是有趣好玩的，還是嚴肅直接的，這些動效原則都能讓你的產品更加優秀。小心設計，關注每一個細節，才是成功的人機交互的秘訣。

【技多不壓身的設計師才有高薪資！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：uxplanet
原文作者：Nick Babich
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com