以網易郵箱易喵動態表情包為例,淺談迪士尼動畫十二原則

2 評論 5546 瀏覽 4 收藏 11 分鐘

表情包作為當代互聯網人溝通中不可或缺的工具之一,將其有效融入生活場景,能夠擴大人們溝通的情緒表達閾值。本文以網易郵箱易喵動態表情包設計為例,淺談迪士尼動畫十二原則,一起來看看。

前言

易喵作為網易郵箱團隊的一員,想要讓用戶記住,需要我們盡可能多得豐富其應用場景。表情包作為人們網絡溝通中不可或缺的工具,將其與之結合,可以有效地融入到用戶的生活場景中。借此我們設計了一套以易喵形象為基礎的微信表情包,并根據其情緒表現增加了相關動效表達。

易喵動態表情一覽

一、提升動效表現力的關鍵動畫12律

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

1. 善用擠壓和變形

借用擠壓來強調動作的物理變化,強化物體的拉伸或者壓扁的效果,其目的是給予對象以重量和彈性的感覺。當一個物體落在地上會產生拉伸和壓扁的變化,這樣才會有Q彈的效果。

雙手擠壓臉部,為了讓臉部有被擠壓的感覺需要產生一定程度的縮放變化。

2. 緩入緩出

現實世界中的大多數物體都遵循緩和的運動,極少會有勻速運行的狀態,所以在動效的表現上也應該遵循次原則。

一般來講,所有動作開始是緩慢的方式-逐漸加速-緩慢完成,沒有這個過程是接近于機械運動的方式。

3. 預備動作

物體開始正式動作前展示其準備動作,讓用戶能預知下個動作,使得整個流程更加生動合理。

在正式運動開始前,先完成一段相反方向的蓄力動作,正式動作結束后因為慣性會產生輕微回彈。

4. 次要動作

利用次要動作突出主要動作,來幫助主要動作傳達其意義,豐富細節,使其不那么生硬呆板。

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

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

5. 跟隨動作、重疊動作

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

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

眼睛跟隨腦袋搖晃的同時也在做360度旋轉:

鼻孔的大小和位置會跟隨旁邊鼻孔的變化發生相應的變化:

通過提升表情細節,來強化表情對情緒的表達能力,讓情感傳遞更加生動。

6. 弧線運動

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

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

7. 構圖布局

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

8. 關鍵動作與連續動作

即逐幀動畫與關鍵幀動畫。詳細來說,逐幀動畫就是從頭開始一張接著一張畫下去,而關鍵幀動畫則是先繪出表演中的關鍵動作,再用中割的方式把關鍵動作串聯起來。兩種方式各有其優缺點,最理想的是兩種方式的綜合。

9. 夸張感

所有動作效果并非一定要接近現實,這樣反而會無趣死板,適當添加一些夸張成分,可以獲得用戶更多的注意。

10. 時間節奏

動作的節奏就是速度的快慢,不同的速度會表現不同的情緒,過快或者過慢都會讓該動作看起來不自然,好的節奏控制就會看起來生動自然。

此外,所有的物體都是有質量的,節奏可以表現出物體的質量。

11. 立體造型

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

12. 吸引力

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

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

二、結語

易喵表情最初以靜態的形式上線后,情緒表現不足,無法滿足大家的使用需求,使用頻率低。

而動效能夠呈現變化的過程,通過賦予表情動態,可以增加情緒的表現力,強化表達,提升趣味性,使得表情包更加生動形象,以此來提高大家的使用熱情。

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

*注:文章部分圖片素材來源網絡

作者:徐源

來源公眾號:網易UEDC,網易用戶體驗設計中心

本文來源于人人都是產品經理合作媒體@網易UEDC,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 什么是用戶研究。

    不只是用戶行為的判斷。

    而是群體心理的深層洞察。

    來自廣東 回復
  2. 網易做的IP確實都很可愛啊,能力過硬,愛了愛了。

    來自中國 回復