设计好看,有本事设计中的数字也好看优秀UI教程

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

设计用到的数字,不仅需要考虑到可读性,还需考虑到辨识度以及美观性,需要从各方面解析方能采用合适的字体。

背景

上周我们一起聊了,界面常用的中文字体和英文字体——《界面好看,有本事界面中的字体也好看》,本期聊聊数字字体,数字在设计中其实占比还是很大,特别是在金融和电商设计中,数字字体,一直是情感的传递,设计细节的体现!那么今天和大家分享下在电商设计和金融设计中,常用的数字字体有哪些!

字体的骨架

设计好看,有本事设计中的数字也好看优秀UI教程

结构部分

分享前我们先要了解下字体结构:

顶部:字体中最高字形的基线上方的最大距离

上升:单个字母的基线上方的建议距

下降:单个字母的建议距离低于基线

底部:字母中最低字形的基线以下的最大距离

行距:指代字体连行的基线间的距离

基本的英文字体都是由这些单位组成的,所以在了解这些基础后,才更加方便我们设计中如何选择字体。

设计好看,有本事设计中的数字也好看优秀UI教程

身体部分

前面那张图是字体的上下结构关系,那么这张图更多是字体本身由那些元素组成:

躯干:也就是数字本身的横竖,比较笔直的笔画

字碗:顾名思议,带弧形的笔划

字环:字体被包裹的空间

设计好看,有本事设计中的数字也好看优秀UI教程

字距部分

在字距上,业内两种做法,一种是每个字体相同的大小,比如我们熟悉的lato,也有一种做法是根据每个字母本身一个大小,比如1会小一些,9会大一些,这两种布局方式有好有坏,我个人更推荐前者,每个字母间距采用一样的!

需要注意的点

设计好看,有本事设计中的数字也好看优秀UI教程

▲通常我们很多时候,网上去免费找一些数字字体,或者选择几款热门字体时候,一定需要注意检查“$”和“%”“¥”符号。

设计好看,有本事设计中的数字也好看优秀UI教程

▲另外在选择字体时候,一定需要仔细检查每个字符,比如数字中最容易混淆的就是1和7,0和O。

常用数字字体

设计好看,有本事设计中的数字也好看优秀UI教程

那么我们做金融设计或者电商设计,数字字体到底用哪几个呢?在选择之前,先来看看互联网公司都在使用哪些字体。

设计好看,有本事设计中的数字也好看优秀UI教程

▲苹果系统:使用的旧金山字体SanFrancisco,微信:DIN的字体基础上微调

设计好看,有本事设计中的数字也好看优秀UI教程

▲招商银行:DIN字体;京东金融:DIN的字体,重新进行了设计

设计好看,有本事设计中的数字也好看优秀UI教程

▲百度金融:DIN字体基础上调整6.9,支付宝:苹果原生Helvetica Neue

设计好看,有本事设计中的数字也好看优秀UI教程

▲富途:苹果原生Helvetica Neue,ui教程,韩国SSG:苹果原生Helvetica Neue

所以通过以上简单调研,我们不难发现,现在国内外大多数金融产品数字字体都是运用苹果自带数字字体,以及Din这个字体基础上调整,那么为什么Din这个字体这么受设计师喜爱呢?

Din故事

设计好看,有本事设计中的数字也好看优秀UI教程

DIN 是德国标准协会,Deutsches Institut für Normung 的首字母缩写。1975年起,德国政府把DIN作为国家标准体系,DIN 标准在国际和欧洲范围内被广泛使用。DIN 字体继承了严谨可识别度高,被广泛运用。

设计好看,有本事设计中的数字也好看优秀UI教程

设计好看,有本事设计中的数字也好看优秀UI教程

设计好看,有本事设计中的数字也好看优秀UI教程

▲在德国公路指示牌,以及机场,地图里面,大多数运用Din字体作为引导字体。

设计好看,有本事设计中的数字也好看优秀UI教程

▲在很多杂志包装中,也可见大量Din字体的运用,德国人的严谨在这个字体中体现的淋漓极致。

设计好看,有本事设计中的数字也好看优秀UI教程

▲缺陷:前面我们说了DIN在公路以及杂志,平面设计中用的很多,但是直接拿到互联网APP设计中各种复杂的场景,DIN就没有那么的完美,如图中,4的开头较大,以及5,6字体的圆形不够一致,7缩小后识别度问题,所以很多公司都会基于这些问题进行二次设计,这也是前面竞品分析里面提到,为什么微信,京东,百度会这个基础上再设计的原因。

常用数字字体

设计好看,有本事设计中的数字也好看优秀UI教程

如果只推荐一个数字字体,我肯定会推荐Din,但是Din并不免费,价格不便宜,如果需要运用每年会有一笔不小的费用,所以如果公司不愿意购买,你可以Din基础再重新设计一版本,也可以使用一些其他不错的数字字体,接下来给大家推荐一些免费版权使用的!

设计好看,有本事设计中的数字也好看优秀UI教程

1.Gaoel

如果都是用Din其实也容易看腻歪,首先推荐的这个我特别喜欢,整体字体设计很圆润,年轻化,可爱非常适合一些偏年轻化的产品,同时字重非常适合金融产品的字重效果!

设计好看,有本事设计中的数字也好看优秀UI教程

▲在支付宝备用金页面中,就运用了类似这种比较圆润有活泼感数字字体!大家可以尝试下这个字体在你界面中效果,保证不会失望。

设计好看,有本事设计中的数字也好看优秀UI教程

2.Montserrat

谷歌免费字体中很优雅的一个字体,用在数字上或者界面中都非常的优雅。

设计好看,有本事设计中的数字也好看优秀UI教程

3.Poppins

谷歌免费字体中经常被用到的一个字体,除了9稍微显得有点笨拙以外其他都挺现代的。

设计好看,有本事设计中的数字也好看优秀UI教程

4.Bitter

谷歌旗下的同样广泛运用到各种设计中,字体和英文字体都很好用。

 收藏