移動界面的動效設計
用戶體驗設計中動效的作用正變得越來越重要,那么動效能帶來好處呢?
- 體現交互層級
動態界面使人更容易理解交互層級關系,減輕了人們的認知負擔 - 給予反饋
給人感覺界面是活的,讓體驗流暢 - 彌補靜態頁面的表達不足
在內容優先的設計趨勢下,用戶界面變的更加簡潔。這將給用戶帶來操作上的盲目感;動效則可以在不打破界面美感的前提下,彌補認知的損失
原則
設計是為了解決問題,動效設計作為設計的手段之一,能解決一些靜態界面設計無法解決的問題。但是,它并不是萬能的,動效要克制,過多、過慢或不適合的動效,只能讓界面失去重點,讓團隊和用戶怨聲載道。
在實際項目中應用的動效,只有精準地對齊需求,才能使動效帶來真正應有的價值。那么,如何評估一個動效是否有價值呢?
1. 動效是否必要
2. 動效是否帶來體驗提升
3. 動效開發的成本是否過高
如果都沒有問題,送給工程師一個飛吻吧。
動效工具
- Adobe After Effect
視頻特效軟件,被普遍使用的動效和 MG 制作軟件,功能強大,和其他 Adobe 軟件無縫配合,可做的效果也是不限量的。 - Apple 的可視化編程軟件,搭配 非死book 的 Origami 可以非常好的模擬機器效果,做單頁面的動效可以用它,Origami 還可以導出直接可實施的代碼。
- Hype 3
可交互的 Demo ,雖然是 HTML5 制作工具,但是做動效也算是一只[好貓]吧。
其他的還有原型工具 Framer、Pixate、Form 等和 QuartzCode、PaintCode 也都可以用來做動效。具體工作時候可以選用適合的來做,目前還沒有一站式解決的軟件出現。
數值化動效
只談制作動效,不談實現都是耍流氓,動效設計師同樣需要為動效標注。
常規的值包括:
- 屬性
移動距離 旋轉角度 - 時間
運動持續時間 延遲出現時間 重復時間 - 曲線
Android 插值器曲線
iOS 運動曲線
自定義曲線
動效標注模版,包括常用動作、曲線、表格。 Sketch 格式, Sketch 的快速、矢量特性也非常適合進行動效標注
動效標注技巧
有些運動需要分解成多種值標注。比如 Material Design 里面的「重力運動」
設計師的思維是 Position 到 Position 的弧線運動,但實現時并沒有運動軌跡的開發方式。
那么如何表述這個運動軌跡呢?
兩種方法
- 時間錯位:
延遲單個值的時間( 真實運動曲線為 綠色虛線 略有夸張)
- 不同曲線
兩個值持續時間相同,但應用的曲線不同
曲線 / 插值器
剛才提到了曲線是什么呢?
在 Android 系統 內,調用系統內置曲線插值器,改變動畫的播放速率,可以實現大部分動態速率的效果。
圖為 Android 插值器
自定義曲線
插值器默認的速率無法完全符合需求時,還需要給它進行數值調整。
調整 Factor 的值,就可以快速改變速率:
當然,你也可以嘗試使用自定義的去曲線,將曲線換算成二次貝塞爾曲線,可以直接用于開發。
如下圖,為 cubic-bezier (.82, .25, .29, .78)
Android 和 iOS 都支持二次貝塞爾和三次貝賽爾曲線。
交互與動效
動效和交互聯系很緊密,這也要求動效是先于視覺考慮的。
如上圖,在內容優先的設計中常用的共享元素樣式,從交互層面就需要對動效有一定的規劃,否則會遇到動效很牽強或視覺返工的情況。
動畫與動效
動效不同于動畫,動效常發生在過場或操作之后,有趨向于表現更快的傾向。動畫中看上去恰到好處的運動時間,直接套用在動效中應用會顯得拖沓沉冗效率不高。顯然,簡單粗暴的把動畫中的時間直接應用在動效中,是不合適的。
在 Material Design Motion 中,對動效時間有比較詳細的定義,對各種設備的動畫時間都有推薦,實際應用時還需要考慮元素變化的范圍,給出合適的時間。
雖然 Android 動效已經支持 60fps 的速度,但是在實際應用中,有時運動不夠平滑*確實存在,甚至為了達到理想效果,要同之前標注時間相差很大。這時,可能需要對部分標注時間進行修改,不過我一般會遵循一個原則:盡量保持時間之間的比例,傾向相信模擬中的時間。因為機器的個體差異導致的問題很難被量化。當然,解決這種問題,需要工程師和設計師的通力配合。
項目中的動效
就好像工業設計師需要懂材料、平面設計師需要了解印刷知識,動效設計同樣需要設計師具有「跨專業」的視野。
在 iOS 和 Android 上,系統其實已經幫你完成了不少工作,很多常見的、被經常使用的動效,可能已經有做好的「輪子」,這些「輪子」往往經過多次驗證,效果和性能都說的過去,有些稍加改動就可以滿足項目要求。
在實現這類動效的時候:
除非有信心實現的比已有的好,不然還是直接使用吧
使用已有的「輪子」、將常用基礎動效控件化,減少整個團隊重復工作,提高效率,設計師和工程師也可以把精力用在能讓項目更為出彩的地方。
來自:http://www.ui.cn/detail/130376.html