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

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

2017/09/23 7533评论区

zake : 在2017国际体验设计大会中,来自「互联网银行用户体验联合实验室」的Ray和Louie在工作坊里为大家介绍了互联网金融的通用设计流程(参考链接)。后续我们把在工作坊里面提到设计方法库进行了再次整理和优化,在这里为大家详细的介绍。

设计的方案可以无穷尽,但成体系的设计方法才是帮助我们在创意道路上继续走下去的利器。之前的博文《从0到1,进步的未来—微众银行APP项目小结》介绍了在微众银行设计前期的一些设计案例及方法。实际上,经过了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 件,输出的设计稿可直接进入研发流程。视觉设计师不用再重复做一些细节文案的修修补补,可以更专注于信息传达和视觉优化的需求。

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

用途:快速调整细节并呈现结果

UI kit提高了设计师的工作效率和质量,Turkey——微众前端代码可视化平台则是为ui开源做好准备,在代码复用和维护方面起到了重要作用。取名为turkey是因为项目组初期的代号为火鸡,本着「不忘初心,方得始终」的工匠精神,取了这个具有特殊含义又充满活力的名字,也体现了平台的灵活、开放性。整个平台由3个部分组成:组件区、装配区、调整区

在UI kit的基础上,将每个设计元件的代码录入到平台中,形成组件区。拖动组件区中的控件到中间的手机屏幕中(装配区),在右侧调整区则会出现相应的代码。面对完全不需要修改设计内容的需求时,前端工程师可以更快速直观的修改代码,并且让实现效果直观地在组合区中展现出来。对于产品经理、设计师、前端工程师协同办公来说,是一个高效的输出工具,同时也是非常有效的沟通工具。

△ 设计组合就像搭积木一样,用最基本的模块也可以拼出多种不一样的结果。因此模块本身既是独立的完整体,又能与更多的模块拼接。

用途:以标准化模块进行快速合作

在微众银行APP的整个业务中,有很多内容是受到严格的监管的。当然,监管也使得我们的流程更安全。这些流程模块,在短期内是不会轻易改变的。在实际项目中,我们归纳出以下模块:验密流程、购买流程、开户注册流程、人脸验证流程、风险评测流程。我们把这些流程封装称为一个个模块,在APP内所有要用到这些内容的地方都保持调用一致的界面、一致的代码。

举个例子:APP中有很多流程都需要验证密码,无论是什么情况需要验密,所有的密码输入流程总是保证体验是一致的。这样一来,既降低了用户认知的成本,也使得这些公用的模块在修改和监管的过程中,可以更规范和有效。与外部项目、公司合作的过程中,也是作为固定不会更改流程的内容进行交付。

△ 孤独前行的时候,唯有灯塔给你指路,告诉你危险。

用途:检查方案每一步是否触碰到风险项

做与金融相关的设计会要求设计师知业务、懂业务,所以专业的金融知识是需要设计师去学习积累的。而WeBank Lighthouse(灯塔)沉淀的是专业知识以外,与设计执行相关的风控监管要点。在没有lighthouse之前,我们每一个方案都是在设计完成后才能给风控和合规部门审核,如果出现了问题,再返回到设计侧进行调整。

这样下来,整个设计流程即漫长又繁复。于是我们把风控和合规部门每一次反馈的意见和知识点沉淀下来,形成了我们的lighthouse,其中包含“不能出现”的内容和“建议出现”的内容两个部分。「不能出现」的内容由于涉及到一些内部机密信息,所以在这里我们不方便公开展示。

「建议出现」的内容包括以下几个类别:不可缺少的金融要素信息、符合设计规范的文案图示、突显设计DNA的文案图标以及能够帮助提高转化率的文案图标等细节要素。在设计方案交付前,我们使用lighthouse走查方案,经过了风险自查的这个流程后,风控合规审核的通过率得到了很高的提升,也降低了设计反复修改的次数。在项目复盘的时候,再把新的知识点继续补充到lighthouse中。

总结

以上的5个方法,服务于整个设计流程,也产生于设计流程中的每一步。有了这些方法支撑,无论设计构思还是设计执行,效率都得到了极大的提高。也让更安全、更舒适的产品体验得以实现。

「必看!互联网设计之道」

原文地址:腾讯CDC

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/finance-design-flow

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里