美文网首页
微众银行体验设计方法库

微众银行体验设计方法库

作者: JackYan | 来源:发表于2017-12-28 18:33 被阅读0次

微众银行的设计方法库

WeBank DNA

WeBank UI kit

WeBank Turkey

WeBank Blocks

WeBank Lighthouse

DNA

本质的定位——帮助设计团队和产品经理建立统一的设计目标

传递给用户的统一且不会轻易变化的设计感。通过直观的界面操作,感知产品的价值观和设计馆。也是在设计过程中评判和选择方案的基础标准

通过讨论与用户调研,推导出产品核心关键词,例 “安全” “效率” “中立”

· 安全

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

有容错机制,操作可逆。

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

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

· 效率

交互操作一致。

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

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

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

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

操作响应及时。

· 中立

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

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

框架明晰,信息完整明了。


UI kit

将有效信息的界面组建成UI Kit,使单一的高效,变成大面积的高效

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

UI Kit是基础设计工具,其本质是可以将复用的内容标准化,模板化,可以帮助我们快速,规范的组建设计稿

微众银行页面组建分解参考

在接到不需要改变页面结构的需求时,交互设计师可以直接使用控件,输出的设计稿可直接进入研发流程。视觉设计师不用再重复做一些细节文案的修修补补,可以更专注于信息传达和视觉优化的需求

视觉还原程度的Sketch 版本UI kit

Turkey

将高效的设计方法扩展至研发层面

快速调节细节并呈现结果

Turkey——微众前端代码可视化平台则是为ui开源做好准备,在代码复用和维护方面起到了重要作用

整个平台由3个部分组成:组件区、装配区、调整区

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


Blocks

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

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

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


Lighthouse

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

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

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

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

总结

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

相关文章

  • 微众银行体验设计方法库

    微众银行的设计方法库 WeBank DNAWeBank UI kitWeBank TurkeyWeBank Blo...

  • 体验库设计案例(微众银行)

  • 微众银行开户体验分析

    虚拟银行 首先介绍下什么是虚拟银行。 虚拟银行是指利用互联网和银行支付系统,满足客户咨询、购买和交易多种金融产品的...

  • 值得珍藏|2017银行用户体验大调研报告

    近日,腾讯CDC与微众银行共同成立的银行用户体验联合实验室,发布了《银行用户体验大调研报告》。报告由存、花、贷三个...

  • 微众银行

    产品定位 微众银行是持有银行牌照的互联网金融平台,没有设立物理柜台和网点,获客、风控、服务等业务均可以在移动APP...

  • 微众银行

    1.C++多继承时的初始化列表顺序。2.数据结构的线性与非线性3.分支界限法???4.正则表达式5.数组名6.C/...

  • 仿微众银行UI-微微银行微信银行

    我用H5仿写了微众银行安卓版版本,简称仿微众银行-微微银行微信银行。地址如下:https://gitee.com/...

  • 银行理财T+0

    补充: 众安天天赢连投险/微众银行可买/京东小白 微众银行活期T+1 兴业银行现金宝,3.1 光大银行活期宝和定活...

  • 小确幸

    阿牛7000。 蛋卷1100。 微众银行10000+。(活期7000。基金2000。微众金1000) 银行卡1000+。

  • 微众银行和蚂蚁聚宝竞品分析

    第一章 背景 1.1 体验环境 产品版本:蚂蚁聚宝 v1.0.1 微众银行 v1.4.8(95)...

网友评论

      本文标题:微众银行体验设计方法库

      本文链接:https://www.haomeiwen.com/subject/icvrextx.html