关于文字，UI设计师需要知道这些

版权申明：本文出自“酸梅干超人”原创，感谢“酸梅干超人”的原创文章分享！

UI 是一门偏向排版的设计类型，而对于排版来讲，最重要的东西既不是软件操作深度，也不是视觉设计创意性，而是对于文字的排列与设置。

对于新手来说，注意力往往被案例中精致的配图，花哨的配色，酷炫的动画吸引，而忽略文字的重要性。实际上，文字才是界面的骨骼和灵魂，掌握好文字的使用，才能真正驾驭所有界面的视觉表现。

并且，除了设计效果以外，实际开发过程中实现设计效果时，在字体上遇到的问题是最多，也是最难以解决的。所以，这篇文章会围绕在 UI 中文字的使用展开，如何正确的设置文字做出正确的设计，且符合项目开发的实际需要。

在常规设计软件中，主要将文字元素的设置划分为两个部分，分别是 "文字属性" 和 "排版属性"。在开始具体讲解如何应用文字前，需要先详细了解它们的知识点以及设置规则。

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

在这里，我们主要使用 Sketch 的文字设置面板做介绍，如下图所示，XD、Figma 等其它 UI 设计软件界面与内容基本相同，看懂以下内容即可。

1.1 文字属性

1.1.1 字体 FontFamily

首先，我们要讨论的是文字的字体，字体即文字设计的不同风格，相信大家都已经只知道。那么值得注意的是，字体是如何显示到我们的电子设备中的呢？

字体设计公司或者设计师完成一套字体的设计时，会将这些字体图形合并成一个标准的字体格式文件，常见的如 OTF、TTC、TTF 等等。

这些字体文件，本质上也是矢量文件，因为界面中任何一个可见的文字都是已经已经设计好的矢量图形轮廓，设计师将这些图形置入并分配对应的编码，于是系统就会通这些编码来调用文字图形。

任何设计软件的字体都是从系统中调用的，如果缺乏对应字体文件，那么设计师在设计软件的字体列表中就找不到。如果设计师应用了某字体，而用户的客户端系统里没有，那么他们的字体显示也会出错或者用其它字体替代，与设计稿样式有出入。

所以，商业系统为了显示的统一性，都有规范各自平台默认的字体，以防设计师过度发挥，导致字体在客户端无法正常显示，会再后面的部分详细讲解。

1.1.2 字号 FontSize

文字的字号，即文字的大小数值，通常使用 pt 作为字号的单位 （安卓是 sp  但是只是称呼的不同）。相信大家还记得小时候学写字时写的田字格，在界面的文字显示中，每个独立的文字实际上都由一个 "田字格" 正方形包裹，字号即这个正方形的边长。

因为文字的一些特性，这个矩形通常会比实际的文字图形更高更宽，比如中文 "一" 它的字形高度肯定不会和字号等同，而英文字母不是等宽的比如 "i" 和 "m"，字号就是——比文字更大的矩形容器的高度值。

字号的设置需要根据实际场景决定，但首先要了解它在界面中的限制。在中文中，字号如果小于10pt，那么就会因为太小无法被正常识别，而英文和数字的最小字号约为 9pt。最大的字号通常为iOS 的大标题 34pt，如果是类似闹钟、计数等大号文字，则根据设计风格制定。

1.1.3 字重 FontWeight

字重是文字笔画粗细的设定，因为在排版中，不同的字段类型对字重的要求不同，比如标题往往需要比较粗的笔画，注释文字需要比较细的笔画等等，所以我们要通过更改字体字重的方式来实现。

绝大多数人对字重更改的理解都来自学习 Office Word 的 "B" 加粗按钮。但在 UI 设计软件中，这个加粗按钮并不存在，且加粗也不是真正的字重调节。加粗按钮 "B" 只是对当前字体进行类似描边的轮廓放大渲染，效果非常粗糙。

软件都有为字体提供字重调节的菜单，只要点击就可以查看和选择对应的字重。如果选项中只有一个，那么证明该字体并没有包含其它字重，无法进行更改。当然，主流的 UI 设计字体都会包含丰富的字重，不用担心想要的效果找不到。

常见的字重通常分为三个等级，粗 (Blod)、常规 (Regular)、细 (Light)，如果字重较为丰富的字体则会在每个等级中包含更丰富的字重。例如，苹方字体中，从细到粗包含了极细、纤细、细体、常规体、中黑体、中粗体等七种。

1.1.4 字色 FontColor

字色即文字对应的颜色，这个就没有必要多做解释了。只是大家需要注意的是，通常 UI 的字色只能使用纯色，而不能使用渐变色。

并且，字体的颜色显示和透明度有一定的关联，在比较规范的设计过程中，切记不要使用透明度调节的方式来淡化字体的颜色。

1.1.5 字符样式

除了以上4个最基本的文字样式属性以外，还有几个使用频率比较低，但也比较常见的设置。例如，为文本添加下划线、删除线。

还有就是文本的大小写切换，即所有文本采用大写字符和小写字符，这个设置只对外文字符起作用，对中文没有影响。如果是英文字体本身就全大写的显示的话，那么该设置也会失效。

1.2 排版属性

1.2.1 文本区域

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

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

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

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

1.2.2 对齐模式

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

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