回到主页

关于当年微博那只doge的设计

做微博表情纯属是机缘巧合,这个项目没有产品经理没有排期,甚至除了UDC-M其他部门的领导都不知道,是一次完全是由设计师主导的改版

首先自我介绍一下,我叫冯大伟,西安美院毕业,最早入行的时候在一家做设计服务的公司(现被洛可可收购)。后来进了新浪微博,之后担任小米生态链某公司的UI设计总监,管理一个8人团队服务公司7个产品线。现在又开始创业做大渔学院,一个UI培训机构并且亲自带课,五年间从一个小UI设计师到创业者再到老师再到团队管理者,这一路风风雨雨充满荆棘但我却乐此不疲。

broken image

言归正传,做微博表情纯属是机缘巧合,这个项目没有产品经理没有排期,甚至除了UDC-M其他部门的领导都不知道,是一次完全是由设计师主导的改版。

14年初微博刚刚做了大改版3.6,战略商业化,界面卡片化,且正当iOS6与iOS7的过渡期。

不规则形状的表情已不适应当下扁平且商业化的界面,所以老大经过深思熟虑,决定重新改版微博表情,把重任放在了我和另一个设计师身上,我做黄脸和手的表情她做其他表情。在正经需求排满状态下每天画一两小时不正经的表情,断断续续做了三个月。最终呈现给大家的就是现在微博客户端上的这套表情。

项目刚开始我们做了一些用户调研,把所有的表情打印出来让公司其他非设计非产品的同事填写语义。之后又调取了某段时间表情发送数据。得出以下结果,并针对不常用表情做了删减。(列表为旧版表情,按发送量排名)

broken image

我拿到这个文档首先做竞品分析。对比多个产品中的表情的语义哪个更准确哪个更生动。

broken image

之后开始上手做,我的方法是把所有表情排列挨个对照设计。(以下为当时的psd画布,上半部分是新版,下半部分是旧版,按照当时微博客户端排列方式排列,逐步修改添加。)黄脸底板调了十几遍每次调整都是牵一发而动全身,小表情的面部调整不计其数。

------------------------------------------

其中有些创作过程分享给大家, 

(爱你)

broken image

这个表情其实旧版设计的已经很生动,憧憬的眼神,卖萌的嘴形,还有吐出的桃心,完全可以突出“爱你”的语义。我再创作的时候,纠结了很久,尝试了很多方案。中间尝试的几个方案都没有原版生动,最后只修改了底板,沿用了旧版的面部。(飞机稿3純恶搞,灵感来源:越狱兔里的小黄鸡)

------------------------------------------

(大哭)

broken image

大哭的表情改了很多遍,旧版语义其实有种躲在家里默默流泪的意思,但是“大”这个意思表达的不够深刻。

虽然都是哭但是哭中似乎还能看出其他内含,比如飞机稿2是否让你想起了那个痛并快乐着的夜晚?

新版较飞机稿3只是眼睛眉毛靠近了一下,嘴靠下一些,但是语义更深刻了。

表情设计与其他UI设计不同的是,可能挪了某一像素整个表情的语义就全变了。也许这也是设计表情的魅力所在。(画这个表情的时候我是对着镜子做了很多次鬼脸的)

其他一些旧版表情,语义不正确或者混搅的,都一一做了改版。

broken image

这三个语义在旧版表情里太过相近,比如“困”张嘴有打哈欠的语义,“打哈欠”有困的语义。为了区分这三个表情的语义我大费周折,对比了许多其他产品但都无果,最后想起了漫画中常用表现形式。

broken image

比如“困”我借鉴了《加菲猫》里乔恩的灯泡眼,而睡觉则用漫画中常用的 -zzzz来表现

broken image

这三个旧版表情的语义难以区分,‘呵呵’与‘可爱’太相似,且‘拜拜’只是在呵呵基础上加了手掌。但却是用户最钟爱的表情,很多用户用‘呵呵’和‘拜拜’已经脱离原有语义,进化成高冷的语义。新版表情上线之后吐槽最多的就是这两个。

“新版表情都带了美瞳,丑哭了,还我高冷”—微博某深度用户

broken image

创作过程,大号灰底为旧版,大号白底为新版中间为飞机稿。部分表情在我离开微博之后又有优化。

如‘呵呵’现在增加了眉毛,嘴角也有所变化。

这套表情发布之后,每天都有人骂,甚至有人创建了话题#抵制新版表情#。

我每天提心吊胆,搜关键词看用户反馈到半夜,生怕公司因为用户反映强烈把这辛辛苦苦做了三个月的项目下线了,还好被老大顶住了。

broken image

看评论,很多人说美工去吃屎,还有邀我和他去天台的。开始不理解为何用户疯狂吐槽,后来想明白了,无非是用户用着不习惯,无法立刻接受改变。就像iOS6突然改成iOS7,当时很多人骂丑,但是现在你用惯扁平化的界面再回去看看iOS6的拟物,会感觉low爆了。

且常使用表情的用户多为90后,喜欢的不会专门发微博赞美你,但是不爽的一定会骂你。可能10个人中有1个喜欢8个无感还有1个不爽的,你看不到那9个人的反馈,唯一能看到的是这个不爽的人吐槽。

做这个项目得出一个结论那就是产品要一点一点改,绝不可一下来个大改版,一定会有用户流失的(将死的产品不算)。

说到正题,虽然很多用户骂其他表情,但是没一个用户骂它:

broken image

其实我在做表情之前,神烦狗doge在国外已经炒鸡火爆了。各种设计交流群里几乎每天都可以看到有人发这只表情诡异的柴犬。

常看到这只黄皮肤的狗,我就在想:如果在一群黄脸中塞一只表情诡异的狗一定会有特别的效果。(当时并没有想到它会这么火。)

然后这只狗就诞生了,当然也做了很多尝试,我并没有完全按照照片去画,那样的话这只狗太过写实与周围的黄脸们就不搭了。所以就把它卡通化,放大眼睛以及眼神的萌傻感。

擅自在表情中加入doge,并得到老大认可,(有个英明的老大是多么重要),同事兼好基友老汤同志对doge爱不释眼,也擅自设计了‘喵喵'作为doge的女票。之后我又擅自加了浪头的表情。

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

broken image

再感受一下作为doge他爹是如何的光荣。

-----我是会动的分割线-----

新版表情发布之后那段时间,我每天都看用户吐槽,每天担心用户会因表情流失。

当时微信朋友圈特别流行一些小游戏,有一款游戏是在一堆蔡依林中间找凤姐。

灵机一动,我是否可以做个小游戏在一堆表情之间找doge呢?但是没有开发,然后把这个提议和老大说了,老大一口答应,帮我找到h5客户端的开发大哥。(再一次拍马屁:有一个英明的老大是多么重要)然后让我自己推动这件事。游戏特别简单,就是在一分钟之内看谁找doge找的多。我熬了一夜加两个白天,游戏规则+UI+文案全搞定。

broken image
broken image

开发大哥调了一周,跟着微博h5客户端一块上线了。

上线之后。。。。微博CEO来总玩了一把!

而我现在重新上路继续做UI培训‘大渔学院’,亲自授课,会把公司项目及真正的实战技巧传授给你

现在8月15号第二期北京线下全日班火热报名中,名额有限先报优惠。

想了解请戳:www.dayuxy.com