腾讯内部分享！超全面的互联网金融体验设计的方法库

♝点击上方“ 交互设计学堂 ”关注我们,送 电子书

在2017国际体验设计大会中，来自「互联网银行用户体验联合实验室」的Ray和Louie在工作坊里为大家介绍了互联网金融的通用设计流程 https://mp.weixin.qq.com/s/-EbXxnbe8ZD99RuWSbFISw ）。后续我们把在工作坊里面提到设计方法库进行了再次整理和优化，在这里为大家详细的介绍。

设计的方案可以无穷尽，但成体系的设计方法才是帮助我们在创意道路上继续走下去的利器。之前的博文《从0到1，进步的未来—微众银行APP项目小结》( http://www.uisdc.com/tencent-webank-app-design )介绍了在微众银行设计前期的一些设计案例及方法。实际上，经过了2年的沉淀与打磨，我们也打造了一套服务互联网金融行业的设计方法库。

微众银行的设计方法库，主要由以下内容组成：

• WeBank DNA

• WeBank UIkit

• WeBank Turkey

• WeBank Blocks

• WeBank Lighthouse

接下来将详细介绍这5个库分别的含义和使用方法。

△ DNA就像是一段核心编码，它决定了事物发展方向，参与了生命运作的全过程。本质的定位准确了，其发展才不会偏离。

用途：帮助设计团队与产品经理建立统一的设计目标

WeBank DNA是微众银行app给用户传递出的统一且不会轻易变化的设计感。用户可以通过直观的界面操作，可以感知到微众银行的价值观和设计观。这套DNA，也是我们在设计过程中评判和选择方案的基础标准。根据多次用户研究的结论，推导出中立、效率、安全是微众银行APP的设计DNA。每一个核心元素下面，包含了更详细的设计原则去诠释元素的运用方式。

安全

• 操作上能让用户感知到可控。

• 有容错机制，操作可逆。

• 用户的知情权高于一切，信息传递能让用户理解明确。

• 统一的品牌形象，通过品牌的传统让用户觉得信任可靠。

效率

• 交互操作一致。

• 将复杂的内容内置，呈现出更轻量的信息。

• 尽可能的解决用户端起的记忆负担。

• 操作与真实世界匹配，用户可以快速的做出判断和操作。

• 简化操作，拆分主次，优先完成主要流程。

• 操作响应及时。

中立

• 信息真实，必要信息不隐藏，保持中立的态度。

• 不使用过分诱导的语言，信息不能出现歧义。

• 框架明晰，信息完整明了。

△ 把最基础的元素组建成有效的信息，是一个从点到线的过程。从线到面的，则把有效信息的界面组建成为UI kit。让单一的高效，变成大面积的高效。

用途：设计团队快速输出标准化的设计方案

UI kit是设计师在实际工作中的基础设计工具，其本质是将可以复用的内容标准化、模版化，可以帮助我们快速、规范的组建设计稿。在搭建控件库的过程中，我们参考了iOS设计规范，对页面组件重新分解，UI kit的组成有以下几个重点内容：

根据团队设计师软件使用的环境，我们制作了视觉还原程度的Sketch 版本UI kit。在接到不需要改变页面结构的需求时，交互设计师可以直接使用控3 件，输出的设计稿可直接进入研发流程。视觉设计师不用再重复做一些细节文案的修修补补，可以更专注于信息传达和视觉优化的需求。

△ 如果只有设计跑得快，项目的推动是仍然是乏力的。提升纬度，把高效的设计方法扩展到研发层面，让方法工具更加立体化，则是推进项目的有效途径。