百度APP EMOJI 2.0的設(shè)計(jì)分享
工程師法爾曼創(chuàng)造了第一個(gè)表情符號(hào),使文字信息更準(zhǔn)確的傳達(dá)情緒,表情現(xiàn)已經(jīng)成為了互聯(lián)網(wǎng)溝通中不可或缺的元素。百度APP用戶正趨于年輕化,表達(dá)的訴求也日益增加。線上表情已不能滿足用戶需求,于是設(shè)計(jì)師自發(fā)開啟了BAIDU EMOJI 2.0的設(shè)計(jì)歷程,與大家分享。
01 設(shè)計(jì)思路探索
1. 目標(biāo)
2. 現(xiàn)狀分析
使用量前十的表情多為正向和有內(nèi)涵的表情。百度特有的“滑稽”表情使用量遠(yuǎn)遠(yuǎn)大過(guò)其他表情,而部分表情使用量甚低,差距巨大。那這些低熱度的表情為何懸殊如此大,為此我們展開了用戶訪談。
3. 問(wèn)題歸納-用戶訪談
4. 解題思路
02 解題過(guò)程
1. 視覺(jué)風(fēng)格
通過(guò)象限圖和線性時(shí)間軸,觀察主流競(jìng)品。我們可以發(fā)現(xiàn)大部分國(guó)內(nèi)的表情設(shè)計(jì)的夸張程度遠(yuǎn)大于國(guó)外。流行的表情主要有兩種性格:“賤”和“萌”,幾乎均分天下。再看第二張圖,可以發(fā)現(xiàn)國(guó)外表情的設(shè)計(jì)趨勢(shì):質(zhì)感越來(lái)越強(qiáng),表意也更加夸張。
結(jié)合業(yè)務(wù)場(chǎng)景對(duì)圖形進(jìn)行發(fā)散和創(chuàng)新,比如與小度機(jī)器人、評(píng)論icon結(jié)合等。為了增強(qiáng)表情感染力,嘗試給表情加入身體,又或者突破圓形加強(qiáng)部分五官表現(xiàn)。
然而,因使用場(chǎng)景較多,當(dāng)混排在文字中時(shí),表情較小,很多細(xì)節(jié)模糊。我們需要規(guī)整的圖形,也需要更具靈魂的表情,所以最終選取最能承載的圓臉,把重點(diǎn)聚焦在具體五官的設(shè)計(jì)上。
對(duì)質(zhì)感進(jìn)行多個(gè)層級(jí)的嘗試,從弱到強(qiáng)。
結(jié)合競(jìng)品調(diào)研和趨勢(shì)分析,最終選用有質(zhì)感并加了一層描邊的效果,使得表情保留精致的同時(shí)又可以多場(chǎng)景的清晰展示。在表情底板上加了一層投影,加強(qiáng)質(zhì)感和層級(jí)感。
2. 表情表意
在新表情的設(shè)計(jì)上加大了五官的比例和更多細(xì)節(jié),表情更夸張、含義更明晰、更有代入感。尤其對(duì)于一些使用量較低和較重復(fù)的表情,重新設(shè)計(jì),如此可以挖掘冷門表情的潛力。
表情融入場(chǎng)景感,強(qiáng)化表意。結(jié)合漫畫的設(shè)計(jì)語(yǔ)言,增加用戶熟悉感。
3. 新增表情
4. 節(jié)假日表情
節(jié)假日期間新增節(jié)日表情,增強(qiáng)互動(dòng)區(qū)氛圍。從2019年開始新增節(jié)日表情設(shè)計(jì),共計(jì)覆蓋全年10個(gè)節(jié)假日。疫情期間也參與其中,用設(shè)計(jì)的力量馳援武漢。
03 設(shè)計(jì)方法
180+的表情設(shè)計(jì),效率和統(tǒng)一性尤為重要,因此我們對(duì)表情進(jìn)行歸納和整理:以五官和附加元素為劃分維度。
五官:以眼睛、眉毛、嘴、牙、舌頭等元素分類。比如眼睛又可分為14類,根據(jù)是否有眼珠、眼白、高光、眼睛形狀(月牙眼、平眼、斜眼和星星眼等)為標(biāo)準(zhǔn),進(jìn)行歸納與組件復(fù)用。
附加元素:分為三大類,情緒、氛圍和道具。情緒元素,對(duì)眼淚、汗、口水、弱眼淚/口水、紅暈等進(jìn)行歸納,統(tǒng)一設(shè)計(jì)表現(xiàn),如眼淚和口水都采用啞光的形式,與底板設(shè)計(jì)語(yǔ)言統(tǒng)一。
這樣組件化的方式,即保證了設(shè)計(jì)語(yǔ)言一致性又高效的完成大批表情的鋪設(shè)。
04 表情排序
180+的表情,為了便于用戶更快的找到想要的表情,減輕壓力。我們對(duì)表情進(jìn)行了排序,按照表情情緒(喜怒哀樂(lè))和手勢(shì)聚類。
為增強(qiáng)用戶記憶點(diǎn),更容易定位表情。我們利用視覺(jué)錨點(diǎn),在長(zhǎng)列表情中排入深色系、紅色系的聚類。
05 調(diào)研與訪談
在表情上線一段時(shí)間后,為了解用戶對(duì)此次新表情的好感度,我們進(jìn)行了調(diào)研:
線上問(wèn)卷與線下訪談
- 發(fā)放了1000份線上問(wèn)卷,調(diào)研用戶對(duì)新舊表情的好感度以及原因
- 進(jìn)行了線下訪談,深入了解用戶的好感度和原因以及使用習(xí)慣等
通過(guò)這兩種方式,我們得到以下主要結(jié)論:
- 用戶對(duì)新表情的好感度遠(yuǎn)大于舊表情
- 用戶更喜歡有趣且具有熱點(diǎn)的表情
- 表情的排序非常影響表情的使用
在深入用戶的過(guò)程中,我們更加了解用戶的想法,也為我們后續(xù)升級(jí)優(yōu)化,得到了建設(shè)性建議
06 結(jié)語(yǔ)
表情設(shè)計(jì)注重的不僅僅是好看的皮囊,更重要的是Ta的內(nèi)在、Ta的靈魂,這才是觸達(dá)用戶的點(diǎn)。設(shè)計(jì)表情其實(shí)是一個(gè)講故事的過(guò)程,每個(gè)表情就像抓拍到的最美瞬間,背后都有自己的專屬live,等待你來(lái)續(xù)寫。
07 產(chǎn)品周邊
本文由@百度MEUX 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash, 基于CC0協(xié)議
學(xué)習(xí)