行业关键字
UI设计UI理论和资料 → 正文
聊天表情设计小探讨
作者: 健刚 来源: 淘宝UED 时间: 2010年1月11日

解释一下文章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时的千与千寻小无脸人。因为卡通形象颜色单一可以令单帧图片的容量很小,黑色又容易使受众印象深刻,而且卡通脸部是一个挂在黑色身子上的白色面具,容易展开“换脸”的创意。

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

小结一下,基于脸部变化的聊天表情和基于夸张动作的聊天表情都各有特点和优势,表达到位的设计和优秀的创意才是作品能否吸引受众使用、引起病毒效应的关键。聊天表情形象的设计精细程度(如颜色数量)、动作的时间跨度,与表情的最终图片容量这三者关系必须很好地得到平衡。

由于图片太多,显得本篇文章有点冗余,可读性或者不高,希望大家见谅。When we’re only No.2, we must try harder。谢谢大家耐着性子看到这里,附录以上提到的UED设计的表情让大家下载:

V2.0淘宝蚂蚁聊天表情下载
http://download.taobaocdn.com/ant/Taobao_Smiley_Pack_v2.0.rar

V3.0淘宝蚂蚁聊天表情下载
http://download.taobaocdn.com/ant/Taobao_Smiley_Pack_v3.0.rar

FACE-OFF无脸人聊天表情下载
http://www.jolam.cn/download/face_off.rar

原文链接:http://ued.taobao.com/blog/2010/01/06/smiley_design/

(责任编辑: 六六

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2024 视觉同盟 visionUnion.com)
Copyright © 2004-2024 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版