中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

動(dòng)效在用戶體驗(yàn)設(shè)計(jì)中正變得越來越重要，那么動(dòng)效能帶來什么好處呢？

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

原則

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

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

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

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

動(dòng)效工具

Adobe After Effect

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

Quartz Composer + Origami Studio

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

Hype 3

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

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

數(shù)值化動(dòng)效

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

常規(guī)的值包括：

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

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

動(dòng)效標(biāo)注技巧

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

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

那么如何表述這個(gè)運(yùn)動(dòng)軌跡呢？

兩種方法

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

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

不同曲線：

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

曲線 / 插值器

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

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

圖為 Android 插值器

自定義曲線

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

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

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

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

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

交互與動(dòng)效

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

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

動(dòng)畫與動(dòng)效

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

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

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

項(xiàng)目中的動(dòng)效

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

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

在實(shí)現(xiàn)這類動(dòng)效的時(shí)候：

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

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

作者：顧小犢

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

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