@陳子木 按照設(shè)計(jì)趨勢，我們是時(shí)候了解一下UI動態(tài)設(shè)計(jì)了！UI動效設(shè)計(jì)算是新興的設(shè)計(jì)領(lǐng)域分支，如同其他的設(shè)計(jì)一樣，它也是有規(guī)律可循的。關(guān)于UI動效設(shè)計(jì)，相關(guān)資料不算太多，希望這篇文章能夠?yàn)榇蠹規(guī)砀鄦l(fā)。除了看各種案例之外，自己實(shí)操才是最重要的。動手之前，不妨先了解一下UI動效設(shè)計(jì)的基本規(guī)則吧！

如果你是一名英文基礎(chǔ)還不錯(cuò)的設(shè)計(jì)師，不妨看看以下兩個(gè)網(wǎng)站：

the Website of Pasquale D’Silva
the Website of Johannes Tonollo

另外，特別鳴謝Capptivete.co的站長，允許我引用他們的內(nèi)容做參考資料！

相關(guān)文章：
《還等什么！是時(shí)候來了解動態(tài)設(shè)計(jì)啦》
《讓頁面更上檔次！網(wǎng)頁設(shè)計(jì)細(xì)節(jié)大總結(jié)》
《向優(yōu)美交互致敬！移動端APP動畫設(shè)計(jì)總結(jié)》

這篇文章中，我主要闡述了UI動效設(shè)計(jì)中需要注意的問題以及原因，而不是教授制作UI動效額技巧。隨著大家對于這一領(lǐng)域的關(guān)注（很大程度上是源自iOS的UI設(shè)計(jì)），我們發(fā)現(xiàn)UI動效設(shè)計(jì)同其他的UI設(shè)計(jì)分支一樣，同樣具備完整性和明確的目的性。伴隨擬物化設(shè)計(jì)風(fēng)潮（Skeuomorphism，也就是蘋果所提出的擬物化設(shè)計(jì)風(fēng)格，強(qiáng)調(diào)的是模擬現(xiàn)實(shí)生活中物品的紋理，是廣泛意義上擬物化的子集。值得注意的是，“蘋果式扁平化設(shè)計(jì)”并非廣泛意義上的設(shè)計(jì)范式，而是帶有限定的特定風(fēng)格，僅為廣泛意義上扁平化設(shè)計(jì)的一個(gè)分支）的告一段落，UI設(shè)計(jì)更加自由隨心，仿如打破空間和物理規(guī)則一樣的交互設(shè)計(jì)不再尷尬荒謬，反而令界面更加靈動奇幻。現(xiàn)如今，UI動效設(shè)計(jì)已具備豐富的特性，炫酷靈活的特效已是UI動效設(shè)計(jì)中不可分割的一部分了。

個(gè)性

這是UI動效設(shè)計(jì)中最基本的原則，甚至可以說是動效設(shè)計(jì)的最高原則。UI動效設(shè)計(jì)就是要擺脫APP“開袋即食”的粗獷設(shè)定，設(shè)計(jì)獨(dú)特的動效，創(chuàng)造引人入勝的效果。在確保UI風(fēng)格的一致性的前提下，表達(dá)出APP的鮮明個(gè)性，這就是UI動效設(shè)計(jì)“個(gè)性化”要做的事情。同時(shí)，還應(yīng)令動效的細(xì)節(jié)符合那些約定俗成的交互規(guī)則，這樣動效就具備了“可預(yù)期性”，用戶不會有“出戲”的感覺，如此一來，UI動效設(shè)計(jì)便有助于強(qiáng)化用戶的交互經(jīng)驗(yàn)，保持APP黏度。

Paper Makes 使用了擺動特效（scale overshoot）表現(xiàn)APP的鮮明個(gè)性。

Dots 將這種輕松愉悅的慣性動效貫穿在UI設(shè)計(jì)的每個(gè)角落，讓它從同類APP中脫穎而出。（慣性也屬于廣泛意義上擬物化的一種，別被風(fēng)格束縛了思想）

導(dǎo)向

動效應(yīng)當(dāng)通過使用體驗(yàn)安撫用戶，令他們輕松愉悅。設(shè)計(jì)師需要將屏幕視作一個(gè)物理空間，將UI元素看作物理實(shí)體，它們能在這個(gè)物理空間中打開、關(guān)閉，任意移動、完全展開或者聚焦為一點(diǎn)。動效應(yīng)當(dāng)隨動作移動而自然變化，為用戶做出應(yīng)有的引導(dǎo)，不論是在動作發(fā)生前、過程中還是動作完成以后。UI動效就應(yīng)該如同導(dǎo)游一樣，為用戶指引方向，防止用戶感到無聊，減少額外的圖形化說明。

第一個(gè)界面來自Yelp，它的動效使用背景變暗和UI元素慣性彈出創(chuàng)建了視覺焦點(diǎn)，第二個(gè)案例是Making，它的動效則通過一個(gè)優(yōu)雅的向下展開引導(dǎo)用戶打開目錄，第三個(gè)APP是National Geographic，它使用了一個(gè)炫酷的3D視角過度令用戶始終明確他們在什么地方。

背景

動效應(yīng)當(dāng)為內(nèi)容賦予背景，通過背景來表現(xiàn)內(nèi)容的物理狀態(tài)和所處環(huán)境。再擺脫模擬物品細(xì)節(jié)和紋理的設(shè)計(jì)束縛之后，UI設(shè)計(jì)甚至可以自由地表現(xiàn)與環(huán)境設(shè)定矛盾的動態(tài)效果。為對象添加拉伸或者形變的效果，或者為列表添加俏皮的慣性滾動都不失為增加整體體驗(yàn)的有效手段。

共鳴

動效應(yīng)該具有直覺性和共鳴性。UI動效的目的是與用戶互動，并產(chǎn)生共鳴，而非令他們困惑甚至感到意外。UI動效和用戶操作之間的關(guān)系應(yīng)該是互補(bǔ)的，兩者共同促成交互完成。

情感

好的UI動效是能夠喚起積極的情緒反應(yīng)的，平滑流暢的滾動能帶來舒適感，而有效的動作執(zhí)行往往能帶來令人興奮的愉悅和快感。

克制

濫用特效會讓用戶分心，把握好這個(gè)微妙的平衡。動效是用來保持用戶的關(guān)注點(diǎn)、引導(dǎo)用戶操作的，不要為了動效而動效。過度表現(xiàn)和過多的轉(zhuǎn)場動畫會令用戶煩躁，甚至沮喪。還好，目前沒有太多的反面案例。但是記住這一點(diǎn)，沒有錯(cuò)。

原文地址：beyondkinetic
優(yōu)設(shè)網(wǎng)翻譯：@陳子木
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

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

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量68萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：