网站首页 > 界面表现> 文章内容

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

※发布时间:2017-11-14 16:08:34   ※发布作者:habao   ※出自何处: 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  写的真不错,人是很复杂的生物,情感是底真正难以割舍的部分,情产品是用户粘性的重大切入点

  推荐:

  

相关阅读
  • 没有资料
重庆学习网zslpsh,0755深圳房产人才招聘网,拾年网90后,anedc股票,最新电影下载淘娱淘乐,重庆中学生网高考,重庆中学生网高考,学习重庆方言网,重庆中学生学习方法,重庆俗语网,中学生网zslpsh,0755深圳交友网,重庆初中生,贵州重庆方言网,025新闻网,西南重庆方言歌曲,025南京交友网,重庆农家乐美女,观赏蟹种类zadull,云南重庆方言网,重庆中学学习网,028成都交友网,推广taoyutaol,西南四川方言网,观赏龟论坛zadull,四川重庆方言网,022天津交友网,重庆中学生网家长,鹦鹉鱼zadull,重庆俗语,电影淘娱淘乐,taoyutaole娱乐,华夏视讯网,0755深圳旅游招聘,昆明重庆方言网,淘娱淘乐影视,www.00game.net,观赏鱼zadul,重庆高考zslpsh,重庆中学生网高考,027房产招聘网,坝坝舞wagcw,西南重庆方言网,贵州重庆方言网,重庆言子儿网,热带鱼zadull,重庆高考zslpsh,0755深圳旅游招聘网,淘娱淘乐影视网,0571.361.cm,重庆方言学习网,028成都新闻,异形观赏鱼种类,影视网淘娱淘乐,最新电影下载淘娱淘乐,0773桂林论坛,拾年网80后动画片,观赏蟹论坛zadull,观赏龟繁殖教程,重庆一中zslpsh,重庆俗语网,广场舞wagcw,观赏虾的种类zadull,观赏鱼观赏虾观赏龟,西南方言网,观赏鱼之家论坛zadull,战争前线辅助00game,西南重庆方言小说,重庆中小学zslpsh,推广taoyutaol,战争前线论坛00game,0871交友网,025南京新闻网,重庆言子儿网站,娱乐taoyutaole,022天津交友网,025新闻网,重庆中学生网学习,022天津交友网,重庆方言歌网,www.120.cm健康网,anedc股票,重庆初中生