起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)設(shè)計(jì)干貨收藏｜UI動(dòng)效的必備原則總結(jié)
高度總結(jié)動(dòng)效設(shè)計(jì)的基本原則，有大量的案例分析。動(dòng)效設(shè)計(jì)在用戶體驗(yàn)的提升中到底有沒(méi)有用呢？ 我們?cè)谙旅嬗懻摰氖菫槭裁匆獞?yīng)用動(dòng)效，以及在那些時(shí)候動(dòng)效，動(dòng)效的特性等等。
作為一枚不會(huì)敲代碼的設(shè)計(jì)師，我們不太可能讓自己的設(shè)計(jì)真正“活”起來(lái)。如果沒(méi)有動(dòng)效設(shè)計(jì)，那總是需要很長(zhǎng)時(shí)間去給程序員解釋點(diǎn)擊這個(gè)按鈕后會(huì)發(fā)生什么。所以設(shè)計(jì)師們需要通過(guò)動(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)一的視覺(jué)效果的應(yīng)用比例少之又少，更別說(shuō)流暢的動(dòng)效效果了。
好多設(shè)計(jì)師或者產(chǎn)品經(jīng)理根本就不知道哪些地方該動(dòng)，哪些地方不該動(dòng)。那么 ，動(dòng)效設(shè)計(jì)在用戶體驗(yàn)的提升中到底有沒(méi)有用呢？
我們先暫且相信它有用。我們?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è)問(wèn)題是–故事發(fā)生我根本不了解的宇宙時(shí)空中。電影里有N多件事（包括故事背景 時(shí)代背景 等等），電影在放映時(shí)我只有兩個(gè)小時(shí)的時(shí)間去了解。（圖片截自我最愛(ài)的普羅米修斯系列）
那優(yōu)秀的科幻電影導(dǎo)演是怎么解決這個(gè)問(wèn)題的呢？
- 他們專注于主角而不是遙遠(yuǎn)的宇宙空間。他們?cè)跊](méi)有讓我們落后的情況下，將一個(gè)虛構(gòu)的世界歷史放進(jìn)了主角的故事主線中。
- 他們通過(guò)遵循觀眾熟悉的真實(shí)世界物理定律和一些真實(shí)的物理細(xì)節(jié)來(lái)使虛構(gòu)的宇宙像真的一樣。
- 最后，他們通過(guò)故事的感染力和真實(shí)感讓故事顯得非常美好又值得回憶。
與此相似，在UI設(shè)計(jì)中，我們想在很小的屏幕上展現(xiàn)一個(gè)交互的“故事”。我們的“主角”是設(shè)計(jì)的界面元素，我們的“虛構(gòu)宇宙”就是UI架構(gòu)。而且我們沒(méi)有兩小時(shí)，在用戶失去興趣和產(chǎn)生疑惑之前，我們最多只有一秒的時(shí)間。
我們可以確定動(dòng)效的三個(gè)重要特性（側(cè)重類型）：功能性Functional，物理性Material，趣味性Delightful。動(dòng)效可以幫我們提升UX（用戶體驗(yàn)），使UI界面顯得更加一致和真實(shí)，并給整個(gè)產(chǎn)品帶來(lái)創(chuàng)新的感覺(jué)
功能性
- 優(yōu)化用戶對(duì)界面的感知，使其感到更輕快更全面。
- 引起用戶的注意。
- 提供（用戶操作后的）視覺(jué)（功能）反饋，并為下一步的跳轉(zhuǎn)做準(zhǔn)備。
物理性
- 在一致的動(dòng)畫原則和物理的（符合物理定律的）UI模型基礎(chǔ)上構(gòu)建動(dòng)畫。
- 定義屏幕和UI元件之間的空間相對(duì)關(guān)系，他們的相對(duì)高度，權(quán)重以及速度。
趣味性
- 在上面兩個(gè)部分都滿足的情況下，加入一些有趣的動(dòng)畫。
- 使它感覺(jué)獨(dú)特，能在諸多動(dòng)畫中能讓人眼前一亮。
- 娛樂(lè)用戶，并讓他們一想到動(dòng)畫就能想到該產(chǎn)品或者反之。
下面展開講述每個(gè)類型。
功能性動(dòng)畫Functional animation
我見(jiàn)過(guò)的第一個(gè)動(dòng)畫就是MS-DOS命令提示符中不斷閃爍的光標(biāo)。這個(gè)動(dòng)畫很友好并溫馨—像是在說(shuō)“來(lái)吧，寫點(diǎn)東西”。同時(shí)它還是功能性的–如果停止閃爍，那這就意味死機(jī)并“可能起火”。我花了很久才知道這小動(dòng)畫的意思—動(dòng)效對(duì)交互引導(dǎo)和了解系統(tǒng)狀態(tài)都很重要。
UI界面的切換（特別是網(wǎng)頁(yè)）通常都是直接硬切，使用戶很難進(jìn)行跟進(jìn)。在認(rèn)知科學(xué)的領(lǐng)域里這種情況叫做變化盲視——視覺(jué)刺激的突兀變化會(huì)阻止用戶注意到新的信息。
“功能動(dòng)效能夠補(bǔ)充理解能力的差距。”
功能性動(dòng)效可以讓用戶跟著你的應(yīng)用程序的流程走的同時(shí)不會(huì)落后（即從哪來(lái)到哪去）。幫助人們?cè)诮缑嬷卸ㄎ徊⒔愐曈X(jué)關(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)畫是語(yǔ)言是世界通用。你沒(méi)必要把動(dòng)畫翻譯成英語(yǔ)或日語(yǔ)。正確的界面轉(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è)名字來(lái)表達(dá)他得統(tǒng)一設(shè)計(jì)規(guī)范而已。物理動(dòng)畫的真正意思是，讓你UI符合空間邏輯并根據(jù)物理定律做動(dòng)畫。當(dāng)你的動(dòng)效考慮到像重力和慣性，速度和剛性，它就顯得很真實(shí)，用戶會(huì)覺(jué)得更加自然，當(dāng)然就有助于快速形成使用習(xí)慣，因?yàn)檫@些動(dòng)效都是熟悉并可預(yù)知的。但是，如果動(dòng)效看起來(lái)不真實(shí)，會(huì)顯得你的網(wǎng)站和APP都顯得很俗氣，并導(dǎo)致用戶完全不信任你的內(nèi)容。
“物理動(dòng)效能使UI轉(zhuǎn)場(chǎng)更加可預(yù)測(cè)并使瀏覽有了連續(xù)性。”
作為一個(gè)設(shè)計(jì)師。你有無(wú)數(shù)種辦法在應(yīng)用程序或者網(wǎng)站里建立一個(gè)虛擬的世界。每個(gè)UI“世界”擁有自己獨(dú)特的地圖。你的菜單可能隱藏在浮動(dòng)的按鈕里或者在畫板下面，你也可以放在抽屜菜單里或做成輪盤。但是無(wú)論選擇哪種方式，你的動(dòng)效一定要有邏輯性和真實(shí)性。
用戶第一次到我們所創(chuàng)造的UI虛構(gòu)世界里面——需要開拓并從頭開始學(xué)習(xí)。他們需要了解界面從哪到哪，這樣他們?cè)俅握业骄秃苋菀?，但這個(gè)轉(zhuǎn)場(chǎng)不適合硬切換，因?yàn)檎鎸?shí)世界中是不存在硬切換的。
UI動(dòng)畫的另一個(gè)問(wèn)題就是壞品味。品味是主觀的，但總體說(shuō)來(lái)它和美學(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)畫成為你的品牌的一部分?！?/strong>
動(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，首次嘗試通過(guò)12個(gè)原則和5個(gè)規(guī)律來(lái)總結(jié)UI動(dòng)效的一些要求。他們總結(jié)的很好，不過(guò)只是主要涵蓋了功能性動(dòng)效，沒(méi)有去真正考慮“物理性”和“趣味性”。
從我的觀點(diǎn)上來(lái)看，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ī)則，通過(guò)給對(duì)象賦予重量和容積來(lái)得到適當(dāng)維數(shù)。實(shí)體繪圖需要?jiǎng)赢嫀熓煜せ镜娜S形狀知識(shí)–結(jié)構(gòu)，重量，平衡，光和陰影。迪斯尼動(dòng)畫師希望動(dòng)畫片看起來(lái)真實(shí)，希望觀眾能夠和動(dòng)畫角色關(guān)聯(lián)起來(lái)。他們以前叫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還是用其他編程語(yǔ)言來(lái)實(shí)現(xiàn)。
如果動(dòng)效很簡(jiǎn)單，你只需變化一個(gè)單一的參數(shù)，比如說(shuō)對(duì)象的位置或者縮放，可以創(chuàng)建兩個(gè)關(guān)鍵幀來(lái)直接實(shí)現(xiàn)相對(duì)線性的過(guò)渡。
而如果你的動(dòng)畫是獨(dú)特復(fù)雜的，有很多變量，那么你應(yīng)該制作逐幀動(dòng)畫或者使用AE等軟件制作出來(lái)。
擠壓和拉伸Squash and stretch
用來(lái)描述目標(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)。所以問(wèn)問(wèn)你自己，你的UI是機(jī)器人還是人性化的？這一原則，以及擠壓和拉伸和直線等結(jié)合就能創(chuàng)建更真實(shí)的，有機(jī)的，令人難忘的動(dòng)效。
分級(jí)強(qiáng)調(diào)主要強(qiáng)調(diào)動(dòng)效的中心思想（分清主次），能使用戶見(jiàn)到動(dòng)效就一目了然。一個(gè)分級(jí)較好地過(guò)渡動(dòng)效可以把用戶的注意力吸引到正確地位置—到重要的建議內(nèi)容或交互重點(diǎn)上。大多數(shù)用戶界面缺乏強(qiáng)有力的關(guān)注點(diǎn)，結(jié)果新用戶瀏覽各種界面時(shí)通常一頭霧水。即使你的UI沒(méi)有重要關(guān)注點(diǎn)，你可以給動(dòng)效進(jìn)行分級(jí)，讓用戶真正注意到重要的部分。
時(shí)間可能是最重要的原則之一。無(wú)論你在用什么做動(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)畫感覺(jué)，達(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)畫感覺(jué)順暢和真實(shí)。這個(gè)原則，和時(shí)間+跟隨重疊原理結(jié)合，可以制作很自然且有層次感的動(dòng)畫。
從物理性角度講，緩動(dòng)動(dòng)畫遵循的是 慣性定律——物體運(yùn)動(dòng)不會(huì)突然停止和瞬間加速（都有加速和減速過(guò)程）。動(dòng)畫遵循物理定律可以讓用戶更加舒服。從功能性角度，不斷減速的物體會(huì)吸引人們的注意力，不斷加快速速度的對(duì)象會(huì)失去注意力。比如說(shuō) 進(jìn)來(lái)的動(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ì)輔助，比如說(shuō)出現(xiàn)“右滑菜單進(jìn)行選擇”等提示語(yǔ)。
夸張?可以讓動(dòng)畫變現(xiàn)得活潑有趣。不夸張的動(dòng)畫有時(shí)會(huì)顯得精確，不過(guò)在有些場(chǎng)景中會(huì)很無(wú)趣，機(jī)械和僵硬。可以根據(jù)你對(duì)用戶體驗(yàn)的感覺(jué)和要求程度確定該不該做夸張地動(dòng)畫以及夸張地程度。動(dòng)效的目標(biāo)是讓你的按鈕/面板/菜單/內(nèi)容和用戶交互后的效果顯得更加生動(dòng)。
感染力?是最為神秘的原則之一。我們每天都接觸N個(gè)APP和網(wǎng)站，他們解決著各種人的各種需求。而真正留住用戶，增加用戶粘性的卻沒(méi)幾個(gè)。真正能夠留住用戶的不僅有好的用戶體驗(yàn)，還能使用戶對(duì)產(chǎn)品產(chǎn)生感情。
把動(dòng)效做的統(tǒng)一又有感染力，需要在設(shè)計(jì)動(dòng)畫時(shí)不僅讓用戶感覺(jué)真實(shí)，還要有自己的獨(dú)特風(fēng)格。
結(jié)論
- 功能性：確定你的動(dòng)效能夠解決用戶需求
- 物理性：設(shè)計(jì)高度統(tǒng)一的，能夠制作有空間意義轉(zhuǎn)場(chǎng)的用戶界面
- 趣味性：給你的動(dòng)畫一些關(guān)愛(ài)（趣味），讓用戶愛(ài)上你的產(chǎn)品。
展示中的動(dòng)畫作者（DRIBBBLE）: Leo Leung，superwhite, Eddie Lobanovskiy, Isil Uzum, Rebecca Ussai, Anish Chandran, Jason Teunissen, ?ukasz Frankiewicz, Sergey Valiukh, Konstantine Trundayev, Jelio Dimitrov, Ramotion, Jakub Antalik, Pavel Proshin, Kreativa Studio, Justin Ruckman, Nikita NIKI, xjw, Zee Young.
翻譯自：Jedi Principles of UI Animation，MEDIUM.
譯者：@敖廠長(zhǎng)UX?.微信公眾賬號(hào)：交互動(dòng)效設(shè)計(jì)。dribbble?BUCKETS：?https://dribbble.com/AOreal/buckets/321029-UI-UX
本文由 @敖廠長(zhǎng)UX 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。
其實(shí)并不是設(shè)計(jì)和產(chǎn)品不會(huì)做，是做了實(shí)現(xiàn)不了抑制了產(chǎn)品和設(shè)計(jì)的想法，體驗(yàn)方向的設(shè)計(jì)終究是未來(lái)戰(zhàn)
動(dòng)消是需要制作去完成還是設(shè)計(jì)師？ 設(shè)計(jì)師的話是用ae嗎
?? ?? ??
?? 不錯(cuò)不錯(cuò)，謝謝?。?/p>
干貨！感謝！