在手機設(shè)備用戶體驗設(shè)計領(lǐng)域，微妙精致的動畫已成為非常重要的設(shè)計元素，為任何對象添加動畫并不簡單，需要觀察研究在真實世界中物體是如何在時空中運動的，需要設(shè)計者關(guān)注細(xì)節(jié)，并且具有耐心。
適當(dāng)?shù)膭赢嬆軌蛱峁┣逦男畔⒑椭庇^有趣的體驗，而過多的動畫則容易造成糟糕的用戶體驗，那么，手機設(shè)備上的動畫應(yīng)該如何來設(shè)計呢？
1、擠壓變形
擠壓裝滿水的氣球后形變，這能展示其具有較強的彈性，如下圖所示：
物體都存在質(zhì)量，物體運動時的變形狀態(tài)能反映其自身的剛性和彈性程度，例如書架椅子這類物體就具有較強的剛性，而衣服、樹葉則具有更好的彈性。
在手機體驗中，利用擠壓變形原則能夠喚起用戶的主觀記憶，如果你想表達應(yīng)用剛毅的效果，你就可以使用剛性的界面和圖形，以及更加精準(zhǔn)的動畫，如果想要喚起用戶對有機物的記憶，則可以使用柔軟易變的界面，以及更加優(yōu)雅柔和的動畫。
Flipboard剛毅效果的動畫來切換界面
Ibook使用更復(fù)雜、更柔和的翻頁效果來模仿真實閱讀的體驗
2、預(yù)備動作
設(shè)計物體的運動都需要考慮這三個階段：動作發(fā)生前的預(yù)備動作，動作本身，動作的結(jié)果。預(yù)備動作可以為即將發(fā)生什么動作提供線索和信息，例如棒球運動員扔球前的甩臂運動，彈簧的反沖動作等等。
在手機設(shè)備的用戶體驗設(shè)計中，預(yù)備動作還可以暗示用戶應(yīng)用內(nèi)元素的使用方法，現(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)原則主要涉及到屏幕的切換，和用戶界面的交互過程（具體可查看鄭州seo公司老秦博客《手機場景下不同類型的圖像處理應(yīng)用設(shè)計》的相關(guān)介紹）。
通過界面中的顏色、亮度、組成元素和動畫來引導(dǎo)用戶合理分配注意力，可以創(chuàng)造非常流暢的手機體驗，并且可以增強應(yīng)用的易用性。
4、連貫與關(guān)鍵幀
為了捕捉快速而特殊的動作，經(jīng)常需要從頭至尾的繪制每一幀畫面，這就是連貫原則，而關(guān)鍵幀技術(shù)則是繪制動作中關(guān)鍵點的畫面，并采用補間來展示動畫，手機端的動畫設(shè)計大多采用關(guān)鍵幀技術(shù)來實現(xiàn)，這種技術(shù)比較簡單，適用于展現(xiàn)簡單的動作，而對于復(fù)雜特殊的動作，則可能需要使用繪制每一幀的連貫技術(shù)了。
上面那幅圖片采用了連貫技術(shù)，即使用了每一幀畫面來表現(xiàn)動作，而下面那幅則使用了三個關(guān)鍵幀來展示動畫。
由于游戲動作更復(fù)雜，水果忍者ipad版則采用了從頭至尾的技術(shù)來渲染動作：
植物大戰(zhàn)僵尸Ipad版就采用了關(guān)鍵幀技術(shù)：
5、順勢和疊加
順勢可以描述物體運動時，不同部分以各異的速度運動（如小狗搖頭時耳朵、下巴的擺動速度不一致）。
想像一只小狗左右搖頭，它臉上松弛的肉也會隨著頭一起晃動，這就是動作的順勢和疊加。很少有動作是突然發(fā)生又突然停止的，一般都是逐漸停止，在物體的其他部分已經(jīng)停止運動時，某些部分還在繼續(xù)運動，而且物體的不同部分運動時的速度、動作都可能是不一樣的，只有考慮到這些細(xì)微的差異動畫看起來才會更真實形象。
手機端的界面元素可以協(xié)同形成一個整體、疊加的動畫效果，這些動畫可以幫助用戶理解界面元素和操作方法。
WP上的色塊Icon的運動使用了動作疊加的設(shè)計原則，色塊并不是單獨運動，而是色塊組以不同的速度重疊運動。
6、緩慢出現(xiàn)和結(jié)束
在動畫的壹 尾增加更多的幀可以創(chuàng)造出更真實的效果：
無論是汽車還是短跑運動員，幾乎擁有 的動作都需要一定時間來加速或者減速停止，這是客觀規(guī)律，動畫設(shè)計中經(jīng)常會在動作的壹 尾，相對運動過程中，增加更多的畫面幀。在手機體驗設(shè)計領(lǐng)域，將緩慢進出的原則運用于滾動數(shù)據(jù)列表等微妙的動畫時，都能很好更真實的用戶體驗。
在手機界面上滾動列表運用了緩進緩出原則，在動畫收尾增加更多的畫面幀，使其更符合真實規(guī)律（具體可查看鄭州seo公司老秦博客《基于滑動維度的交互設(shè)計變化》的相關(guān)介紹）。
7、運動路徑
大多數(shù)時候物體的運動軌跡是不可見的，但是在特殊的情況下可以看到，如點燃的煙火可以根據(jù)火花來看到其運動的軌跡。
大多數(shù)物體的運動不是隨機的，而是根據(jù)可預(yù)知的路徑運動，但是通常情況下物體運動的軌跡是不可見的，不過一般具有一定模式。
例如機械性的物體，如火車、汽車，運動軌跡一般是直線的，而有機物體，如植物、動物和人，更趨向于曲線運動。
手機端的設(shè)計，需要考慮界面元素是按照機械物體還是有機物體的規(guī)律運動。
例如：Android平臺的界面元素趨向于使用直線型的軌跡來運動，使界面更有科技的感覺：
8、次動作
主要動作是松鼠的身體和腳，松鼠尾巴的運動則是次運動，這兩個動作一同使得整個動作更加真實。
想象這個畫面：一只松鼠跑過陽臺跳到一棵樹上，松鼠腳上的動作可以表現(xiàn)出它輕盈敏捷的特點，它的尾巴則可以通過有區(qū)分的運動方式來支持奔跑和跳躍的主要動作，不過次要動作主要是為了支持增強主動作而非分散了用戶的注意力。
兩個應(yīng)用界面切換時的動畫很好的運用了次動作這一原則
Iphone上的郵箱應(yīng)用就使用了次動作原則，在郵箱郵件中點擊鏈接將打開瀏覽器窗口，這時瀏覽器界面的出現(xiàn)是主要動作，而郵箱應(yīng)用退后變?yōu)楸尘笆谴蝿幼?，次動作很好的增強了主動作的體驗，又不會喧賓奪主。
9、速度
在奔跑時不同的速度能很好的表現(xiàn)角色身體特征（體重，身高和動作幅度）和他的情緒。
當(dāng)動畫中，對象或角色運動的速度太慢或太快都會引起人們的反感，也就是說動畫的速度是非常重要的，在動畫設(shè)計中，速度經(jīng)常涉及到組成一個動作的畫面幀數(shù)目，速度是一項非常重要的技術(shù)，它能夠使物體看起來更符合客觀規(guī)律，并且通過速度還可以表達角色的情緒狀態(tài)和性格特征。
例如：Ipad照片應(yīng)用使用了類似撲克快速洗牌的效果，這可以突出輕量、浮力和超現(xiàn)實的速度等感覺。
不管是列表的滾動還是不同界面的切換，速度原則都是一項非常微妙而重要的技術(shù)，在實際的設(shè)計中，動畫的速度需要不斷的嘗試和試錯，來驗證速度的體驗感。
10、夸張
加拿大的動畫設(shè)計師John Kricfalusi在他的動畫片《Ren和Stimpy》中使用了大量的夸張手法。
動畫中的夸張能帶來很多樂趣，并且也可以使對象更形象生動，一個沒有進行夸張?zhí)幚淼膭赢嬁赡芸雌饋肀容^準(zhǔn)確，但是容易讓人感到乏味和缺乏人情味，在設(shè)計中運用這一原則來改變物體的形狀、大小，能夠增強運動的視覺感受和戲劇性。
不過夸張也并不意味著完全失真，Disney對夸張的定義：以有想象力的形式展示真實性的內(nèi)容。在設(shè)計手機體驗時需要一定克制的使用夸張手法，界面上的夸張元素應(yīng)該相互協(xié)調(diào)，避免給用戶造成困惑和干擾。
主界面與應(yīng)用程序打開界面的切換動作是進行了一定的夸張，這使得打開應(yīng)用程序時更有趣和彈性，有點像蹦床。
11、豐滿的形象和個性
豐滿的形象強調(diào)三維形態(tài)、精準(zhǔn)感和動畫的重量感、均衡感和光影感。
這條原則主要是真的動畫角色的設(shè)計提出來的，通過重量、體積感、平衡、光影等手段創(chuàng)造一個具有三維感覺的動畫角色，并且應(yīng)該使角色具有個性魅力，這兩條原則與手機體驗的設(shè)計關(guān)系并不密切，角色的吸引力就想現(xiàn)場演員一樣所具有的個人魅力。
12、實際的設(shè)計過程中應(yīng)該如何來做？
以上的原則對于手機端的動畫設(shè)計非常有幫助，那么在實際的設(shè)計過程中應(yīng)該如何來做呢？
步需要意識到動畫元素是一個非常有用的設(shè)計元素；第二步是將動畫的設(shè)計整合進整個設(shè)計過程，包括草圖階段、線框圖階段和原型階段。
（1）、草圖階段
在草圖階段就應(yīng)該考慮應(yīng)該使用怎樣的動作運用于界面元素，從而突出應(yīng)用的個性和感覺，例如通過界面元素的狀態(tài)改變，或者不同界面的切換方式來營造不一樣的體驗效果，這些都可以在草圖階段通過手繪形式來進行思考和設(shè)計。
在Itunes中閱讀詳細(xì)信息的動畫設(shè)計草圖
（2）、線框圖階段
線框圖經(jīng)常用來表示界面的流程，在該階段應(yīng)該整合動畫的設(shè)計，在線框圖問卷中使用簡單的動畫來與開發(fā)工程是和老板溝通設(shè)計構(gòu)思和想法。
線框圖中的動畫設(shè)計主要采用圖片和插圖的形式
（3）、原型階段
草圖和線框圖是設(shè)計的 步，高保真的設(shè)計原型能有更好的溝通效果和說服力，你可也通過使用原型工具來展示方案中動畫的效果，例如使用Keynote和PPT來制作動畫，這些動畫可以幫助你和團隊驗證設(shè)計方案的可行性。
使用Keynote來制作的高保真原型，可以讓你測試用戶與界面的交互行為，探討方案的可行性。
不過在實際的手機體驗設(shè)計項目中，動畫的使用也有一定的原則：
（1）、克制
過多的動畫會讓人感到煩躁不安，會破壞產(chǎn)品的體驗，需要有節(jié)制的使用動畫元素，并且使用微妙精致的動畫效果來營造良好的體驗氛圍。
（2）、互補原則
動畫設(shè)計原則的使用很少是鼓勵存在的，因此需要巧妙的結(jié)合不同的設(shè)計原則來設(shè)計專業(yè) 的動畫效果。
（3）、動畫是為了支持角色
電影中的動畫都是為了支持劇情和角色，同樣在手機端動畫也屬于輔助性的設(shè)計元素，不應(yīng)該喧賓奪主，并且不能讓用戶因為動畫而產(chǎn)生迷惑感。
鄭州seo公司老秦博客點評：
設(shè)計人員在進行手機端網(wǎng)頁動畫設(shè)計中，也應(yīng)該要做好事前的前期策劃，比如了解網(wǎng)頁的動態(tài)特點，了解產(chǎn)品的特點，了解企業(yè)和公司的文化，在此基礎(chǔ)上才能夠進行手機端網(wǎng)頁動畫的設(shè)計流程。
版權(quán)聲明：本站部分文章，由 鄭州路普科技整理發(fā)表(信息來自互聯(lián)網(wǎng),不代表本站觀點)，如有冒犯請聯(lián)系我們
