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

前言

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

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

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

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

1. 善用擠壓和變形

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

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

2. 緩入緩出

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

一般來講，所有動作開始是緩慢的方式-逐漸加速-緩慢完成，沒有這個過程是接近于機(jī)械運(yùn)動的方式。

3. 預(yù)備動作

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

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

4. 次要動作

利用次要動作突出主要動作，來幫助主要動作傳達(dá)其意義，豐富細(xì)節(jié)，使其不那么生硬呆板。

主要動作是通過臉上的紅暈從無到有表現(xiàn)出害羞情緒，在此之前增加手的揉搓，使紅暈的出現(xiàn)變得合理。

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

5. 跟隨動作、重疊動作

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

手甩動熒光棒的同時讓五官跟隨臉部向上移動：

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

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

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

6. 弧線運(yùn)動

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

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

7. 構(gòu)圖布局

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

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

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

9. 夸張感

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

10. 時間節(jié)奏

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

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

11. 立體造型

對于二維動畫來說，要用平面來展現(xiàn)一個3D的空間或物體，需要畫出物體的體積、重量、陰影等，3D會比扁平的物體更加生動有趣。

12. 吸引力

吸引力原則是最難界定的，它沒有固定的模式，而是前面一系列原則的綜合體，任何畫面，任何動作，你都需要問“這個對用戶有吸引力嗎？”這個原則對于動畫來說是非常高，甚至高到難以企及的境界。

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

二、結(jié)語

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

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

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

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