设计标准

设计标准共分为三个层次，价值观-设计规则-设计工具。

价值观

价值观是评价公司所有数字化产品的终极标准。设计价值观：确信感 Confident，流畅感 Consistent，贴心感 Congenial。

确信感

设计要让用户笃定，避免用户产生疑惑，让人机交互更加确定。

• 能让用户依据其习惯实现快速寻找。
• 能精准全面地向用户表述信息。
• 能让用户感受到页面，图标的一致性。
• 能在必要的时刻为用户提供有效且正确的提示。
• 能让用户轻易地认知所有按键及图标的含义。

流畅感

设计应当是简单，简洁且流畅的，减少用户的额外脑力和体力。

• 能优先呈现有效信息，结合用户的操作习惯，减少用户寻找的复杂度。
• 能让用户快速识别信息，了解复杂信息的含义。
• 能通过调节页面的结构布局，减少无意义设计，加强操作流程设计等，减少用户的额外操作。

贴心感

设计应当是友好，温馨且个性化的，在满足用户基本操作的基础上，进一步让用户感受到额外的关怀，为用户创造惊喜感。

• 能让在顺利完成操作的基础上，通过产品的细节设计让用户感受到尊重感。
• 能通过产品的设计，让用户在负面情绪下可以被抚慰。
• 通过个性化的设计，让用户感受到专属感。

设计规则

为了实现相应的价值观，设计规则提供了设计实践需要遵守的具体规则。

• 易识别 按键形状符合用户认知， 颜色符合要求，字体大小符合要求，logo使用符合标准。
• 适读性 信息内容全面 信息表述精准
• 整合性 相同功能页面唯一 重要功能模块整合
• 一致性 跨页面体验一致 同一产品功能多入口内容一致 同一含义按键形式统一 跨平台体验一致
• 适应性 信息适应屏幕尺寸
• 易达性 要有可操作的入口 入口位置符合用户习惯及需求
• 简单化 信息呈现易理解 信息排版易寻找 信息分类符合用户需求
• 避免误操作 热点区域 符合用户习惯 字体颜色符合要求 阅读类信息无交互效果 控件选择符合要求 icon符合尺寸要求
• 减少主动操作 关联页面间信息联动 操作流程满足用户习惯、需求 页面布局符合用户感知顺序 避免重复性功能控件
• 有效信息提示 具有必要的操作提示 在恰当时点提醒 反馈信息积极正面
• 专属性 记忆用户行为 提供定制化设计

设计工具

设计工具是对价值观和设计规则的具体落实，协助设计师在实际模块设计时快速找到对应的工具和参考方案。

设计之元素体验：

• ICON:

1. 按键形状符合用户认知，尽量使用用户熟悉、易联想的图标样式，方便用户能立马认知到其含义和作用，对其是否可做点击操作做出判断。
2. logo使用符合标准，logo图标是品牌、产品、服务的视觉表达，用于传达企业的核心理念及意图，每个logo图标在具体设计上可存在差异，但应确保在设计使用过程中符合一致的标准。
   icon符合尺寸要求，由于可操作icon的尺寸直接决定了该按键的热区大小，所以icon的尺寸应考虑用户操作过程中的拇指与屏幕的接触面积，满足最小的尺寸要求，减少用户操作过程中的难度，同时也避免过小的icon难以被识别的情况

• 颜色：颜色符合要求，对于需要用户注意到的信息，避免使用肉眼难以识别的颜色，确保用户能注意到信息的存在
• 字体：字体大小符合要求，应控制所有需用户阅读的文字大小满足尺寸要求，各客户端均有用户可识别、且阅读舒适的字体大小范围，确保用户无障碍浏览操作.

设计之功能性体验

• 点击

1. 热点区域符合用户习惯，热点的区域设置应符合用户的操作习惯，如整个下拉菜单、修改框文字部分、二维码等均为常见的用户认为有热点分布的区域。尽量避免热点区域不当导致的无效操作
2. 字体颜色符合要求，颜色的设计需符合用户对按键或图片是否可以点击的判断，用户往往认为蓝色字体可点击，灰色字体不可点击。
3. 阅读类信息无交互效果，用户在页面阅读过程中，当轻敲或悬停时，禁用的组件不能发生状态改变，如“鼠标样式变化”、“点击效果”、“边框样式变化”等情况，避免影响用户对下一步操作的判断.
4. 控件选择符合要求，控件实际效果应与用户的理解认知一致，在无实际效果时，避免控件的使用，以减少用户的误操作.

• 返回关闭

1. 同一含义按键形式统一， 各客户端中同一含义的按键形式保持统一。一致的按键呈现形式能有效减少用户在不同页面中同一位置看到不同表现形式的按键，而对其实际效果产生怀疑的情况，避免用户操作卡顿的出现。
2. 入口位置符合用户习惯/需求， 入口的位置应符合用户过往的习惯或需求，如「返回」在页面左上角、点击「更多」进入列表页面等，避免用户产生疑惑。以及重要的入口的位置应尽量显眼，确保用户在尽可能少的操作步骤内找到，以增加交叉销售的几率.

设计之行为型体验

• 查看详情

1. 信息内容全面，用户在查看详情时，页面需呈现用户在当下所有关心的内容，避免用户因为找不到信息而跳离，致使用户流失
2. 信息呈现易理解， 优化的信息的呈现方式，尤其是在复杂险种页面或存在大量数据的页面中，有效提升整个页面的阅读简洁性及流畅度，如“数据图表化”等能更有效地帮助用户理解
3. 信息排版易寻找，信息排版需符合用户业务需求，页面中的功能模块进行有效分类，降低用户的寻找或使用难度。
4. 提供可操作的入口，当用户在特定操作情境下产生即时性需求，应尽量在页面中就提供用户可操作的入口，避免用户由于无法立即获得想要信息而产生疑惑或跳离
5. 提供定制化设计， 应依据用户的身份进行识别，仅呈现与用户相关的信息，并通过识别与用户相关的特殊场景，提供定制化、专属性的服务，让用户感到被重视和被关注

• 查看个人信息

1. 信息表述精准，在进行信息表达时，使用用户熟悉、易懂的单词和短语，以用户的视角判断这些单词及短语是否可理解，确保用户理解准确，无歧义。
2. 关联页面间信息联动， 页面间若存在关联性，应尽量避免不必要的输入项设计，尤其涉及保单号、身份证号等冗长信息，确保操作过程的简洁流畅，使用户感受到人性化、个性化的设计。尤其在紧急场景中（如理赔），重复输入内容易导致操作中断，放大用户负面感受.
3. 提供可操作的入口，当用户在特定操作情境下产生即时性需求，应尽量在页面中就提供用户可操作的入口，避免用户由于无法立即获得想要信息而产生疑惑或跳离
4. 入口位置符合用户习惯/需求，入口的位置应符合用户过往的习惯或需求，如「返回」在页面左上角、点击「更多」进入列表页面等，避免用户产生疑惑。以及重要的入口的位置应尽量显眼，确保用户在尽可能少的操作步骤内找到，以增加交叉销售的几率

• 通知提醒：

1. 具有必要的操作提示，用户在遇到复杂的填写内容、无法找到需修正的内容等情况时，用户易产生困惑、焦躁等情绪，应予以有效的操作提示，舒缓用户的负面情绪，确保用户能够快速继续操作
2. 在恰当时点提醒，有效信息的提醒应确保在最恰当的时间点进行。对保险代理人来说，在恰当的时点获得客户续保、理赔的信息，便于及时维护客户，让用户感受到来自品牌的关怀

• 用户输入获得反馈

1. 页面布局符合用户感知顺序，页面布局及操作需遵循用户对信息的感知顺序，避免产生往返操作，确保整个操作的一贯性。
2. 具有必要的操作提示， 用户在遇到复杂的填写内容、无法找到需修正的内容等情况时，用户易产生困惑、焦躁等情绪，应予以有效的操作提示，舒缓用户的负面情绪，确保用户能够快速继续操作.

• 线上文字咨询

1. 操作流程满足用户习惯/需求， 页面内的所有操作流程在设计时都应符合用户的操作习惯，满足用户在当下页面产生的即时性需求，避免出现目标流程以外的内容或缺少部分流程的情况，确保用户能顺利完成所有操作流程.
2. 反馈信息积极正面，当页面无法满足用户需求时，往往是用户较为沮丧和需要帮助的时候，应为用户提供积极正面的操作提示或信息反馈，让用户明确后续会经历的事情，在一定程度上减少负面体验的积累，并让用户感受到产品设计的友好和贴心.
3. 提供可操作的入口，当用户在特定操作情境下产生即时性需求，应尽量在页面中就提供用户可操作的入口，避免用户由于无法立即获得想要信息而产生疑惑或跳离.
4. 记忆用户行为，记忆用户历史操作行为。当用户再次使用某一功能时，尽量让用户在历史行为中做选，避免用户重复输入。这种设计也会避免因手机键盘密集造成输入错误.

• 即时连线

1. 避免重复性功能控件，同一页面中避免连续出现相同功能及含义的功能控件，尽可能减少用户操作
2. 提供可操作的入口，当用户在特定操作情境下产生即时性需求，应尽量在页面中就提供用户可操作的入口，避免用户由于无法立即获得想要信息而产生疑惑或跳离

• 页面切换

1. 跨页面体验一致，同级别子渠道间、页面间，其功能模块设计应一致，尤其是重要功能所在的模块位置一致，便于减少用户的寻找成本，增加交叉销售的可能性，避免用户操作过程中的不确定感
2. 跨平台体验一致，当存在多个平台时，应保证用户看到的信息、数据是一致的、串联的，避免用户重复操作
3. 同一产品/功能多入口内容一致，同个功能存在多入口时，确保用户在各个层级的页面或入口进入后看到的内容一致，为用户提供安全、确信、便捷的使用体验
4. 信息分类符合用户需求，信息的分类应以用户的需求为分类方式，而不是以业务单位为依据，便于用户快速理解，确保用户的操作快速便捷
5. 相同功能页面唯一，每个客户端中应避免出现多个相同功能的页面，且应控制其页面的唯一，避免用户产生页面逻辑上的困惑，确保用户仅能在单一页面找到对应的功能，以进一步实现交叉营销的目的
6. 重要功能模块整合，功能模块的位置设计应考虑其对用户的重要或常用程度，重要及常用的功能应实现模块的整合，便于用户需要时的快速寻找；重要功能模块整合可以促进跨险种的交叉销售
7. 信息内容适应屏幕尺寸，信息在不同客户端上的呈现应适应其屏幕尺寸，以确保整个操作流程的流畅性

• UI索引：

1. 整体视觉规范设计方向:我们希望塑造具有太保特征的数字化产品，并使其满足于品牌的特征。
2. 将BCE多端产品，做到80%统一的同时，每个产品又有各自的识别性。
3. 重新梳理手机端和PC端视觉规范的同时，从品牌和服务的角度，提炼视觉元素，得到“海洋蓝、渐变、圆形、线性”基本元素。立足于此，展开规范。另外，将原本太保VI系统里的logo使用规范，延续进来，做到真正的一体化。
4. 具体可以分为logo应用，颜色应用，字体应用，布局，图标，组件等规范。