當前位置:
首頁 > 創意 > 長篇大論!關於微博狗表情是如何誕生的!

長篇大論!關於微博狗表情是如何誕生的!

我叫馮大偉,西安美院畢業,最早入行的時候在一家做設計服務的公司(現被洛可可收購)。然後進了新浪微博,14年底和當時的同事創辦了UI培訓機構章魚學院以及半吊子的設計公司WinoDesign,後來被坑了(這段黑歷史就不提了)。現在擔任小米生態鏈某公司的UI設計總監,管理一個8人團隊服務公司7個產品線。五年間從一個小UI設計師到創業者再到老師再到團隊管理者,這一路風風雨雨充滿荊棘但我卻樂此不疲。

長篇大論!關於微博狗表情是如何誕生的!


14年初微博剛剛做了大改版3.6,戰略商業化,界面卡片化,且正當iOS6與iOS7過渡期。不規則形狀的表情已不適應當下扁平且商業化的界面,所以老大(岳陽明-現微博UDC老大)經過深思熟慮,決定重新改版微博表情,把重任放在了我和另一個設計師身上,我做黃臉和手的表情另一個同事做其他表情,在正經需求排滿狀態下每天畫一兩小時不正經的表情,斷斷續續做了三個月。最終呈現給大家的就是現在微博客戶端那套表情。

長篇大論!關於微博狗表情是如何誕生的!



項目剛開始我們做了一些用戶調研,把所有的表情列印出來讓公司其他非設計非產品的同事填寫語義。之後又調取了某段時間表情發送數據。得出以下結果,並針對不常用表情做了刪減。(按發送量排名)

長篇大論!關於微博狗表情是如何誕生的!



我拿到這個文檔首先做競品分析。對比每個產品其中的每個表情的語義哪個更準確。

長篇大論!關於微博狗表情是如何誕生的!


之後開始上手做,我的方法是把所有表情排列挨個對照設計。(以下為當時的psd畫布,上半部分是新版,下半部分是舊版,排列按照當時微博客戶端排列方式,逐步修改添加。)

長篇大論!關於微博狗表情是如何誕生的!



其中有些創作過程分享給大家


(愛你)

長篇大論!關於微博狗表情是如何誕生的!



這個表情其實舊版設計很生動,憧憬的眼神,賣萌的嘴形,還有吐出的桃心,完全可以突出「愛你」的語義。我再創作的時候,糾結了很久,嘗試了很多方案。表情設計與其他UI設計不同的是,可能挪了某一像素整個表情的語義就全變了。


中間嘗試的幾個方案都沒有原版生動,最後只修改了底板,沿用了舊版的面部。(飛機稿3純惡搞,靈感來源:越獄兔里的小黃雞)

(大哭)

長篇大論!關於微博狗表情是如何誕生的!



大哭的表情改了很多遍,舊版語義其實有種躲在家裡默默流淚的意思,但是「大」這個意思表達的不夠深刻。雖然都是哭但是哭里似乎還有其他內涵,比如新版較飛機稿3隻是眼睛眉毛更接近,嘴更靠下,但是語義更深刻,這就是表情魅力所在。(畫這個表情的時候我是對著鏡子做了很多次鬼臉的)


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

長篇大論!關於微博狗表情是如何誕生的!



這三個語義在舊版表情里太過相近,比如困張嘴有打哈欠的語義,打哈欠那個有困的語義。為了區分這三個表情的語義我大費周折,對比了許多其他產品但都無果,最後想起了漫畫的一些常用表情。比如「困」我借鑒了《加菲貓》里喬恩的燈泡眼,而睡覺則漫畫常用的 -zzzz

長篇大論!關於微博狗表情是如何誕生的!


長篇大論!關於微博狗表情是如何誕生的!



這三個舊版表情的語義難以區分,『呵呵』與『可愛』太相似,且『拜拜』只是在呵呵基礎上加了手掌。但卻是用戶最鍾愛的表情,很多用戶用『呵呵』和『拜拜』已經脫離原有語義進化成高冷的意味。所有新版表情上線後很多吐槽最多的就是這兩個。

長篇大論!關於微博狗表情是如何誕生的!



創作過程,舊版和新版中間為飛機稿,部分表情在我離開微博之後又有優化。比如以一個『呵呵』現在增加了眉毛嘴角也有所變化。


這套表情發布之後,每天都有人罵,甚至有人新建了話題#抵制新版表情#我天天提心弔膽,每天搜關鍵詞看用戶反饋,生怕公司因為用戶反映強烈把這辛辛苦苦做了三個月的項目下線了。

長篇大論!關於微博狗表情是如何誕生的!



後來想明白了,無非是用戶用著不習慣,無法立刻接受改變,且常用表情的用戶多為90後,喜歡的不會專門發微博讚美你,但是不爽的一定要罵。


可能10個人里有1個喜歡8個無感還有一個不爽,你看不到那9個人的反饋,唯一能看到的是那個不爽的人吐槽。就像iOS6突然改成iOS7,當時很多人罵丑,但是現在你用慣扁平化的界面再回去看看iOS6的擬物,會感覺low爆了。做這個項目得出一個結論那就是產品要一點一點改,絕不可一下來個大改版,一定會有用戶流失的(將死的產品不算)。


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

長篇大論!關於微博狗表情是如何誕生的!



其實我在做表情之前 神煩狗doge在國外已經火爆了。當我在做這個項目的時候,各種UI群里幾乎每天可以見到這隻表情詭異的柴犬。

長篇大論!關於微博狗表情是如何誕生的!



看到這隻黃皮膚的狗我就在想,如果在一群黃臉中塞一狗狗一定會有特別的效果,當時並沒有想到它會這麼火。


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


擅自在表情中加入doge,並得到老大認可,(有個英明的老大是多麼重要),同事兼好基友老湯同志對doge愛不釋眼,也擅自設計了『喵喵"作為doge的女票。之後我又擅自加了浪頭的表情。

長篇大論!關於微博狗表情是如何誕生的!



感受一下用戶怎麼玩最後一隻表情的。

長篇大論!關於微博狗表情是如何誕生的!



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

長篇大論!關於微博狗表情是如何誕生的!



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

長篇大論!關於微博狗表情是如何誕生的!



老湯同志的延伸設計

長篇大論!關於微博狗表情是如何誕生的!



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

長篇大論!關於微博狗表情是如何誕生的!



左上角是我家貓』鑽鑽『第二條微博內的照片就是它。右下1是老大岳陽明家哈士奇,右下2是老湯家』粘粘『。中間是交互部門老大家貓。設計來源於生活一點不假,在無趣的工作中給自己創造點樂子有為公司創造價值,這個點我們做的很好。


新版表情發布之後那段時間,我每天都看用戶吐槽,每天擔心用戶會因表情流失。當時微信朋友圈特別流行一些小遊戲,有一款遊戲是在一堆蔡依林中間找鳳姐。


靈機一動,我是否可以做個小遊戲在一堆表情之間找doge呢?但是沒有開發,然後把這個提議和老大說了,老大一口答應,幫我找到h5客戶端的開發大哥。(再一次拍馬屁-有一個英明的老大是多麼重要)然後讓我自己推動這件事。遊戲特別簡單,就是在一分鐘之內看誰找doge找的多。我熬了一夜加兩個白天,遊戲規則+UI+文案全搞定。

長篇大論!關於微博狗表情是如何誕生的!


長篇大論!關於微博狗表情是如何誕生的!



然後和開發大哥調了一周,跟著微博h5客戶端一塊上線了


讓我意淫一下


(這是去年做分享時的ppt內容,現在數據是2302.8萬)

長篇大論!關於微博狗表情是如何誕生的!



作為一個UI設計師,我的成就感80%來源於自我意淫,當然這個表情有多麼火給微博帶來多少活躍度都與現在的我無關。


請您繼續閱讀更多來自 設計的那些事 的精彩文章:

你的GIF圖是表情!人家的GIF圖是藝術!
斐波那契螺旋線-賞析黃金比例的實際應用
設計師應普及的VR行業信息
ICON圖標還能這樣用,環球旅遊不管碰上什麼語言瞬間溝通!
下輩子別當設計師了,反正我是不當了!

TAG:設計的那些事 |

您可能感興趣

大眼萌妹是如何誕生的?
癌細胞是如何誕生的?
又一對中韓情侶誕生!朱鎮模-張儷承認戀情 微博大秀恩愛
「小賤賤」是如何誕生的?《死侍》概念圖曝光!
野史秘聞:尼龍長襪如何誕生的?它曾是上流社會身份標識
港姐十強誕生這顏值你還滿意嗎?於正疑似吐槽《如懿傳》
搞笑gif圖:什麼情況?難道是孫二聖誕生了嗎?
宇宙最大的天體究竟是如何誕生的?
史上最可愛的妹妹是如何誕生的?
漫威是如何讓誕生的,記住這十件大事
宇宙大爆炸之後,生命的誕生真的是巧合嗎?
絲襪是如何誕生的?
量子理論:宇宙誕生於虛無,但該理論為何在宇宙誕生前就已存在?
大美不言?且看藝術品如何誕生
偽娘進化史!詳細解析「偽娘」這種神奇生物到底是如何誕生的?
「漫畫」宇宙是怎麼誕生的?
原來如此!《戀愛暴君》的萌妹子是這麼誕生的
《王者榮耀》等「爆款」遊戲是如何誕生的?
《集王聖教序》是如何誕生的?漲知識了!