移動(dòng)端動(dòng)畫(huà)設(shè)計(jì)的五條原理

　　在移動(dòng)設(shè)備用戶體驗(yàn)設(shè)計(jì)領(lǐng)域，微妙精致的動(dòng)畫(huà)已成為非常重要的設(shè)計(jì)元素。當(dāng)?shù)膭?dòng)畫(huà)能夠提供清晰的信息和直觀有趣的體驗(yàn)，而過(guò)多的動(dòng)畫(huà)則容易造成糟糕的用戶體驗(yàn)。那么移動(dòng)端的動(dòng)畫(huà)該如何設(shè)計(jì)呢?

　　一、 擠壓變形

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

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

　　二、預(yù)備動(dòng)作

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

　　三、狀態(tài)

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

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

　　四、連貫與關(guān)鍵幀

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

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

　　五、順勢(shì)和疊加

　　順勢(shì)可以描述物體運(yùn)動(dòng)時(shí)，不同部分以各異的速度運(yùn)動(dòng)(如小狗搖頭時(shí)耳朵、下巴的擺動(dòng)速度不一致)

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

【移動(dòng)端動(dòng)畫(huà)設(shè)計(jì)的原理】相關(guān)文章：

站長(zhǎng)如何從PC端向移動(dòng)端轉(zhuǎn)化07-01

商業(yè)廣告動(dòng)畫(huà)設(shè)計(jì)原理07-30

移動(dòng)端網(wǎng)絡(luò)營(yíng)銷(xiāo)方法08-02

2017移動(dòng)端網(wǎng)站解決方案08-18

淘寶移動(dòng)端頁(yè)面去設(shè)計(jì)問(wèn)題09-14

新手如何做移動(dòng)端SEO網(wǎng)站優(yōu)化11-01

傳統(tǒng)動(dòng)畫(huà)設(shè)計(jì)與Flash動(dòng)畫(huà)設(shè)計(jì)的區(qū)別09-28

傳統(tǒng)動(dòng)畫(huà)設(shè)計(jì)與Flash動(dòng)畫(huà)設(shè)計(jì)的比較11-06

Flash動(dòng)畫(huà)設(shè)計(jì)09-06

Flash動(dòng)畫(huà)設(shè)計(jì)與傳統(tǒng)動(dòng)畫(huà)設(shè)計(jì)有什么區(qū)別09-29