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

個(gè)性

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

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

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

導向

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

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

背景

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

共鳴

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

情感

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

克制

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

摘自 ：http://www.uisdc.com/motion-ui-design-principles

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