移動界面動效設計的全面指南知識很實用

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

體現(xiàn)交互層級

動態(tài)界面使人更容易理解交互層級關系，減輕了人們的認知負擔

給予反饋

給人感覺界面是活的，讓體驗流暢

彌補靜態(tài)頁面的表達不足

在內(nèi)容優(yōu)先的設計趨勢下，用戶界面變的更加簡潔。這將給用戶帶來操作上的盲目感;動效則可以在不打破界面美感的前提下，彌補認知的損失

原則

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

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

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

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

動效工具

Adobe After Effect

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

Quartz Composer + Origami Studio

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

Hype 3

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

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

數(shù)值化動效

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

常規(guī)的值包括：

• 屬性：移動距離 旋轉(zhuǎn)角度
• 時間：運動持續(xù)時間 延遲出現(xiàn)時間 重復時間
• 曲線Android：插值器曲線
• iOS：運動曲線

自定義曲線

△ 動效標注模版，包括常用動作、曲線、表格。 Sketch 格式，Sketch 的快速、矢量特性也非常適合進行動效標注

動效標注技巧

有些運動需要分解成多種值標注。比如 Material Design 里面的「重力運動」設計師的思維是 Position 到 Position 的弧線運動，但實現(xiàn)時并沒有運動軌跡的開發(fā)方式。那么如何表述這個運動軌跡呢?

兩種方法

時間錯位

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

不同曲線

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

曲線 / 插值器

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

△ 圖為 Android 插值器

自定義曲線

插值器默認的速率無法完全符合需求時，還需要給它進行數(shù)值調(diào)整。調(diào)整 Factor 的值，就可以快速改變速率：

當然，你也可以嘗試使用自定義的去曲線，將曲線換算成二次貝塞爾曲線，可以直接用于開發(fā)。如下圖，為 cubic-bezier (.82, .25, .29, .78)

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

交互與動效

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

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

動畫與動效

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

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

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

項目中的動效

就好像工業(yè)設計師需要懂材料、平面設計師需要了解印刷知識，動效設計同樣需要設計師具有「跨專業(yè)」的視野。在 iOS 和 Android 上，系統(tǒng)其實已經(jīng)幫你完成了不少工作，很多常見的、被經(jīng)常使用的動效，可能已經(jīng)有做好的「輪子」，這些「輪子」往往經(jīng)過多次驗證，效果和性能都說的過去，有些稍加改動就可以滿足項目要求。

在實現(xiàn)這類動效的時候：除非有信心實現(xiàn)的比已有的好，不然還是直接使用吧。使用已有的「輪子」、將常用基礎動效控件化，減少整個團隊重復工作，提高效率，設計師和工程師也可以把精力用在能讓項目更為出彩的地方。

分享題目：移動界面動效設計的全面指南知識很實用
地址分享：http://muchs.cn/news/166079.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、域名注冊、動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站收錄、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)