你發(fā)微博時(shí)用的doge表情，這是它背后的設(shè)計(jì)故事
來源：站酷
原標(biāo)題：我設(shè)計(jì)了那只上億人使用的Doge表情
關(guān)于作者：首先自我介紹一下，我叫馮大偉，西安美院畢業(yè)，最早入行的時(shí)候在一家做設(shè)計(jì)服務(wù)的公司（現(xiàn)被洛可可收購）。后來進(jìn)了新浪微博，14年底從微博出來和當(dāng)時(shí)的同事創(chuàng)辦了UI培訓(xùn)機(jī)構(gòu)章魚學(xué)院以及半吊子的設(shè)計(jì)公司W(wǎng)inoDesign，后來被坑了（這段黑歷史就不提了）?，F(xiàn)在擔(dān)任小米生態(tài)鏈某公司的UI設(shè)計(jì)總監(jiān)，管理一個(gè)8人團(tuán)隊(duì)服務(wù)公司7個(gè)產(chǎn)品線。五年間從一個(gè)小UI設(shè)計(jì)師到創(chuàng)業(yè)者再到老師再到團(tuán)隊(duì)管理者，這一路風(fēng)風(fēng)雨雨充滿荊棘但我卻樂此不疲。
言歸正傳，做微博表情純屬是機(jī)緣巧合，這個(gè)項(xiàng)目沒有產(chǎn)品經(jīng)理沒有排期，甚至除了UDC-M其他部門的領(lǐng)導(dǎo)都不知道，是一次完全是由設(shè)計(jì)師主導(dǎo)的改版。
14年初微博剛剛做了大改版3.6，戰(zhàn)略商業(yè)化，界面卡片化，且正當(dāng)iOS6與iOS7的過渡期。不規(guī)則形狀的表情已不適應(yīng)當(dāng)下扁平且商業(yè)化的界面，所以老大（岳陽明－現(xiàn)微博UDC老大）經(jīng)過深思熟慮，決定重新改版微博表情，把重任放在了我和另一個(gè)設(shè)計(jì)師（厲芳潔）身上，我做黃臉和手的表情她做其他表情。在正經(jīng)需求排滿狀態(tài)下每天畫一兩小時(shí)不正經(jīng)的表情，斷斷續(xù)續(xù)做了三個(gè)月。最終呈現(xiàn)給大家的就是現(xiàn)在微博客戶端上的這套表情。
項(xiàng)目剛開始我們做了一些用戶調(diào)研，把所有的表情打印出來讓公司其他非設(shè)計(jì)非產(chǎn)品的同事填寫語義。之后又調(diào)取了某段時(shí)間表情發(fā)送數(shù)據(jù)。得出以下結(jié)果，并針對(duì)不常用表情做了刪減。（列表為舊版表情，按發(fā)送量排名）
我拿到這個(gè)文檔首先做競品分析。對(duì)比多個(gè)產(chǎn)品中的表情的語義哪個(gè)更準(zhǔn)確哪個(gè)更生動(dòng)。
之后開始上手做，我的方法是把所有表情排列挨個(gè)對(duì)照設(shè)計(jì)。（以下為當(dāng)時(shí)的psd畫布，上半部分是新版，下半部分是舊版，按照當(dāng)時(shí)微博客戶端排列方式排列，逐步修改添加。）黃臉底板調(diào)了十幾遍每次調(diào)整都是牽一發(fā)而動(dòng)全身，小表情的面部調(diào)整不計(jì)其數(shù)。
其中有些創(chuàng)作過程分享給大家：
愛你
這個(gè)表情其實(shí)舊版設(shè)計(jì)的已經(jīng)很生動(dòng)，憧憬的眼神，賣萌的嘴形，還有吐出的桃心，完全可以突出“愛你”的語義。我再創(chuàng)作的時(shí)候，糾結(jié)了很久，嘗試了很多方案。中間嘗試的幾個(gè)方案都沒有原版生動(dòng)，最后只修改了底板，沿用了舊版的面部。（飛機(jī)稿3純惡搞，靈感來源：越獄兔里的小黃雞）
大哭
大哭的表情改了很多遍，舊版語義其實(shí)有種躲在家里默默流淚的意思，但是“大”這個(gè)意思表達(dá)的不夠深刻。雖然都是哭但是哭中似乎還能看出其他內(nèi)含，比如飛機(jī)稿2是否讓你想起了那個(gè)痛并快樂著的夜晚？
新版較飛機(jī)稿3只是眼睛眉毛靠近了一下，嘴靠下一些，但是語義更深刻了。
表情設(shè)計(jì)與其他UI設(shè)計(jì)不同的是，可能挪了某一像素整個(gè)表情的語義就全變了。也許這也是設(shè)計(jì)表情的魅力所在。（畫這個(gè)表情的時(shí)候我是對(duì)著鏡子做了很多次鬼臉的）
其他一些舊版表情，語義不正確或者混攪的，都一一做了改版。
這三個(gè)語義在舊版表情里太過相近，比如“困”張嘴有打哈欠的語義，“打哈欠”有困的語義。為了區(qū)分這三個(gè)表情的語義我大費(fèi)周折，對(duì)比了許多其他產(chǎn)品但都無果，最后想起了漫畫中常用表現(xiàn)形式，比如“困”我借鑒了《加菲貓》里喬恩的燈泡眼，而睡覺則用漫畫中常用的 -zzzz來表現(xiàn)
這三個(gè)舊版表情的語義難以區(qū)分，‘呵呵’與‘可愛’太相似，且‘拜拜’只是在呵呵基礎(chǔ)上加了手掌。但卻是用戶最鐘愛的表情，很多用戶用‘呵呵’和‘拜拜’已經(jīng)脫離原有語義，進(jìn)化成高冷的語義。新版表情上線之后吐槽最多的就是這兩個(gè)。
“新版表情都帶了美瞳，丑哭了，還我高冷”—微博某深度用戶
創(chuàng)作過程，大號(hào)灰底為舊版，大號(hào)白底為新版中間為飛機(jī)稿。部分表情在我離開微博之后又有優(yōu)化。如‘呵呵’現(xiàn)在增加了眉毛，嘴角也有所變化。
這套表情發(fā)布之后，每天都有人罵，甚至有人創(chuàng)建了話題＃抵制新版表情＃。我每天提心吊膽，搜關(guān)鍵詞看用戶反饋到半夜，生怕公司因?yàn)橛脩舴从硰?qiáng)烈把這辛辛苦苦做了三個(gè)月的項(xiàng)目下線了，還好被老大頂住了。
看評(píng)論，很多人說美工去吃屎，還有邀我和他去天臺(tái)的。開始不理解為何用戶瘋狂吐槽，后來想明白了，無非是用戶用著不習(xí)慣，無法立刻接受改變。就像iOS6突然改成iOS7，當(dāng)時(shí)很多人罵丑，但是現(xiàn)在你用慣扁平化的界面再回去看看iOS6的擬物，會(huì)感覺low爆了。
且常使用表情的用戶多為90后，喜歡的不會(huì)專門發(fā)微博贊美你，但是不爽的一定會(huì)罵你。可能10個(gè)人中有1個(gè)喜歡8個(gè)無感還有1個(gè)不爽的，你看不到那9個(gè)人的反饋，唯一能看到的是這個(gè)不爽的人吐槽。
做這個(gè)項(xiàng)目得出一個(gè)結(jié)論那就是產(chǎn)品要一點(diǎn)一點(diǎn)改，絕不可一下來個(gè)大改版，一定會(huì)有用戶流失的（將死的產(chǎn)品不算）。
說到正題，雖然很多用戶罵其他表情，但是沒一個(gè)用戶罵它：
其實(shí)我在做表情之前，神煩狗doge在國外已經(jīng)炒雞火爆了。各種設(shè)計(jì)交流群里幾乎每天都可以看到有人發(fā)這只表情詭異的柴犬。
?？吹竭@只黃皮膚的狗，我就在想：如果在一群黃臉中塞一只表情詭異的狗一定會(huì)有特別的效果。（當(dāng)時(shí)并沒有想到它會(huì)這么火。）
然后這只狗就誕生了，當(dāng)然也做了很多嘗試，我并沒有完全按照照片去畫，那樣的話這只狗太過寫實(shí)與周圍的黃臉們就不搭了。所以就把它卡通化，放大眼睛以及眼神的萌傻感。
擅自在表情中加入doge，并得到老大認(rèn)可，（有個(gè)英明的老大是多么重要），同事兼好基友老湯同志對(duì)doge愛不釋眼，也擅自設(shè)計(jì)了‘喵喵'作為doge的女票。之后我又擅自加了浪頭的表情。
感受一下用戶怎么玩最后一只表情的。
再感受一下作為doge他爹是如何的光榮。
再感受一下用戶的智慧，以下表情都出自微博用戶之手。
老湯同志的延伸設(shè)計(jì)
之后老湯同志還把我們部門小伙伴的寵物都畫了一遍做了一套微博主題，可惜沒上線
左上角是我家貓’鉆鉆‘第二條微博內(nèi)的照片就是它。右下1是老大岳陽明家哈士奇，右下2是老湯家’粘粘‘。中間是交互部門老大家貓。
設(shè)計(jì)來源于生活，在無趣的工作中給自己創(chuàng)造點(diǎn)樂子又為公司創(chuàng)造價(jià)值，這個(gè)點(diǎn)我們做的很好。
新版表情發(fā)布之后那段時(shí)間，我每天都看用戶吐槽，每天擔(dān)心用戶會(huì)因表情流失。
當(dāng)時(shí)微信朋友圈特別流行一些小游戲，有一款游戲是在一堆蔡依林中間找鳳姐。
靈機(jī)一動(dòng)，我是否可以做個(gè)小游戲在一堆表情之間找doge呢？但是沒有開發(fā)，然后把這個(gè)提議和老大說了，老大一口答應(yīng)，幫我找到h5客戶端的開發(fā)大哥。（再一次拍馬屁：有一個(gè)英明的老大是多么重要）然后讓我自己推動(dòng)這件事。游戲特別簡單，就是在一分鐘之內(nèi)看誰找doge找的多。我熬了一夜加兩個(gè)白天，游戲規(guī)則＋UI＋文案全搞定。
游戲URL：http://m.weibo.cn/client/game?sinainternalbrowser=topnav
開發(fā)大哥調(diào)了一周，跟著微博h5客戶端一塊上線了。上線之后。。。。老板來總玩了一把！
你想像不到當(dāng)我看到一群大佬在下面聊我主導(dǎo)出來的東西的那種感受，爽極了！
這個(gè)游戲帶動(dòng)一個(gè)話題，當(dāng)時(shí)有2055w閱讀量：
讓我意淫一下 （這是去年做分享時(shí)的ppt內(nèi)容，現(xiàn)在數(shù)據(jù)是2302.8萬）
作為一個(gè)UI設(shè)計(jì)師，我的成就感80%來源于自我意淫，感謝微博UDC-M的小伙伴，很懷念當(dāng)年沒心沒肺的樣子。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（3條）