移動(dòng)端網(wǎng)頁動(dòng)畫設(shè)計(jì)的原則

時(shí)間：2022-05-28 11:18:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-28 11:18:01 來源：網(wǎng)絡(luò)營銷

在移動(dòng)設(shè)備用戶體驗(yàn)設(shè)計(jì)領(lǐng)域，微妙精致的動(dòng)畫已成為非常重要的設(shè)計(jì)元素，為任何對象添加動(dòng)畫并不簡單，需要觀察研究在真實(shí)世界中物體是如何在時(shí)空中運(yùn)動(dòng)的，需要設(shè)計(jì)者關(guān)注細(xì)節(jié)，并且具有耐心。

適當(dāng)?shù)膭?dòng)畫能夠提供清晰的信息和直觀有趣的體驗(yàn)，而過多的動(dòng)畫則容易造成糟糕的用戶體驗(yàn)，那么，移動(dòng)設(shè)備上的動(dòng)畫應(yīng)該如何來設(shè)計(jì)呢？

1、擠壓變形

擠壓裝滿水的氣球后形變，這能展示其具有較強(qiáng)的彈性，如下圖所示：

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

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


Flipboard剛毅效果的動(dòng)畫來切換界面


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

2、預(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)元素的使用方法，現(xiàn)在很多移動(dòng)應(yīng)用的打開動(dòng)畫都是很好的預(yù)備動(dòng)作案例。


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


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

3、狀態(tài)

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

描述狀態(tài)能更清晰的表達(dá)動(dòng)畫的中心思想，在移動(dòng)體驗(yàn)設(shè)計(jì)中，狀態(tài)原則主要涉及到屏幕的切換，和用戶界面的交互過程（具體可查看億企邦《移動(dòng)場景下不同類型的圖像處理應(yīng)用設(shè)計(jì)》的相關(guān)介紹）。

通過界面中的顏色、亮度、組成元素和動(dòng)畫來引導(dǎo)用戶合理分配注意力，可以創(chuàng)造非常流暢的移動(dòng)體驗(yàn)，并且可以增強(qiáng)應(yīng)用的易用性。

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

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

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

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

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

5、順勢和疊加

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

想像一只小狗左右搖頭，它臉上松弛的肉也會(huì)隨著頭一起晃動(dòng)，這就是動(dòng)作的順勢和疊加。很少有動(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ì)更真實(shí)形象。

移動(dòng)端的界面元素可以協(xié)同形成一個(gè)整體、疊加的動(dòng)畫效果，這些動(dòng)畫可以幫助用戶理解界面元素和操作方法。

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

6、緩慢出現(xiàn)和結(jié)束

在動(dòng)畫的首尾增加更多的幀可以創(chuàng)造出更真實(shí)的效果：

無論是汽車還是短跑運(yùn)動(dòng)員，幾乎所有的動(dòng)作都需要一定時(shí)間來加速或者減速停止，這是客觀規(guī)律，動(dòng)畫設(shè)計(jì)中經(jīng)常會(huì)在動(dòng)作的首尾，相對運(yùn)動(dòng)過程中，增加更多的畫面幀。在移動(dòng)體驗(yàn)設(shè)計(jì)領(lǐng)域，將緩慢進(jìn)出的原則運(yùn)用于滾動(dòng)數(shù)據(jù)列表等微妙的動(dòng)畫時(shí)，都能很好更真實(shí)的用戶體驗(yàn)。

在移動(dòng)界面上滾動(dòng)列表運(yùn)用了緩進(jìn)緩出原則，在動(dòng)畫收尾增加更多的畫面幀，使其更符合真實(shí)規(guī)律（具體可查看億企邦《基于滑動(dòng)維度的交互設(shè)計(jì)變化》的相關(guān)介紹）。

7、運(yùn)動(dòng)路徑

大多數(shù)時(shí)候物體的運(yùn)動(dòng)軌跡是不可見的，但是在特殊的情況下可以看到，如點(diǎn)燃的煙火可以根據(jù)火花來看到其運(yùn)動(dòng)的軌跡。

大多數(shù)物體的運(yùn)動(dòng)不是隨機(jī)的，而是根據(jù)可預(yù)知的路徑運(yùn)動(dòng)，但是通常情況下物體運(yùn)動(dòng)的軌跡是不可見的，不過一般具有一定模式。

例如機(jī)械性的物體，如火車、汽車，運(yùn)動(dòng)軌跡一般是直線的，而有機(jī)物體，如植物、動(dòng)物和人，更趨向于曲線運(yùn)動(dòng)。

移動(dòng)端的設(shè)計(jì)，需要考慮界面元素是按照機(jī)械物體還是有機(jī)物體的規(guī)律運(yùn)動(dòng)。

例如：Android平臺(tái)的界面元素趨向于使用直線型的軌跡來運(yùn)動(dòng)，使界面更有科技的感覺：

8、次動(dòng)作

主要?jiǎng)幼魇撬墒蟮纳眢w和腳，松鼠尾巴的運(yùn)動(dòng)則是次運(yùn)動(dòng)，這兩個(gè)動(dòng)作一同使得整個(gè)動(dòng)作更加真實(shí)。

想象這個(gè)畫面：一只松鼠跑過陽臺(tái)跳到一棵樹上，松鼠腳上的動(dòng)作可以表現(xiàn)出它輕盈敏捷的特點(diǎn)，它的尾巴則可以通過有區(qū)分的運(yùn)動(dòng)方式來支持奔跑和跳躍的主要?jiǎng)幼?，不過次要?jiǎng)幼髦饕菫榱酥С衷鰪?qiáng)主動(dòng)作而非分散了用戶的注意力。


兩個(gè)應(yīng)用界面切換時(shí)的動(dòng)畫很好的運(yùn)用了次動(dòng)作這一原則

Iphone上的郵箱應(yīng)用就使用了次動(dòng)作原則，在郵箱郵件中點(diǎn)擊鏈接將打開瀏覽器窗口，這時(shí)瀏覽器界面的出現(xiàn)是主要?jiǎng)幼?，而郵箱應(yīng)用退后變?yōu)楸尘笆谴蝿?dòng)作，次動(dòng)作很好的增強(qiáng)了主動(dòng)作的體驗(yàn)，又不會(huì)喧賓奪主。

9、速度

在奔跑時(shí)不同的速度能很好的表現(xiàn)角色身體特征（體重，身高和動(dòng)作幅度）和他的情緒。

當(dāng)動(dòng)畫中，對象或角色運(yùn)動(dòng)的速度太慢或太快都會(huì)引起人們的反感，也就是說動(dòng)畫的速度是非常重要的，在動(dòng)畫設(shè)計(jì)中，速度經(jīng)常涉及到組成一個(gè)動(dòng)作的畫面幀數(shù)目，速度是一項(xiàng)非常重要的技術(shù)，它能夠使物體看起來更符合客觀規(guī)律，并且通過速度還可以表達(dá)角色的情緒狀態(tài)和性格特征。

例如：Ipad照片應(yīng)用使用了類似撲克快速洗牌的效果，這可以突出輕量、浮力和超現(xiàn)實(shí)的速度等感覺。

不管是列表的滾動(dòng)還是不同界面的切換，速度原則都是一項(xiàng)非常微妙而重要的技術(shù)，在實(shí)際的設(shè)計(jì)中，動(dòng)畫的速度需要不斷的嘗試和試錯(cuò)，來驗(yàn)證速度的體驗(yàn)感。

10、夸張

加拿大的動(dòng)畫設(shè)計(jì)師John Kricfalusi在他的動(dòng)畫片《Ren和Stimpy》中使用了大量的夸張手法。

動(dòng)畫中的夸張能帶來很多樂趣，并且也可以使對象更形象生動(dòng)，一個(gè)沒有進(jìn)行夸張?zhí)幚淼膭?dòng)畫可能看起來比較準(zhǔn)確，但是容易讓人感到乏味和缺乏人情味，在設(shè)計(jì)中運(yùn)用這一原則來改變物體的形狀、大小，能夠增強(qiáng)運(yùn)動(dòng)的視覺感受和戲劇性。

不過夸張也并不意味著完全失真，Disney對夸張的定義：以有想象力的形式展示真實(shí)性的內(nèi)容。在設(shè)計(jì)移動(dòng)體驗(yàn)時(shí)需要一定克制的使用夸張手法，界面上的夸張?jiān)貞?yīng)該相互協(xié)調(diào)，避免給用戶造成困惑和干擾。

主界面與應(yīng)用程序打開界面的切換動(dòng)作是進(jìn)行了一定的夸張，這使得打開應(yīng)用程序時(shí)更有趣和彈性，有點(diǎn)像蹦床。

11、豐滿的形象和個(gè)性

豐滿的形象強(qiáng)調(diào)三維形態(tài)、精準(zhǔn)感和動(dòng)畫的重量感、均衡感和光影感。

這條原則主要是真的動(dòng)畫角色的設(shè)計(jì)提出來的，通過重量、體積感、平衡、光影等手段創(chuàng)造一個(gè)具有三維感覺的動(dòng)畫角色，并且應(yīng)該使角色具有個(gè)性魅力，這兩條原則與移動(dòng)體驗(yàn)的設(shè)計(jì)關(guān)系并不密切，角色的吸引力就想現(xiàn)場演員一樣所具有的個(gè)人魅力。

12、實(shí)際的設(shè)計(jì)過程中應(yīng)該如何來做？

以上的原則對于移動(dòng)端的動(dòng)畫設(shè)計(jì)非常有幫助，那么在實(shí)際的設(shè)計(jì)過程中應(yīng)該如何來做呢？

第一步需要意識(shí)到動(dòng)畫元素是一個(gè)非常有用的設(shè)計(jì)元素；第二步是將動(dòng)畫的設(shè)計(jì)整合進(jìn)整個(gè)設(shè)計(jì)過程，包括草圖階段、線框圖階段和原型階段。

（1）、草圖階段

在草圖階段就應(yīng)該考慮應(yīng)該使用怎樣的動(dòng)作運(yùn)用于界面元素，從而突出應(yīng)用的個(gè)性和感覺，例如通過界面元素的狀態(tài)改變，或者不同界面的切換方式來營造不一樣的體驗(yàn)效果，這些都可以在草圖階段通過手繪形式來進(jìn)行思考和設(shè)計(jì)。


在Itunes中閱讀詳細(xì)信息的動(dòng)畫設(shè)計(jì)草圖

（2）、線框圖階段

線框圖經(jīng)常用來表示界面的流程，在該階段應(yīng)該整合動(dòng)畫的設(shè)計(jì)，在線框圖問卷中使用簡單的動(dòng)畫來與開發(fā)工程是和老板溝通設(shè)計(jì)構(gòu)思和想法。


線框圖中的動(dòng)畫設(shè)計(jì)主要采用圖片和插圖的形式

（3）、原型階段

草圖和線框圖是設(shè)計(jì)的第一步，高保真的設(shè)計(jì)原型能有更好的溝通效果和說服力，你可也通過使用原型工具來展示方案中動(dòng)畫的效果，例如使用Keynote和PPT來制作動(dòng)畫，這些動(dòng)畫可以幫助你和團(tuán)隊(duì)驗(yàn)證設(shè)計(jì)方案的可行性。

使用Keynote來制作的高保真原型，可以讓你測試用戶與界面的交互行為，探討方案的可行性。

不過在實(shí)際的移動(dòng)體驗(yàn)設(shè)計(jì)項(xiàng)目中，動(dòng)畫的使用也有一定的原則：

（1）、克制

過多的動(dòng)畫會(huì)讓人感到煩躁不安，會(huì)破壞產(chǎn)品的體驗(yàn)，需要有節(jié)制的使用動(dòng)畫元素，并且使用微妙精致的動(dòng)畫效果來營造良好的體驗(yàn)氛圍。

（2）、互補(bǔ)原則

動(dòng)畫設(shè)計(jì)原則的使用很少是鼓勵(lì)存在的，因此需要巧妙的結(jié)合不同的設(shè)計(jì)原則來設(shè)計(jì)優(yōu)秀的動(dòng)畫效果。

（3）、動(dòng)畫是為了支持角色

電影中的動(dòng)畫都是為了支持劇情和角色，同樣在移動(dòng)端動(dòng)畫也屬于輔助性的設(shè)計(jì)元素，不應(yīng)該喧賓奪主，并且不能讓用戶因?yàn)閯?dòng)畫而產(chǎn)生迷惑感。

億企邦點(diǎn)評(píng)：

設(shè)計(jì)人員在進(jìn)行移動(dòng)端網(wǎng)頁動(dòng)畫設(shè)計(jì)中，也應(yīng)該要做好事前的前期策劃，比如了解網(wǎng)頁的動(dòng)態(tài)特點(diǎn)，了解產(chǎn)品的特點(diǎn)，了解企業(yè)和公司的文化，在此基礎(chǔ)上才能夠進(jìn)行移動(dòng)端網(wǎng)頁動(dòng)畫的設(shè)計(jì)流程。