三、動(dòng)效設(shè)計(jì)的原則
這是一位在五年時(shí)間內(nèi)為四十多個(gè)國(guó)家和上百個(gè)頂尖機(jī)構(gòu)提供咨詢服務(wù)的動(dòng)效設(shè)計(jì)師，總結(jié)出來(lái)的實(shí)用性動(dòng)效設(shè)計(jì)原則，為提升產(chǎn)品體驗(yàn)與可用性提供幫助。
3.1 緩入緩出
時(shí)效事件發(fā)生時(shí)，元素的動(dòng)作應(yīng)顯得自然，與用戶預(yù)期相符。
3.2 偏移與延遲
加入新的界面元素或場(chǎng)景時(shí)，可用于表達(dá)元素之間的關(guān)系。
3.3 父子關(guān)系
當(dāng)界面元素較多時(shí)，可以利用時(shí)空差異創(chuàng)造出可以感知到的父子繼承關(guān)系。
3.4 形變
用連貫的狀態(tài)描繪表達(dá)元素功能的改變。
3.5 值變
當(dāng)元素的值發(fā)生變化時(shí)，用連續(xù)動(dòng)態(tài)的方式表達(dá)前后之間的關(guān)聯(lián)。
3.6 遮罩
如果一個(gè)界面元素的不同的展示方式對(duì)應(yīng)不同的功能，那么讓展示方式的變化過(guò)程具有連續(xù)性。
3.7 覆蓋
用堆疊元素的相對(duì)位置來(lái)描述它們的扁平空間關(guān)系。
3.8 復(fù)制
當(dāng)新的元素從已有元素復(fù)制出來(lái)時(shí)，用連貫的方式描述其關(guān)聯(lián)關(guān)系。
3.9 景深
允許用戶瞥得到非主要元素或場(chǎng)景。
3.10 視差
當(dāng)用戶滾動(dòng)界面時(shí)，在平面創(chuàng)造出空間層次。
3.11 翻轉(zhuǎn)
通過(guò)具有空間架構(gòu)的描述方式來(lái)表現(xiàn)新元素的產(chǎn)生與離場(chǎng)。
3.12 滑動(dòng)變焦
用連續(xù)的空間描述來(lái)引導(dǎo)界面元素和空間。
3.13 動(dòng)效的持續(xù)時(shí)長(zhǎng)和速度
當(dāng)元素的位置和狀態(tài)發(fā)生改變的時(shí)候，動(dòng)效的速度應(yīng)該足夠慢，維持足夠長(zhǎng)的時(shí)間，讓用戶能夠注意到變化，但是同時(shí)，又不能慢到需要用戶去等待。
大量的研究表明，動(dòng)效的*佳持續(xù)時(shí)長(zhǎng)是200毫秒到500毫秒之間。這個(gè)研究數(shù)字是基于人腦的認(rèn)知方式和信息消化速度得出來(lái)的。任何低于100毫秒的動(dòng)效對(duì)于人的眼睛而言，幾乎都是瞬間，很難被識(shí)別出來(lái)。而超過(guò)1秒的動(dòng)效會(huì)讓人有遲滯感。
在手機(jī)這樣的移動(dòng)端設(shè)備上，按照 Material Design 的建議，動(dòng)效時(shí)長(zhǎng)應(yīng)該控制在200~300毫秒之間，在平板電腦上，這個(gè)時(shí)長(zhǎng)應(yīng)該延長(zhǎng)大概30%，也就是說(shuō)，時(shí)長(zhǎng)應(yīng)該在400~450毫秒之間。原因很簡(jiǎn)單，屏幕尺寸越大，元素在發(fā)生位移的時(shí)候，跨越的距離越長(zhǎng)，速度一定的情況下，時(shí)長(zhǎng)自然越長(zhǎng)。相應(yīng)的，在可穿戴設(shè)備的小屏幕上，這個(gè)時(shí)長(zhǎng)應(yīng)該縮短30%，在150~200毫秒之間。
3.14 緩動(dòng)
緩動(dòng)指的是物體在物理規(guī)則下，漸進(jìn)加速或減速的現(xiàn)象。在動(dòng)效中加入緩動(dòng)的效果能夠讓運(yùn)動(dòng)顯得更加自然，這是運(yùn)動(dòng)的基本原則之一。對(duì)于緩動(dòng)，迪士尼的兩位關(guān)鍵性的動(dòng)畫(huà)大師 Ollie Johnston 和 Frank Thomas 在他們的著作《The Illusion of Life: Disney Animation》中有過(guò)非常詳盡的描述。
為了不讓動(dòng)效看起來(lái)機(jī)械或者人工痕跡太明顯，元素的運(yùn)動(dòng)應(yīng)該有漸進(jìn)加速和漸進(jìn)減速的特征，就像物理世界當(dāng)中其他的物體這樣。
勻速直線運(yùn)動(dòng)
不受任何物理力量的影響，勻速直線運(yùn)動(dòng)看起來(lái)是非常不自然的，尤其是對(duì)于人眼而言。
所有用來(lái)設(shè)計(jì)動(dòng)畫(huà)的應(yīng)用都會(huì)使用坐標(biāo)軸和曲線來(lái)闡述動(dòng)效的運(yùn)動(dòng)特征，我將嘗試闡述它們的含義，以及如何使用。坐標(biāo)軸的 X軸是實(shí)現(xiàn)，而 Y軸則表示的唯一，換句話來(lái)說(shuō)，如同我們?cè)诔踔形锢碇兴鶎W(xué)到的，坐標(biāo)軸上的線條描述的是速度和加速度的特征。下面所示的直線，表示速度是均勻的，也就是勻速直線運(yùn)動(dòng)，物體在相同時(shí)間內(nèi)運(yùn)動(dòng)的距離是不變的。
均勻的變化通常只會(huì)用在色彩的改變或者透明的改變上，一般來(lái)說(shuō)，我們也可以讓背景元素均勻運(yùn)動(dòng)，而前景元素保持不變，來(lái)呈現(xiàn)它的狀態(tài)，就像上圖一樣。
緩動(dòng)加速曲線
通過(guò)曲線我們可以看到，物體開(kāi)始時(shí)候的初速度比較低，運(yùn)動(dòng)緩慢，隨后速度逐漸增加，這意味著物體在加速運(yùn)動(dòng)。
當(dāng)物體加速飛出屏幕的時(shí)候，可以使用這種加速曲線，比如界面中被用戶使用滑動(dòng)手勢(shì)甩出去的卡片。但是請(qǐng)記住，只有當(dāng)運(yùn)動(dòng)對(duì)象需要完全離開(kāi)界面的時(shí)候才會(huì)這么使用，如果它還需要再回來(lái)的話，則不行。
動(dòng)畫(huà)曲線有助于正確傳達(dá)訊息，甚至表達(dá)情緒和感覺(jué)。在下面的案例當(dāng)中，我們可以看每個(gè)元素的運(yùn)動(dòng)位移是完全一樣的，所消耗的總時(shí)長(zhǎng)也是一樣的，但是運(yùn)動(dòng)的速率變化是不同的，這一點(diǎn)也體現(xiàn)在曲線上，所表現(xiàn)出來(lái)的情緒也不同。當(dāng)然，通過(guò)調(diào)整曲線，你能夠讓物體的運(yùn)動(dòng)軌跡盡可能接近現(xiàn)實(shí)世界。
緩動(dòng)減速曲線
當(dāng)元素從屏幕外運(yùn)動(dòng)到屏幕內(nèi)的時(shí)候，動(dòng)效應(yīng)該遵循這類(lèi)曲線的運(yùn)動(dòng)特征。從全速進(jìn)入屏幕開(kāi)始，速度降低，直到完全停止。
減速曲線可以適用于多種不同的 UI控件和元素，包括從屏幕外進(jìn)入屏幕內(nèi)的的卡片、條目等。
緩動(dòng)標(biāo)準(zhǔn)曲線
在這種曲線之下，物體從靜止開(kāi)始加速，到達(dá)速度*高點(diǎn)之后開(kāi)始減速直到靜止。這種類(lèi)型的元素在 UI界面中*為常見(jiàn)，每當(dāng)你不知道要在動(dòng)效中使用哪種運(yùn)動(dòng)方式的時(shí)候，可以試試標(biāo)準(zhǔn)曲線。
根據(jù) Material Design 的規(guī)范，*好使用不那么對(duì)稱的增速和減速的過(guò)程，讓動(dòng)效看起來(lái)更加真實(shí)。同時(shí)大家會(huì)更加在意運(yùn)動(dòng)的結(jié)果，曲線的末端，也就是運(yùn)動(dòng)結(jié)束的過(guò)程*好進(jìn)行適當(dāng)?shù)膹?qiáng)調(diào)，換句話說(shuō)就是減速過(guò)程持續(xù)的時(shí)長(zhǎng)*好超過(guò)開(kāi)始加速的時(shí)長(zhǎng)，用戶將會(huì)更加清楚地觀察到運(yùn)動(dòng)的*終結(jié)果，從而更好地明白運(yùn)動(dòng)的終止?fàn)顟B(tài)。
3.15 界面動(dòng)效的編排
就像芭蕾舞的舞蹈編排一樣，動(dòng)畫(huà)效果也是需要編排的，它的主要目的是讓元素從一個(gè)狀態(tài)切換到下一個(gè)狀態(tài)，自然過(guò)渡，讓用戶的注意力自然地被引導(dǎo)過(guò)去。
編排有兩種不同的方式，一種是均等交互，另一種是從屬交互。
均等交互
均等交互意味著所有的元素和對(duì)象都遵循一個(gè)特定的編排的規(guī)則。
在這個(gè)實(shí)例當(dāng)中，所有的卡片都遵循著一個(gè)方向來(lái)引導(dǎo)用戶的注意力，自上到下地次第加載。相反，沒(méi)有按照這樣清晰的規(guī)則來(lái)加載，用戶的注意力會(huì)被分散，元素的外觀排布也會(huì)顯得比較糟糕。
至于表格式的布局，它相對(duì)就復(fù)雜一點(diǎn)。在這里，用戶的視線流向應(yīng)該是清晰的對(duì)角線方向，因此，逐個(gè)區(qū)塊次第出現(xiàn)是一個(gè)糟糕的設(shè)計(jì)。這樣的逐個(gè)顯示，一方面耗時(shí)太長(zhǎng)，另一方面會(huì)讓用戶覺(jué)得元素的加載方式是鋸齒狀的，這種方式并不合理。
從屬交互
從屬交互指的是使用一個(gè)中心對(duì)象作為主體，來(lái)吸引用戶的注意力，而其他的元素從屬于它來(lái)逐步呈現(xiàn)。這樣的動(dòng)畫(huà)設(shè)計(jì)能夠創(chuàng)造更強(qiáng)的秩序感，讓主要的內(nèi)容更容易引起用戶的注意。
在其他的設(shè)計(jì)當(dāng)中，用戶很難搞清楚哪個(gè)才是主要的，因?yàn)樽⒁饬Ρ环稚⒘恕Ｒ虼耍�如果要設(shè)置多個(gè)動(dòng)畫(huà)元素，應(yīng)該定義清楚誰(shuí)為主，誰(shuí)是中心，并且盡量按照從屬關(guān)系來(lái)次第呈現(xiàn)不同的子元素。
如果只有一個(gè)中心對(duì)象，那么其他的對(duì)象的運(yùn)動(dòng)方式都要受它制約，否則用戶分不清楚主次。
五、動(dòng)效軟件的選擇
動(dòng)效設(shè)計(jì)軟件紛繁眾多，不同軟件的側(cè)重點(diǎn)也各不相同，設(shè)計(jì)師可以根據(jù)項(xiàng)目的時(shí)間、精細(xì)度、面向?qū)ο蟮葪l件來(lái)選擇合適的軟件。下面我列舉出市面上常見(jiàn)的動(dòng)效軟件以及各自的優(yōu)缺點(diǎn)，供選擇參考。
5.1 ?After Effects
AE 這款軟件知名度很高，學(xué)過(guò)設(shè)計(jì)的應(yīng)該都知道，它的優(yōu)點(diǎn)就是強(qiáng)大，可以實(shí)現(xiàn)超高精度的動(dòng)效，一般 UI 動(dòng)效制作只用到了 AE 很小的一部分功能。缺點(diǎn)是門(mén)檻高，上手較困難，不能做實(shí)時(shí)交互動(dòng)效。