项目背景

为了打造一站式综合金融移动服务平台，为用户提供安全、便捷、全面的移动化金融服务，随着互联网保险日新月异的业务发展和产品需求的迭代，用户增长遇到瓶颈，平均获客成本不断上升

同时用户对产品的体验升级的需求越来越强烈，希望从中获取更多的福利信息和情感上的感知，同时基于保险业务的设计经验积累，我们发起了对保险板块的新一轮设计迭代与体验优化，这一轮优化原因主要是以下三个方面：

产品侧

业务提出了新的业务目标，基于业务目标产品发起了这次改版，满足用户增长预期，提高新用户的转化率

用研侧

现有的操作有很多不合理的地方，对于用户不是很友好，需要强化用户品牌心智，将统一的品牌语言贯穿整个交互路径，凸显产品可靠性。

设计侧

随着竞品改版频率提高，相比较现有的设计风格已无法满足视觉需求，需要对整个板块进行优化

旧版页面在视觉、结构和运营层面都离行业竞品有一定差距，造成了用户信任的滑坡，进而影响保险服务的转化率，通过分析旧版问题，进行针对性的改版

原型探索

首页核心业务视觉层级重构

对旧版的框架进行梳理，将我的保险入口和品类区合并成功能入口区，新增固定运营区、活动运营区、保险推荐和产品页,将保险首页转为流量分发入口，提高转化率

通过微信发放问卷调研，收集了65份反馈结果,并对5位用户进行了半结构式访谈，并进行新老用户分类，了解首页版块功能的痛点

竞品分析

基本功能

京东金融和蚂蚁保险都把保单入口放在首页头部，而招行放在我的页面，三个产品都有品类区，京东金融除了基本保险种类还有更多个性化的入口

活动运营

除了京东金融，招行和蚂蚁保险都有Banner,位置都在品类区下方，三个产品都有推荐保险位，招行是大卡片只推荐一个产品，京东金融是横向并列多款，左右滑动交互，蚂蚁保险在左右滑动交互的基础上增加Tab切换，提供更多产品

Tab

招行Tab在导航栏下方，京东金融和蚂蚁保险都在底部，京东金融有首页、产品我的，蚂蚁保险多了个社群，招行只有产品和我的

图标设计

现有问题

我们梳理了现有版本图标的问题，归为形状和颜色两个部分

形状

体量不协调，点击感差；相似元素样式不统一；曲线转角规则不统一

颜色

颜色与保险服务品牌调性不匹配；感光明度差异大；整体配色方案不协调

设计目标

本次图标改版希望在满足业务诉求和用户诉求的基础上，体现品牌感，深挖图形表达，主要拆分为以下两个部分。

业务表达

包括业务诉求和用户诉求，满足业务需求并将其转化为用户服务，且符合用户使用场景的图形设计表达

品牌特征

突出平安保险专业度，同时还要有独特的设计语言

视觉探索

在视觉探索环节，围绕风格、形状、颜色三个维度，我们进行了设计方案的尝试。

风格

本次视觉升级希望能传达给用户3个核心点：（图形）专业有态度、（内容）简洁舒适、（体验）轻松可信赖。在图形方面围绕「专业有态度」的主题，我们进行了风格探索。

情绪版

图标形式

在专业有态度主题的基础上，我们分面形图标、线形图标、插画图标三类图标形式进行风格探索的收集，并分析了每类图标的优缺点。

结合点击感、整体性和识别度，选择了面形图标风格进行接下来的尝试。

面形图标：点击感强，图形识别度高

线形图标：点击感弱，视觉焦点分散

插画图标：主体弱化，识别度差

在此基础上，我们也进行了多方案尝试：

最后，经过反复筛选及测试验证，选定了以外部圆角内部直角的视觉语言：通过转角的对比结合利落的曲线切割关系和有规律的倾斜角度，突出品牌辨识度和图形识别度，并对其进行深入的研讨和细节的描绘。

统一体量：在确定图标的基本形状后，尝试了图标的比例，结合舒适度、点击感，确定了图标比例，然后把所有的图标大小体量进行了统一

倾斜角度：规定了出现转角的倾斜角度为15度的倍数

圆角：根据倾斜角度和表意本身的关键特征的不同，圆角也分为3像素和4像素

斐波那契数列：结合斐波那契数列圆规范设计图形，可以一定程度的提高统一性和视觉美感

统一设计元素：减少不必要的基础样式，来保证图标整体的一致性

调整配色

图标形状确定之后，就是颜色的部分。基础配色延续平安银行V3.36颜色色相，保持统一性。 确定了色相的范围之后， 我们以基础色为基准调整颜色饱和度，匹配品牌调性。

基础配色确定之后，是配色表现形式的选择，目前的几种主要的形式包括纯色、邻近色渐变、纯度渐变这四种。根据这三种表现形式，我们分别做了尝试：

纯色过于扁平没有设计感，邻近色渐变个性比较强，不符合我们风格调性。所以最后选择了纯度渐变，对统一度和设计感进行平衡。

头像设计

优化背景

经过调研发现，83%的用户一直都是使用默认头像，默认头像的优化有助于提升用户对品牌的认同度

视觉符号

曼狄诺定律（微笑效应）指出信息的传播80%以上是靠非语言方式实现的，视觉符号能利用人的原有记忆，使其与人体大脑进行快速链接。为了体现在设计语言中体现 “微笑的心智 "，在头像的设计元素中都植入了“最美弧线” 的符号表达。给用户带来正面情绪的暗示与模仿。

配色规范

根据品牌色进行饱和度的调整，搭配发色，提升品牌认知

设计推导

确定人体的轮廓和细节，组件化发饰、服装，保持整套头像的统一性和可复用性

模块优化

层级构成

保险列表的图片统一使用插画绘制，为了达到风格的统一性，我们进行了三层结构处理，分别是标签层、主体人物层和背景层，标签层用于特别推荐的保险服务，吸引用户点击

统一列表设计语言，增强产品感知力

• 列表图片统一成扁平背景和人物抠图样式，提升统一度，保证上线稿的最终效果

• 将旧版的图文分开的排版改成左图右文，减少用户视线路程，提高点击率

• 方案A多个卡片样式过于分割，不利于用户视线集中

• 方案C竖向排列信息密度过大，不利于突出产品特征

• 方案D静态只能展示3个产品，曝光度不理想

列表优化

旧版首页列表

筛选功能单一，列表设计老旧

筛选选项只有3个选项，细分程度不够导致列表过长，不利于用户做出选择

左图右文的排版不利于视线的专注，文案信息没有突出卖点，图片没有加工，转化率较低

运营规范

关键词提取

保险的购买的行为很少是冲动性行为，更多情况下，它是经过反复决策的结果,因为购买的产品需要长期投入，并期望使用较长的时间，从我们行业入手，联合互联网特性，定义出以下关键词：专业、品质、沉稳

核心用色

根据情绪版制定以下主要色彩搭配建议（建议为多色搭配，选取一个主色进行同类色设计也可）

图形元素

以下为常用场景配图，之后的设计保持一致，输出风格一致的运营设计这里的图形元素只列举一部分，这些图形元素是我们设计工作的积木，随着设计库的不断扩充，减少了重复性的工作，有更多的时间去产出创意

设计规范

安全距离的规范能保证设计产出主题设计元素不会过大或过小破坏视觉感受，预留距离让画面具有呼吸感，规范的距离让设计产出具有一致性

尺寸

设计排版

主要排版方式分两种，左右布局和居中对齐，根据设计内容而定，一般情况下选择左右布局模式进行设计

游戏化设计

设计背景

我们分析数据发现，总的用户量很多，但是日留存率和留存用户的活跃度却不高。因此现阶段的业务目标是提升留存率和用户活跃度

我们通过一套游戏化任务体系，促进各个业务线多点互动，给业务线带去价值的同时，提升保险页面的活跃留存

图形、配色和质感越往右边走，我们的视觉感官就会愈发真实。但100%的真实往往细节过多、成本高昂，对产品设计来说未必是好事。因此，经过多版本尝试，我们把改版的视觉风格定位在了“微质感”上。

设计目标

游戏的魅力对于用户来说，相比于现实社会很多努力成果反馈的延时满足，它的魅力更多可能在极致的即时满足上，包含可控感、成就感、得失感的3方面。

可控感

为了减少游戏的跳出率，游戏一开始就需要满足用户的第一层心理需求控制欲，而这体现在渐进式的上手和清晰的游戏路径。

渐进式的上手

在游戏的初始时通过简单的任务引领让用户边了解游戏的操作，边提升等级边建立自己的“王国”。 而且在游戏中的每个操作都会得到即时的视觉化、数据化的显示出来。这些都会让用户在游戏初期就感到一种都在我控制之中的感受，渐渐的熟悉和享受游戏带来的喜悦感。之后游戏任务的难度才会逐渐升级

清晰的游戏路径

渐进式的上手只是让用户不立马退出游戏场景，在度过初期的新鲜感之后用户的疲劳和厌倦感随之而来，需要将更多的长远任务或者未来的场景展现在用户眼前。解除这种“迷茫”感。 最终让用户对这个游戏产生了不是简单的任务完成所带来的表层控制感，而是一种很清晰的对游戏的把控感。

游戏化设计

成就感

可控感让用户在游戏中扎根，成就感让用户沉浸，游戏对于绝大多数的用户而言就是满足自己在现实世界所无法获得尊重，亦或是虚荣等方面的要素

荣誉机制

成就感除了游戏日常所获取金币、装备等物质奖励外，名誉、称号、人脉等成就系统也同样重要。 一款好游戏一定会不断的在游戏过程中去激励用户，在用户合适的成长等级生成相应的荣誉标识，让用户可以感受到荣誉感

多样小目标

游戏需要清晰的长远路径引导用户，更需要多样的小目标鼓励用户，让用户总能找到一个可预见的小目标，不断去完成它，获得完成时的成就感

得失感

人都厌恶损失，当用户给小树浇越多水，小树越来越大的时候，便越难割舍与这个小树的联系；长期不登录这个游戏会让他失去所耗费众多时间与精力打造的世界，自然而然的产生一种心有不甘的得失感。 如果用户长期不浇水，小树就会枯萎，让用户产生损失感，基于可控感吸引用户参与，通过成就感持续让用户沉溺，最后让得失感成为制约玩家不活跃的门槛。

资源位展示

• 文案底框支持多色选择，背景底框外描边为固定样式，氛围元素不得超过安全区域

• 外部底框不得有任何修改，详见源文件规范，标红区域不可更改，标绿图层可更改

• 文案区域字符为5字以内，字体为：方正准圆，字号：18（素材包已提供，请自行安装），如文案过长，后期会选用动态展示

夜间模式

根据现实世界的光线变化增加夜间场景，提升游戏世界的代入感

消息通知

提醒用户打开消息通知，提高产品活跃度

1.场景定制化设计，提升用户代入感

2.拟人手势与通知界面的结合可以非常清楚的告知用户打开通知的方法，提高通知打开率

3.用健康金奖励刺激用户打开通知，比没有奖励的打开率高很多

4.按钮文案由确定改为去打开，动作倾向更明显