騰訊設計師揭秘！QQ默認表情優化背后的設計故事

編者按：QQ這一版全新風格的表情出來后，關于它的討論一直沒有停止。今天直接讓騰訊的聆瀾子來給同學們揭秘，出于什么原因做優化，在優化時考慮了哪些方面。看似簡單的表情設計，其實凝聚了非常多的思考，強烈推薦！

從簡單情緒到表情

為了幫助文字信息更準確的傳達情緒，機智的工程師法爾曼（Scott Fahlman）創造了表情符號。這種高效而直白的信息交流方式被沿用至今。

表情含義的簡到繁

經過信息時代的變遷和網絡文化的多元化發展，表情符號的含義也發生了許多微妙的變化。在QQ表情中，我們所熟知的“微笑”，從友好的問候，轉變成幾乎完全相反的嘲諷含義；“再見”變成了“我想靜靜/友盡”，也與最初的設定相去甚遠。

更多的例子在QQ表情中不勝枚舉，這樣的現狀讓我們不得不重新審視：如今用戶對于表情的需求，是否依然能在默認表情中得到滿足？目前網絡最流行的表情兩大要素：“萌”和“賤”，是否也需要在一定程度上融入到QQ默認表情中，讓它適時地去改變。

剖析數據，發現問題

默認表情優化涉及到每個表情的外觀，情緒表達，場景需求等種種細節。越是繁重的工作量，越是需要快速整理出設計的要點。我們選擇以最簡潔的思路去切入：發現問題，確定方案，進而解決問題。

為了保證研究的可信度和有效性。我們取得了表情發送量的整體數據，發現單個表情的發送量存在巨大的差異。高熱度的表情自然是具有更充分的場景價值，那么低熱度的表情又是因為何種原因被人們遺忘呢？

帶著這樣的疑問，我們找到了一些典型的QQ主流用戶，通過卡片分類和用戶訪談等方法，歸納整理出了表情中的主要問題：

• 部分表現力欠缺
• 部分使用場景模糊
• 缺少網絡流行元素
• 視覺風格的過時

確定問題后，優化設計的要點也就變得清晰：

• 加強表情的情緒感和實用性
• 引入流行元素，創造新表情
• 調整表情風格，注重年輕化

情緒感和實用性，從細節出發

五官的聯動性

人的面部表情并不只決定于某一個部位的運動，而是整體連帶的動作。比如一個真誠的微笑往往伴隨著嘴角和眉眼的微彎。一個悲傷的哭泣則不僅僅是眼淚，還應該帶有嘴角的糾結。整個面部的肌肉是完整連帶的，雖然表情在界面中呈現的體積很小，但是一個細微的改變，可以讓表情更加具有生命力。為了強化表情的情緒感，我們對大多數表情的動態進行了五官聯動優化。

以下是幾個比較典型的例子：

【撇嘴】增加了嘴和眼的動效，配合眉毛的浮動會更加具有整體感。
【色】增加了眉毛和嘴部的上下浮動，配合眼的放大縮小帶動整體。
【發呆】在鼻涕掉落的同時整個五官也隨之進行運動。
【得意】則加入了墨鏡的反光動效，張嘴的同時由于嘴會向上抬起眉眼位置也會有輕微的牽動。

有許多表情基于經典延續的考慮沒有做太明顯的調整，但也基于聯動的原則進行了微調。感興趣的同學也可以找找其中細微的變化0v0~

動作的完善度

表情是否正確的表達含義，需要在動作完整和高效傳達之間做一個權衡。部分表情也針對這兩點進行了重新考量和調整。

【噓】和【閉嘴】，本身具有一定的相似性，前奏也都較長。因此在動效上著重做了區分，強化了各自的特性。噓更強調讓對方噤聲，而閉嘴則強調自己無法出聲。以這樣的調整讓語義更加精簡，提高表情的閱讀效率。

【嘔吐】也省去了過長的前奏動作，直接進入吐的主題，強化吐本身。

以下幾個表情則對動作本身進行了完善：

【敲打】的重點是打擊的力度。在擊打的瞬間給頭部加入輕微的形變，也讓敲擊更加有力度。同時鐵錘換成木槌，體積變大，材質卻更柔和，情感上更加友好戲謔。曲線的敲擊效果線則換成了星星效果，更加符合主流漫畫的表達手法，易于年輕人接受。

【示愛】的動態補充了親吻動作“mua！”的中間態，讓整個動作更加完整易于理解。

【心碎】在落地的過程中，由于心瓣的重量，會有一個輕微的回彈效果，這樣的補充也讓心碎更有力度感，強化情緒本身。

動態重制，衍生新表情

我們也對部分表情進行了較大幅度的變更，使其更加夸張化，含義更加的明晰。甚至有意識地改變含義，成為某種意義上的新表情。

這部分改動選擇了使用量較低以及與其他表情重復度高的表情。如此可以讓一些冷門的表情重新得到使用，甚至挖掘出更多使用場景和語義。而從風險方面考慮，這一類表情在改變之后，在原語境下也更容易找到替代品，避免場景的空白。

【瞌睡】加入了鼻涕泡，更貼近漫畫敘事的表達方式，易于理解。
【發怒】縮短了前奏，改變了五官表達手法，更加急躁。
【驚恐】強化了眼部的幅度和整體聯動感，加入眉毛強化恐慌感。
【饑餓】整體萌化，縮短距離感，并加入砸吧嘴的小動作，強化嘴饞含義。
【調皮】讓舌頭左右搖擺，強化賤萌感，更貼合調皮。
【咒罵】改變嘴的表達手法，弱化嚴肅感，強化了抓狂感，更易于對熟人使用。
【冷汗】與糗，流汗等很接近，因此增加其情感特異性，調整眉毛加強糾結感。
【驚訝】靜態圖形并沒有太大改動，但動態的調整，從“嗚哇！”變成“嗚哦~~~~”強化了諷刺意味和賤萌感。讓表情更適用于多種語境。
【嚇】在動態上與驚訝做了更明顯的區分，減少表情意義的重復性。并加入抽搐感和青臉強化“嚇到！”的感覺。

還有不少表情也重點做了語義強化，在此不一一羅列~

輕質感的風格，年輕化的路線

發散思路

對于風格的整體優化，我們最初嘗試過各種不同的可能性，比如給表情加入身體，比如去掉臉的輪廓讓五官內容更突顯，又或者突破尺寸的限制加強整體的表現力。希望使情緒表達更加明確和清晰。

然而，QQ默認表情具有其特殊性，它需要體積盡量小，又要保證清晰的情緒表達，并能夠承載在圖文混排的氣泡中。因此，具有外輪廓線，省略身體的小圓臉，依然是最為合適的表現方式。而細節表達，可以在原來的基礎上，加入年輕人群更易于接受的漫畫式手法。

結合使用場景，延續品牌感

正式設計的過程中，需要更詳盡地考慮表情的線上使用問題。比如默認表情和文字穿插排版的需求，以及表情的實際體積對視覺表達的影響。還有多種氣泡的顏色適配。

此外，為了保證品牌感的延續性，我們延續了舊版本的基本色調，并結合扁平輕質感的潮流趨勢重新調整了色彩和表情質感。

最終我們選擇使用對比更為清晰的線條和更加明亮柔和的色彩，以求在各種不同的背景色中，都能保證表情內容的清晰。

?

化繁為簡，組件化的設計思路

表情的設計量非常繁重和巨大，一百多個表情動態重制，保證設計的效率和統一性極其重要。

在表情設計中，我們選擇了組件化的思路進行設計。針對各種面部元素，一一進行了歸納和整理：

• 不同類的眼部，重新整理了眼間距的整體一致性
• 不同類的眉部，調整了粗細的一致性
• 嘴部內外，牙齒，牙縫線，舌頭表現的一致性
• 面部的表達要素，如臉頰，害羞線，手樣式，黑線，水滴，青臉，進行了整合

組件化讓整套表情的設計細節更加具有整體感和一致性，同時也提高了大批量設計的工作效率。同時，在許多表情的優化過程中，也可以通過替換組件嘗試更多的可能性，找到最佳的方案。

設立通用規范，完善物品表情

除去黃臉部分的表情優化。由于舊版本表情缺乏完整和系統的設計規范，隨著歷史更替和沉淀，不可避免地在物品表情中產生了一些不太一致的細節風格。因此，在優化設計過程中，也需要重新進行風格的統一。

我們將所有物品表情統一調整成微俯視視角，規范線條粗細規則，并延續小黃臉部分的色彩基調，以保證整套表情的一致性。

寫在最后

看似簡單的設計，往往有更多需要挖掘的內涵。默認表情不僅需要注重視覺風格的美觀和時尚，更需要深入了解每個表情的語境和時代內涵。如果只是用做圖標的思路去優化表情，很容易脫離表情本身的情緒和場景。而默認表情對比于商城表情，它又需要更具有人群和場景的普適性，避免過分的夸張和個性化。

為了在多種要素中找到一個平衡，我們在設計過程中做了多次不同范圍和目標用戶群的市場調研，這也是默認表情設計非常重要的一環。

表情優化改版奠定了后續功能的風格基礎，之后我們也將會繼續完善新版本表情的體驗和玩法，歡迎大家持續關注我們的設計優化，提出寶貴的意見0v0~

【走在時代前列的騰訊HTML 5精品好文】

DNF實戰總結好文！
《騰訊游戲實戰！DNF浴火新生HTML5項目總結》

優化HMTL 5頁面的6個技巧！
《騰訊精品文！六大奇招帶你優化HTML5移動頁面》

HTML5?頁面設計實戰總結！
《春雨先知！騰訊移動端HTML5頁面設計實戰分享》

原文地址：騰訊ISUX

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com