給人以界面鮮活的感覺，使體驗(yàn)更加流暢

彌補(bǔ)靜態(tài)頁面表達(dá)力的不足

在內(nèi)容優(yōu)先設(shè)計(jì)的趨勢(shì)下，用戶界面變得更加簡(jiǎn)潔。這會(huì)給用戶帶來操作上的盲目感；動(dòng)態(tài)效果可以在不破壞界面美觀的情況下彌補(bǔ)認(rèn)知上的損失

原則上

設(shè)計(jì)是為了解決問題。作為設(shè)計(jì)手段之一，動(dòng)態(tài)設(shè)計(jì)可以解決一些靜態(tài)界面設(shè)計(jì)無法解決的問題。然而，它不是靈丹妙藥。必須限制運(yùn)動(dòng)效果。太多、太慢或不合適的運(yùn)動(dòng)效果只會(huì)讓界面失去焦點(diǎn)，讓團(tuán)隊(duì)和用戶抱怨。

對(duì)于實(shí)際項(xiàng)目中應(yīng)用的動(dòng)效，只有對(duì)需求進(jìn)行精準(zhǔn)對(duì)齊，動(dòng)效才能帶來真正應(yīng)有的價(jià)值。那么，你如何評(píng)估一部動(dòng)畫是否有價(jià)值呢？

1. 需要運(yùn)動(dòng)嗎？

2. 運(yùn)動(dòng)效果是否提升了體驗(yàn)？

3. 動(dòng)效開發(fā)的成本是不是太高了？

如果一切順利，給工程師一個(gè)飛吻。

運(yùn)動(dòng)工具

Adobe 之后

視頻效果軟件，常用的動(dòng)效和MG制作軟件，功能強(qiáng)大，與其他Adobe軟件無縫對(duì)接，可做的效果無限。

+

蘋果的可視化編程軟件可以很好的模擬機(jī)器效果?？捎糜趩雾搫?dòng)畫，也可直接導(dǎo)出可執(zhí)行代碼。

炒作 3

Demo，雖然是HTML5的制作工具，但也算是動(dòng)畫效果的【好貓】。

其他包括原型制作工具、、Form等，也可以用于動(dòng)畫。您可以根據(jù)具體工作選擇合適的，目前還沒有一站式解決方案軟件。

數(shù)字動(dòng)畫

只講制作動(dòng)效，不講實(shí)現(xiàn)是流氓，動(dòng)效設(shè)計(jì)師也需要對(duì)動(dòng)效進(jìn)行注解。

常見值包括：

屬性：移動(dòng)距離旋轉(zhuǎn)角度

時(shí)間：運(yùn)動(dòng)持續(xù)時(shí)間延遲出現(xiàn)時(shí)間重復(fù)時(shí)間

曲線：插值曲線

iOS：運(yùn)動(dòng)曲線

自定義曲線

△ 動(dòng)態(tài)標(biāo)注模板，包括常用動(dòng)作、曲線、表格。格式，速度快，向量性質(zhì)也很適合動(dòng)態(tài)標(biāo)注

動(dòng)態(tài)標(biāo)注技巧

有些動(dòng)作需要分解成多個(gè)值標(biāo)簽。比如里面的“重力運(yùn)動(dòng)”

設(shè)計(jì)者的思路是圓弧運(yùn)動(dòng)，但實(shí)現(xiàn)時(shí)沒有運(yùn)動(dòng)軌跡的發(fā)展方法。

那么如何表達(dá)這個(gè)軌跡呢？

兩種方法

時(shí)間錯(cuò)位

△ 延遲單個(gè)值的時(shí)間（真實(shí)運(yùn)動(dòng)曲線被綠色虛線略微夸大）

不同的曲線

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

曲線/插值器

剛才提到的曲線是什么？

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

△ 圖為插值器

自定義曲線

當(dāng)插值器的默認(rèn)率不能完全滿足要求時(shí)，需要進(jìn)行數(shù)值調(diào)整。

通過調(diào)整該值，您可以快速更改速率：

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

如下圖，是三次方- (.82, .25, .29, .78)

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

交互和運(yùn)動(dòng)

運(yùn)動(dòng)和交互密切相關(guān)，這也需要在視覺之前考慮運(yùn)動(dòng)。

如上圖所示，內(nèi)容優(yōu)先設(shè)計(jì)中常用的共享元素樣式，需要從交互層面對(duì)動(dòng)態(tài)效果進(jìn)行一定的規(guī)劃，否則動(dòng)態(tài)效果會(huì)過于牽強(qiáng)，或者會(huì)遇到視覺返工。

動(dòng)畫和運(yùn)動(dòng)

運(yùn)動(dòng)與動(dòng)畫不同，動(dòng)畫通常發(fā)生在過場(chǎng)動(dòng)畫或動(dòng)作之后，并且往往執(zhí)行得更快。動(dòng)畫中看似恰到好處的運(yùn)動(dòng)時(shí)間，直接應(yīng)用到動(dòng)態(tài)效果上會(huì)顯得拖沓，效率低下。顯然，將動(dòng)畫中的時(shí)間簡(jiǎn)單粗暴地套用在動(dòng)畫上是不合適的。

中，對(duì)動(dòng)畫時(shí)間有更詳細(xì)的定義，推薦各種設(shè)備的動(dòng)畫時(shí)間。在實(shí)際應(yīng)用中，需要考慮元素變化的范圍并給出合適的時(shí)間。

雖然運(yùn)動(dòng)效果已經(jīng)支持 60fps 的速度，但在實(shí)際應(yīng)用中，有時(shí)運(yùn)動(dòng)不夠流暢*確實(shí)存在，甚至為了達(dá)到想要的效果，打標(biāo)時(shí)間也必須與之前有很大的不同。這時(shí)候可能需要修改部分標(biāo)注的時(shí)間，但我一般遵循一個(gè)原則：盡量保持時(shí)間的比例adobe 動(dòng)效設(shè)計(jì)軟件，在模擬中傾向于相信時(shí)間。機(jī)器個(gè)體差異引起的問題很難量化。當(dāng)然，解決這類問題需要工程師和設(shè)計(jì)師的通力合作。

項(xiàng)目中的運(yùn)動(dòng)

正如工業(yè)設(shè)計(jì)師需要了解材料，平面設(shè)計(jì)師需要了解印刷知識(shí)一樣，動(dòng)態(tài)設(shè)計(jì)也需要設(shè)計(jì)師具有“跨專業(yè)”的視野。

在iOS及以上系統(tǒng)上adobe 動(dòng)效設(shè)計(jì)軟件，系統(tǒng)其實(shí)已經(jīng)為你做了很多工作。許多常見和經(jīng)常使用的運(yùn)動(dòng)效果可能已經(jīng)具有制作精良的“輪子”。這些“輪子”往往經(jīng)過多次驗(yàn)證。效果和性能 過去有人說，一些小的改動(dòng)就可以滿足項(xiàng)目的要求。

實(shí)現(xiàn)此類動(dòng)畫時(shí)：

除非您確信實(shí)現(xiàn)比現(xiàn)有的更好，否則最好直接使用它。

利用現(xiàn)有的“輪子”來控制常見的基本運(yùn)動(dòng)效果，減少整個(gè)團(tuán)隊(duì)的重復(fù)工作，提高效率，設(shè)計(jì)師和工程師也可以將精力投入到讓項(xiàng)目更加精彩的領(lǐng)域。

相關(guān)熱詞：