提示信息的情感化设计,做一个有故事的淘宝

未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去,从而覆盖整个淘宝,真正地实现做到一个“有故事的淘宝”。


未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去,从而覆盖整个淘宝,真正地实现做到一个“有故事的淘宝”。

提示信息的情感化设计,做一个有故事的淘宝

现如今,消费者对产品的需求从追求高性价比更多地转为高品质,虽然手机只是一个机器,但用户与产品之间当然是能有情感传递的,不然就只是一个冷冰冰的工具而已,能让用户在使用体验和过程中产生愉悦的产品才可能走的更远。

淘宝不只是售卖商品的平台,而是有活力、创造力的生态圈,淘宝的用户也是越来越年轻化,淘宝当然也应该有自己的故事,自己的“小情绪”,将这些有趣故事叙说给用户,这样才能给用户带来更好的购物心情和体验。

提示信息的情感化设计,做一个有故事的淘宝

情感化的价值

“用户的情绪诉求”

产品给用户的第一印象决定了很多事情,人是视觉动物,第一眼对物的观察会本能地判断是否打动其内心,很多时候哪怕只是一个小小的细节,都有可能可能瞬间让人注意并且喜欢。

产品亦然,就像用户逛商场一样,如果逛着逛着心情越来越不好怎么会乐意继续逛下去呢?所以我们要追求的不仅仅是“可以用”而已,还要让用户在使用后和使用前一样的是愉悦的过程和心情。

提示信息的情感化设计,做一个有故事的淘宝

“人性化的产品更受欢迎”

“人们喜欢和人交谈,而不是机器”,这句话出自唐纳德·诺曼写的《情感化设计》,其实道理很浅显,人性化的产品,脱离了冰冷的机器的味道,不再那么的呆板。

人机交互学科中,人性化是很重要的一部分,产品的设计者充分考虑到用户的心理感受,将产品化身成一个有个性、有脾气的人,相比冷冰冰的机器更能得到用户的好感和共鸣。

这种例子在现实生活和工业设计中不胜枚举,将机器拟人化情感化等元素使其更生动有趣由此被用户记住从而延续使用,脱颖而出,这就是赋予物以额外情感的价值。

提示信息的情感化设计,做一个有故事的淘宝

人性化的产品更受欢迎

故事的由来

淘宝异常信息提示情感化现状梳理

如下图,目前手淘因为业务繁多、场景复杂以及底层架构等等原因,其异常场景比如为空场景、网络异常以及限流场景等等不仅在布局结构上有很大的优化空间,在其设计风格上不仅没有渗透淘宝的品牌心智,也没有互相之间横向统一,甚至在大促的一些特殊期间还会出现蹦出弹层等在用户看来就是BUG的尴尬情况。

首先这对用户在同一个产品的异常情况的心智认知达不到统一,其次还有可能让用户感到烦躁,这并不是我们想要的状况。

提示信息的情感化设计,做一个有故事的淘宝

由此引申的设计目标:

  1. 视觉吸引:打动用户,抚平异常场景用户情绪,从而间接提升用户留存时间和点击转化率。
  2. 结构统一:一致异常组件结构,横向业务也能统一对同一个形式提示内容的认知。
  3. 品牌认知:淘宝主力增量人群趋于年轻化,渗透2017淘宝新品牌认知,亲和活力和鲜明。

提示信息的情感化设计,做一个有故事的淘宝

设计目标引申

故事的序章

“这是一个亲和、活力和鲜明的故事”

淘宝的体验氛围应该是放松和舒适的,和用户的关系更亲密,立体个性化的表达,让淘宝更年轻鲜明。

基于这种品牌基调,我们需要打破原来的ICONFONTS的视觉传统,讲述一个以一个第三人称为中心,因为场景异常原因而经历的一幕幕奇妙故事。

脑暴风格元素绘制草图

淘宝的品牌图形化元素抽象化提取之后就是圆形,2017新的品牌元素形状也是重要的组成部分,这个形状寓意完满拥有用户和商品所具备的独特性,很多业务场景也出现了这个图形元素。

提示信息的情感化设计,做一个有故事的淘宝

在整体风格和基本形状基调定下来之后,就是需要在脑海中根据各个场景构思各种各样的故事了。

前期可以大胆地去涂鸦绘制草图,丑一点没关系,关键的是把自己的想法表达清楚,并且大家也能在你稍加说明的前提下能理解你的思维,然后把能想到的全都记录下来,“大海、草原、沙漠星空”等等场景。当发散思维到一定程度之后,可以渐渐收敛,稍微打磨细节大家一起沟通敲定,下图为部分草稿图案:

提示信息的情感化设计,做一个有故事的淘宝

初期绘制草图

“众里寻他千百度”—故事传递情感

构思故事的时候,可以比较大胆地天马行空地去想象。比如异常场景中,类似404页面的空页面比较多,那么就可以去想,可以用什么故事来表达“空”这层意思,构思的过程中就会发现,其实一个事物并不是只有“数目为零“才能表达”空“的意思,”沉睡“”躲避“”被抢走“等都可以让用户感知到这层意思,那么这样的话,故事的发展就很开阔了。

比如“订单为空”这个场景,就考虑了“订单躺在竹筏上飘走啦!”“你的订单正在山谷中沉睡。”两个故事,具有趣味性又能积极而准确地传递“为空”的信息。

提示信息的情感化设计,做一个有故事的淘宝

构思订单为空的两个故事

文案的情感化表达

我们不仅使用图形和色彩构建故事、传递情感,还尝试对某些界面中的文案进行设计。我们的初衷很简单,就是希望某些界面中的文案表达可以有趣些。当用户看到这些文案的时候,能够会心一笑,或者吐个槽。

在界面设计中,文案设计是最容易被忽视的。很多时候,设计师眼里的文案就是“示例文字示例文字最多展示18个中文字符”。

用户使用一款应用,就像两个人认识的过程。生活中,我们通过“外貌、穿着、举止、谈吐”认识一个人。而在界面设计中,“图形和色彩”就好比人的“外貌和穿着”,“动效”就好比人的“举止“,“文案”就是一个人的“谈吐”,是一个人对另一人说的话。

提示信息的情感化设计,做一个有故事的淘宝

直播很火,男同胞们可能都有过这样的经验:封面看起来让人怦然心动的的女主播,一开口说话能让你怀疑人生。一样火的高晓松老师,有多少女粉丝放弃了原有的“审美原则”想睡他,就是因为他的口活好。可见,一个人说的话有多么重要。

文案设计过程中,我们需要考虑两个点:

1. 两个人之间是什么样的关系决定了两个人会说什么话、怎么说

比如“加班”这件事情,你和你老板聊的时候,肯定没有你和你的朋友、亲人聊的时候来得痛心疾首、毫无保留。

我们希望手机淘宝和用户之间的关系像是“朋友/闺蜜”,可以一起闲聊、吐槽、鸡汤。当用户沮丧的时候表达关心,当用户困惑的时候提供帮助,当用户完成某个目标的时候表示祝贺

提示信息的情感化设计,做一个有故事的淘宝

2. 不同性格的人,面对同一件事情,说的话也不一样

比如面对“需求变更”这件事情,好脾气的设计师回了一句“好的,亲!”就义无反顾地开始改稿,而暴脾气的设计师则从口袋里掏出一把2米长的西瓜刀,擦了又擦:“我改一稿,你挨一刀,没毛病!”。

我们希望手机淘宝是一个集各种优秀品质于一身的的“朋友/闺蜜”,根据场景不同,可以热心、温暖、体贴,也可以逗逼、无聊、毒舌,能够在不经意间为用户制造一点小惊喜、小意外。

以下是部分场景的文案设计:

提示信息的情感化设计,做一个有故事的淘宝

故事的发展

颜色应用规范

2017淘宝品牌色系仍然是橙色系,与之前不同的是,今年加入了微渐变来做更丰富的视觉表现,更加年轻化和更具有活力,这一点在故事的设计中仍然是需要继承的。主要色彩仍然是橙色系,大色块采用微渐变的方式,小色块采用纯色,不然画面渐变太多可能就眼花缭乱了,如图是手淘基本链路色彩应用拆解:

提示信息的情感化设计,做一个有故事的淘宝

故事性,趣味性以及共同设计元素

基于上面提到的思考方式,各个主要异常场景的信息提示画面也逐个设计出来,除了组件结构上的统一运用,就是视觉上对故事情节和风格的体现

通用设计元素:

  1. 光源统一在左上角,视角一般为正视或正俯视图。
  2. 异常场景下背景全部为圆形,后续可能会拓展形状。
  3. 延续老版的小人,但小人只起到一个点缀和对比场景物体大小的作用。
  4. 设计元素不采用描边,纯色和微渐变搭配,一般为远中近三层元素,主体元素存在阴影,营造层次感。

故事一:太空网络遗迹

通用的“网络异常”的场景,讲的是“一个宇航员在外太空寻找网络遗迹”的故事,太空场景本身就是一种神秘且容易丢失的空间,将网络夸张拟物保证意义明确,最后定格在正向俯视图上。

提示信息的情感化设计,做一个有故事的淘宝

网络异常场景

故事二:大漠足印

“足迹为空”的场景,是“一个考古学家在大漠中追寻巨人足迹”的故事,一个在沙漠中找寻的学家,发现了一个类似巨人的足印,但足印的主人不知所踪。

提示信息的情感化设计,做一个有故事的淘宝

足迹为空场景

故事三:拥挤的传送带

通用限流场景,把货物拟人化,卡在货物传送带的入口上你推我搡,丰富的画面间接体现拥挤的感觉。

提示信息的情感化设计,做一个有故事的淘宝

限流场景

其他场景集合(部分):

提示信息的情感化设计,做一个有故事的淘宝

异常场景组件和结构的统一

由于手淘中业务繁多场景复杂,有的存在多重信息导航,有的存在二级内容,有的甚至是在场景中间可能会出现异常,从而导致目前各个业务异常场景结构不一,这里是需要统一认知的。

这里从最常用的通用场景和一些存在别的内容的特殊场景比如:购物车和评价场景等等。针对不同的场景做了横向统一,首先统一了二级内容的高度规范,其次规范了二级内容为空等等的一些特殊情况供其他业务的设计师参考。

1. 通用布局

通用场景规范适用于手淘中网络异常、限流等全局异常场景,这些场景中除了异常提示信息没有别的内容出现,文案可配置,相同场景统一为一种文案。

提示信息的情感化设计,做一个有故事的淘宝

2. 一级内容为空

场景中第一级内容为空或者异常,并且只存在第一级的TitleBar,比如购物车为空等场景。

提示信息的情感化设计,做一个有故事的淘宝

3. 次级内容为空

一级内容一般高度无法控制,故仍然需要设计师配合各自链路开发适配组件位置,例如评论详情,店铺详情,消息等场景,图示给出场景示例:

提示信息的情感化设计,做一个有故事的淘宝

图文信息内部结构由架构组同学做成统一组件可以让其他业务的开发复用,这样大大降低了以后各个业务线更改同步的成本以及开发成本,这里对此不多做叙述。

订单详情配置图优化

手淘中还存在情感化作为氛围渲染的场景,这些场景先分别根据各自原本的布局来重绘氛围插图,暂不统一整改结构,例如订单详情页面的氛围。

提示信息的情感化设计,做一个有故事的淘宝

订单详情

故事的结果和延续

落地实现效果及未来的反馈

目前只上线了部分异常场景,虽然没有完全完成,但是上线的部分还原度都是高的。我们将在后续的版本中陆续更新完成。

这些异常场景比较隐蔽,大多数用户对于平常的异常场景不仅看不到而且并不在意,故这一块难以采集数据,只能看在未来全部上线一段时间后,用户的反馈是否涉及到这一块,到时便交与用户评说了。

故事将会更有趣

淘宝的故事不仅仅是这些,当然会有更多更有趣的故事将会展示给用户。

未来的故事还可能会将情感化设计延伸到不仅仅是异常的场景中去,从而覆盖整个淘宝,真正地实现做到一个“有故事的淘宝”。

相关文章

淘宝2017设计升级:手淘首次以设计为主导的版本升级

 

作者:丘黎、神患

来源:微信公众号【淘宝用户体验设计】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23554/

(0)
CatherineCatherine
上一篇 2017-05-05 21:22
下一篇 2017-05-05 23:22

相关推荐

  • 腾讯大神教你写出合格的产品交互文案

    做产品的时间越久,越发现文案的重要性;今天我们来聊聊交互文案。 文案最初是桌子的指代,后来演变成一种职业;现在说起文案一般指以文字表现创意策略。交互中当然会涉及文案,虽说在整个前端展示中并不算突出,但…

    2016-01-13
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 译|构建用户体验地图的时机和方法

    用户体验地图结合了两个强大的工具—讲故事和可视化 ,以帮助团队了解和解决用户需求。 虽然体验地图会根据不同的场景和商业目标采取各种各样的形式,但通常都包含一些元素,并且有很多可以遵循的潜在基本规则,使得用户体验地图为设计提供帮助。定义:用户为了实现目标而经历的过程的可视化,它用于了解和解决用户的需求和痛点。

    2017-04-29
  • 【CIO说】花椒直播韩三普:用户体验与核心技术才是硬实力

    本期推荐韩  三  普花 椒 直 播 CTO社交直播作为一个年轻的行业,”高富帅”表现出的强大增长和吸金实力虽让业外人士倍感羡慕,然而作为一个严重依赖技术、用户体验要求极高的行业,流量等时代红利已经不能称其为门槛。如何打造平台差异化的竞争力?近日,花椒直播CTO韩三普接受了ENI经济和信息化网的采访,分享了花椒直播快速增长背后技术所提供的强大支持。并结合当下创新趋势,分享了直播在其中可发挥的作用。亮点提炼如何打造平台差异化的竞争力,以核...

    2018-04-26
  • 在网页设计中兼顾所有用户和场景的3个技巧

    用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。△ 使用适当的新人引导(四种主要的新人引导策略)

    2017-05-23
  • 游戏交互设计心得分享:从代入感与反馈感入手提升打击体验

    前言经常听到一些设计人员、产品经理、甚至是一些交互体验”大师“的言论——【这个操作太麻烦了,需要操作好几步,体验太差了!】亦或者【这个功能藏的太深了,你有考虑过用户体验么?】之后不知怎么的,设计游戏或者软件的人员经常会把这几句话挂在嘴边。无论做什么,3句话里面保准带一句上述“金句“。所以近段时间,你会发现打开一个游戏或者软件,第一眼的界面,功能堆积,眼花缭乱,不知从何下手。我觉得,经常拿着两句话一刀切的人太幼稚,太低级了。所以我今天斗胆...

    2018-02-20
  • 新用户首次体验有多重要?又该如何提升?

    一款优秀的移动产品应当有一套可靠的新手体验设计策略。不要把自己限制在产品里面,从核心价值入手准备——抓住每一次可以向用户传达价值的机会。不管是应用的广告或者一个引导页,抓住任何机会去诠释产品的价值与功能吧。

    2017-05-06
  • 一些交互设计原则 | 蓝鲸

    从用户角度来说,交互设计是一种如何让产品更易用,让用户更愉悦的产品设计。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点。以下就介绍一下在交互设计中一些通用的原则。1、前馈/反馈:前馈就是操作之前要给的信息,提示用户点击之后会出现什么、点击之后结果是什么。前馈适用于新产品(还不知道怎么用的产品)。反馈就是用户操作结束后给的信息提示。如:您的操作过于频繁,请稍后再试。2、状态可见原则:比如进度条,...

    2018-04-24
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 我们都在交互稿中放了些什么?

    作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

    2017-05-08