表情包作為當(dāng)代互聯(lián)網(wǎng)人溝通中不可或缺的工具之一，將其有效融入生活場(chǎng)景，能夠擴(kuò)大人們溝通的情緒表達(dá)閾值。本文以網(wǎng)易郵箱易喵動(dòng)態(tài)表情包設(shè)計(jì)為例，淺談迪士尼動(dòng)畫(huà)十二原則，一起來(lái)看看。

前言

易喵作為網(wǎng)易郵箱團(tuán)隊(duì)的一員，想要讓用戶記住，需要我們盡可能多得豐富其應(yīng)用場(chǎng)景。表情包作為人們網(wǎng)絡(luò)溝通中不可或缺的工具，將其與之結(jié)合，可以有效地融入到用戶的生活場(chǎng)景中。借此我們?cè)O(shè)計(jì)了一套以易喵形象為基礎(chǔ)的微信表情包，并根據(jù)其情緒表現(xiàn)增加了相關(guān)動(dòng)效表達(dá)。

易喵動(dòng)態(tài)表情一覽

一、提升動(dòng)效表現(xiàn)力的關(guān)鍵動(dòng)畫(huà)12律

1978年，迪士尼動(dòng)畫(huà)藝術(shù)家弗蘭克·托馬斯和奧利·約翰斯頓退休后，開(kāi)始寫(xiě)一本叫做《The Illusion of Life》（生命的幻象-迪斯尼動(dòng)畫(huà)造型設(shè)計(jì)）的書(shū)。這本書(shū)中就總結(jié)出了動(dòng)畫(huà)的12條原則。

1. 善用擠壓和變形

借用擠壓來(lái)強(qiáng)調(diào)動(dòng)作的物理變化，強(qiáng)化物體的拉伸或者壓扁的效果，其目的是給予對(duì)象以重量和彈性的感覺(jué)。當(dāng)一個(gè)物體落在地上會(huì)產(chǎn)生拉伸和壓扁的變化，這樣才會(huì)有Q彈的效果。

雙手?jǐn)D壓臉部，為了讓臉部有被擠壓的感覺(jué)需要產(chǎn)生一定程度的縮放變化。

2. 緩入緩出

現(xiàn)實(shí)世界中的大多數(shù)物體都遵循緩和的運(yùn)動(dòng)，極少會(huì)有勻速運(yùn)行的狀態(tài)，所以在動(dòng)效的表現(xiàn)上也應(yīng)該遵循次原則。

一般來(lái)講，所有動(dòng)作開(kāi)始是緩慢的方式-逐漸加速-緩慢完成，沒(méi)有這個(gè)過(guò)程是接近于機(jī)械運(yùn)動(dòng)的方式。

3. 預(yù)備動(dòng)作

物體開(kāi)始正式動(dòng)作前展示其準(zhǔn)備動(dòng)作，讓用戶能預(yù)知下個(gè)動(dòng)作，使得整個(gè)流程更加生動(dòng)合理。

在正式運(yùn)動(dòng)開(kāi)始前，先完成一段相反方向的蓄力動(dòng)作，正式動(dòng)作結(jié)束后因?yàn)閼T性會(huì)產(chǎn)生輕微回彈。

4. 次要?jiǎng)幼?/h3>

利用次要?jiǎng)幼魍怀鲋饕獎(jiǎng)幼?，?lái)幫助主要?jiǎng)幼鱾鬟_(dá)其意義，豐富細(xì)節(jié)，使其不那么生硬呆板。

主要?jiǎng)幼魇峭ㄟ^(guò)臉上的紅暈從無(wú)到有表現(xiàn)出害羞情緒，在此之前增加手的揉搓，使紅暈的出現(xiàn)變得合理。

手完成摸魚(yú)動(dòng)作后，通過(guò)位置控點(diǎn)工具固定魚(yú)身，給魚(yú)尾增加輕微的彎曲擺動(dòng)，完成整個(gè)摸魚(yú)的動(dòng)作。

5. 跟隨動(dòng)作、重疊動(dòng)作

物體的運(yùn)動(dòng)是一個(gè)部分接著一個(gè)部分的。如人身體的動(dòng)作，會(huì)帶動(dòng)身體其他部位跟著運(yùn)動(dòng)，這里其他部分的運(yùn)動(dòng)即為跟隨動(dòng)作。另外物體與物體的運(yùn)動(dòng)也會(huì)有重疊的部分，這些跟隨和重疊動(dòng)作可以增加動(dòng)作的真實(shí)性和趣味性。

手甩動(dòng)熒光棒的同時(shí)讓五官跟隨臉部向上移動(dòng)：

眼睛跟隨腦袋搖晃的同時(shí)也在做360度旋轉(zhuǎn)：

鼻孔的大小和位置會(huì)跟隨旁邊鼻孔的變化發(fā)生相應(yīng)的變化：

通過(guò)提升表情細(xì)節(jié)，來(lái)強(qiáng)化表情對(duì)情緒的表達(dá)能力，讓情感傳遞更加生動(dòng)。

6. 弧線運(yùn)動(dòng)

生活中的大多數(shù)動(dòng)作軌跡并不是直來(lái)直去的，而是呈現(xiàn)出弧形軌跡，很多運(yùn)動(dòng)軌跡肉眼看不到，但也的確存在，所以制作弧形軌跡動(dòng)作時(shí)會(huì)顯得更加靈活真實(shí)。

幽靈以弧形軌跡飛入與飛出：

7. 構(gòu)圖布局

在畫(huà)面中，要突出呈現(xiàn)我們需要呈現(xiàn)的對(duì)象，通過(guò)位置、大小、光影等手段來(lái)引導(dǎo)視覺(jué)中心，吸引用戶的注意力，這也是12項(xiàng)原則中最定義最廣泛的原則。好的構(gòu)圖布局就是能清楚明確地傳達(dá)畫(huà)面里的信息。

8. 關(guān)鍵動(dòng)作與連續(xù)動(dòng)作

即逐幀動(dòng)畫(huà)與關(guān)鍵幀動(dòng)畫(huà)。詳細(xì)來(lái)說(shuō)，逐幀動(dòng)畫(huà)就是從頭開(kāi)始一張接著一張畫(huà)下去，而關(guān)鍵幀動(dòng)畫(huà)則是先繪出表演中的關(guān)鍵動(dòng)作，再用中割的方式把關(guān)鍵動(dòng)作串聯(lián)起來(lái)。兩種方式各有其優(yōu)缺點(diǎn)，最理想的是兩種方式的綜合。

9. 夸張感

所有動(dòng)作效果并非一定要接近現(xiàn)實(shí)，這樣反而會(huì)無(wú)趣死板，適當(dāng)添加一些夸張成分，可以獲得用戶更多的注意。

10. 時(shí)間節(jié)奏

動(dòng)作的節(jié)奏就是速度的快慢，不同的速度會(huì)表現(xiàn)不同的情緒，過(guò)快或者過(guò)慢都會(huì)讓該動(dòng)作看起來(lái)不自然，好的節(jié)奏控制就會(huì)看起來(lái)生動(dòng)自然。

此外，所有的物體都是有質(zhì)量的，節(jié)奏可以表現(xiàn)出物體的質(zhì)量。

11. 立體造型

對(duì)于二維動(dòng)畫(huà)來(lái)說(shuō)，要用平面來(lái)展現(xiàn)一個(gè)3D的空間或物體，需要畫(huà)出物體的體積、重量、陰影等，3D會(huì)比扁平的物體更加生動(dòng)有趣。

12. 吸引力

吸引力原則是最難界定的，它沒(méi)有固定的模式，而是前面一系列原則的綜合體，任何畫(huà)面，任何動(dòng)作，你都需要問(wèn)“這個(gè)對(duì)用戶有吸引力嗎？”這個(gè)原則對(duì)于動(dòng)畫(huà)來(lái)說(shuō)是非常高，甚至高到難以企及的境界。

我們的動(dòng)畫(huà)是否會(huì)讓用戶留下深刻的印象，取決于在設(shè)計(jì)上是否有獨(dú)特之處，表現(xiàn)上是否富于變化，是否有活力以及一切可以抓住用戶目光的元素。

二、結(jié)語(yǔ)

易喵表情最初以靜態(tài)的形式上線后，情緒表現(xiàn)不足，無(wú)法滿足大家的使用需求，使用頻率低。

而動(dòng)效能夠呈現(xiàn)變化的過(guò)程，通過(guò)賦予表情動(dòng)態(tài)，可以增加情緒的表現(xiàn)力，強(qiáng)化表達(dá)，提升趣味性，使得表情包更加生動(dòng)形象，以此來(lái)提高大家的使用熱情。

但如今用戶表情使用場(chǎng)景和情緒表達(dá)方式均發(fā)生了很大變化，目前的這套表情總體上還是略顯保守，動(dòng)效表現(xiàn)也不夠生動(dòng)有趣。往后除了正確表達(dá)出微妙的情緒外，我們也應(yīng)該思考如何緊跟潮流，創(chuàng)作出更符合當(dāng)代用戶使用場(chǎng)景的表情內(nèi)容。

*注：文章部分圖片素材來(lái)源網(wǎng)絡(luò)