UI 设计中如何正确设置文字

大家在 UI 设计实际项目中，遇到最多问题可能就是文字排版。开发实现的页面总是与视觉稿有偏差，开发却说“都是按照视觉标注文件的参数来做的”，而你却不知道解决方法，只能坐在开发旁边和他一个像素一个像素的调整…

在大部分情况下UI设计也有点像平面设计中的排版，排版是平面设计中的重要手段之一，其本质就是画面中各个元素之间的关系。所以文字与其他元素之间对比、间距等就尤为重要。掌握好文字的使用，设计好页面的视觉只是第一步，但最最重要的是如何把你的设计准确无误的传达给开发，最后实现落地。

所以今天就聊一聊UI设计中如何正确的设置文字，才能提高前端开发的视觉还原度。

字体 CSS 基本属性

首先认识字体的 CSS 基本属性，Font-Family（字体家族名称）、Font-Weight（字体字重）、Font-Size（字体大小）、Line-Height（字体行高）等。前几期我专门介绍了 Font 的几个基本属性，如果大家感兴趣可以去看看。

Font-Family 字体家族名称：选对字体对一个页面的视觉呈现非常重要，依据整体的风格和品牌调性，选用最合适的字体。

Font-Weight 字重：在西文排版里由于每单个字母所占空间比例差不多，每个单词的长度也不一样，可能字号越大，字重越小，即使大标题使用细号字重也不会影响阅读体验，但中文则不行。

Font-Size 字体大小：在同等字体大小的情况下，英文字母在视觉上会比中文字体小，所以根据汉字的特定合理调整字体大小。如在一个主标题里有英文或数字的情况下，要手动把其调大一点。

Line-Height 字体行高：重点来了…

在设计的时候，同样字体大小的情况下，不同的字体行高会有什么影响呢？如下图所示：左边的行高与字体大小一样，而右边的行高大于字体大小。

行高的不同会导致与其他元素的距离也会不同，所以行高对页面字体排版至关重要。

Sketch 文字属性设置面板

字体选择，首先把需要的字体文件安装到你的电脑系统里。自己设计的字体可以在 Glyphs 字体编码软件可以导出常用的 TTF、OTF 等格式文件。

简单介绍一下 OTF 格式文件的优点：增强的跨平台功能，更好的支持 Unicode 标准定义的国际字符集，支持高级印刷控制能力，生成的文件尺寸更小，支持在字符集中加入数字签名，保证文件的集成功能。主要的是 OTF—opentype 苹果机与 PC 机都能很好应用的兼容字体；TTF—truetype PC 机应用较好，苹果机兼容性很差！

设计师要注意的是，如果一段文字中需要多种字体时，设计师要把不同的字体各自分层，不然在导出标注文件时容易出错。因为不同的字体在设计的时候规格都不一样。

字间距，由于田字格中文字的特点，大部分情况下间距都默认为0，只有特殊情况或者特大标题字体时，可能根据需求手动调整字间距。

行高，之前说的行高就是通过这个参数来调整的，参数要≥字体大小，如下图所示：

段落，字有行间距，段落也有段间距，根据亲密性原则，段间距一定要大于行间距。

大家要注意的是：Sketch 文字属性面板中的“行高参数”≠“行间距”、“段落参数”≠“段间距”，如下图所示：

对齐方式和文字固定宽度的属性设置大家也应该都知道的，这里就不说了。字符选项中可以根据需要选择下划线等选项，以及英文的大小写选项。

实战设计中的文字

一般情况下，视觉拿到原型图或者交互稿后，不能直接照搬使用其中的权重。打散各个元素的关系，根据业务流程和目标，结合产品的使用场景，综合考虑重新规划各个元素之间的关系和权重。并且在没有氛围图和配色的情况下调整元素间的关系和权重，这样更直观明了，没有干扰，有利于我们观察和判断。

确定基本权重关系后，用字重、颜色、等其他手法加强对比，再添加氛围图片和整体的微调达到最佳视觉效果。 

一般情况下，在视觉稿完成之前最后一步工作是制作视觉规范，当然文字也需要制作使用规范说明。根据权重列出不同文字角色的等级，并说明不同文字角色使用的场景和方法。

如何解决遇到的问题

为什么我设计出的视觉稿给到开发，最终实现的页面和视觉稿总是有差异呢？原因之一是每个开发模式中的默认字体的不同，其字体默认的行高也是不一样的。

如下图的例子：使用 Sketch 软件，字体大小设置 28px 时，如果不手动调整行高参数，其默认的行高是 40px，行间距 12px；使用 Xcode 开发工具时 28px大小的字体，其默认行高是34px(这里是以2倍图来计算的)，行间距 6px（上一篇文章《字库设计与运用 ‘三’ 》有写关于不同开发模式下的字体默认行高的变化）。这样开发出来的页面肯定与设计稿有差异的。

所以设计师在设计视觉稿时，文字的行高一定要手动设计合理的参数，并同步给开发同事。那么问题又来了，一个 APP 中有那么多的不同权重角色的文字，不同大小的文字行高到底怎么设置呢？多行文字的行高参数与单行文字的行高参数需不需设置一样呢？带有行高参数的文字与其他元素怎么对齐呢？

接下来，让我们带着问题，依次探究解决……

其实行高设置也有一定的规律可循的，总结的方法：行高=字体大小+行间距，（行间距一般在50% 字体大小至 100% 字体大小之间，这个范围的行间距在视觉的疏密空间感觉会比较舒服，也适合 APP 设计的大部分情况），比如正文字体 28px 大小，行间距 28px，那么行高就是56px。

那么有行高的文字怎么与其他元素对齐呢？这一段有点绕，需要耐心一点。下图所示：主标题文字大小 32px，行高就是 48px，小文字大小 24px，行高 36px。虽然设计时按照红色示意图来排版的（开发也是根据这个参数来的），但是我们要兼顾视觉感受的尺寸大小。这就需要设计师在排版时注意参数之间的加减运算了。

关于单行文字和多行文字的行高问题：建议以多行文字来设置合理的行高，并尽量以此参数去适配同等权重角色的文字。假如在正文的文字大小 32px，行高设置 64px，视觉看起来才比较合适。那么列表中有 32px 大小的文字也尽量用 64px 的行高。（对于开发来说，提高样式的复用率，保证代码简洁干净，他们其实很讨厌不统一的样式，除特殊场景中的文字）

这里还有个段落参数设置的问题，由于亲密性原则，段间距一定要大于行间距的（一般在正文中，段间距≈200% 字体大小、行间距≈100% 字体大小），举例：字体大小 32px，行高 64px，段落 32px。（计算得出：行间距为 32px，段间距为 64px），切记不要用空格换行来多分段落。（下图左边段落参数是 32px，右边是多添加一个空格换行。）

如何制作文字规范

关于制作设计规范是为了视觉的统一性和专业性，设计文件也具有继承性，不仅能提高后期工作效率，还能降低后期维护成本。一般情况下，其最终目的还是服务于业务，提高产品在商业中的价值。

制作视觉规范没有统一标准，而是根据不同的业务和产品类型定制合适的规范和组件。下面说一下我平时制作文字规范的一些经验：一个完整的 APP 里少说几十个，多则上百个权重等级的文字，我们也不能把这些等级的文字都一一列出来规范说明，这样做既没有提高工作效率也不科学。 

不过归纳 APP 常用的文字大小得出，使用频率的的是 36px~20px（ 2 倍图计算的 ）范围之间，而在使用时都是以 4 的倍数调整字体大小，所以很容易总结出不同权重等级的字体大小：

• 大标题：36px、32px

• 小标题：32px、28px

• 正文：32px、28px

• 辅助说明文：24px

• 特殊标注文：20px

再根据字体大小设置合理的行高

• 大标题：大小36px/行高72px、大小32px/行高64px

• 小标题：大小32px/行高64px、大小28px/行高56px

• 正文：大小32px/行高64px、大小28px/行高56px

• 辅助说明文：大小24px/行高48px

• 特殊标注文：大小20px/行高40px

在把这些常用的文字参数规范起来，说明使用场景同步给开发。自己在 Sketch 根据规定的参数创建组件，方便后面设计调用。

当然还有文字配色方案，可以单独规范起来，同样要同步给开发，并在 Sketch 中创建配色模板。

这些常用的文字规范的参数，并不能适用所有场景的视觉，那么在特使场景中的文字就要单独设置，如有大部分电商搜索结果列表页中的文字排版相对比较紧凑，那么常用字体的行高就不能适用。所以特殊场景文字就要随此场景中视觉组件需要来设置，并跟随此视觉组件出现。

结尾

分享的是个人对 UI 设计文字设置的一些经验，如有不对的地方，大家可以留言，一起交流讨论共同进步。如果你看到这篇文章对你有帮助，麻烦点击下面的“赞”~