UI文字设计规范有那些？

有时候字号和对应行间距会出现不一致的情况，这样会导致还原度出现问题。今天我们来讲讲如何避免这种问题以及有什么解决方法。

前言

UI设计中，文字设置是必不可少的一环。

文字设置过程中涉及到字体类型、字号、字重、行高、行宽以及颜色等。

本文讲述的文字设计规范，包含以下部分：

1、类型

2、字号

3、字重

4、行高

5、行宽

6、颜色

1、类型

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

Android设备系统默认字体，中文为思源黑体，英文&数字为Roboto。

2、字号

不同的使用场景，文字的字号也不相同。文字的主使用场景分为：一级标题、二级标题、三级标题、正文和提示文字 。

文字最小字号一般为11。也有特殊情况，例如标签里面的文字，字号为10甚至可能更小。

3、字重

字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。

UI设计中，常用的字重有两个，一个是常规（Regular），另一个是中黑体（ Medium）。

正常文字使用常规体（Regular）。当需要突出层级展示，增加对比时使用中黑体（ Medium），中黑体（ Medium）常用于标题。

4、行高

字号大小等于文字高度，如下图所示，字号为16时，行高设置为16，那么其行高也是字体本身的高度（16pt）。

如下图所示：行间距距离文字上方为3pt，行间距距离文字下方也为3pt。字体高度为16pt。

举个例子，设计一个标签时，当字号为14时，行高为20，那么为了保持视觉上字体到四周距离相同，那么上下间距为4，左右间距为8。

因为行间距的存在，不能将上下间距和左右间距设置相同。

如果行高设置为14（文字本身大小），那么上下间距应该也为8pt，而非4pt。

 

5、行宽

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

行宽作用于文本范围，如下图所示：

6、颜色

字体颜色有两种规则定义做法，一种是直接使用色值，如图所示：

综合而言，使用不透明度的方法，使用场景更加广泛一些。

以上就是本期分享的内容了，我们下期再见~

转载声明：本文来源于网络，不作任何商业用途