来源：淘宝用户体验设计（微信号：ali-taobaoued）
作者：丘黎 神患
原标题：淘宝2017-提示信息的情感化设计
一、开端：做一个有故事的淘宝
现如今，消费者对产品的需求从追求高性价比更多地转为高品质，虽然手机只是一个机器，但用户与产品之间当然是能有情感传递的，不然就只是一个冷冰冰的工具而已，能让用户在使用体验和过程中产生愉悦的产品才可能走的更远。
淘宝不只是售卖商品的平台，而是有活力、创造力的生态圈，淘宝的用户也是越来越年轻化，淘宝当然也应该有自己的故事，自己的“小情绪”，将这些有趣故事叙说给用户，这样才能给用户带来更好的购物心情和体验。
二、情感化的价值
“用户的情绪诉求”
产品给用户的第一印象决定了很多事情，人是视觉动物，第一眼对物的观察会本能地判断是否打动其内心，很多时候哪怕只是一个小小的细节，都有可能可能瞬间让人注意并且喜欢。
产品亦然，就像用户逛商场一样，如果逛着逛着心情越来越不好怎么会乐意继续逛下去呢？所以我们要追求的不仅仅是“可以用”而已，还要让用户在使用后和使用前一样的是愉悦的过程和心情。
“人性化的产品更受欢迎”
“人们喜欢和人交谈，而不是机器”，这句话出自唐纳德·诺曼写的《情感化设计》，其实道理很浅显，人性化的产品，脱离了冰冷的机器的味道，不再那么的呆板。
人机交互学科中，人性化是很重要的一部分，产品的设计者充分考虑到用户的心理感受，将产品化身成一个有个性、有脾气的人，相比冷冰冰的机器更能得到用户的好感和共鸣。
这种例子在现实生活和工业设计中不胜枚举，将机器拟人化情感化等元素使其更生动有趣由此被用户记住从而延续使用，脱颖而出，这就是赋予物以额外情感的价值。
人性化的产品更受欢迎
三、故事的由来
淘宝异常信息提示情感化现状梳理
如下图，目前手淘因为业务繁多、场景复杂以及底层架构等等原因，其异常场景比如为空场景、网络异常以及限流场景等等不仅在布局结构上有很大的优化空间，在其设计风格上不仅没有渗透淘宝的品牌心智，也没有互相之间横向统一，甚至在大促的一些特殊期间还会出现蹦出弹层等在用户看来就是BUG的尴尬情况。
首先这对用户在同一个产品的异常情况的心智认知达不到统一，其次还有可能让用户感到烦躁，这并不是我们想要的状况。
由此引申的设计目标
1. 视觉吸引 打动用户，抚平异常场景用户情绪，从而间接提升用户留存时间和点击转化率。
2. 结构统一 一致异常组件结构，横向业务也能统一对同一个形式提示内容的认知。
3. 品牌认知 淘宝主力增量人群趋于年轻化，渗透2017淘宝新品牌认知，亲和活力和鲜明。
设计目标引申
四、故事的序章
“这是一个亲和、活力和鲜明的故事”
淘宝的体验氛围应该是放松和舒适的，和用户的关系更亲密，立体个性化的表达，让淘宝更年轻鲜明。
基于这种品牌基调，我们需要打破原来的ICONFONTS的视觉传统，讲述一个以一个第三人称为中心，因为场景异常原因而经历的一幕幕奇妙故事。
脑暴风格元素绘制草图
淘宝的品牌图形化元素抽象化提取之后就是圆形，2017新的品牌元素形状也是重要的组成部分，这个形状寓意完满拥有用户和商品所具备的独特性，很多业务场景也出现了这个图形元素。
在整体风格和基本形状基调定下来之后，就是需要在脑海中根据各个场景构思各种各样的故事了。
前期可以大胆地去涂鸦绘制草图，丑一点没关系，关键的是把自己的想法表达清楚，并且大家也能在你稍加说明的前提下能理解你的思维，然后把能想到的全都记录下来，“大海、草原、沙漠星空”等等场景。当发散思维到一定程度之后，可以渐渐收敛，稍微打磨细节大家一起沟通敲定，下图为部分草稿图案：
初期绘制草图
“众里寻他千百度”—故事传递情感
构思故事的时候，可以比较大胆地天马行空地去想象。比如异常场景中，类似404页面的空页面比较多，那么就可以去想，可以用什么故事来表达“空”这层意思，构思的过程中就会发现，其实一个事物并不是只有“数目为零“才能表达”空“的意思，”沉睡“”躲避“”被抢走“等都可以让用户感知到这层意思，那么这样的话，故事的发展就很开阔了。
比如“订单为空”这个场景，就考虑了“订单躺在竹筏上飘走啦！”“你的订单正在山谷中沉睡。”两个故事，具有趣味性又能积极而准确地传递“为空”的信息。
构思订单为空的两个故事
五、文案的情感化表达
我们不仅使用图形和色彩构建故事、传递情感，还尝试对某些界面中的文案进行设计。我们的初衷很简单，就是希望某些界面中的文案表达可以有趣些。当用户看到这些文案的时候，能够会心一笑，或者吐个槽。
在界面设计中，文案设计是最容易被忽视的。很多时候，设计师眼里的文案就是“示例文字示例文字最多展示18个中文字符”。
用户使用一款应用，就像两个人认识的过程。生活中，我们通过“外貌、穿着、举止、谈吐”认识一个人。而在界面设计中，“图形和色彩”就好比人的“外貌和穿着”，“动效”就好比人的“举止“，“文案”就是一个人的“谈吐”，是一个人对另一人说的话。
直播很火，男同胞们可能都有过这样的经验：封面看起来让人怦然心动的的女主播，一开口说话能让你怀疑人生。一样火的高晓松老师，有多少女粉丝放弃了原有的“审美原则”想睡他，就是因为他的口活好。可见，一个人说的话有多么重要。
文案设计过程中，我们需要考虑两个点：
1. 两个人之间是什么样的关系决定了两个人会说什么话、怎么说
比如“加班”这件事情，你和你老板聊的时候，肯定没有你和你的朋友、亲人聊的时候来得痛心疾首、毫无保留。
我们希望手机淘宝和用户之间的关系像是“朋友/闺蜜”，可以一起闲聊、吐槽、鸡汤。当用户沮丧的时候表达关心，当用户困惑的时候提供帮助，当用户完成某个目标的时候表示祝贺。
2. 不同性格的人，面对同一件事情，说的话也不一样
比如面对“需求变更”这件事情，好脾气的设计师回了一句“好的，亲！”就义无反顾地开始改稿，而暴脾气的设计师则从口袋里掏出一把2米长的西瓜刀，擦了又擦：“我改一稿，你挨一刀，没毛病！”。
我们希望手机淘宝是一个集各种优秀品质于一身的的“朋友/闺蜜”，根据场景不同，可以热心、温暖、体贴，也可以逗逼、无聊、毒舌，能够在不经意间为用户制造一点小惊喜、小意外。
以下是部分场景的文案设计：
六、故事的发展
颜色应用规范
2017淘宝品牌色系仍然是橙色系，与之前不同的是，今年加入了微渐变来做更丰富的视觉表现，更加年轻化和更具有活力，这一点在故事的设计中仍然是需要继承的。主要色彩仍然是橙色系，大色块采用微渐变的方式，小色块采用纯色，不然画面渐变太多可能就眼花缭乱了,如图是手淘基本链路色彩应用拆解：
故事性，趣味性以及共同设计元素
基于上面提到的思考方式，各个主要异常场景的信息提示画面也逐个设计出来，除了组件结构上的统一运用，就是视觉上对故事情节和风格的体现
通用设计元素
1. 光源统一在左上角，视角一般为正视或正俯视图。
2. 异常场景下背景全部为圆形，后续可能会拓展形状。
3. 延续老版的小人，但小人只起到一个点缀和对比场景物体大小的作用。
4. 设计元素不采用描边，纯色和微渐变搭配，一般为远中近三层元素，主体元素存在阴影，营造层次感。
故事一：太空网络遗迹
通用的“网络异常”的场景，讲的是“一个宇航员在外太空寻找网络遗迹”的故事，太空场景本身就是一种神秘且容易丢失的空间，将网络夸张拟物保证意义明确，最后定格在正向俯视图上。
网络异常场景
故事二：大漠足印
“足迹为空”的场景，是“一个考古学家在大漠中追寻巨人足迹”的故事，一个在沙漠中找寻的学家，发现了一个类似巨人的足印，但足印的主人不知所踪。
足迹为空场景
故事三：拥挤的传送带
通用限流场景，把货物拟人化，卡在货物传送带的入口上你推我搡，丰富的画面间接体现拥挤的感觉。
限流场景
其他场景集合（部分）：
异常场景组件和结构的统一
由于手淘中业务繁多场景复杂，有的存在多重信息导航，有的存在二级内容，有的甚至是在场景中间可能会出现异常，从而导致目前各个业务异常场景结构不一，这里是需要统一认知的。
这里从最常用的通用场景和一些存在别的内容的特殊场景比如：购物车和评价场景等等。针对不同的场景做了横向统一，首先统一了二级内容的高度规范，其次规范了二级内容为空等等的一些特殊情况供其他业务的设计师参考。
1. 通用布局
通用场景规范适用于手淘中网络异常、限流等全局异常场景，这些场景中除了异常提示信息没有别的内容出现,文案可配置，相同场景统一为一种文案。
2. 一级内容为空
场景中第一级内容为空或者异常，并且只存在第一级的TitleBar，比如购物车为空等场景。
3. 次级内容为空
一级内容一般高度无法控制，故仍然需要设计师配合各自链路开发适配组件位置，例如评论详情，店铺详情，消息等场景，图示给出场景示例：
图文信息内部结构由架构组同学做成统一组件可以让其他业务的开发复用，这样大大降低了以后各个业务线更改同步的成本以及开发成本，这里对此不多做叙述。
订单详情配置图优化
手淘中还存在情感化作为氛围渲染的场景，这些场景先分别根据各自原本的布局来重绘氛围插图，暂不统一整改结构，例如订单详情页面的氛围。
订单详情
七、故事的结果和延续
落地实现效果及未来的反馈
目前只上线了部分异常场景，虽然没有完全完成，但是上线的部分还原度都是高的。我们将在后续的版本中陆续更新完成。
这些异常场景比较隐蔽，大多数用户对于平常的异常场景不仅看不到而且并不在意，故这一块难以采集数据，只能看在未来全部上线一段时间后，用户的反馈是否涉及到这一块，到时便交与用户评说了。
故事将会更有趣
淘宝的故事不仅仅是这些，当然会有更多更有趣的故事将会展示给用户。
未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去，从而覆盖整个淘宝，真正地实现做到一个“有故事的淘宝”。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（2条）