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