在移動設(shè)備用戶體驗設(shè)計領(lǐng)域，微妙精致的動畫已成為非常重要的設(shè)計元素。為任何對象添加動畫并不簡單，需要觀察研究在真實世界中物體是如何在時空中運動的，需要設(shè)計者關(guān)注細節(jié)，并且具有耐心。適當(dāng)?shù)膭赢嬆軌蛱峁┣逦�的信息和直觀有趣的體驗，而過多的動畫則容易造成糟糕的用戶體驗。那么移動設(shè)備上的動畫應(yīng)該如何來設(shè)計呢？Johnston 和Thomas在他們1981年出版的《The Illusion of Life： Disney Animation》一書中總結(jié)了12個動畫設(shè)計原則，雖然當(dāng)初主要是針對電影和電視領(lǐng)域而提出的，但是這些原則同樣也適用于小屏移動設(shè)備上的動畫設(shè)計。

由迪士尼公司Frank Thomas 和 Ollie Johnston寫的《生命的幻覺》                                           

1. 擠壓變形

擠壓裝滿水的氣球后形變，這能展示其具有較強的彈性 

物體都存在質(zhì)量，物體運動時的變形狀態(tài)能反映其自身的剛性和彈性程度。例如書架椅子這類物體就具有較強的剛性，而衣服、樹葉則具有更好的彈性。

在移動體驗中，利用擠壓變形原則能夠喚起用戶的主觀記憶。如果你想表達應(yīng)用剛毅的效果，你就可以使用剛性的界面和圖形，以及更加精準(zhǔn)的動畫，如果想要喚起用戶對有機物的記憶，則可以使用柔軟易變的界面，以及更加優(yōu)雅柔和的動畫。

Flipboard剛毅效果的動畫來切換界面

Ibook使用更復(fù)雜、更柔和的翻頁效果來模仿真實閱讀的體驗

2. 預(yù)備動作

投擲保齡球前的甩臂就是一個預(yù)備動作

設(shè)計物體的運動都需要考慮這三個階段：動作發(fā)生前的預(yù)備動作，動作本身，動作的結(jié)果。預(yù)備動作可以為即將發(fā)生什么動作提供線索和信息，例如棒球運動員扔球前的甩臂運動，彈簧的反沖動作等等。在移動設(shè)備的用戶體驗設(shè)計中，預(yù)備動作還可以暗示用戶應(yīng)用內(nèi)元素的使用方法�，F(xiàn)在很多移動應(yīng)用的打開動畫都是很好的預(yù)備動作案例。

打開照相應(yīng)用時的動畫運用了預(yù)備原則

WP系統(tǒng)主界面底部展示的少量色塊圖標(biāo)暗示了向上滑動的手勢操作

3. 狀態(tài)

右側(cè)圖片具有很好的狀態(tài)釋義性，清楚的表現(xiàn)了兩個角色的對話狀態(tài);左側(cè)的圖片并沒有很好的解釋這兩個角色的心理狀態(tài) 

描述狀態(tài)能更清晰的表達動畫的中心思想。在移動體驗設(shè)計中，狀態(tài)原則主要涉及到屏幕的切換，和用戶界面的交互過程。通過界面中的顏色、亮度、組成元素和動畫來引導(dǎo)用戶合理分配注意力，可以創(chuàng)造非常流暢的移動體驗，并且可以增強應(yīng)用的易用性。

Keynote運用狀態(tài)原則使得用戶能很好的理解正在處理的文件 

4. 連貫與關(guān)鍵幀

上面那幅圖片采用了連貫技術(shù)，即使用了每一幀畫面來表現(xiàn)動作，而下面那幅則使用了三個關(guān)鍵幀來展示動畫 

為了捕捉快速而特殊的動作，經(jīng)常需要從頭至尾的繪制每一幀畫面，這就是連貫原則。而關(guān)鍵幀技術(shù)則是繪制動作中關(guān)鍵點的畫面，并采用補間來展示動畫。移動端的動畫設(shè)計大多采用關(guān)鍵幀技術(shù)來實現(xiàn)，這種技術(shù)比較簡單，適用于展現(xiàn)簡單的動作，而對于復(fù)雜特殊的動作，則可能需要使用繪制每一幀的連貫技術(shù)了。

由于游戲動作更復(fù)雜，水果忍者ipad版則采用了從頭至尾的技術(shù)來渲染動作

植物大戰(zhàn)僵尸Ipad版就采用了關(guān)鍵幀技術(shù)

5. 順勢和疊加

順勢可以描述物體運動時，不同部分以各異的速度運動（如小狗搖頭時耳朵、下巴的擺動速度不一致）

想像一只小狗左右搖頭，它臉上松弛的肉也會隨著頭一起晃動。這就是動作的順勢和疊加。很少有動作是突然發(fā)生又突然停止的，一般都是逐漸停止，在物體的其他部分已經(jīng)停止運動時，某些部分還在繼續(xù)運動。而且物體的不同部分運動時的速度、動作都可能是不一樣的，只有考慮到這些細微的差異動畫看起來才會更真實形象。移動端的界面元素可以協(xié)同形成一個整體、疊加的動畫效果，這些動畫可以幫助用戶理解界面元素和操作方法。

WP上的色塊Icon的運動使用了動作疊加的設(shè)計原則。色塊并不是單獨運動，而是色塊組以不同的速度重疊運動。

標(biāo)簽： 移動端動畫設(shè)計 移動端 動畫設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。