編者按：明確系統狀態、讓按鈕和操控可觸知、打造有意義的轉場、強調界面的變化、增加愉悅的細節......?今天騰訊設計師@月焱瞳?這篇譯文，總結了6個做出細膩動態微交互的技巧，建議閱讀。

UI界面動效設計方法：

1. 先看看有意義的動效設計是啥樣：《設計師的必備技能！你需要學會設計有意義的動效》
2. 再來學習騰訊設計師寫的動效設計指南：《騰訊精品文！超多干貨的UI界面動效設計指南》
3. 圍觀實戰案例：《高手常用的六種圖標動效設計思路（附大量實例）》
4. 做完了如何給工程師：《超實用！如何準確的向工程師傳達動效設計？》
5. 軟件福利：《WINDOW黨福利！這才是適合設計師的免費動效神器PIXATE》

著名的魔術師 Dariel Fitzkee 曾說，「魔法既身藏于細節，又體現于表演。」交互設計也是如此。設計師熱衷于得當的整體結果，但假如沒有妥善處理細節，解決方案將付之東流。所有的魔法藏于細節之中。那就是為什么精心設計的微交互使體驗顯得精雕細琢。

明確系統狀態

Jakob Nielsen 提出了關于界面設計狀態的啟發，「系統應當在合理的時間里，通過合適的反饋來保持告知用戶將要發生的事情。」這意味著，用戶界面必須持續給出反饋，帶用戶跟上節奏。App 不該引起用戶不斷的猜測，而應該告訴用戶當前發生的事情。微交互通過合適的視覺反饋來幫助你實現這一切。

數據的上傳與下載場景，是一個應用動態微交互的絕佳機會。

同類的動畫，還有廣為人知的「下拉刷新，」 這類動畫引發了移動設備上的內容設計創新。愉悅的刷新動畫總會博得用戶會心一笑。

要點：對于 App 的過程狀態，動畫提供實時的告知，使得用戶可以快速地理解發生的一切。

讓按鈕和操控可觸知

用戶界面元素和操控元件應該是可觸知的，即使它們身處屏幕下方。視覺和動態指引能夠橋接這個間隙，通過及時響應輸入以及主觀操縱感十足的動畫。界面按鈕的交互可以模仿自常見的現實物體。簡單來說，你可以對用戶的輸入行為給予視覺反饋，以此提升界面感知的清晰度。

要點：視覺反饋因得體地滿足了用戶對接收信息的自然欲望而產生作用。用戶穿梭于 App 之中，時刻感覺掌控一切，這非常棒。

打造有意義的轉場

你可以借助動畫讓用戶在導航和內容之間順滑地穿梭、來解釋屏幕中布置的元素的變化、或以此強化界面元素的層級。

圖標可以在不同的時間里，演變不同的形狀，服務于雙重功能。

動態設計以信息告知和取悅用戶的手段，有效地吸引用戶的注意。在移動設備和智能手表上顯得尤其出色，畢竟方寸之間容不下大量信息的堆砌。

Apple 的 iOS 用戶界面是個優秀的實例，如下圖所示，用戶選中一個文件夾或者 App，視角會接著拉近到詳情視圖、或直達 App 主界面。

另一個優秀的實例：通過顏色變化或元素的流動，串起兩個狀態之間的視覺關聯。這樣的動畫讓切換顯得輕松順滑。

要點：微交互建立頁面間的視覺聯系，也明確了用戶界面。

轉場動效設計好文：《高手之路！設計漂亮有趣的轉場動效》

幫助用戶開始

微交互在信息載入過程發揮了重大作用。出色的載入體驗與動畫，對用戶在初次沉浸于 App 時產生了極大的沖擊。它們在喚起 App 時突出最重要的特性和操控，給予用戶引導和教育。

要點：微交互呈現信息并幫助用戶高效地抵達目標。

強調界面的變化

微交互可以引導用戶的注意力。在許多情況下，動畫用于吸引用戶對重要細節的關注（例如查閱「通知」）。然而，必須確保該動畫服務于功能，并且在用戶角度，是個得體的存在。

要點：微交互對用戶而言，可以是良好的視覺指引。

增加愉悅的細節

微交互動畫最基礎的應用是轉場。然而，App 動畫在突破標準動作范圍的限制下，真切地取悅于用戶。下面的按鈕無縫地切換狀態，同時滿足雙重功用：告知用戶、使其怦然心動。

要點：關注用戶的情緒，它們在界面交互中發揮了巨大的作用

設計微交互時需要考慮的

當你的視覺設計包括以上討論的元素時，關注以下幾點：

• 讓你的微交互幾乎不可見，并且完全是功能性的

確保動畫適用于服務功能目的，不要讓用戶感到尷尬或打擾。對于常用的以及次要的操作，建議響應是適度的。而對于低頻的、主要的操作，響應則應該更有份量。

• 長駐于心

微交互應該經得起長期使用的考驗，初見傾心也可能日漸厭煩。

• 遵循?KISS 原則

過度設計的微交互可以是致命的。微交互不應該使得屏幕信息過載，造成漫長的載入。相反地，它應該通過迅速地傳達有價值的信息來節省時間。

• 不從零開始

你總會了解目標受眾以及他們的背景。使用這些信息來讓你的微交互更加精確并且有效。

• 與其它界面元素建立視覺協調

微交互的風格應該與 App 的整體匹配，營造和諧的產品感知。

總結

微交互表明，關注小細節可以導向強有力的結果。正如 Charles Eames 曾說道，「細節并非散布于細枝末節，它們串成了設計。」所有的設計元素都是至關重要的。細節讓你的 App 在競爭中脫穎而出，它們可能是實用的、不起眼的襯托，抑或使人印象深刻、能夠給到幫助，甚至，引人流連忘返。

堅持別具匠心的設計，謹記偉大的設計是完整的存在，上至宏觀功能，下至細節微交互。

「本月最值得閱讀收藏的完美像素使用手冊」

1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
2. 《中文版來了！值得每個設計師收藏的《完美像素使用手冊》之細節篇》
3. 《第三集！值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
4. 《第四集！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》
5. 《最終版！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

原文地址：smashingmagazine

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

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