首个获得IDEA设计大奖的银行App长什么样?

天星银行是一家小米天星金融旗下的虚拟银行。天星金融虚拟银行产品中心期望不仅仅在视觉和交互上达成更高的完成度,同时也希望通过分析用户的行为和心理能够围绕“数字”设计从而更有效地提升用户体验。

项目背景

天星银行是一家小米天星金融旗下的虚拟银行。作为香港有史以来第一次颁发的虚拟牌照的银行【1】,以及香港30年来首次颁发的银行牌照的银行,立志于促进整个香港金融业的科技创新,降本提效,为更多的小微企业和个人提供普惠金融服务。尤其受新冠疫情的影响,香港迫切期望通过以虚拟银行为代表的互联网行业能够提振整个金融行业。

通过虚拟银行产品组在香港的实地调研,我们发现设计面临的挑战比以往更为艰巨:香港金融行业以往更注重对公业务需求,忽视了用户体验,需要重新了解用户的心理诉求与行为习惯,重建用户对新生事物的信任。因此在设计之初,我们就立志要将天星银行设计成为银行类产品中的一股清流。我们通过围绕“数字”这个关键词来搭建设计的基础,强化金融产品的安全与效率。

天星银行品牌调性

天星银行界面调性

如何设计金融“数字”?

MiType字体的诞生

数字是金融业务中最为重要的信息,为了追求最为适合移动互联网场景下数字字体,我们采集并萃取了典型生活场景中能够适应极限场景的数字字体【2】。

来源 images.google.com 的搜索结果
同时我们还设计了一套用于辨识静态场景和动态场景的数字方法全向动态模糊法。
通过筛选进行OCR萃取后获得的字体并进行分辨测试
静态分辨,拍照法与高斯模糊法
动态分辨,夜拍法与动态模糊法
通过分析,我们总结了一套用于提升数字可辨度的规则和方法。最终基于DIN Pro和LuzSans字体分辨优势,同MIUI字体设计专家合作设计出了适合金融业务数字字体(Jingrong),通过不断迭代最终形成了当前MIUI系统的时间数字字体——Mitype系列。
经MIUI字体设计师最终完成的Mitype数字字体
怎样让输入数字更高效?
基于手势的“SmartSlider”
我们希望为以数字输入为基础的金融服务能够有一致的交互模型【3】,因此我们发明了SmartSlider【4】,以期一个统一的手势输入法贯穿至整个银行产品中。SmartSlider是一种基于手势划动的高效输入法,它的定位是对于传统数字键盘输入法的有效补充。
可以应用于股票、存、贷、汇等各个金融业务场景之中
Slider【5】是一种通用手势控件,它的有限度量既能够满足金融业务的商业需求对资金的限额,又可以避免无效输入(如格式错误或超限)【6】。
基于Slider的数字输入法的交互模型
但是如果当通过Slider这种控件输入超大数值时,如何满足用户在有限的物理位移中能够精确选择数字的需求呢?
用户喜欢“精确”还是“取整”?
整数偏好理论的实际应用
于是,我们陷入反思,在金融场景中用户是否真实存在需要大量的输入精确数字?我们观察了大量的金融数字信息场景,发现了几个代表性的特征:例如ATM取款默认金额都是整百整千、股票实际交易量的价格也大多都是向上取整……最终我们学到了行为金融学【7】中的整数偏好(Round-Number Bias)理论【8】。
多篇关于行为金融学的整数偏好(Round-Number Bias)理论研究
根据理论,我们为Slider设计了特有的取整算法,使得Slider更加Smart:
磁吸式取整设计使得快速划动能够更为轻易定位整数
有效提升金融数字输入效率及安全性
我们将SmartSlider扩展至整个银行几乎所有核心业务的数字输入之中,已成为金融数字输入的核心输入法,与传统数字键盘互为补充。
已申请发明专利的SmartSlider被应用于金融业务场景
图标设计保持视觉平衡
严谨而不失品牌调性
基于天星银行抽象出的基本图形,我们对每个图标都经过严谨的数学计算【9】使之达到趋近于完美的视觉平衡,同时在造型上表达出强烈的品牌视觉调性【10】。
天星银行的部分图标
简洁高效,获得用户认可
并连获两项国际设计大奖
虽然天星银行在今年连夺IDEA2020铜奖【11】和G-Mark2020 Award【12】,但其用户体验设计还有很多正在补全和迭代之处,我们也将始终如一地秉持要将天星银行设计成为银行类产品中的一股清流的愿景而一往无前,不是因为它容易,而是因为它很难!
参考资料
【1】《小米旗下虚拟银行天星银行在港试业 雷军任董事会主席》,新浪网,https://finance.sina.com.cn/roll/2020-03-31/doc-iimxxsth2856253.shtml,2020年3月。
【2】张旭:《小议金融服务的数字的功能设计》,小米金服用户体验公众号,https://mp.weixin.qq.com/s/cRpjqi2iNNbhvC83LL3hUg,2018年10月。
【3】张旭:《关于金融产品中的输入框设计》,小米金服用户体验公众号,https://mp.weixin.qq.com/s/W8V_dEyDg64HcWP4yyhgNg,2019年3月。
【4】张旭,宋振中,郭渊敏,任雪飞:《一种金融数据输入方法、装置及介质》[P],中国发明专利,CN110262746A,2019年。
【5】Harley A. Slider Design: Rules of Thumb. Nielsen Norman Group, https://www.nngroup.com/articles/gui-slider-controls/, 2015.
【6】Slider. Material Design, Google, https://material.io/components/sliders, 2014.
【7】Ackert L., Deaves R. Behavioral Finance: Psychology, Decision-Making, and Markets [M]. Cengage Learning, 2009, 78-96.
【8】Renedoa E., Sobrino A. Round numbers revisited. A new fuzzy approach [J]. Fuzzy Sets and Systems 158, 2007, 1618–1629 .
【9】余隋怀,苟秉宸,于明玖:《设计数学基础》[M],北京:北京理工大学出版社,2006年,第61-112页。
【10】IDEA 2020: Airstar Bank. Industrial Designer Society of America, https://www.idsa.org/awards/idea/design-strategy/airstar-bank, 2020.
【11】International Design Excellence Awards. Industrial Designer Society of America, https://www.idsa.org/IDEA, 2020.
【12】G-Mark 2020: Virtual Bank App [Airstar Bank]. Japan Institute of Design Promotion, https://www.g-mark.org/award/describe/51106, 2020.
(0)

相关推荐