When we`re only No.2, we try harder之聊天表情设计小探讨 -- 视觉设计 -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> 视觉设计 --> When we`re only No.2, we try harder之聊天表情设计小探讨

When we`re only No.2, we try harder之聊天表情设计小探讨

浏览:6499次出处信息

解释一下文章title的意思，取自William Bernbach (DDB)1963年为Avis设计的广告。（原话为：When you’re only No.2, you try harder. Or else…）去年初开始接触淘宝蚂蚁聊天表情的设计任务，上面本来想找外包广告公司做，但后来由于种种原因，最后还是决定让我这个门外汉直接设计。

无论是之前提到的pixel art，旺旺的淘宝蚂蚁聊天表情，以及我们的FLASH节日LOGO，都是在别人已经做得很成功的设计领域，硬着头皮闯进去的，所以我们前面永远有一个值得学习的榜样，这是幸事，至少可以少走一点弯路；但同时也是一种痛苦，让用户觉得我们老是跟着别人屁股走。因此，当我们only No.2（甚至更差）时，we have to try harder.

正式开始淘宝蚂蚁的聊天表情设计，我们把目前网络上流行的部分聊天表情收集进来，网络上的聊天表情真可谓百花齐放，优秀的作品层出不穷。经过简单的类比后大致分为三类：1.以身体动作为创意：代表就是大家都非常喜欢的兔斯基。兔斯基形象由线条构成，整套表情基本上采用黑白两色设计，把创意点放在夸张的身体动作上；2.以脸部表情为创意：像绿豆娃和蘑菇点点两个系列，由于卡通形象头部了颜色比较丰富，所以把表现的创意放在脸部，以脸部表情为主；3.最后一类是上述两个类别的结合，像潘达达、阿狸与悠喜猴三个系列设计地比较灵活，该脸部表情时就放大脸部，身体要动作时，就把整个形象缩小，露出身体。

为淘宝蚂蚁聊天表情的风格定位时，我们做了几个版本的方案，从纯平面形象的表情到后来逐渐加上更多的过渡色、高光等细节，使形象更加饱满，由于运用的色彩不断丰富，这也确定了我们聊天表情的定位只能以脸部表情创意为主。这是因为淘蚂蚁形象的色彩丰富了，导致每帧表情的图片容量大幅增加，如果再安排很多身体动作的话，会使到单个表情（由多张单帧图片叠加起来）的容量会非常大，用过WW的同学都知道，等待表情和图片LOADING时候那个痛苦啊。终于，通过了三个版本的尝试后，我们的淘宝蚂蚁聊天表情终于做出来了。

我们之前将网络上的聊天表情大概作了个分类，我在制作淘宝蚂蚁聊天表情的过程中，就深刻体会到以脸部表情作为主要设计创意，并不能摆完全脱网络上其它聊天表情的同质化影子（例如都用“可爱”、“贱”等风格），其实这是利用了卡通形象本身的特征，而不是表情动作来吸引受众。笔者并不是说“可爱”、“贱”等风格的表情就不是好设计，而是说，像兔斯基这种以极其简单形象，通过天马行空的动作来呈现表情性格的作品，相比起前者来说更有难度。相比起脸部表情，身体动作可以更加夸张，更富戏剧性（Dramatic），因此也更容易让人记住。

为了更好的揣摩聊天表情的设计创意，笔者利用视觉组视觉研究的一个小课题，制作了几款基于身体动作为创意的无脸人小表情，取了吴宇森的电影名称-Face Off。为了可以最大限度地发挥动作上的创意，我在形象挑选时继续使用了飞飞的小公仔-上次画pixel时的千与千寻小无脸人。因为卡通形象颜色单一可以令单帧图片的容量很小，黑色又容易使受众印象深刻，而且卡通脸部是一个挂在黑色身子上的白色面具，容易展开“换脸”的创意。

在设计了两款小表情进行热身后，我们开始以无脸人特征作为出发点，首先设计了蒙罗丽莎的表情。然后当然就是一些模仿世界名画、人物经典动作等等的创意。具体的创意过程如下图：