赞助商
立即赞助

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

UI设计3年前 (2021)更新 流光
2.7K 0 0

数字是金服业务中最为重要的设计要素之一,这是因为在金服业务中,有大量的诸如电商、支付、财富管理等场景需要数字来直接表达。而当前现状是我们有整个大品牌体系下的诸如小米兰亭这种通用字体,但唯独缺少针对金服业务这种特殊需求的特定数字字体以及数字的表达规范。因此需要总结出一套适合我们业务的数字的功能设计需求。

一、了解金服业务场景特征

那么在金服业务中的数字字体与其它业务的数字字体有哪些特殊之处?可以先以业务为导向,从小米金服现有业务的产品方案中例举场景:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

从现有的业务中可以筛选出如下金服数字不同应用场景下的功能和特点:

1. 三位以上大额金额含小数的表达,即大于999.99元

电商大额价格标签,保险额度,贷、还款金额以及理财本金金额等。

2. 三位以内小额金额含小数的表达,即小于等于999.99元

小额订单和收银台金额,现金和米币余额,公交卡和 MiPay 金额,投保金额,理财收益与贷款利息等。

3. 十位以上长整数的表达

银行号,身份证号,订单号、手机号等。

4. 十位以内含十位短整数的表达

信用分,车牌号,积分等。

5. 其它

利率,百分比,汇率与金融符号等。

二、基于人们现实生活场景的习惯和认知

通过例举现实生活场景,发现与金服业务相交集的实际数字的具体应用之处:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

在这些实际场景中总结出数字应用的相关共性:整数与小数、可识别性、环境关系以及组合与等宽。

三、整数与小数

通过对现实中的超市小额价签、股市数据展示等等收集整理,可以得到一些价格标识的基本共性:商品价签,年报数字,股市数字,电子表计时数字,票据数字等。

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

1. 额额标识:数表数表

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

2. 大额金额的标识方式

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

3. 额简标识

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

四、可识别性

通过对现实中的注重数字功能性表达的产品和场景的收集整理,这些产品和场景包括诸如计时设备、计算设备、交通导向指示、交通工具仪表显示、货币、汽车牌照等等,可以得到一些数字字体在可识别性上的基本共性。

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

对这些收集的图片素材进行字体提炼,得出12种常用的数字字体:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

可识别性测试方法是通过对字体进行静态的高斯模糊以及动态模糊来大致判断字体在极限情况下数字之间差异性程度,例如对 DIN Pro 字体进行高斯模糊:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

对 DIN Pro 字体进行动态模糊:由于是基于移动设备来进行界面的视觉设计,因此需要考虑数字字体在各个方向上受到动态残影的识别影响:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

从而我们得出 DIN Pro 数字字体可能存在的可识别性问题:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

同样诸如其他字体也可能存在的可识别性问题:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

由此获得一些影响数字字体间可识别性的基本共性,而其中 Highway Gothic、Frutiger、LuzSans、Kint Extended、UKIJ Ekran 这4种字体的在极限情况下识别性较好,经过对比和分析得到一些简答结论:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

五、环境关系

数阴暗、偏转极端条件粗细、距案例收,括诸深潜表、登月表、命令、球,球数,数基共。

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

数粗细黑:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

显,由视系,粗细磅,深浅粗细浅深显粗:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

数形状距系黑:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

人们的阅读习惯与环境关系:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

六、组合与等宽

数字要具有金融属性,最重要的一点就是需要和各种货币符号或数学符号相组合才能体现,因此通过对现实中的数字在价签等场景展示的收集整理,另外还可收集一些现实中数字的静态和动态变化的场景诸如股市、财报、汽车仪表和中控等来分析数字等宽和非等宽的实际应用:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

数字与符号的组合的不同情况与分析:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

等宽字体在纵向排版的静态场景中可读性更高:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

而非等宽字体在单组横向数据上的视觉感官更舒适:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

而在数字的动态变化中,等宽字体能够避免字段的横向变动,可读体验更好:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

七、追求形式与功能之间的平衡

随着目前手机全面屏的普及,移动设备的屏占比将会越来越大,意味着内容的显示区域也可能越来越大。另一方面,为了达到更好的图形图像显示效果,移动设备的 PPI 也有可能越来越高。 这些趋势将有可能导致人们对于内容字体在排版、细节上的要求越来越高。

基于以上对于数字在功能设计上的分析与结论,数字字体设计形式上应与现有的移动设备系统的主流中英文字体能够匹配,同时也能够适应于不同的应用场景需求,体现统一的字面大小、行距、字重、中宫、重心等,但又不必过于刻板,感官上体现年轻正向最宜。 功能上能够尽量满足我们对于数字设计在互联网金融服务上的共性和特性的理解,体现金融服务数字的安全严谨。

欢迎关注「小米金服用户体验」公众号:

看完小米设计师这篇分析,才知道界面细节能做得这么极致!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@橙子的橙子Mandy :写这篇的动机是因为,有一个朋友拿了他自己做的界面,问我觉得哪里需要球盖,他总觉得哪里不对劲,但是又...
APP
上期我们主要阐述了字体的气质分类以及联想方法,这期我们进入纯操作范畴,给大家介绍六大秘法助力你的字体设计。 有了思...
中文字体设计
相信很多经验不足的设计童鞋都有这种情况:拿到一个项目需求,不知首先从哪里入手,埋头就做,做一步想一步,没有一套比较保...
LOGO 设计
橙子的橙子:有个朋友拿了他做的界面,问我哪里需要修改,他总觉得不对劲,但不知道要怎么改。我把这些建议量化成可执行的标...
App设计
最近跟一线大厂设计师交流,他们给我的反馈是做设计的时候不单单只是视觉上的美感,更需要方法论来支撑,这样才更具有说服力...
版式布局
@孔雅轩LineVision :一篇较为系统与全面的版式讲解,从规范化的布局形式到平面构成在用户界面设计中的应用与体现。 ...
版式布局
@钱浩Hawking :这次总结了四种方法,希望小伙伴们能轻松掌握趣味字体设计。 欢迎关注作者的微信公众号:「字游...
中文字体设计
在这里,我们将研究设计中最简单、因而常常被低估的活动之一,即线框图的设计。了解什么是线框图,为什么需要设计它们以及如...
交互设计