Jabber新版動畫表情背後的設計故事
作者：琳~醬
微信公眾號：思科上海設計中心
文章未經許可，禁止轉載
之前介紹了Cisco Jabber是思科研發的一款針對企業級的即時通訊軟體。面相全球大型企業和政府機關的用戶，主打網路安全和即時高效的企業內部通訊軟體。
現如今，很多聊天程序都設計了一套自己的黃臉表情，在日常的聊天軟體中，我們也用到了大量的黃臉表情，小黃臉的表情應該是千變萬化的。在Jabber已有一套靜態的小黃臉表情基礎上，是時候添加一套動態表情，並將一些流行的情緒融入到我們的設計中。
項目初期
開始做Jabber動態表情這個項目幾經周折，最終產品經理、研發部門與我們設計部門的總算拍合這個項目。在正常需求排滿狀態下，每天畫一兩小時不正經的表情，斷斷續續做了三個月，最終呈現給大家的就是現在Jabber上的這套表情。
對於Jabber用戶來說，現有小黃臉表情已經很熟悉了，所以在決定做動態表情的時候，我們確定了要延用現有的小黃臉風格，在這基礎上製作一套動態表情包。另外，動態表情對於Jabber是一個全新的項目，沒有任何歷史遺留問題和用戶需求的條條框框，對於設計師來說是一個自由度很高的項目。琳醬在知道要做一套動態表情包的這件事之後，就興奮得完全忘記了Jabber是一款正經的商務軟體。。。
設計初稿
言歸正傳之後，我們馬上對目前全球流行的黃臉表情做了一番分析，最終確定下我們第一步要做的動態表情的的大類，比如：開心、生氣、悲傷、尷尬等，隨後我們對比多個產品中的表情的語義哪個更準確哪個更生動，暫定了第一稿的草圖，在手繪稿的基礎上，對接下來要做的動態表情有一個初方向。
其中有些創作過程分享給大家:
尷 尬
例如尷尬這個表情，在設計過程中想表現的動畫太多，反而模糊了這個表情的最主要表達的情緒，為此走了很多的彎路。
最初稿黃臉轉黑加上黑線效果，自己開始做完的時候挺滿意的，隨後分享給身邊的人看，讓大家猜這個表情的意思，基本上很少有人能猜到尷尬。
第二稿其實有些借鑒的QQ表情糗大了，當然也不能確切表達出尷尬的意思，基本在做的過程中已經放棄這一稿。
第三稿沿用了第一稿的嘴型，有同事提意見說這個嘴巴的動畫顯得特別不削一顧，在聊天中顯得不禮貌。
再創作的時候，糾結了很久，嘗試了很多方案，最終確定了將第二和第三稿結合一下，於是得出了我們最終稿的Awkward的動態表情，這一版的動畫更簡單，更能直接表達出深深的尷尬的意思。
捂臉哭
捂臉這個表情已經在各大聊天表情包中炒雞火爆了，各種微信群里每天幾乎都有人發這個捂臉的表情，把這個表情做成動畫的很少，所以動畫效果佛如捂臉哭究竟應該是怎麼樣的呢？要怎麼來設計這個表情其實也是為難了很久啊。
微信表情是捂臉哭，也有一些是自製表情是捂臉，冷靜下來分析捂臉這個表情大概要表達的情緒就是無奈，所以這個流淚的感覺並不是真正的難過而哭。
有一天突然看到了兔斯基版的流淚，茅塞頓開，在幾輪飛機稿之後，最終確定了做捂臉哭這個動態表情的動態效果。
鼓 掌
當然，有時候也會遇到個別表情在設計了好多稿之後，還是不滿意，給身邊的同事看了之後也說不上為什麼總覺得欠缺了一些。
比如做這個鼓掌的動態表情，也是幾經周折，第一和第二稿似乎有一種崇拜對方而鼓掌的語義在裡面。然而，很多時候用到鼓掌的表情是為了慶祝，顯然第一第二稿表情的使用場景很少。
第三稿為這個小黃臉加上了眉毛，一下子完全改變了這個動態表情的意思，也許這也是設計表情的魅力所在吧！（做這個表情的時候琳醬對著鏡子一直在揣摩鼓掌的動作）
最終，我們確定下來鼓掌應該是一個開心的黃臉，為了在動態表情的時候表現更加生動和誇張，所以雙手作左右移動的拍手狀，嘴型隨鼓掌的動作好像在歡呼一樣。
笑 哭
還有一個令人特別糾結的表情就是笑cry，這款表情可以說是全世界都在流行，常用於緩解尷尬，它可以代表很多意思，什麼都說的通，但是把他做成動態的少之又少。
這個表情可以說是製作周期最長的一個表情了，第一稿完成後一直不盡滿意，但始終沒想好究竟動態的笑cry應該是什麼樣子。
再次冷靜下來分析笑cry要表達的情緒，它應該是一個超級開心的小黃臉，笑到流淚。於是開始嘗試做一張大笑的小黃臉，不同於另一款憨笑的臉，這個表情笑得程度更大，然後發現兩滴眼淚怎麼做都很奇怪。
可能是看習慣了靜態表情的笑cry，有思維定式，總覺得眼淚左右兩滴眼淚才是笑cry，如上圖第二稿，完成後才發現小黃臉動起來了，眼淚應該也是動態的。第三稿嘗試把眼淚做成動態，但是這個動畫效果有點失敗。
於是又嘗試做眼淚飛濺的動畫，一開始的時候眼淚位置太低太靠近嘴巴，有同事提醒我這像口水
TAG:思科上海設計中心 |