- 相關推薦
移動端動畫設計的五條原理
在移動設備用戶體驗設計領域，微妙精致的動畫已成為非常重要的設計元素。當?shù)膭赢嬆軌蛱峁┣逦男畔⒑椭庇^有趣的體驗，而過多的動畫則容易造成糟糕的用戶體驗。那么移動端的動畫該如何設計呢?
一、 擠壓變形
物體都存在質量，物體運動時的變形狀態(tài)能反映其自身的剛性和彈性程度。例如書架椅子這類物體就具有較強的剛性，而衣服、樹葉則具有更好的彈性。
在移動體驗中，利用擠壓變形原則能夠喚起用戶的主觀記憶。如果你想表達應用剛毅的效果，你就可以使用剛性的界面和圖形，以及更加精準的動畫，如果想要喚起用戶對有機物的記憶，則可以使用柔軟易變的界面，以及更加優(yōu)雅柔和的動畫。
二、預備動作
設計物體的運動都需要考慮這三個階段：動作發(fā)生前的預備動作，動作本身，動作的結果。預備動作可以為即將發(fā)生什么動作提供線索和信息，例如棒球運動員扔球前的甩臂運動，彈簧的反沖動作等等。在移動設備的用戶體驗設計中，預備動作還可以暗示用戶應用內元素的使用方法�，F(xiàn)在很多移動應用的打開動畫都是很好的預備動作案例。
三、狀態(tài)
右側圖片具有很好的狀態(tài)釋義性，清楚的表現(xiàn)了兩個角色的對話狀態(tài);左側的圖片并沒有很好的解釋這兩個角色的心理狀態(tài)
描述狀態(tài)能更清晰的表達動畫的中心思想。在移動體驗設計中，狀態(tài)原則主要涉及到屏幕的切換，和用戶界面的交互過程。通過界面中的顏色、亮度、組成元素和動畫來引導用戶合理分配注意力，可以創(chuàng)造非常流暢的移動體驗，并且可以增強應用的易用性。
四、連貫與關鍵幀
上面那幅圖片采用了連貫技術，即使用了每一幀畫面來表現(xiàn)動作，而下面那幅則使用了三個關鍵幀來展示動畫
為了捕捉快速而特殊的動作，經常需要從頭至尾的繪制每一幀畫面，這就是連貫原則。而關鍵幀技術則是繪制動作中關鍵點的畫面，并采用補間來展示動畫。移動端的動畫設計大多采用關鍵幀技術來實現(xiàn)，這種技術比較簡單，適用于展現(xiàn)簡單的動作，而對于復雜特殊的動作，則可能需要使用繪制每一幀的連貫技術了。
五、順勢和疊加
順勢可以描述物體運動時，不同部分以各異的速度運動(如小狗搖頭時耳朵、下巴的擺動速度不一致)
想像一只小狗左右搖頭，它臉上松弛的肉也會隨著頭一起晃動。這就是動作的順勢和疊加。很少有動作是突然發(fā)生又突然停止的，一般都是逐漸停止，在物體的其他部分已經停止運動時，某些部分還在繼續(xù)運動。而且物體的不同部分運動時的速度、動作都可能是不一樣的，只有考慮到這些細微的差異動畫看起來才會更真實形象。移動端的界面元素可以協(xié)同形成一個整體、疊加的動畫效果，這些動畫可以幫助用戶理解界面元素和操作方法。
【移動端動畫設計的原理】相關文章：
站長如何從PC端向移動端轉化09-22
商業(yè)廣告動畫設計原理07-24
手機移動端SEO優(yōu)化方法08-07
移動端網(wǎng)絡營銷方法06-24
手機移動端Seo優(yōu)化方案10-31
淘寶移動端頁面去設計問題08-27
2017移動端網(wǎng)站解決方案08-22
新手如何做移動端SEO網(wǎng)站優(yōu)化08-29
傳統(tǒng)動畫設計與Flash動畫設計的比較06-13
動畫設計的美學應用08-25