互联网金融APP情感化体系探索

唐纳德·A·诺曼在《情感化设计》一书中提到我们更喜欢与人交流而非机器，要让产品对用户产生足够的亲切感，产品应该是富有趣味性且易于沟通理解的。他从本能、认知、反思方面诠释了情感化设计的地位和作用，他认为情感化设计解决了产品可用性和视觉性之间的矛盾。

APP节日换装在情感化体系中属于为了打动用户而做的视觉氛围营造，在视觉上引起用户本能的情绪变化，带来独特审美的体验，最终在反思层面上给用户带来记忆点、品牌价值观认同感。APP节日换装对一些主流APP来说应该是比较常见，尤其到了重要节假日，大部分的高用户量级 APP都在致力于打造浓重的节日视觉氛围。但对于互联网金融产品却并不多见，互金行业的用户群体偏于理性，APP视觉设计偏于简洁、高效、更新少。那么节日氛围营造对于理性用户群体的互联网金融产品能带来多少改变呢？

我们所在的BXD（宜信大数据用户体验设计部）团队在过去一年里经历了指旺的几次重要版本迭代，决定选择春节氛围设计做为互联网金融APP情感化体系探索的一个切入点。

因为这次指旺APP春节氛围设计的项目是由我们BXD（宜信大数据用户体验设计部）自发而起的，所以在整个设计的进行中，作为主导方，我们的设计流程主要分为5大阶段。

1. 分析项目需求

2. 探索主视觉风格

3. 设计执行与细化

4. 落地上线及数据反馈

5. 总结经验

1. 互联网金融背景分析

● 互联网金融背景下的产品特征

互联网金融行业具有特殊性，涉及到真实货币与投资交易，因此用户对于互联网金融产品选择都比较谨慎。金融行业APP的用户群体多数为80、90后，对数字敏感、强调稳定安全性，偏理性。视觉设计也都偏重于简单大方、高效易用等，对气氛营造认知比较初级。

● 指旺APP设计背景

1. 通过数据观察，由于产品的属性，指旺的用户在日常的留存和活跃度不高，尤其在以往的春节期间活跃度、开启的频次很低。

2. 视觉氛围上更新较少，产品缺乏新鲜感和活跃度。

基于指旺现有情况，通过情感化设计解决产品与视觉性的矛盾，去拉近产品与用户之间的距离，提升活跃度，是体验提升的一次合理优化方案。

2. 设计内容

调研及观察分析后，我们结合用户的体验路径，发现用户在开启app后，对启动图的点击量、“首页”到达率达到了99%、我的模块到达率65%。因此我们从启动图、首页、我的模块上分析，得出可以做氛围化设计的地方：

考虑到最终视觉效果的呈现，避免过多元素的重复出现对视觉造成的干扰，我们做出了内容入口的筛选，最终确定为：

1. 桌面应用图标

2. 启动开屏图

3. 首页8个功能入口icon

4. “我的”头部背景

为何要选择以上几个app入口进行情感化包装，由于金融类客户端对于前后产品逻辑一致要求信息明确对应，在不影响主线获客以及产品售卖基础上，以上入口都以视觉为主展示区为切入点，并都处于用户路径的主路径之上进行体验优化。

3. 明确设计目标

定义完设计内容后，需要思考这次设计最终要达到的行为目标。

● 通过从指旺APP节日气氛营造，打造产品情感化特征，拉近产品与用户间的距离，增加用户粘性，提升活跃度。基于这些目的。我们的设计方向围绕着创新、通俗、气氛营造出发。

● 过去一年里我们的app在大家的共同努力下渐渐改头换面，在视觉和用户体验上开始踏入正轨，因此也希望通过这次春节换装设计开启新一年的更高阶的用户体验设计推进。

近些年来，一些主流的App已经做过各式各样的春节主题包装，这次我们的春节项目希望能从这些已有视觉风格样式中跳脱出来，做一次创新的尝试去推动产品的品牌调性。

项目中的视觉风格的探索从头脑风暴开始，大家搜集了各种案例、分析归纳了适合我们项目视觉表达的设计点。

列举了尽可能多的春节关键词进行思维发散与组合，归纳出了几个设计思路。

设计思路：

● 情怀路线：回家、团圆、拜年

● 大场景路线：庙会、舞狮、地图、灯展

● 生肖路线：狗年、2018、年兽

● 符号化路线：春联、灯笼、福娃、压岁钱

最终确定了春节符号化路线作为设计主题，以带有浓浓中国特色的作为这次项目的设计方向。

我们都知道图形语义的表述对于功能的解释很重要，为了平衡定制化的设计，此次桌面应用图标形态以营造春节节日氛围效果为大前提，其次icon图形的联想意境跟入口功能语义相对应。

桌面应用图标、我的头部和开屏图大前提条件同理，区别在于：

1. 桌面应用图标尺寸和元素细节的矛盾关系处理。

2. 我的头部风格沿袭时不影响资产区域的数据信息传达。

3. 开屏图大范围多层次的套用时，对层次、元素内容繁简的把握 。

确立了对应的关键词，接下来就要勾画草图，对一些图形进行效果预估用剪纸风格难以达到最终效果，就要在这个阶段进行筛选、取舍和更换。

草图画完通常会进入实际设计阶段，但是这次我们增加了一个环节：手工课~因为剪纸风并不是我们平时做UI设计常用到的风格，在形式的表现上、纸张与层之间的关系上，需要给大脑增加一个立体的模型库，这样到真正开始设计的时候，会有一个完整的立体光影模型在脑子里，做出的icon才会更有把握完美的展现出我们要表达的效果。

1. 桌面应用图标

由于桌面应用图标需要跟年前最后一个版本同步上线，所以优先着手进行设计，再进行设计延展。

前面定义的桌面应用图标采用剪纸风格最主要的难点在于：

● 尺寸限制

● 层级关系

● 氛围传达

明确了挑战接下来不是着急上手、蒙头设计，而是先思考如何把我们想要的风格以最佳的视觉形态呈现出来。所以我们把难点进行任务拆分：

● 搜集素材

● 分析展现视角

● 筛选元素

● 进行绘制

● 延展

首先收集一些我们认为适合应用在图标上的剪纸、纸雕创意图片。

纸雕作品通常有两种立体视角即凹或者凸，即传统绘画雕塑理论的阴刻或阳刻，哪一种更适合应用在尺寸受限的桌面应用图标上。

有关春节的元素很多，挑选哪些配搭在一起才能体现年的浓厚氛围，在不影响“指旺”文字标识的主体视觉下，还能够精致的呈现。

那为什么没有选择汪星人~因为我们的客户端卡通形象很少有狗的形象露出，为避免先入为主的品牌形象，选择更多元化的意境元素作为出发点，从而增加更多创造性。

思考清楚了上面的问题，就到草图绘制阶段，将我们提炼的春节元素按照剪纸样式进行分组，确立好前后关系，朝着这个方向有了线稿版的雏形。

视觉表现阶段。我们通常对春节颜色的惯性理解就是红色调，指旺默认桌面应用图标本身就是红色基调，所以如何在红色调基础上做出变化、不仅同其他产品有差异性且还要符合当下流行趋势是贯穿在整个设计过程里的。

设计过程主要节点：

● 元素转化剪纸风

● 删减

● 调色

把常见的元素符号，赋予它剪纸的样式，特点就是扁平、边界清晰、镂空纹饰、折痕层次、光影空间表现，不影响主品牌辨识度。

画草图阶段堆叠的元素多于实际用到元素，这个是开始画前思考确定好的，这样在设计的时候做减法就比较容易，如果前期是一个减法的阶段，后面做加法很容跑偏或者说不容易把控。

调色阶段最终处理方式：下凹镂空的层级由内到外、明度由深到浅，光源上从顶光暖色到暗部偏冷；优先突出产品名称，其次是副标题也就是氛围主题，最后才是辅助氛围的元素。按照这个标准调整完基本上就是我们想要的样子了，洋溢着浓浓的中国式春节气味。

2. 我的页面及icon

复用风格做延展，避开信息区域，空白区主体选定了灯笼元素，起初考虑复用桌面应用图标里的梅花，但是单纯的梅花似乎不足以体现春节的氛围，所以最终选定了灯笼。为了烘托气氛，再加入星星点点金粉点缀，让整个画面更温馨。

● 外形和尺寸设定

入口 icon目前我们见到的形式有两种，一种在规矩的外形内做变化，另一种是异形，这两种选哪一个形式更适合？

异形如果把握不好视觉差，很容易出现大小不一的感受，还会看起来比较凌乱；如果选择规矩的外形又太寻常。所以我们希望这两种形式能够融合在一起，方式是主体icon的边角都会超出一点点外框，大致看似整齐的外形仔细看又赋有变化。

线上默认版icon外形是圆角矩形，为了让用户能够明确感知变化，最终把外形定为圆形，设定的尺寸是80*80px。

● 绘制细节

前面在草图阶段分析并确认和勾画了主型，在手工课阶段又明确了层次光影关系。立体模型其实就在脑子里，绘制起来相对比较轻松。

虽然尺寸定在80*80px，但是由于icon边角是超出外轮廓的形式，所以最终承载icon的圆形实际74*74px，在这么小的尺寸内表现一个复杂的图形，需要考虑不同分辨率机型下是不是能够清晰呈现。

如何表现剪纸风格？仔细观察先前搜集的素材和我们自己制作的模型，剪纸的最主要特点是元素边界轮廓清晰，其次是层薄，不要厚重感要轻盈，光影要相对清晰，这些要点掌握了剪纸风就基本不会跑偏。

● 问题经验

最后绘制完成上机检验效果，完美主义者的我们发现尺寸视觉感受上再大一圈会更完美，所以即便可以直接上线使用，我们还是调整了所有icon尺寸，只为最终的完美。

代价就是增加了工时，由于项目进度一直把控在提前的状态，所以最终交付时间还是按照评审时间交付的并未延误。流程跑通下次在这个环节一定会多加关注，提早验证，避免不必要的耗时。

3. 开屏图

● 选稿

开屏图在草图阶段勾画了四款，背景和主体造型都分别不同，主题有：舞狮庙会、福娃放鞭炮、鲤鱼+生肖、和生肖+聚宝盆，方向都是凸显过年氛围。

通过小组内部投票方式大家一致认为鲤鱼的这稿更适合，背景有生肖元素，然后把舞狮的元素和这稿结合，把人物虎头帽改为舞狮帽，这样从造型和构图都更丰富饱满，而且有好的寓意-年年有余。

● 细节

前面提到开屏图的难点在于剪纸效果大范围多层次的套用时，繁简的把握 。

首先把元素进行分组，人物第一层、鲤鱼二层、生肖+辅助元素第三层，最后一层是大背景；在繁简的处理上，主体下半部分-鲤鱼采用繁杂的层叠关系搭配简易的人物，上半部分繁杂的舞狮帽搭配简易的生肖祥云，大画面的处理上主体圆形部分繁，加大面积留白背景，这样从分组形式上繁搭配简，从画面比例上繁加简，最终效果就不会杂乱不堪。

● 氛围

延续前面氛围的处理方式，背景加入星星点点。整套春节物料始终贯穿在一个氛围体系里。留白区域增加中国式印章、镶金边现代云纹和传统祥云纹饰，传统的中国式剪纸风格我们赋予了它新的设计语言，从而呈现了一套传统又有新意的春节设计效果图。

1. 推动前的沟通

此次春节氛围的项目是指旺app上线以来首次结合节日做系统性的氛围化的设计，在推动前，我们输出了这个项目发起的意义和价值，也搜集了一些来自开发、运营、产品侧的一些意见和需求。

最终确定了一些基本的环节：可设计的内容、设计周期的预估、各方资源的协调、定义好上线与下线时间、推广延展等。

2. 推动中的问题解决

经过与产品侧、运营侧的沟通，此次确定春节进4.8版本的内容，需要我们对设计内容有个优先排序。

在设计开展前期，我们积极探讨着设计方向，受到了可落地的一些阻力：风格一致性、展现效果的限制，我们不断寻找一些新的方式：由繁到简、现场剪纸等手法去验证效果。在落地中我们对输出尺寸大小的把控，协调好时间之后，就在春节期间看到了指旺APP完整的节日氛围效果。

3. 推动后上线后—跟踪用户反馈和数据反馈

在上线后我们很快收到了一些正向结果，有一些用户说感受到了浓浓的春节氛围，有的用户说图标很精致……用户对我们设计的反馈结果让我们付出的心血有了一些宽慰。紧接着上线后我们对数据做了一些跟进和对比。

通过在这次春节氛围包装项目中，我们由发散-聚焦-创新-验证-落地，中间经过无数创新思路的火花碰撞，提炼可落地的创意元素，突破了以往设计风格的局限。在最后设计落地上线后，我们持续跟踪用户反馈，跟进数据结果积累以下经验：

建立了自下向上推进的设计流程与方法，提升设计品质达到了一个新的高度，为设计师在创意方面提供更大发挥空间。

最终我们总结出这次结合节日氛围设计效果对对互联网金融APP情感化体系设计的3个方面的设计价值。

● 互联网金融APP在节日氛围营造上，在设计上需提升设计品质、精细化程度。我们通过这次视觉提升观察出理性用户群体同样有对氛围、高品质的视觉感受的需求。这也是提升用户对产品的专业度、信任度的方式。

● 从桌面应用图标-启动图-入口icon-我的页面，这一套节日氛围结合用户的体验路径，使用户在体验行为上达到了流畅、一致的效果，提升用户对品牌价值观的感知度。

● 整体节日氛围营造从视觉本能层能吸引用户视觉注意力和情绪上的变化，提升用户的留存率，提升在此期间的活跃度、开启频次。

对于同样理性产品属性客户端而言，谨慎高效与易用并不代表没有情感化体验提升的诉求，往往情感化设计更多在增加用户粘性的同时也增加了体验的深度。

作为设计师，发现问题与设计创新都是必不可少的日常习惯，所有的提升都是日积月累的结果，在产品客群并不宽泛的使用场景下，有情感的设计才能换来有情感的用户，也是超越商业本身的价值体现。