UI设计中,文字设置是必不可少的一环。今天就来为大家分享UI设计设置文字的规范。


1
类型


iOS设备的系统默认字体,中文为苹方,英文&数字为SF UI Text。

看不懂UI文字设计规范?这篇文章帮你搞定!
Android设备系统默认字体,中文为思源黑体,英文&数字为Roboto。
看不懂UI文字设计规范?这篇文章帮你搞定!


2
字号


使用场景不同,文字字号也要不一样。我们一般使用文字在:一级标题、二级标题、三级标题、正文和提示文字 。文字最小字号一般为11。但有时候标签里面的文字,字号可能更小。

看不懂UI文字设计规范?这篇文章帮你搞定!


3
字重


字重是字体笔画的粗细。UI设计中有两个常用字重:常规(Regular)与中黑体( Medium)。

正常文字可以使用常规体(Regular)。但如果需要突出层级,或者增加对比时就可以使用中黑体( Medium)了,比如标题。

看不懂UI文字设计规范?这篇文章帮你搞定!


4
行高


字号大小等于文字高度,下图中字号为16时,行高设置为16,那么行高是字体本身的高度(16pt)。

看不懂UI文字设计规范?这篇文章帮你搞定!
由此我们可以知道:行高=字号+行间距。

再举个例子:行间距距离文字上方与下方都为3pt,字体高度为16pt。则行高为22pt(16+3+3)。

看不懂UI文字设计规范?这篇文章帮你搞定!

在界面过程中,需要规范字号大小和对应的行高。不然会存在设计布局问题。

比如设计一个标签时,当字号为14时,行高为20,为了保持视觉上字体到四周距离相同,所以上下间距要为4,左右间距为8。只要有行间距,就不能将上下和左右间距设置相同。

看不懂UI文字设计规范?这篇文章帮你搞定!
如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。

下面是iOS设计指南建议字号和对应的行高对照表。

看不懂UI文字设计规范?这篇文章帮你搞定!
这是Sketch默认字号和行高对照表:
看不懂UI文字设计规范?这篇文章帮你搞定!


5
行宽


行宽=字体宽度+两侧距离字体的宽度。

行宽作用于文本范围将行宽拉长,代表设置了文本内容范围。如下图,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。

看不懂UI文字设计规范?这篇文章帮你搞定!


6
字体颜色


字体颜色可以直接使用色值。

看不懂UI文字设计规范?这篇文章帮你搞定!
或者调整不透明度,通常以#000000(黑色)为基准,设置不同的不透明度。
看不懂UI文字设计规范?这篇文章帮你搞定!
目前大半UI设计都在使用设置不透明度的方法来调整文字颜色。