讀了這篇文章，你可以知道動效的作用、設(shè)計原則、動效工具、制作方法、標(biāo)注技巧等等，特別全面，強(qiáng)烈推薦收藏學(xué)習(xí)。

動效在用戶體驗設(shè)計中正變得越來越重要，那么動效能帶來什么好處呢？

• 體現(xiàn)交互層級：動態(tài)界面使人更容易理解交互層級關(guān)系，減輕了人們的認(rèn)知負(fù)擔(dān)
• 給予反饋：給人感覺界面是活的，讓體驗流暢
• 彌補(bǔ)靜態(tài)頁面的表達(dá)不足：在內(nèi)容優(yōu)先的設(shè)計趨勢下，用戶界面變的更加簡潔。這將給用戶帶來操作上的盲目感；動效則可以在不打破界面美感的前提下，彌補(bǔ)認(rèn)知的損失

原則

設(shè)計是為了解決問題，動效設(shè)計作為設(shè)計的手段之一，能解決一些靜態(tài)界面設(shè)計無法解決的問題。但是，它并不是萬能的，動效要克制，過多、過慢或不適合的動效，只能讓界面失去重點，讓團(tuán)隊和用戶怨聲載道。

在實際項目中應(yīng)用的動效，只有精準(zhǔn)地對齊需求，才能使動效帶來真正應(yīng)有的價值。那么，如何評估一個動效是否有價值呢？

1. 動效是否必要
2. 動效是否帶來體驗提升
3. 動效開發(fā)的成本是否過高

如果都沒有問題，送給工程師一個飛吻吧。

動效工具

Adobe After Effect

視頻特效軟件，被普遍使用的動效和 MG 制作軟件，功能強(qiáng)大，和其他 Adobe 軟件無縫配合，可做的效果也是不限量的。

Quartz Composer + Origami Studio

Apple 的可視化編程軟件，搭配 Facebook 的 Origami 可以非常好的模擬機(jī)器效果，做單頁面的動效可以用它，Origami 還可以導(dǎo)出直接可實施的代碼。

Hype 3

可交互的 Demo ，雖然是 HTML5 制作工具，但是做動效也算是一只［好貓］吧。

其他的還有原型工具 Framer、Pixate、Form 等和 QuartzCode、PaintCode 也都可以用來做動效。具體工作時候可以選用適合的來做，目前還沒有一站式解決的軟件出現(xiàn)。

數(shù)值化動效

只談制作動效，不談實現(xiàn)都是耍流氓，動效設(shè)計師同樣需要為動效標(biāo)注。

常規(guī)的值包括：

1. 屬性：移動距離 旋轉(zhuǎn)角度
2. 時間：運(yùn)動持續(xù)時間 延遲出現(xiàn)時間 重復(fù)時間
3. 曲線Android：插值器曲線
4. iOS：運(yùn)動曲線
5. 自定義曲線

動效標(biāo)注模版，包括常用動作、曲線、表格。 Sketch 格式，Sketch 的快速、矢量特性也非常適合進(jìn)行動效標(biāo)注。

動效標(biāo)注技巧

有些運(yùn)動需要分解成多種值標(biāo)注。比如 Material Design 里面的「重力運(yùn)動」

設(shè)計師的思維是 Position 到 Position 的弧線運(yùn)動，但實現(xiàn)時并沒有運(yùn)動軌跡的開發(fā)方式。

那么如何表述這個運(yùn)動軌跡呢？

兩種方法

時間錯位：

延遲單個值的時間（真實運(yùn)動曲線為綠色虛線略有夸張）

不同曲線：

兩個值持續(xù)時間相同，但應(yīng)用的曲線不同

曲線 / 插值器

剛才提到了曲線是什么呢？

在 Android 系統(tǒng)內(nèi)，調(diào)用系統(tǒng)內(nèi)置曲線插值器，改變動畫的播放速率，可以實現(xiàn)大部分動態(tài)速率的效果。

圖為 Android 插值器

自定義曲線

插值器默認(rèn)的速率無法完全符合需求時，還需要給它進(jìn)行數(shù)值調(diào)整。

調(diào)整 Factor 的值，就可以快速改變速率：

當(dāng)然，你也可以嘗試使用自定義的去曲線，將曲線換算成二次貝塞爾曲線，可以直接用于開發(fā)。

如下圖，為 cubic-bezier (.82, .25, .29, .78)

Android 和 iOS 都支持二次貝塞爾和三次貝賽爾曲線。

交互與動效

動效和交互聯(lián)系很緊密，這也要求動效是先于視覺考慮的。

如上圖，在內(nèi)容優(yōu)先的設(shè)計中常用的共享元素樣式，從交互層面就需要對動效有一定的規(guī)劃，否則會遇到動效很牽強(qiáng)或視覺返工的情況。

動畫與動效

動效不同于動畫，動效常發(fā)生在過場或操作之后，有趨向于表現(xiàn)更快的傾向。動畫中看上去恰到好處的運(yùn)動時間，直接套用在動效中應(yīng)用會顯得拖沓沉冗效率不高。顯然，簡單粗暴的把動畫中的時間直接應(yīng)用在動效中，是不合適的。

在 Material Design Motion 中，對動效時間有比較詳細(xì)的定義，對各種設(shè)備的動畫時間都有推薦，實際應(yīng)用時還需要考慮元素變化的范圍，給出合適的時間。

雖然 Android 動效已經(jīng)支持 60fps 的速度，但是在實際應(yīng)用中，有時運(yùn)動不夠平滑*確實存在，甚至為了達(dá)到理想效果，要同之前標(biāo)注時間相差很大。這時，可能需要對部分標(biāo)注時間進(jìn)行修改，不過我一般會遵循一個原則：盡量保持時間之間的比例，傾向相信模擬中的時間。因為機(jī)器的個體差異導(dǎo)致的問題很難被量化。當(dāng)然，解決這種問題，需要工程師和設(shè)計師的通力配合。

項目中的動效

就好像工業(yè)設(shè)計師需要懂材料、平面設(shè)計師需要了解印刷知識，動效設(shè)計同樣需要設(shè)計師具有「跨專業(yè)」的視野。

在 iOS 和 Android 上，系統(tǒng)其實已經(jīng)幫你完成了不少工作，很多常見的、被經(jīng)常使用的動效，可能已經(jīng)有做好的「輪子」，這些「輪子」往往經(jīng)過多次驗證，效果和性能都說的過去，有些稍加改動就可以滿足項目要求。

在實現(xiàn)這類動效的時候：

除非有信心實現(xiàn)的比已有的好，不然還是直接使用吧。

使用已有的「輪子」、將常用基礎(chǔ)動效控件化，減少整個團(tuán)隊重復(fù)工作，提高效率，設(shè)計師和工程師也可以把精力用在能讓項目更為出彩的地方。

作者：顧小犢

來源：http://www.uisdc.com/mobile-motion-design-guideline

版權(quán)聲明：人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范，所轉(zhuǎn)載的文章都注明作者和來源，若標(biāo)注有誤，請聯(lián)系主編QQ：419297645更改。