【設計技巧】設計師如何設計表情包

我們每天都在使用微信、抖音等社交工具進(jìn)行溝通和分享，當和朋友聊天或是在評論區留言時(shí)，倘若不帶上一兩個(gè)Emoji表情，就會(huì )感覺(jué)沒(méi)有完整地表達出自己的用意。表情可以有效地表達情緒，它已經(jīng)成為互聯(lián)網(wǎng)溝通中不可或缺的部分，融入到我們的生活。

Adobe公司曾發(fā)起過(guò)一項調查，大部分受訪(fǎng)者表示會(huì )通過(guò)使用Emoji讓彼此的談話(huà)更輕松，他們認為Emoji有助于跨越語(yǔ)言障礙進(jìn)行交流，可以更直接地表達自己的心情和想法。

在這份調查中，大部分受訪(fǎng)者認為Emoji可以幫助他們在工作中更討人喜歡、有助于增加信任度、讓整個(gè)溝通過(guò)程更真誠。

美事作為吉印通集團內部辦公軟件，致力于讓員工更加高效、便捷、愉快地工作，讓工作成為一件美事！正因為抱著(zhù)這樣的初衷，讓員工更放松、愉悅地溝通，更清晰地表達情緒，為原本平淡的互動(dòng)增添樂(lè )趣和驚喜，美事Emoji V1.0項目應運而生。

設計目標

首先我們要明確項目的目標

產(chǎn)品現狀

在此之前，產(chǎn)品使用的是外部開(kāi)源的Emoji表情，與辦公場(chǎng)景匹配度不高，風(fēng)格過(guò)時(shí)老舊，數量少，已經(jīng)不能滿(mǎn)足用戶(hù)的溝通使用需求。

優(yōu)化方向

?? 視覺(jué)風(fēng)格升級，設計更年輕化、貼合辦公場(chǎng)景的Emoji。

?? 增加表情數量，并新增網(wǎng)絡(luò )流行、時(shí)下熱點(diǎn)元素，滿(mǎn)足用戶(hù)使用需要，增加趣味性。

?? 統一規范，注意強調美事表情設計的辨識度、一致性、品牌性和表意性。

用戶(hù)偏好

我們從產(chǎn)品側了解到，公司員工在美事應用上使用表情的場(chǎng)景主要是互動(dòng)溝通和內容評論兩方面，用戶(hù)使用表情是對自己表述內容或觀(guān)點(diǎn)的加強或修飾。通過(guò)分析，得出用戶(hù)對表情的偏好關(guān)鍵詞“趣味性、高效直接、情感共鳴”。

視覺(jué)風(fēng)格探索

觀(guān)察主流競品，我們發(fā)現大部分表情設計遵循了“小黃臉”這個(gè)通用樣式，符合人們對表情一貫的認知習慣，遵循這種認知習慣很有必要。

作為搭載在美事應用上的默認表情，它的設計還需要考慮延續美事品牌的調性。美事最初的Logo圖形是一個(gè)微笑的橙子，寓意橙心橙意，傳遞美好，美事新的Logo延續了這個(gè)理念，保留了“葉子”這個(gè)元素。于是美事表情設計融入了“葉子”作為品牌基因，確定了“小黃臉+葉子”作為初步設計的方向。

我們最初嘗試了多種不同的可能性，比如穿衣服的、表情夸張或者更加有質(zhì)感的風(fēng)格。希望讓情緒表達更加豐富飽滿(mǎn)。

然而，因為考慮到默認表情使用的場(chǎng)景較多、數量較大，適配設備多，在和文字混排使用時(shí)，表情較小，需要保證表情細節清晰、表達準確。因此，選擇有外輪廓線(xiàn)，能承載更多細節的圓臉，是最理想的表現方式。同時(shí)延續品牌基因，適當弱化葉子元素，重點(diǎn)聚焦在五官的設計上。

最終我們選用扁平化、微漸變、外描邊這樣更年輕化的表現方式，不僅可以在多場(chǎng)景使用時(shí)細節表達更清晰，同時(shí)也便于拓展數量和后期延展，當不同設計師處理時(shí)，最大程度地保證一致性。于是，這樣一個(gè)屬于美事品牌專(zhuān)屬的默認表情“美橙”就誕生了！

偏好關(guān)鍵詞設計落地

確定設計風(fēng)格后，擴充表情的數量和種類(lèi)，能更大程度地滿(mǎn)足用戶(hù)的情緒表達。設計這些表情時(shí)，需要充分考慮用戶(hù)意愿，將用戶(hù)偏好“趣味性、高效直接、情感共鳴”具象化。

設計過(guò)程中，表情適當夸張詼諧的表現方式不僅可以增添趣味性，也能更準確地表達出用戶(hù)的表意。葉子跟隨情緒改變而改變，讓表情更靈動(dòng)。

部分表情采用手勢、五官相配合，能更好地傳達用戶(hù)情緒，達到情感共鳴。加入恰當裝飾物，不僅可以彌補表情單調的缺點(diǎn)，也能更直觀(guān)地表現情緒。

為了使表情更加高效準確，設計表情時(shí)，對照了大量真人表情，這樣不僅準確，還更有趣。

同時(shí)我們也考慮到用戶(hù)更多個(gè)性表達的需求，新增網(wǎng)絡(luò )流行元素，貼合時(shí)下熱點(diǎn)。

200+的表情設計，設計效率和整體一致性尤為重要?；诖?，通過(guò)對網(wǎng)格、組件化和風(fēng)格的規范，可以解決這些問(wèn)題。

網(wǎng)格系統

引入網(wǎng)格系統，將表情設計框定在一定范圍內，可以最大程度地保證每個(gè)表情視覺(jué)比重的一致性，讓整體混排時(shí)更加整體和系統。

元素組件化

美事表情的需求數量較大，保證設計效率的同時(shí)還需要兼顧一致性。因此我們選擇了組件化的思路進(jìn)行設計，將面部表情歸納整理，搭配組件產(chǎn)出新表情，保證一致性的同時(shí)提升了工作效率。

統一風(fēng)格

我們統一表情面部元素的基本特征，對于需要傾斜的物品表情統一調整了角度，保證了表情的整體性。

規范了線(xiàn)條的粗細規則，確保在各種不同的背景色上，表情內容都始終清晰可辨。

回顧美事表情整個(gè)設計過(guò)程，我們從前期調研，再到不斷試錯，最后能將項目完整地落地并獲得認可，這中間我們注入了很多的時(shí)間和精力去完成。在不斷變化的現在，我們會(huì )持續關(guān)注設計趨勢和用戶(hù)訴求，持續不斷地增添和優(yōu)化美事Emoji表情。

同時(shí)，歡迎大家對我們提出寶貴建議，持續關(guān)注我們后期的設計優(yōu)化。