UI设计中文字的排版和设置

1.2 排版属性

1.2.1 文本区域

在一般设计软件中，我们在画布添加文本，就会生成一个文本区域，即显示该图层文本的区域。通常，文本区域有三种类型，水平适应，定宽模式，固定尺寸。

水平适应就是默认的文本区域模式，我们输入的内容可以无限向右延伸，只有按回车键才可以对文字换行。

定宽模式，是我们确定一个固定的文本区域宽度，则文本会在字数超过区域宽度后自动进行换行，直至显示完为止。

固定尺寸，是对文本区域设置一个固定的宽度和高度，文本内容虽然也会自动换行，但当高度不足时，则超出的内容会被隐藏，而不会正常显示。

1.2.2 对齐模式

对齐模式，即文本的对齐方向，有左、中、右三种对齐方式，这个大家初中就应该在 Word 里学过了。但是，文本对齐的标准是基于文本区域的边缘决定的，只有设置定宽和固定的文本区域模式对齐才有意义。

除了以上三种垂直的对齐方向以外，类似 Sketch 等部分软件中还包含水平方向的对齐模式。当我们使用了一个固定尺寸的文本区域以后，就可以设置文本内容的上、中、下对齐，在一些特殊的排版场景中非常便利。

1.2.3 字间距

字间距是单个字符之间的水平距离，即文字 “田字格” 边框的间距，默认状态下通常为 0，用来控制文本的横向宽松程度，单位也是 pt。

这个属性对于中文的排版来说并没有太多用处，因为中文的字符区域是以正方形进行设计的，且在设计时就以已经考虑了最佳的默认显示样式，所以只有一些比较特殊的场景会用到。

而对于英文来说字间距就显得尤为重要，因为不同字母的字宽是不同的，往往需要我们根据字号、字重的不同动态调节间距参数，所以苹果在官方字体规范中使用 SF 不同字号状态下就会应用不同的字间距数值。

为什么很多英文设计稿一看就是中国设计师做的，因为这它们使用的都是字间距为 0 的英文，在英文母语环境下这样的间距是无法被接受的。

1.2.4 行高

行高是一行文本垂直方向的高度，这个高度和字高无关，文字内容默认处于这个高度的水平居中位置，如下图所示。

在一般的 UI 软件中，我们可以发现通常默认行高一定比字号本身更大，例如字号为 12pt 的文字行高为 17，导致文本区域高度大于实际的字高。这是一个正常现象，因为如果行高和文字同高或更小，那么在多行文本状态下就无法正常显示。

但是，还有一个在 Sketch、XD 等软件中没有包含的属性需要引起我们重视，那就是 —— “行间距”。

行间距是一个独立于行高之外的属性，在一些复杂的设计、排版软件中会出现，以及iOS、Android 等前端语言中也有提供这个属性，它是造成我们标注与实际开发过程出错的罪魁祸首。

无论是设计过程中，或者设计标注文件中，都要抛弃掉任何有关行间距的概念，具体的原因会在后续内容中说明，这里只要搞清楚它们的区别即可。

1.2.5 段间距

前面我们已经了解了，在定宽和固定尺寸的文本区域中，文字超出一定数量会换行，这是自动执行的，但当我们想要对数量较多的文字做出主动的划分，就会对内容进行换行操作，即——生成新的段落。而段间距，就是和前面所有元素无关的控制段和段之间距离的属性。

根据亲密性的原则，段落之间首尾的行之间间距应该大于段内的间距，这时候就应该增加段间距，使得文本的阅读体验得到进一步的提升。

比如本段和上一段内容……

在上面了解了文字基本属性以后，接下来我们要简单介绍一次有关 iOS、Android 端的文字规范。规范内容主要分为两个方面，一个是使用的字体介绍，另一个是对文字大小的应用。

2.1 iOS 文字规范

2.1.1 可用字体

在 iOS 中中文和英文都有各自的官方字体，中文只有一个字体，那就是 “苹方”，而英文有两个系列的字体，一个是黑体 “SF Pro” 另一个是衬线体 “NewYork”。

在中文字体环境中，我们使用苹方这个字体即可，苹方中也有携带英文字符，所以中英文混排不需要特意设置英文字体，统一使用苹方即可。

而英文环境下，使用的字体就比较复杂。我们可以根据需要选用 SF Pro 或者 NewYork 作为主要用字，但作为系列字体，它们实际上还各自包含好几个字体类型，目前官网对 NewYork 的说明还语焉不详，所以我们先从 SF Pro 入手。

苹果官方为 SF 系列提供了 7 种字体，用于各种不同的设备，其中 SF Pro Text 和 SF Pro Display 是用于手机和 ipad 客户端的系统字体。

而这两个字体的区别，在于当我们使用的字号小于 20 时，使用 SF Text，大于或等于 20 时，则使用 SF Display，这需要我们在设计英文界面时手动进行切换。以及，每个 SF Pro 字体下包含了接近 20 种字重，直接让设计师体会英文排版的复杂性。