功能性動效可以讓用戶跟著你的應(yīng)用程序的流程走的同時(shí)不會落后（即從哪來到哪去）。幫助人們在界面中定位并建麗視覺關(guān)系。我們的大腦和眼睛會快速注意到移動的目標(biāo)–這是一個(gè)反射。動效可以幫助眼睛注意到新的目標(biāo)出現(xiàn)或者一個(gè)目標(biāo)的隱藏。

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

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

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

物理動效Material Animation

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

“物理動效能使UI轉(zhuǎn)場更加可預(yù)測并使瀏覽有了連續(xù)性。”

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

用戶第一次到我們所創(chuàng)造的UI虛構(gòu)世界里面——需要開拓并從頭開始學(xué)習(xí)。他們需要了解界面從哪到哪，這樣他們再次找到就很容易，但這個(gè)轉(zhuǎn)場不適合硬切換，因?yàn)檎鎸?shí)世界中是不存在硬切換的。

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

趣味動效Delightful animation

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

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

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

“讓動畫成為你的品牌的一部分。”

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

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

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

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

實(shí)體繪圖Solid drawing

基本的物理設(shè)計(jì)原則。主要是遵循三維空間的規(guī)則，通過給對象賦予重量和容積來得到適當(dāng)維數(shù)。實(shí)體繪圖需要動畫師熟悉基本的三維形狀知識–結(jié)構(gòu)，重量，平衡，光和陰影。迪斯尼動畫師希望動畫片看起來真實(shí)，希望觀眾能夠和動畫角色關(guān)聯(lián)起來。他們以前叫SOLID DRAWING。今天在動效設(shè)計(jì)領(lǐng)域稱之為 MATERIAL DESIGN。

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

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

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

擠壓和拉伸Squash and stretch

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

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

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

時(shí)間可能是最重要的原則之一。無論你在用什么做動畫，你的時(shí)間序列定義了用戶對動效的感知和理解程度，包括制作主要和次要動畫以及緩入緩出等效果。

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

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

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

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

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

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

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

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

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

夸張?可以讓動畫變現(xiàn)得活潑有趣。不夸張的動畫有時(shí)會顯得精確，不過在有些場景中會很無趣，機(jī)械和僵硬?？梢愿鶕?jù)你對用戶體驗(yàn)的感覺和要求程度確定該不該做夸張地動畫以及夸張地程度。動效的目標(biāo)是讓你的按鈕/面板/菜單/內(nèi)容和用戶交互后的效果顯得更加生動。

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

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

結(jié)論

• 功能性：確定你的動效能夠解決用戶需求
• 物理性：設(shè)計(jì)高度統(tǒng)一的，能夠制作有空間意義轉(zhuǎn)場的用戶界面
• 趣味性：給你的動畫一些關(guān)愛（趣味），讓用戶愛上你的產(chǎn)品。

展示中的動畫作者（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.

譯者：@敖廠長UX?.微信公眾賬號：交互動效設(shè)計(jì)。dribbble?BUCKETS：?https://dribbble.com/AOreal/buckets/321029-UI-UX

本文由 @敖廠長UX 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。