動(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ī)則，通過給對象賦予重量和容積來得到適當(dāng)維數(shù)。實(shí)體繪圖需要?jiǎng)赢嫀熓煜せ镜娜S形狀知識–結(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)場的狀態(tài)使用不同的技術(shù)手段。而動(dòng)效跟我們用戶的聯(lián)系決定于我們要用XCODE還是CSS還是用其他編程語言來實(shí)現(xiàn)。

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

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

擠壓和拉伸Squash and stretch

用來描述目標(biāo)對象的剛性和質(zhì)量，定義對象的物理屬性。作為設(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)效。

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

時(shí)間可能是最重要的原則之一。無論你在用什么做動(dòng)畫，你的時(shí)間序列定義了用戶對動(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)畫更加引人注意。

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

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

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

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

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

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

感染力?是最為神秘的原則之一。我們每天都接觸N個(gè)APP和網(wǎng)站，他們解決著各種人的各種需求。而真正留住用戶，增加用戶粘性的卻沒幾個(gè)。真正能夠留住用戶的不僅有好的用戶體驗(yàn)，還能使用戶對產(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)場的用戶界面
• 趣味性：給你的動(dòng)畫一些關(guān)愛（趣味），讓用戶愛上你的產(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.

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

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