超實(shí)用！6個(gè)方法幫你做出優(yōu)秀的UI動(dòng)態(tài)微交互

編者按：明確系統(tǒng)狀態(tài)、讓按鈕和操控可觸知、打造有意義的轉(zhuǎn)場(chǎng)、強(qiáng)調(diào)界面的變化、增加愉悅的細(xì)節(jié)......?今天騰訊設(shè)計(jì)師@月焱瞳?這篇譯文，總結(jié)了6個(gè)做出細(xì)膩動(dòng)態(tài)微交互的技巧，建議閱讀。

UI界面動(dòng)效設(shè)計(jì)方法：

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

著名的魔術(shù)師 Dariel Fitzkee 曾說(shuō)，「魔法既身藏于細(xì)節(jié)，又體現(xiàn)于表演。」交互設(shè)計(jì)也是如此。設(shè)計(jì)師熱衷于得當(dāng)?shù)恼w結(jié)果，但假如沒(méi)有妥善處理細(xì)節(jié)，解決方案將付之東流。所有的魔法藏于細(xì)節(jié)之中。那就是為什么精心設(shè)計(jì)的微交互使體驗(yàn)顯得精雕細(xì)琢。

明確系統(tǒng)狀態(tài)

Jakob Nielsen 提出了關(guān)于界面設(shè)計(jì)狀態(tài)的啟發(fā)，「系統(tǒng)應(yīng)當(dāng)在合理的時(shí)間里，通過(guò)合適的反饋來(lái)保持告知用戶將要發(fā)生的事情。」這意味著，用戶界面必須持續(xù)給出反饋，帶用戶跟上節(jié)奏。App 不該引起用戶不斷的猜測(cè)，而應(yīng)該告訴用戶當(dāng)前發(fā)生的事情。微交互通過(guò)合適的視覺(jué)反饋來(lái)幫助你實(shí)現(xiàn)這一切。

數(shù)據(jù)的上傳與下載場(chǎng)景，是一個(gè)應(yīng)用動(dòng)態(tài)微交互的絕佳機(jī)會(huì)。

同類的動(dòng)畫(huà)，還有廣為人知的「下拉刷新，」 這類動(dòng)畫(huà)引發(fā)了移動(dòng)設(shè)備上的內(nèi)容設(shè)計(jì)創(chuàng)新。愉悅的刷新動(dòng)畫(huà)總會(huì)博得用戶會(huì)心一笑。

要點(diǎn)：對(duì)于 App 的過(guò)程狀態(tài)，動(dòng)畫(huà)提供實(shí)時(shí)的告知，使得用戶可以快速地理解發(fā)生的一切。

讓按鈕和操控可觸知

用戶界面元素和操控元件應(yīng)該是可觸知的，即使它們身處屏幕下方。視覺(jué)和動(dòng)態(tài)指引能夠橋接這個(gè)間隙，通過(guò)及時(shí)響應(yīng)輸入以及主觀操縱感十足的動(dòng)畫(huà)。界面按鈕的交互可以模仿自常見(jiàn)的現(xiàn)實(shí)物體。簡(jiǎn)單來(lái)說(shuō)，你可以對(duì)用戶的輸入行為給予視覺(jué)反饋，以此提升界面感知的清晰度。

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

打造有意義的轉(zhuǎn)場(chǎng)

你可以借助動(dòng)畫(huà)讓用戶在導(dǎo)航和內(nèi)容之間順滑地穿梭、來(lái)解釋屏幕中布置的元素的變化、或以此強(qiáng)化界面元素的層級(jí)。

圖標(biāo)可以在不同的時(shí)間里，演變不同的形狀，服務(wù)于雙重功能。

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

Apple 的 iOS 用戶界面是個(gè)優(yōu)秀的實(shí)例，如下圖所示，用戶選中一個(gè)文件夾或者 App，視角會(huì)接著拉近到詳情視圖、或直達(dá) App 主界面。

另一個(gè)優(yōu)秀的實(shí)例：通過(guò)顏色變化或元素的流動(dòng)，串起兩個(gè)狀態(tài)之間的視覺(jué)關(guān)聯(lián)。這樣的動(dòng)畫(huà)讓切換顯得輕松順滑。

要點(diǎn)：微交互建立頁(yè)面間的視覺(jué)聯(lián)系，也明確了用戶界面。

轉(zhuǎn)場(chǎng)動(dòng)效設(shè)計(jì)好文：《高手之路！設(shè)計(jì)漂亮有趣的轉(zhuǎn)場(chǎng)動(dòng)效》

幫助用戶開(kāi)始

微交互在信息載入過(guò)程發(fā)揮了重大作用。出色的載入體驗(yàn)與動(dòng)畫(huà)，對(duì)用戶在初次沉浸于 App 時(shí)產(chǎn)生了極大的沖擊。它們?cè)趩酒?App 時(shí)突出最重要的特性和操控，給予用戶引導(dǎo)和教育。

要點(diǎn)：微交互呈現(xiàn)信息并幫助用戶高效地抵達(dá)目標(biāo)。

強(qiáng)調(diào)界面的變化

微交互可以引導(dǎo)用戶的注意力。在許多情況下，動(dòng)畫(huà)用于吸引用戶對(duì)重要細(xì)節(jié)的關(guān)注（例如查閱「通知」）。然而，必須確保該動(dòng)畫(huà)服務(wù)于功能，并且在用戶角度，是個(gè)得體的存在。

要點(diǎn)：微交互對(duì)用戶而言，可以是良好的視覺(jué)指引。

增加愉悅的細(xì)節(jié)

微交互動(dòng)畫(huà)最基礎(chǔ)的應(yīng)用是轉(zhuǎn)場(chǎng)。然而，App 動(dòng)畫(huà)在突破標(biāo)準(zhǔn)動(dòng)作范圍的限制下，真切地取悅于用戶。下面的按鈕無(wú)縫地切換狀態(tài)，同時(shí)滿足雙重功用：告知用戶、使其怦然心動(dòng)。

要點(diǎn)：關(guān)注用戶的情緒，它們?cè)诮缑娼换ブ邪l(fā)揮了巨大的作用

設(shè)計(jì)微交互時(shí)需要考慮的

當(dāng)你的視覺(jué)設(shè)計(jì)包括以上討論的元素時(shí)，關(guān)注以下幾點(diǎn)：

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

確保動(dòng)畫(huà)適用于服務(wù)功能目的，不要讓用戶感到尷尬或打擾。對(duì)于常用的以及次要的操作，建議響應(yīng)是適度的。而對(duì)于低頻的、主要的操作，響應(yīng)則應(yīng)該更有份量。

• 長(zhǎng)駐于心

微交互應(yīng)該經(jīng)得起長(zhǎng)期使用的考驗(yàn)，初見(jiàn)傾心也可能日漸厭煩。

• 遵循?KISS 原則

過(guò)度設(shè)計(jì)的微交互可以是致命的。微交互不應(yīng)該使得屏幕信息過(guò)載，造成漫長(zhǎng)的載入。相反地，它應(yīng)該通過(guò)迅速地傳達(dá)有價(jià)值的信息來(lái)節(jié)省時(shí)間。

• 不從零開(kāi)始

你總會(huì)了解目標(biāo)受眾以及他們的背景。使用這些信息來(lái)讓你的微交互更加精確并且有效。

• 與其它界面元素建立視覺(jué)協(xié)調(diào)

微交互的風(fēng)格應(yīng)該與 App 的整體匹配，營(yíng)造和諧的產(chǎn)品感知。

總結(jié)

微交互表明，關(guān)注小細(xì)節(jié)可以導(dǎo)向強(qiáng)有力的結(jié)果。正如 Charles Eames 曾說(shuō)道，「細(xì)節(jié)并非散布于細(xì)枝末節(jié)，它們串成了設(shè)計(jì)?！顾械脑O(shè)計(jì)元素都是至關(guān)重要的。細(xì)節(jié)讓你的 App 在競(jìng)爭(zhēng)中脫穎而出，它們可能是實(shí)用的、不起眼的襯托，抑或使人印象深刻、能夠給到幫助，甚至，引人流連忘返。

堅(jiān)持別具匠心的設(shè)計(jì)，謹(jǐn)記偉大的設(shè)計(jì)是完整的存在，上至宏觀功能，下至細(xì)節(jié)微交互。

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

1. 《值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之原理篇》
2. 《中文版來(lái)了！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之細(xì)節(jié)篇》
3. 《第三集！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之易用性篇》
4. 《第四集！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之軟件技巧篇》
5. 《最終版！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之軟件技巧篇》

原文地址：smashingmagazine

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com