資源描述：
《移動界面動效設(shè)計(jì)的全方位科普指南.doc》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。
1、移動界面動效設(shè)計(jì)的全方位科普指南 讀了這篇文章，你可以知道動效的作用、設(shè)計(jì)原則、動效工具、制作方法、標(biāo)注技巧等等，特別全面，強(qiáng)烈推薦收藏學(xué)習(xí)?！ 有г谟脩趔w驗(yàn)設(shè)計(jì)中正變得越來越重要，那么動效能帶來什么好處呢？體現(xiàn)交互層級：動態(tài)界面使人更容易理解交互層級關(guān)系，減輕了人們的認(rèn)知負(fù)擔(dān)給予反饋：給人感覺界面是活的，讓體驗(yàn)流暢彌補(bǔ)靜態(tài)頁面的表達(dá)不足：在內(nèi)容優(yōu)先的設(shè)計(jì)趨勢下，用戶界面變的更加簡潔。這將給用戶帶來操作上的盲目感；動效則可以在不打破界面美感的前提下，彌補(bǔ)認(rèn)知的損失 原則 設(shè)計(jì)是為了解決問題，
2、動效設(shè)計(jì)作為設(shè)計(jì)的手段之一，能解決一些靜態(tài)界面設(shè)計(jì)無法解決的問題。但是，它并不是萬能的，動效要克制，過多、過慢或不適合的動效，只能讓界面失去重點(diǎn)，讓團(tuán)隊(duì)和用戶怨聲載道?！ ≡趯?shí)際項(xiàng)目中應(yīng)用的動效，只有精準(zhǔn)地對齊需求，才能使動效帶來真正應(yīng)有的價值。那么，如何評估一個動效是否有價值呢？動效是否必要動效是否帶來體驗(yàn)提升動效開發(fā)的成本是否過高 如果都沒有問題，送給工程師一個飛吻吧?！ 有Чぞ摺 dobeAfterEffect 視頻特效軟件，被普遍使用的動效和MG制作軟件，功能強(qiáng)大，和其他Adobe軟件無
3、縫配合，可做的效果也是不限量的?！ uartzComposer+OrigamiStudio Apple的可視化編程軟件，搭配Facebook的Origami可以非常好的模擬機(jī)器效果，做單頁面的動效可以用它，Origami還可以導(dǎo)出直接可實(shí)施的代碼?！ ype3 可交互的Demo，雖然是HTML5制作工具，但是做動效也算是一只［好貓］吧。 其他的還有原型工具Framer、Pixate、Form等和QuartzCode、PaintCode也都可以用來做動效。具體工作時候可以選用適合的來做，目前還沒
4、有一站式解決的軟件出現(xiàn)。 數(shù)值化動效 只談制作動效，不談實(shí)現(xiàn)都是耍流氓，動效設(shè)計(jì)師同樣需要為動效標(biāo)注?！ 〕Ｒ?guī)的值包括：屬性：移動距離旋轉(zhuǎn)角度時間：運(yùn)動持續(xù)時間延遲出現(xiàn)時間重復(fù)時間曲線Android：插值器曲線iOS：運(yùn)動曲線自定義曲線 動效標(biāo)注模版，包括常用動作、曲線、表格。Sketch格式，Sketch的快速、矢量特性也非常適合進(jìn)行動效標(biāo)注。 動效標(biāo)注技巧 有些運(yùn)動需要分解成多種值標(biāo)注。比如MaterialDesign里面的「重力運(yùn)動」 設(shè)計(jì)師的思維是Position到Posit
5、ion的弧線運(yùn)動，但實(shí)現(xiàn)時并沒有運(yùn)動軌跡的開發(fā)方式?！ ∧敲慈绾伪硎鲞@個運(yùn)動軌跡呢？ 兩種方法 時間錯位： 延遲單個值的時間（真實(shí)運(yùn)動曲線為綠色虛線略有夸張） 不同曲線： 兩個值持續(xù)時間相同，但應(yīng)用的曲線不同 曲線/插值器 剛才提到了曲線是什么呢？ 在Android系統(tǒng)內(nèi)，調(diào)用系統(tǒng)內(nèi)置曲線插值器，改變動畫的播放速率，可以實(shí)現(xiàn)大部分動態(tài)速率的效果?！ D為Android插值器 自定義曲線 插值器默認(rèn)的速率無法完全符合需求時，還需要給它進(jìn)行數(shù)值調(diào)整?！ ≌{(diào)整Factor的值，
6、就可以快速改變速率： 當(dāng)然，你也可以嘗試使用自定義的去曲線，將曲線換算成二次貝塞爾曲線，可以直接用于開發(fā)?！ ∪缦聢D，為cubic-bezier(.82,.25,.29,.78) Android和iOS都支持二次貝塞爾和三次貝賽爾曲線?！ 〗换ヅc動效 動效和交互聯(lián)系很緊密，這也要求動效是先于視覺考慮的。 如上圖，在內(nèi)容優(yōu)先的設(shè)計(jì)中常用的共享元素樣式，從交互層面就需要對動效有一定的規(guī)劃，否則會遇到動效很牽強(qiáng)或視覺返工的情況?！ 赢嬇c動效 動效不同于動畫，動效常發(fā)生在過場或操作之后，
7、有趨向于表現(xiàn)更快的傾向。動畫中看上去恰到好處的運(yùn)動時間，直接套用在動效中應(yīng)用會顯得拖沓沉冗效率不高。顯然，簡單粗暴的把動畫中的時間直接應(yīng)用在動效中，是不合適的?！ ≡贛aterialDesignMotion中，對動效時間有比較詳細(xì)的定義，對各種設(shè)備的動畫時間都有推薦，實(shí)際應(yīng)用時還需要考慮元素變化的范圍，給出合適的時間?！ ‰m然Android動效已經(jīng)支持60fps的速度，但是在實(shí)際應(yīng)用中，有時運(yùn)動不夠平滑*確實(shí)存在，甚至為了達(dá)到理想效果，要同之前標(biāo)注時間相差很大。這時，可能需要對部分標(biāo)注時間進(jìn)行修改，不過
8、我一般會遵循一個原則：盡量保持時間之間的比例，傾向相信模擬中的時間。因?yàn)闄C(jī)器的個體差異導(dǎo)致的問題很難被量化。當(dāng)然，解決這種問題，需要工程師和設(shè)計(jì)師的通力配合?！ №?xiàng)目中的動效 就好像工業(yè)設(shè)計(jì)師需要懂材料、平面設(shè)計(jì)師需要了解印刷知識，動效設(shè)計(jì)同樣需要設(shè)計(jì)師具有「跨專業(yè)」的視野?！ ≡趇OS和Android上，系統(tǒng)其實(shí)已經(jīng)幫你完成了不少工作，很多常見的、被經(jīng)常使用的動效，可能已經(jīng)有做好的「輪子」，這些「輪子」往往經(jīng)過多次驗(yàn)證，效果和性能都說的
