微博那個魔性的狗頭表情是如何誕生的？今天請它的創(chuàng)造者@JOnes馮大偉??來親自說一下Doge的誕生過程，包括同學們現(xiàn)在用的微博表情，也有一大半是他繪制的，改版過程好玩有趣有干貨，一起來探秘背后的故事！

同樣是表情改版，QQ設計師是這么做的：《騰訊設計師揭秘！QQ默認表情優(yōu)化背后的設計故事》

首先自我介紹一下，我叫馮大偉，西安美院畢業(yè)，最早入行的時候在一家做設計服務的公司（現(xiàn)被洛可可收購）。后來進了新浪微博，14年底從微博出來和當時的同事創(chuàng)辦了UI培訓機構(gòu)章魚學院以及半吊子的設計公司W(wǎng)inoDesign，后來被坑了（這段黑歷史就不提了）。現(xiàn)在擔任小米生態(tài)鏈某公司的UI設計總監(jiān)，管理一個8人團隊服務公司7個產(chǎn)品線。五年間從一個小UI設計師到創(chuàng)業(yè)者再到老師再到團隊管理者，這一路風風雨雨充滿荊棘但我卻樂此不疲。

言歸正傳，做微博表情純屬是機緣巧合，這個項目沒有產(chǎn)品經(jīng)理沒有排期，甚至除了UDC-M其他部門的領導都不知道，是一次完全是由設計師主導的改版。

14年初微博剛剛做了大改版3.6，戰(zhàn)略商業(yè)化，界面卡片化，且正當iOS6與iOS7的過渡期。

不規(guī)則形狀的表情已不適應當下扁平且商業(yè)化的界面，所以老大（岳陽明－現(xiàn)微博UDC老大）經(jīng)過深思熟慮，決定重新改版微博表情，把重任放在了我和另一個設計師（厲芳潔）身上，我做黃臉和手的表情她做其他表情。在正經(jīng)需求排滿狀態(tài)下每天畫一兩小時不正經(jīng)的表情，斷斷續(xù)續(xù)做了三個月。最終呈現(xiàn)給大家的就是現(xiàn)在微博客戶端上的這套表情。

項目剛開始我們做了一些用戶調(diào)研，把所有的表情打印出來讓公司其他非設計非產(chǎn)品的同事填寫語義。之后又調(diào)取了某段時間表情發(fā)送數(shù)據(jù)。得出以下結(jié)果，并針對不常用表情做了刪減。（列表為舊版表情，按發(fā)送量排名）

我拿到這個文檔首先做競品分析。對比多個產(chǎn)品中的表情的語義哪個更準確哪個更生動。

之后開始上手做，我的方法是把所有表情排列挨個對照設計。（以下為當時的PSD畫布，上半部分是新版，下半部分是舊版，按照當時微博客戶端排列方式排列，逐步修改添加。）黃臉底板調(diào)了十幾遍每次調(diào)整都是牽一發(fā)而動全身，小表情的面部調(diào)整不計其數(shù)。

其中有些創(chuàng)作過程分享給大家，

（愛你）

這個表情其實舊版設計的已經(jīng)很生動，憧憬的眼神，賣萌的嘴形，還有吐出的桃心，完全可以突出“愛你”的語義。我再創(chuàng)作的時候，糾結(jié)了很久，嘗試了很多方案。中間嘗試的幾個方案都沒有原版生動，最后只修改了底板，沿用了舊版的面部。（飛機稿3純惡搞，靈感來源：越獄兔里的小黃雞）

（大哭）

大哭的表情改了很多遍，舊版語義其實有種躲在家里默默流淚的意思，但是“大”這個意思表達的不夠深刻。

雖然都是哭但是哭中似乎還能看出其他內(nèi)含，比如飛機稿2是否讓你想起了那個痛并快樂著的夜晚？

新版較飛機稿3只是眼睛眉毛靠近了一下，嘴靠下一些，但是語義更深刻了。

表情設計與其他UI設計不同的是，可能挪了某一像素整個表情的語義就全變了。也許這也是設計表情的魅力所在。（畫這個表情的時候我是對著鏡子做了很多次鬼臉的）

其他一些舊版表情，語義不正確或者混攪的，都一一做了改版。

這三個語義在舊版表情里太過相近，比如“困”張嘴有打哈欠的語義，“打哈欠”有困的語義。為了區(qū)分這三個表情的語義我大費周折，對比了許多其他產(chǎn)品但都無果，最后想起了漫畫中常用表現(xiàn)形式。

比如“困”我借鑒了《加菲貓》里喬恩的燈泡眼，而睡覺則用漫畫中常用的 -zzzz來表現(xiàn)

這三個舊版表情的語義難以區(qū)分，‘呵呵’與‘可愛’太相似，且‘拜拜’只是在呵呵基礎上加了手掌。但卻是用戶最鐘愛的表情，很多用戶用‘呵呵’和‘拜拜’已經(jīng)脫離原有語義，進化成高冷的語義。新版表情上線之后吐槽最多的就是這兩個。

“新版表情都帶了美瞳，丑哭了，還我高冷”—微博某深度用戶

創(chuàng)作過程，大號灰底為舊版，大號白底為新版中間為飛機稿。部分表情在我離開微博之后又有優(yōu)化。

如‘呵呵’現(xiàn)在增加了眉毛，嘴角也有所變化。

這套表情發(fā)布之后，每天都有人罵，甚至有人創(chuàng)建了話題＃抵制新版表情＃。

我每天提心吊膽，搜關鍵詞看用戶反饋到半夜，生怕公司因為用戶反映強烈把這辛辛苦苦做了三個月的項目下線了，還好被老大頂住了。

看評論，很多人說美工去吃屎，還有邀我和他去天臺的。開始不理解為何用戶瘋狂吐槽，后來想明白了，無非是用戶用著不習慣，無法立刻接受改變。就像iOS6突然改成iOS7，當時很多人罵丑，但是現(xiàn)在你用慣扁平化的界面再回去看看iOS6的擬物，會感覺low爆了。

且常使用表情的用戶多為90后，喜歡的不會專門發(fā)微博贊美你，但是不爽的一定會罵你。可能10個人中有1個喜歡8個無感還有1個不爽的，你看不到那9個人的反饋，唯一能看到的是這個不爽的人吐槽。

做這個項目得出一個結(jié)論那就是產(chǎn)品要一點一點改，絕不可一下來個大改版，一定會有用戶流失的（將死的產(chǎn)品不算）。

說到正題，雖然很多用戶罵其他表情，但是沒一個用戶罵它：

其實我在做表情之前，神煩狗doge在國外已經(jīng)炒雞火爆了。各種設計交流群里幾乎每天都可以看到有人發(fā)這只表情詭異的柴犬。

常看到這只黃皮膚的狗，我就在想：如果在一群黃臉中塞一只表情詭異的狗一定會有特別的效果。（當時并沒有想到它會這么火。）

然后這只狗就誕生了，當然也做了很多嘗試，我并沒有完全按照照片去畫，那樣的話這只狗太過寫實與周圍的黃臉們就不搭了。所以就把它卡通化，放大眼睛以及眼神的萌傻感。

擅自在表情中加入doge，并得到老大認可，（有個英明的老大是多么重要），同事兼好基友老湯同志對doge愛不釋眼，也擅自設計了‘喵喵'作為doge的女票。之后我又擅自加了浪頭的表情。

感受一下用戶怎么玩最后一只表情的。

再感受一下作為doge他爹是如何的光榮。

再感受一下用戶的智慧，以下表情都出自微博用戶之手。

老湯同志的延伸設計

之后老湯同志還把我們部門小伙伴的寵物都畫了一遍做了一套微博主題，可惜沒上線

左上角是我家貓’鉆鉆‘第二條微博內(nèi)的照片就是它。右下1是老大岳陽明家哈士奇，右下2是老湯家’粘粘‘。中間是交互部門老大家貓。

設計來源于生活，在無趣的工作中給自己創(chuàng)造點樂子又為公司創(chuàng)造價值，這個點我們做的很好。

新版表情發(fā)布之后那段時間，我每天都看用戶吐槽，每天擔心用戶會因表情流失。

當時微信朋友圈特別流行一些小游戲，有一款游戲是在一堆蔡依林中間找鳳姐。

靈機一動，我是否可以做個小游戲在一堆表情之間找doge呢？但是沒有開發(fā)，然后把這個提議和老大說了，老大一口答應，幫我找到h5客戶端的開發(fā)大哥。（再一次拍馬屁：有一個英明的老大是多么重要）然后讓我自己推動這件事。游戲特別簡單，就是在一分鐘之內(nèi)看誰找doge找的多。我熬了一夜加兩個白天，游戲規(guī)則＋UI＋文案全搞定。

開發(fā)大哥調(diào)了一周，跟著微博h5客戶端一塊上線了。

上線之后。。。。老板來總玩了一把！

你想像不到當我看到一群大佬在下面聊我主導出來的東西的那種感受，爽極了！

這個游戲帶動一個話題，當時有2055w閱讀量~

讓我意淫一下 （這是去年做分享時的ppt內(nèi)容，現(xiàn)在數(shù)據(jù)是2302.8萬）

作為一個UI設計師，我的成就感80%來源于自我意淫，

感謝微博UDC-M的小伙伴，很懷念當年沒心沒肺的樣子。

找柴犬游戲鏈接：http://m.weibo.cn/client/game

話題鏈接：http://weibo.com

QQ交流群：494906156

附高清無碼3x表情資源：http://pan.baidu.com/s/1slekZq1

而我現(xiàn)在又走上了獨自創(chuàng)業(yè)之路，為需要學習的設計師們服務，想了解請戳：www.dayu.design

「那些優(yōu)秀設計作品背后的故事」

《月熊志》：國際頂尖作品！《月熊志》公益主題網(wǎng)站背后的設計故事

Medium：LOGO改版實戰(zhàn)！聊聊MEDIUM 2.0新LOGO背后的設計故事

QQ音樂巔峰榜：字體設計實戰(zhàn)！QQ音樂巔峰榜誕生記

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com