當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  建站經(jīng)驗(yàn) >  正文

新浪微博那些有趣的小黃臉表情是如何設(shè)計(jì)的?

 2017-04-14 15:20  來(lái)源: 早讀課   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

@微博UDC-M :距世界上第一個(gè)表情符號(hào)「:-」」的誕生已有34年,隨著人們?cè)诨ヂ?lián)網(wǎng)上溝通方式的變化,表情符號(hào)逐步成了一種剛需。作為各大APP標(biāo)配的默認(rèn)表情,雖無(wú)法與“媽媽的表情包”們相抗衡,但也靠著樸實(shí)耐用的品質(zhì)一直發(fā)展至今,很多平臺(tái)都擁有了自己的經(jīng)典表情。那怎樣將看似簡(jiǎn)單的默認(rèn)表情做好呢?接下來(lái)就是此次小黃臉們整容過(guò)程的全揭露:

PART 1:WHY?

作為設(shè)計(jì)師發(fā)起的項(xiàng)目,首先要自我明確項(xiàng)目的目標(biāo)與方向:

△明確項(xiàng)目目標(biāo)

用戶

用戶使用表情場(chǎng)景的多元化造成許多表情的原有內(nèi)涵發(fā)生了變化。友好的“微笑”變成了嘲諷的“呵呵”,“再見(jiàn)”變成了“再也不見(jiàn)”,就連代表春天的“柳葉”也大片飄灑在各“出軌門(mén)”微博的評(píng)論區(qū)。因此,給用戶提供能適合更多語(yǔ)境表達(dá)的元素就成了首要目的。

產(chǎn)品

給產(chǎn)品帶來(lái)更好的數(shù)據(jù)也是項(xiàng)目的目標(biāo)。此次優(yōu)化的時(shí)機(jī)選取在微博評(píng)論蓋樓項(xiàng)目前1個(gè)月,如果能通過(guò)這次優(yōu)化提高微博用戶間的互動(dòng)量及客戶端的更新量,為后續(xù)項(xiàng)目預(yù)熱,那也是極好的呀!

設(shè)計(jì)

用過(guò)微博的同學(xué)們一定知道那只傲慢又神煩的doge,自誕生以來(lái)長(zhǎng)期占據(jù)微博熱門(mén)表情榜單前三,刷微博時(shí)它的身影無(wú)處不在。面對(duì)這樣一只無(wú)所不能的doge,我們還有能力創(chuàng)造新物種來(lái)超越它嗎?

PART 2:HOW?

數(shù)據(jù)分析,發(fā)現(xiàn)問(wèn)題

表情使用量大,場(chǎng)景復(fù)雜,為了確保設(shè)計(jì)方向的準(zhǔn)確性,我們從數(shù)據(jù)部門(mén)獲取了完整的表情使用數(shù)據(jù),并將其分類整理,從整理結(jié)果發(fā)現(xiàn)了以下問(wèn)題:

1、表情使用量具有很明顯的高中低頻率分層現(xiàn)象;

2、很多競(jìng)品中使用量較高的表情,如大哭、親親等在微博上卻表現(xiàn)不佳 ;

3、設(shè)計(jì)師在設(shè)計(jì)時(shí)期待較高的某些表情表現(xiàn)出了較低的使用量,如摳鼻、偷笑等。

△ 數(shù)據(jù)來(lái)源:騰訊2015《中國(guó)網(wǎng)民表情報(bào)告》

用戶研究,探究問(wèn)題

帶著疑問(wèn),我們與專業(yè)的用研團(tuán)隊(duì)對(duì)一批微博的主流用戶進(jìn)行了問(wèn)卷調(diào)查及深入訪談,發(fā)現(xiàn)并總結(jié)了以下主要3點(diǎn):

1、表情設(shè)計(jì)本身存在一系列問(wèn)題,如:表意不清造成用戶認(rèn)知偏差、缺乏深意等;

△ 具有代表性的問(wèn)題表情

2、區(qū)別于QQ、微信等私密性更強(qiáng)的即時(shí)通訊app,微博作為開(kāi)放平臺(tái),用戶的表情使用習(xí)慣具有以下特點(diǎn):

明顯含有臟話,污等暗示意味的表情不適合在公開(kāi)場(chǎng)所使用;

用戶常用的表情具有示愛(ài)、萌、迷、調(diào)侃的特點(diǎn);

用戶會(huì)盡量避免在公開(kāi)場(chǎng)合使用生氣、憤怒等表情;

3、當(dāng)前的默認(rèn)表情不夠滿足用戶的表達(dá)需求,主要包含以下兩點(diǎn):

多數(shù)用戶明確提出需要使用表示“安慰”表情;

默認(rèn)表情缺乏當(dāng)前的網(wǎng)絡(luò)流行元素,不夠與時(shí)俱進(jìn);

明確方向,解決問(wèn)題

經(jīng)過(guò)以上數(shù)據(jù)分析、用戶調(diào)研結(jié)果及一定量的競(jìng)品分析后,設(shè)計(jì)的方向與思路逐漸清晰,解決問(wèn)題的方案便應(yīng)運(yùn)而生:

從現(xiàn)有表情符號(hào)出發(fā),去除部分使用量低以及過(guò)時(shí)的表情。

強(qiáng)化現(xiàn)有情緒表達(dá)不夠的表情,明確單一表情的含義。

新增表情,將表情與流行元素相結(jié)合,使之更具有廣泛傳播性。

從用戶使用習(xí)慣出發(fā),重新整理表情排列順序,縮短尋找目標(biāo)表情時(shí)間。

PART 3:WHAT?

明確表情含義,偶爾將錯(cuò)就錯(cuò)

在用研過(guò)程中,我們發(fā)現(xiàn)很多表情傳達(dá)給用戶的含義與最初的設(shè)計(jì)初衷不一致,導(dǎo)致不同的用戶群體對(duì)同一個(gè)表情有較大的理解偏差。因此,我們將調(diào)研中有歧義的表情整理出來(lái),重新審視并設(shè)計(jì)。

△ 部分理解偏差表情

[呆]

這個(gè)表情使用量一直較低,在用戶調(diào)研中我們發(fā)現(xiàn)它并沒(méi)有足夠強(qiáng)地表現(xiàn)出它本身的含義,因此我們?cè)诘胁粩嗫鋸?、?xì)化這個(gè)表情,更精準(zhǔn)地表達(dá)它的含義。

[失望]

原有失望的表情只表現(xiàn)出了負(fù)面的情緒,但是沒(méi)有精準(zhǔn)定位到「失望」這個(gè)單一情緒,我們著重在對(duì)眼神進(jìn)行了優(yōu)化,讓它的表情含義更精確。

[頂]

這個(gè)表情在原本的表情列表中叫「頂」,而其實(shí)用戶基本上在使用時(shí)時(shí)常用作「敲打」,因此我們直接講錯(cuò)就錯(cuò)向歧義的方向修改了表情。

[NO]

這個(gè)表情的歧義很明顯,用戶表明手指在靜態(tài)下像手勢(shì)「1」,因此我們改邪歸正,在增加細(xì)節(jié)后消除了歧義讓它更符合本身的含義。

提升表情細(xì)節(jié),強(qiáng)化表情情緒

在新版本表情中,我們?cè)噲D通過(guò)在設(shè)計(jì)上合理地夸張化,增加「眼睛」、「嘴」在表情面所占比例,并增加必要細(xì)節(jié)來(lái)提升表情對(duì)情緒的表達(dá)能力。

△ 部分細(xì)節(jié)強(qiáng)化表情

[白眼]

在 Ver 1 ~ 3 中,著重優(yōu)化了眼睛的表現(xiàn)力。在定稿版本中通過(guò)增加嘴角提拉的細(xì)節(jié)增加表情中嫌棄的情緒。

[害羞]

在 Ver 1 ~ 2 中,我們著重給表情附加了害羞表情的更多動(dòng)作趨勢(shì),在 Ver 3 ~ 4 中通過(guò)紅暈、睫毛等元素加重這些趨勢(shì),增強(qiáng)情緒。

[吃驚]

吃驚表情在調(diào)整的過(guò)程中經(jīng)歷了比較多的版本,最終版本對(duì)眉毛、眼神和嘴巴的動(dòng)作在驚訝的趨勢(shì)上做出了較大的優(yōu)化。

結(jié)合流行趨勢(shì),新增熱門(mén)表情

在新增表情時(shí),通過(guò)以下三方面進(jìn)行探索:

首先是對(duì)標(biāo)競(jìng)品,在競(jìng)品(QQ、微信、emoji)使用量TOP10的表情中如微博有遺漏或現(xiàn)有默認(rèn)表情無(wú)法替代的,考慮新增。

△ 蘋(píng)果iOS9.1 系統(tǒng)中最受歡迎的表情

其次,為了尋找到更適合用戶的新增表情,我們提取了1個(gè)星期的全站所有評(píng)論內(nèi)容,對(duì)高頻短詞語(yǔ)進(jìn)行分析,將每個(gè)短詞語(yǔ)找到同義詞,集合得出相似場(chǎng)景詞,再?gòu)闹刑崛〕S们榫w關(guān)鍵詞,進(jìn)行幾輪篩選最后得到19個(gè)表情關(guān)鍵詞。

△ 可轉(zhuǎn)化為表情的高頻評(píng)論詞

最后,針對(duì)當(dāng)前熱門(mén)網(wǎng)絡(luò)流行語(yǔ)進(jìn)行收集,從流行語(yǔ)中提取出相應(yīng)的情緒或動(dòng)作作為新增表情的選擇。如:那畫(huà)面太美我不敢看→捂臉、污;也是醉了→無(wú)言等。

將這三個(gè)新增維度中的所有情緒進(jìn)行整理,去除不適合在微博平臺(tái)使用的(如剁手,可能在廣泛傳播時(shí)會(huì)引發(fā)歧義)內(nèi)容,并結(jié)合使用場(chǎng)景決定新增以下表情:

△ 此次優(yōu)化新增的所有表情

[二哈]

之前提到用戶需要定位清晰的表情,同樣也需要“意味深長(zhǎng)”的表情。大家都非常喜歡一直統(tǒng)治微博表情屆的神狗 Doge,它的“意味深長(zhǎng)”帶來(lái)了深刻的魔性,讓許多用戶在表達(dá)無(wú)言以對(duì)、一切盡在不言中、不想道破的復(fù)雜情感時(shí)愛(ài)不釋手?!付贡砬榈亩ㄎ灰彩沁@樣的「意味深長(zhǎng)」、「魔性」。

△ 本身就很魔性的哈士奇

在創(chuàng)作「二哈」時(shí),首先的靈感自然是哈士奇天生放蕩不羈的蠢臉。為了達(dá)到讓用戶能感受到精神污染,我們也為其融入了復(fù)雜的情感:狗die、蠢萌、憨傻等等,并在制作時(shí)刻意地混淆其表情的單一含義。例如:向上生無(wú)可戀的眼神里又帶著一絲嫌棄,向下垂死一般突出的舌頭配上的嘴充滿笑意。這種多情緒的加載混疊讓最終得到的「二哈」表情變得確實(shí)有很強(qiáng)的精神污染能力,并得到了用戶們的青睞。

△ 充滿魔性的版本迭代

[聳肩]

聳肩表情的視覺(jué)元素脫胎于新表情「抱抱」,其更多靈感來(lái)自于很多人吐槽除了點(diǎn)贊 Like 外,我們需要一個(gè) Whatever,來(lái)表達(dá)自己的無(wú)言以對(duì)、滿滿嘲諷。雖然這個(gè)感情在一定程度上有點(diǎn)負(fù)面,但確實(shí)是用戶使用表情的一個(gè)訴求。

△ 無(wú)言以對(duì),并不在意

因此我們賦予了這個(gè)表情一個(gè)表示不屑的高高聳肩,配合歪頭和下撇的嘴角,讓它成為了可能有史以來(lái)最欠打的微博表情。但小人本身的視覺(jué)元素和比例使略帶負(fù)面的情緒在可愛(ài)的形象上得到一部分消減,最終表達(dá)出一種接近中立的情緒。

△ 咋?

重新整理排序,快速定位表情

在用研過(guò)程中我們還發(fā)現(xiàn),用戶常常在尋找某一表情時(shí)出現(xiàn)卡頓,是由于用戶幾乎從不記憶某一表情的位置。為了降低使用成本,在默默去除過(guò)時(shí)及使用頻率極低的表情后,我們將所有表情重新排列了順序。

首先將表情按照情緒來(lái)分類,并將每個(gè)類別中情緒表達(dá)程度按照由輕至重、由簡(jiǎn)單至復(fù)雜的程度來(lái)排列:

△ 喜的程度從左到右不斷增強(qiáng)

其次在保證原高頻率表情基本位置不大改的條件下,重新規(guī)劃。表情的首屏展示了喜、怒、哀這三類基本情緒,用戶不需要滑屏就能滿足日常情緒的表達(dá)。

△ 首屏表情展示了喜、怒、哀三類基本情緒

最后整體將正面情緒表情前置,負(fù)面情緒表情后置,符合用戶在微博平臺(tái)的表情使用習(xí)慣。另考慮到每屛表情的曝光率,也將某些高頻率表情放置位置相對(duì)偏后,如[愛(ài)心]、[蠟燭]。用戶在面對(duì)重新整理的表情,可先定位情緒,再定位某一表情,默默形成習(xí)慣,減少使用成本。

PART 4:GAIN !

用戶反饋

表情優(yōu)化項(xiàng)目從開(kāi)始到上線大約歷時(shí)一個(gè)半月, 在9月23日上線當(dāng)天,我們獲得了這樣的用戶反饋:

 

數(shù)據(jù)反饋

項(xiàng)目上線后,帶表情轉(zhuǎn)微博的量增長(zhǎng)了23%,全站微博發(fā)布量增長(zhǎng)6%。在111個(gè)微博客戶端表情中,有5個(gè)新增表情的使用量排在TOP30[二哈][攤手][污][舔屏][抱抱],其中TOP10的新增表情就有3個(gè),二哈成功超越了doge成為使用量第二的表情。

優(yōu)化的表情有9個(gè)使用量得到明顯提升,其中最大的[失望]增加了249%。

默認(rèn)表情優(yōu)化看似簡(jiǎn)單,但往往簡(jiǎn)單的事物需要注入更多的時(shí)間與精力去完成。為了精確的找到此次優(yōu)化的整體方向及問(wèn)題點(diǎn),我們不斷進(jìn)行數(shù)據(jù)分析及用戶調(diào)研,這是非常重要的一環(huán),每一次的設(shè)計(jì)背后都有理性的分析做支持。后續(xù)我們也會(huì)不斷進(jìn)行設(shè)計(jì)的總結(jié)與提升,帶給大家更好的體驗(yàn)。最后透露個(gè)小秘密,好像很快會(huì)有更好玩的新表情出現(xiàn),敬請(qǐng)期待!

本文鏈接: (轉(zhuǎn)載請(qǐng)保留)

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
交互設(shè)計(jì)
新浪涉黃

相關(guān)文章

熱門(mén)排行

信息推薦