腾讯设计师:互联网金融体验设计方法总结

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

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

微众银行的设计方法库,主要由以下内容组成:WeBank DNA、WeBank UIkit、WeBank Turkey、WeBank Blocks、WeBank Lighthouse,接下来将详细介绍这5个库分别的含义和使用方法。

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

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

安全

  • 操作上能让用户感知到可控
  • 有容错机制,操作可逆
  • 用户的知情权高于一切,信息传递能让用户理解明确
  • 统一的品牌形象,通过品牌的传统让用户觉得信任可靠

效率

  • 交互操作一致
  • 将复杂的内容内置,呈现出更轻量的信息
  • 尽可能的解决用户端起的记忆负担
  • 操作与真实世界匹配,用户可以快速的做出判断和操作
  • 简化操作,拆分主次,优先完成主要流程
  • 操作响应及时

中立

  • 信息真实,必要信息不隐藏,保持中立的态度
  • 不使用过分诱导的语言,信息不能出现歧义
  • 框架明晰,信息完整明了

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

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

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

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

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

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

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

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

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

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

做与金融相关的设计会要求设计师知业务、懂业务,所以专业的金融知识是需要设计师去学习积累的。而WeBank Lighthouse(灯塔)沉淀的是专业知识以外,与设计执行相关的风控监管要点。在没有lighthouse之前,我们每一个方案都是在设计完成后才能给风控和合规部门审核,如果出现了问题,再返回到设计侧进行调整。这样下来,整个设计流程即漫长又繁复。于是我们把风控和合规部门每一次反馈的意见和知识点沉淀下来,形成了我们的lighthouse,其中包含“不能出现”的内容和“建议出现”的内容两个部分。“不能出现”的内容由于涉及到一些内部机密信息,所以在这里我们不方便公开展示。“建议出现”的内容包括以下几个类别:不可缺少的金融要素信息、符合设计规范的文案图示、突显设计DNA的文案图示以及能够帮助提高转化率的文案图示等细节要素。在设计方案交付前,我们使用lighthouse走查方案,经过了风险自查的这个流程后,风控合规审核的通过率得到了很高的提升,也降低了设计反复修改的次数。在项目复盘的时候,再把新的知识点继续补充到lighthouse中。

写在最后

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

Tencent CDC

作者:CDCer

(0)

相关推荐

  • 腾讯设计师:浅谈小红点的设计

    小编:今天给大家讲解一个你可能会忽略的设计点,这个细节还是很影响用户体验的.如何去更好的应用它?接下来就为大家解惑,让原本烦人的"小妖精"真正的被用户所接受. 导语 随着各类App ...

  • 交互设计师量化体验的“方法宝典”-上

    交互设计师作为在互联网产品开发的中间环节,承担着沟通.挖掘.研究作用,来辅助PM同时引导视觉同学进行需求的完成和整体体验的把控. 完成这些任务我们需要很多"武功",所以接着上一篇作 ...

  • 网易设计师:如何用体验设计思维做B端官网?

    作为交互设计师+半个产品经理,笔者经历了数个网易B端产品从无到有的搭建过程,巧合在于都负责过这些产品的官网设计.官网设计能同时考验交互设计师的产品思维和信息设计能力.虽然官网页面量不多界面交互也不复杂 ...

  • 腾讯灵鲲金融是什么 灵鲲金融风险查询举报中心小程序入口、作用及使用方法

    腾讯灵鲲金融安全监管平台预判准确率超95%!!!恐怕很多小伙伴不知道,腾讯养了一条“鱼”,名字叫“灵鲲”,专门保护钱的安全,它可以在互联网的大数据海洋中,嗅出各类金融犯罪的气味,并及时发出预警.灵鲲对 ...

  • IXDC国际体验设计大会将于7月在北京隆重举行

    由国际体验设计协会(IXDC)主办的2015国际体验设计大会将于7月16-19日的北京·国家会议中心隆重举行,此次大会的主题为"重新定义用户体验(REDEFINE THE UX)" ...

  • 从买家差异看B类&C类电商体验设计创新(文略长,慎点!)

    [前言] @舒舟2017年,回顾我的职业生涯,已积累了超过10年的企业(To Business,以下简称B类)产品服务经历.从早期的企业产品数据管理(Product Data Management)软 ...

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

    前言 唐纳德·A·诺曼在<情感化设计>一书中提到我们更喜欢与人交流而非机器,要让产品对用户产生足够的亲切感,产品应该是富有趣味性且易于沟通理解的.他从本能.认知.反思方面诠释了情感化设计的 ...

  • 【To G设计赋能】重塑政务服务体验设计初探—粤省事小程序设计总结

    导语 粤省事小程序是一个基于移动端的聚合式政务服务平台.作为一个平台型产品,它集成了广东省各地市.各部门的多项民生.政务类服务内容:同时,它也承担着对不同政府部门.合作开发商.公众用户等多个相关主体的 ...

  • 设计师该如何提高设计创新能力?

    设计师在工作中除了要完成产品经理或者业务方的需求,往往还希望在设计产出上能有更多的创新来体现自身的价值.但是我们有时冥思苦想也无法有所创新,我在这里整理了一些方法,希望可以对大家有一点点启发. 我将设 ...