“设计语言”的情感化

前言

情感是人对外界客观事物是否满足自己的需要而产生的态度体验。不仅仅指人的喜怒哀乐，而是泛指人的一切感官的、机体的、心理的以及精神的感受。

情感是人适应生存的心理工具：

－能激发心理活动和行为的动机

－是心理活动的组织者

－也是人际通信交流的重要手段

情感化的设计则是一种创意工具,表达和发挥着设计师的思想和设计目的,随着时代的发展,这种创意工具将变得日益锐利。理解用户的习惯和掌握用户的情绪变化，才能让产品触及使用者的内心，拉近覆以情感化的产品与用户的内心。好的设计不仅能为产品带来更高附加值，且能使产品在用户的心里占据更高的位置。

一.设计背景

代驾上线两年来，司机端与乘客端小程序一直都更注重功能的使用，忽略了一些用户体验设计的细节。随着版本不断更新迭代，反馈型缺省页开始呈现新旧风格并存的状态。这对用户在同一个产品出现异常情况时的认知无法达到统一，还有可能让用户产生烦躁情绪，这并不是我们想要的状况。所以我们开始收集两端中的出现异常状态的页面，重新梳理分类后做出设计提案，与产品一同敲定设计方案，确定排期并推动页面开发落地。

页面梳理

1.目前Web app以及司机端缺省页面结构不统一，设计风格不一致   

2.同个类别页面出现多种设计样式，影响页面间的关联性和用户体验

3.风格简单僵硬，情绪传递上过于冰冷

4.无品牌传达，从页面中无法看出与滴滴有关联

司机端

web app

基于以上问题可能会导致的结果有以下几点

1.影响用户对产品的使用的熟悉感

2.影响用户的使用效率

3.影响整个产品的品牌感

4.导致不同页面关联性较弱

5.给用户带来产品不够专业的感觉，有悖于代驾本身的产品定位

二.重新思考

我们回归到设计最初，重新思考缺省页面的定位。我们模拟用户在使用过程，记录心路历程。

总结为以下两个场景：

场景一

出现场景

用户进行操作的时候，提示错误或者失败提示。

案例

例如：用户进行支付操作的时候，网络突然中断导致支付失败。

用户心理

不安、烦躁、急于了解情况

用户希望得到的反馈

弹窗提示，告知用户出现当前情况的原因，并提供相关解决方案

场景二

出现场景

产品无相关内容或物相关消息

案例

例如：用户使用产品的某个功能，这个功能在该用户所在的区域暂时不提供服务

用户心理

不安、烦躁、急于了解情况

用户希望得到反馈

弹窗提示或空白页，告知用户出现当前情况的原因，并提供相关解决方案

三.设计目标

基于对产品的分析和用户的需求我们得出以下设计目标

1.统一性

从结构上、设计元素、文案风格等上面统一所有缺省页面。保持一定的韵律感和统一性，给用户结构简明的视觉认知。

2.视觉吸引

结合流行元素，定义缺省页面视觉风格，主次分明，以及内容氛围的营造。

3.品牌渗透

结合品牌元素，不需要过分突出，将品牌基因渗透到各个页面间。

4.情感化

使用图形和场景构建故事，传递情感。

四.交互框架确定

我们将目前web app以及小程序的空白页收集整理，确定两种基本框架，全屏式和半屏式。

全屏式

半屏式

五.设计风格提案

1.设计风格确定

品质感

目前滴滴代驾为品质出行，在缺省页面对品质感应该有所继承。

氛围设计

烘托氛围，传达产品异常态，抚平用户对异常场景的情绪

品牌延续

将品牌基因渗透到每个页面，加强整体感

2.设计过程

构思：我们优先解决功能需求，贴合每个异常态的提示语言，选定了每一项的设计主体，再将主体具像化，如数据展示页为一个文件夹、记录浏览页为一个记事本等等。确定每项主体后，在设计上采用“先放后收”的形式，开始我们的设计提案：

方案

反思：但这仅仅满足了“设计目标”中5点中的其中1点，即视觉的统一性。在满足了功能引导的基础上，我们开始再融入情感化的设计，将主体再加以场景化，以达成我们目标中的第二点，即个性化的“视觉吸引”。

构思：我们将每个主体置身于各种荒凉的场景里，如凄凉的荒漠、寂静的草原以及叫天天不应的无名星球上等等。再用圆形加以固化，增强画面的柔和感。想象一下,每个画面如截下的一帧电影场景般浮现在眼前，瞬间为页面增添了些许生动和趣味。

方案

反思：我们一直在为丰富画面而做更多的停留，却忽略了缺省页本该有的直观性，这也并不是我们想要的结果。

 

构思：保留主体结合场景的概念，我们开始不断地做加减法，在简洁和丰富的取舍间，我们有了一个能够达到平衡点的想法—简化所有图形，再加微动效丰富整个画面。方案上得到了不错的响应。

方案

六.情感化设计思路总结

经过反复的设计提案，我们主要总结了两点设计思路

如何情感化

1.设计必须直观反映产品的核心功能、工作原理、可操作方法，以及反馈产品在不同时刻的状态

2.优秀的设计是设计人员和用户之间的沟通，需要通过精确的设计语言将内容传达给用户

3.通过一些简单的动效设计，可以生动形象地解释当前状态，并增加页面的趣味性

4.通过设计在第一时间安抚用户心理，然后能再提供后续处理方案

人性化文案提示

“人们喜欢和人交谈，而不是机器”，这句话出自唐纳德·诺曼写的《情感化设计》，其实道理很浅显，图形的创意有了往往是还不够的，这就要看文案的展现方式了。个性化的文案能斟酌住文字的情绪，能够使产品脱离机器本身冰冷的味道，而不再显得那么的呆板。

同时，还有几点：

1.阅读起来不会有指令性很强的语气

2.避免过于呆板的陈述语句

3.如果是出错性提示，能够提供一个解决办法 (如重新加载按钮)

七.终稿示例

设计上依旧遵循“简洁直观”的设计理念，图形、用色上都从端内汲取，整体气质贴合司机端及web app的设计风格。

1.整体示例分析

a.块面图形

b.微动效

c.层次感画面

2.图形设计示例

a.品牌色占比不能超过10%，保证只有一处展现

b.主题图形以表达功能性的日常物件为主，背景为搭配功能提醒的场景，在满足功能前提下也可    以使用普适类表达

c.扁平风格并能突出品质感

八.设计规范

1.图形尺寸

  

2.颜色

a.图形设计遵循设计规范

b.图形设计以#B0B4BD为基础色，慎用最深最浅色值

c.图形设计中一定要出现品牌色(点缀色#FAA575)

 

3.动效规范

a.图形主题背景保持不动 (具体情况可根据场景调整)

b.动效部分不要超过2处

c.动作以简单为主、符合场景的意境

  

4.文字规范

以“暂无网络为例”，保持文案灵活性，保持图文达意一致的条件下，所有文案都可依据提示需要进行内容调整。

5.展示布局

全屏

半屏

九.通用性场景运用

目前已确定分类7种  （无网络、无记录、无结果、无历史消息、更新提示、未开通、失败提示）

十.总结

此次的空白页改版主要为司机端和web app (小程序) 做统一设计，从梳理分类、归纳整合到设计规范制定、接入开发排期前后经历了一个多月，这是司乘两端真正意义上的一次系统性的“设计合作”，中间其实经历过更多次的飞机稿，但每一次的尝试都使我们收获到更多更好的经验。不止在这样的可个性化的页面上，“情感化设计”一直都在被我们不断地提起、不断地实践中，“不忽视每一个设计”，我们一直在进行着。