高度總結(jié)動(dòng)效設(shè)計(jì)的基本原則，有大量的案例分析浴骂。動(dòng)效設(shè)計(jì)在用戶體驗(yàn)的提升中到底有沒有用呢乓土？ 我們?cè)谙旅嬗懻摰氖菫槭裁匆獞?yīng)用動(dòng)效，以及在那些時(shí)候動(dòng)效溯警，動(dòng)效的特性等等趣苏。

作為一枚不會(huì)敲代碼的設(shè)計(jì)師，我們不太可能讓自己的設(shè)計(jì)真正“活”起來梯轻。如果沒有動(dòng)效設(shè)計(jì)食磕，那總是需要很長(zhǎng)時(shí)間去給程序員解釋點(diǎn)擊這個(gè)按鈕后會(huì)發(fā)生什么。所以設(shè)計(jì)師們需要通過動(dòng)畫版本高保真原型（包括動(dòng)效設(shè)計(jì)）去解釋交互效果喳挑。

目前的UI動(dòng)效包括系統(tǒng)動(dòng)效都在嘗試從各種不同角度解釋動(dòng)效設(shè)計(jì)的作用彬伦。而很多開發(fā)團(tuán)隊(duì)根本就不重視這些細(xì)枝末節(jié)的東西滔悉，他們認(rèn)為只要掌握好幾本用戶需求，就可以把產(chǎn)品繼續(xù)做下去单绑。

在國(guó)內(nèi)（CHINA）目前的各類APP中回官，擁有優(yōu)秀統(tǒng)一的視覺效果的應(yīng)用比例少之又少，更別說流暢的動(dòng)效效果了搂橙。

好多設(shè)計(jì)師或者產(chǎn)品經(jīng)理根本就不知道哪些地方該動(dòng)歉提，哪些地方不該動(dòng)。那么 区转，動(dòng)效設(shè)計(jì)在用戶體驗(yàn)的提升中到底有沒有用呢苔巨？

我們先暫且相信它有用。我們?cè)谙旅嬗懻摰氖?動(dòng)效的基礎(chǔ)理論知識(shí)蜗帜，為什么要應(yīng)用動(dòng)效恋拷，以及在那些時(shí)候動(dòng)效，還有動(dòng)效對(duì)用戶體驗(yàn)提升的作用厅缺。

關(guān)于動(dòng)效的基本屬性

關(guān)于動(dòng)效的基本屬性我喜歡科幻電影蔬顾，而科幻電影的一個(gè)問題是–故事發(fā)生我根本不了解的宇宙時(shí)空中。電影里有N多件事（包括故事背景 時(shí)代背景 等等）湘捎，電影在放映時(shí)我只有兩個(gè)小時(shí)的時(shí)間去了解诀豁。（圖片截自我最愛的普羅米修斯系列）

那優(yōu)秀的科幻電影導(dǎo)演是怎么解決這個(gè)問題的呢？

他們專注于主角而不是遙遠(yuǎn)的宇宙空間窥妇。他們?cè)跊]有讓我們落后的情況下舷胜，將一個(gè)虛構(gòu)的世界歷史放進(jìn)了主角的故事主線中。

他們通過遵循觀眾熟悉的真實(shí)世界物理定律和一些真實(shí)的物理細(xì)節(jié)來使虛構(gòu)的宇宙像真的一樣活翩。

最后烹骨，他們通過故事的感染力和真實(shí)感讓故事顯得非常美好又值得回憶。

與此相似材泄，在UI設(shè)計(jì)中沮焕，我們想在很小的屏幕上展現(xiàn)一個(gè)交互的“故事”。我們的“主角”是設(shè)計(jì)的界面元素拉宗，我們的“虛構(gòu)宇宙”就是UI架構(gòu)峦树。而且我們沒有兩小時(shí)，在用戶失去興趣和產(chǎn)生疑惑之前旦事，我們最多只有一秒的時(shí)間魁巩。

我們可以確定動(dòng)效的三個(gè)重要特性（側(cè)重類型）：功能性Functional，物理性Material姐浮，趣味性Delightful谷遂。動(dòng)效可以幫我們提升UX（用戶體驗(yàn)），使UI界面顯得更加一致和真實(shí)单料，并給整個(gè)產(chǎn)品帶來創(chuàng)新的感覺

功能性

優(yōu)化用戶對(duì)界面的感知埋凯，使其感到更輕快更全面点楼。

引起用戶的注意。

提供（用戶操作后的）視覺（功能）反饋白对，并為下一步的跳轉(zhuǎn)做準(zhǔn)備掠廓。

物理性

在一致的動(dòng)畫原則和物理的（符合物理定律的）UI模型基礎(chǔ)上構(gòu)建動(dòng)畫。

定義屏幕和UI元件之間的空間相對(duì)關(guān)系甩恼，他們的相對(duì)高度蟀瞧，權(quán)重以及速度。

趣味性

在上面兩個(gè)部分都滿足的情況下条摸，加入一些有趣的動(dòng)畫悦污。

使它感覺獨(dú)特，能在諸多動(dòng)畫中能讓人眼前一亮钉蒲。

娛樂用戶切端，并讓他們一想到動(dòng)畫就能想到該產(chǎn)品或者反之。

下面展開講述每個(gè)類型顷啼。

功能性動(dòng)畫Functional animation

我見過的第一個(gè)動(dòng)畫就是MS-DOS命令提示符中不斷閃爍的光標(biāo)踏枣。這個(gè)動(dòng)畫很友好并溫馨—像是在說“來吧，寫點(diǎn)東西”钙蒙。同時(shí)它還是功能性的–如果停止閃爍茵瀑，那這就意味死機(jī)并“可能起火”。我花了很久才知道這小動(dòng)畫的意思—?jiǎng)有?duì)交互引導(dǎo)和了解系統(tǒng)狀態(tài)都很重要躬厌。

UI界面的切換（特別是網(wǎng)頁(yè)）通常都是直接硬切马昨，使用戶很難進(jìn)行跟進(jìn)。在認(rèn)知科學(xué)的領(lǐng)域里這種情況叫做變化盲視——視覺刺激的突兀變化會(huì)阻止用戶注意到新的信息扛施。

“功能動(dòng)效能夠補(bǔ)充理解能力的差距鸿捧。”

功能性動(dòng)效可以讓用戶跟著你的應(yīng)用程序的流程走的同時(shí)不會(huì)落后（即從哪來到哪去）疙渣。幫助人們?cè)诮缑嬷卸ㄎ徊⒔愐曈X關(guān)系笛谦。我們的大腦和眼睛會(huì)快速注意到移動(dòng)的目標(biāo)–這是一個(gè)反射。動(dòng)效可以幫助眼睛注意到新的目標(biāo)出現(xiàn)或者一個(gè)目標(biāo)的隱藏昌阿。

例如，輸錯(cuò)密碼后搖動(dòng)的動(dòng)畫貌似比立即顯示一個(gè)錯(cuò)誤徽章要更長(zhǎng)的時(shí)間恳邀。

但是在現(xiàn)實(shí)中懦冰，用戶可能需要進(jìn)一步的確認(rèn)錯(cuò)誤徽章信息，而不是看到動(dòng)畫瞬間就明白是什么意思谣沸。

一個(gè)好的動(dòng)畫比任何文字和插畫都能快速表達(dá)一段故事刷钢。動(dòng)畫是語言是世界通用。你沒必要把動(dòng)畫翻譯成英語或日語乳附。正確的界面轉(zhuǎn)換動(dòng)效可以讓你用戶快速養(yǎng)成使用習(xí)慣内地。設(shè)計(jì)師要經(jīng)常思考真正的用戶體驗(yàn)伴澄，而不是抽象的“點(diǎn)擊次數(shù)”或“左滑右滑”。

物理動(dòng)效Material Animation

物理動(dòng)畫其實(shí)被很多人誤解了阱缓。它其實(shí)不是google的東西非凌，GOOGLE只是起了一個(gè)MD這個(gè)名字來表達(dá)他得統(tǒng)一設(shè)計(jì)規(guī)范而已。物理動(dòng)畫的真正意思是荆针，讓你UI符合空間邏輯并根據(jù)物理定律做動(dòng)畫敞嗡。當(dāng)你的動(dòng)效考慮到像重力和慣性，速度和剛性航背，它就顯得很真實(shí)喉悴，用戶會(huì)覺得更加自然，當(dāng)然就有助于快速形成使用習(xí)慣玖媚，因?yàn)檫@些動(dòng)效都是熟悉并可預(yù)知的箕肃。但是，如果動(dòng)效看起來不真實(shí)今魔，會(huì)顯得你的網(wǎng)站和APP都顯得很俗氣勺像，并導(dǎo)致用戶完全不信任你的內(nèi)容。

“物理動(dòng)效能使UI轉(zhuǎn)場(chǎng)更加可預(yù)測(cè)并使瀏覽有了連續(xù)性涡贱∮缴荆”

作為一個(gè)設(shè)計(jì)師。你有無數(shù)種辦法在應(yīng)用程序或者網(wǎng)站里建立一個(gè)虛擬的世界问词。每個(gè)UI“世界”擁有自己獨(dú)特的地圖督函。你的菜單可能隱藏在浮動(dòng)的按鈕里或者在畫板下面，你也可以放在抽屜菜單里或做成輪盤激挪。但是無論選擇哪種方式辰狡，你的動(dòng)效一定要有邏輯性和真實(shí)性。

用戶第一次到我們所創(chuàng)造的UI虛構(gòu)世界里面——需要開拓并從頭開始學(xué)習(xí)垄分。他們需要了解界面從哪到哪宛篇，這樣他們?cè)俅握业骄秃苋菀祝@個(gè)轉(zhuǎn)場(chǎng)不適合硬切換薄湿，因?yàn)檎鎸?shí)世界中是不存在硬切換的叫倍。

UI動(dòng)畫的另一個(gè)問題就是壞品味。品味是主觀的豺瘤，但總體說來它和美學(xué)相關(guān)吆倦。而人類的美學(xué)是基于我們周圍的世界。如果你以力學(xué)坐求，動(dòng)力學(xué)和光學(xué)原理為基本線蚕泽，那么創(chuàng)建有品位的動(dòng)畫就是一件很簡(jiǎn)單的事情。

趣味動(dòng)效Delightful animation

當(dāng)然桥嗤，動(dòng)效最重要的還是上面兩種须妻。

但是人類不僅有理性仔蝌，還有感性。我們喜歡好玩的東西荒吏。

我們希望網(wǎng)站和應(yīng)用程序能夠和用戶建立聯(lián)系敛惊，而趣味動(dòng)效可以讓用戶體驗(yàn)變得真正愉快和難忘。

“讓動(dòng)畫成為你的品牌的一部分司倚《够欤”

動(dòng)效細(xì)節(jié)原則總結(jié)

動(dòng)效細(xì)節(jié)原則總結(jié)今年早些時(shí)候迪斯尼動(dòng)畫師Glen Keane和R/GA的設(shè)計(jì)師Rebecca Ussai在Medium上發(fā)了一篇文章UX Choreography，首次嘗試通過12個(gè)原則和5個(gè)規(guī)律來總結(jié)UI動(dòng)效的一些要求动知。他們總結(jié)的很好皿伺，不過只是主要涵蓋了功能性動(dòng)效，沒有去真正考慮“物理性”和“趣味性”盒粮。

從我的觀點(diǎn)上來看鸵鸥，12個(gè)原則可以完全應(yīng)用于UI動(dòng)效。我重新整理了這些規(guī)則歸類進(jìn)了上面的三種動(dòng)效中丹皱。

下面讓我們看看這些原則是如何單獨(dú)應(yīng)用到UI動(dòng)效的妒穴，并分析他們的相互關(guān)系。

實(shí)體繪圖Solid drawing

基本的物理設(shè)計(jì)原則摊崭。主要是遵循三維空間的規(guī)則讼油，通過給對(duì)象賦予重量和容積來得到適當(dāng)維數(shù)。實(shí)體繪圖需要?jiǎng)赢嫀熓煜せ镜娜S形狀知識(shí)–結(jié)構(gòu)呢簸，重量矮台，平衡，光和陰影根时。迪斯尼動(dòng)畫師希望動(dòng)畫片看起來真實(shí)瘦赫，希望觀眾能夠和動(dòng)畫角色關(guān)聯(lián)起來。他們以前叫SOLID DRAWING蛤迎。今天在動(dòng)效設(shè)計(jì)領(lǐng)域稱之為 MATERIAL DESIGN确虱。

有兩種辦法畫出動(dòng)態(tài)效果：逐幀畫 / 直接畫每個(gè)不同狀態(tài)。動(dòng)畫師根據(jù)復(fù)雜程度和轉(zhuǎn)場(chǎng)的狀態(tài)使用不同的技術(shù)手段替裆。而動(dòng)效跟我們用戶的聯(lián)系決定于我們要用XCODE還是CSS還是用其他編程語言來實(shí)現(xiàn)校辩。

如果動(dòng)效很簡(jiǎn)單，你只需變化一個(gè)單一的參數(shù)辆童，比如說對(duì)象的位置或者縮放召川，可以創(chuàng)建兩個(gè)關(guān)鍵幀來直接實(shí)現(xiàn)相對(duì)線性的過渡。

而如果你的動(dòng)畫是獨(dú)特復(fù)雜的胸遇，有很多變量，那么你應(yīng)該制作逐幀動(dòng)畫或者使用AE等軟件制作出來汉形。

擠壓和拉伸Squash and stretch

用來描述目標(biāo)對(duì)象的剛性和質(zhì)量纸镊，定義對(duì)象的物理屬性倍阐。作為設(shè)計(jì)師你應(yīng)該定義UI的屬性：固定架構(gòu)，剛性表面逗威，以及快速準(zhǔn)確地動(dòng)作峰搪；還是更有機(jī)，具有柔軟可彎曲的表面以及流體動(dòng)作凯旭。這是你的動(dòng)效品牌感：你的動(dòng)畫風(fēng)格和給人的感受概耻。

同樣，弧線（曲線）也有助于定義動(dòng)畫的本質(zhì)罐呼。像汽車自行車火車等機(jī)械產(chǎn)品傾向于沿著直線軌跡運(yùn)動(dòng)鞠柄，而有機(jī)體，如植物嫉柴，動(dòng)物厌杜，和，嗯…我們计螺，往往沿著弧形軌跡移動(dòng)夯尽。所以問問你自己，你的UI是機(jī)器人還是人性化的登馒？這一原則匙握，以及擠壓和拉伸和直線等結(jié)合就能創(chuàng)建更真實(shí)的，有機(jī)的陈轿，令人難忘的動(dòng)效圈纺。

分級(jí)強(qiáng)調(diào)主要強(qiáng)調(diào)動(dòng)效的中心思想（分清主次），能使用戶見到動(dòng)效就一目了然济欢。一個(gè)分級(jí)較好地過渡動(dòng)效可以把用戶的注意力吸引到正確地位置—到重要的建議內(nèi)容或交互重點(diǎn)上赠堵。大多數(shù)用戶界面缺乏強(qiáng)有力的關(guān)注點(diǎn)，結(jié)果新用戶瀏覽各種界面時(shí)通常一頭霧水法褥。即使你的UI沒有重要關(guān)注點(diǎn)茫叭，你可以給動(dòng)效進(jìn)行分級(jí)，讓用戶真正注意到重要的部分半等。

時(shí)間可能是最重要的原則之一揍愁。無論你在用什么做動(dòng)畫，你的時(shí)間序列定義了用戶對(duì)動(dòng)效的感知和理解程度杀饵，包括制作主要和次要?jiǎng)赢嬕约熬徣刖彸龅刃Ч?/p>

動(dòng)畫合成需要技巧和練習(xí)莽囤。時(shí)間的控制主要是速度曲線。AfterEffects 的一些腳本或者自帶的關(guān)鍵幀輔助功能都提供一些基本曲線（EASE IN / EASE OUT）切距。

標(biāo)準(zhǔn)緩動(dòng)曲線查詢網(wǎng)址：http://easings.net/zh-cn

如果你剛開始接觸緩動(dòng)曲線朽缎，那么應(yīng)該多去鍛煉，找到動(dòng)畫感覺，達(dá)到能夠快速分辨出動(dòng)畫的緩動(dòng)方式的水平就可以了话肖。

跟隨和重疊原理是和同時(shí)發(fā)生多個(gè)動(dòng)畫有關(guān)的北秽。好多東西都不是一致性的運(yùn)動(dòng)，有些動(dòng)畫比其他動(dòng)畫更加引人注意最筒。

跟隨原理的意思是 要讓屬于大的對(duì)象的部分跟隨其“父級(jí)” 有機(jī)和真實(shí)的運(yùn)動(dòng)贺氓。而?重疊?可以確保這一切同時(shí)發(fā)生。跟隨原理 可以提現(xiàn)UI構(gòu)件之間的層級(jí)關(guān)系床蜘，并給動(dòng)畫設(shè)置優(yōu)先級(jí)辙培，同時(shí)重疊原理 可以使動(dòng)畫保持一致并在可控范圍內(nèi)協(xié)調(diào)運(yùn)動(dòng)。

輔助動(dòng)畫原則和上面的原理很像邢锯。它可以幫助你確定哪些需要放在用戶眼前扬蕊，哪些需要隱藏。選擇對(duì)用戶理解最重要的動(dòng)畫為優(yōu)先的弹囚，并用輔助動(dòng)畫進(jìn)行潤(rùn)色厨相。

緩入/ 緩出是引起用戶注意的基礎(chǔ)效果，同時(shí)能讓動(dòng)畫感覺順暢和真實(shí)鸥鹉。這個(gè)原則蛮穿，和時(shí)間+跟隨重疊原理結(jié)合，可以制作很自然且有層次感的動(dòng)畫毁渗。

從物理性角度講践磅，緩動(dòng)動(dòng)畫遵循的是慣性定律——物體運(yùn)動(dòng)不會(huì)突然停止和瞬間加速（都有加速和減速過程）。動(dòng)畫遵循物理定律可以讓用戶更加舒服灸异。從功能性角度府适，不斷減速的物體會(huì)吸引人們的注意力，不斷加快速速度的對(duì)象會(huì)失去注意力肺樟。比如說 進(jìn)來的動(dòng)畫要先快后慢檐春，出去的物體要先慢后快。

預(yù)判是可以在動(dòng)畫的開始或結(jié)束階段都可用的原則么伯。首先疟暖，它對(duì)預(yù)備一些要?jiǎng)拥膶?duì)象以及編排場(chǎng)景的部件，流露一些動(dòng)畫的“線索”田柔。預(yù)判效果的最簡(jiǎn)單的實(shí)現(xiàn)辦法就是緩入俐巴。第二個(gè)預(yù)判方法就是在動(dòng)畫轉(zhuǎn)場(chǎng)后提供手勢(shì)輔助，比如說出現(xiàn)“右滑菜單進(jìn)行選擇”等提示語硬爆。

夸張可以讓動(dòng)畫變現(xiàn)得活潑有趣欣舵。不夸張的動(dòng)畫有時(shí)會(huì)顯得精確，不過在有些場(chǎng)景中會(huì)很無趣缀磕，機(jī)械和僵硬缘圈×庸猓可以根據(jù)你對(duì)用戶體驗(yàn)的感覺和要求程度確定該不該做夸張地動(dòng)畫以及夸張地程度。動(dòng)效的目標(biāo)是讓你的按鈕/面板/菜單/內(nèi)容和用戶交互后的效果顯得更加生動(dòng)糟把。

感染力是最為神秘的原則之一赎线。我們每天都接觸N個(gè)APP和網(wǎng)站，他們解決著各種人的各種需求糊饱。而真正留住用戶，增加用戶粘性的卻沒幾個(gè)颠黎。真正能夠留住用戶的不僅有好的用戶體驗(yàn)另锋，還能使用戶對(duì)產(chǎn)品產(chǎn)生感情。

把動(dòng)效做的統(tǒng)一又有感染力狭归，需要在設(shè)計(jì)動(dòng)畫時(shí)不僅讓用戶感覺真實(shí)夭坪，還要有自己的獨(dú)特風(fēng)格。

結(jié)論

功能性：確定你的動(dòng)效能夠解決用戶需求

物理性：設(shè)計(jì)高度統(tǒng)一的过椎，能夠制作有空間意義轉(zhuǎn)場(chǎng)的用戶界面

趣味性：給你的動(dòng)畫一些關(guān)愛（趣味）室梅，讓用戶愛上你的產(chǎn)品。