UI 是一种侧重排版的设计类别，而在排版中，最为关键的并非对软件的熟练操作程度，也不是视觉设计上的创意表现，而是文字的排版与运用。新手常常会把注意力放在案例里精美的配图、绚丽的配色以及炫酷的动画上，却忽视了文字的重要意义。实际上，文字才是界面的骨架与核心，只要掌握好文字的使用方法，即便没有上述这些元素的衬托，也能设计出十分出色且具有吸引力的界面。
有一定UI界面设计经验的同学，想必已经体会到在文字应用方面力不从心——不仅难以理解文字中包含的细节，也不清楚该如何定义文字属性的参数。本次分享就围绕文字展开，分为认知和应用上下两个部分，助力大家一次性搞懂与UI相关的文字知识。下面，我们先从认识文字开始。
文字属性
文字的认识分为两个部分，包括文字属性、排版属性。文字属性即软件中对文字进行设置的最基础的属性，这里用主流 UI 设计软件Figma的文字设置进行说明
1.1.字体 - Font
首先，我们要探讨的是文字的字体。字体指的是文字设计的不同风格，这一点相信大家都已经了解。不过，值得关注的是，字体是怎样在电子设备上显示出来的呢？这就不得不提到字体文件了。当字体设计公司或设计师完成一套字体的设计后，会将这些字体整合为标准的字体格式文件，常见的有OTF、TTC、TTF等。这些字体文件，本质上也属于矢量文件，因为界面中所有可见的文字，都是预先设计好的矢量图形轮廓。设计师会把这些图形放入文件中，并为其分配对应的编码，如此一来，系统就能通过这些编码调用相应的文字图形了。
1.2. 字号 - FontSize
文字的字号，指的是文字的大小规格。在APP界面中，字号单位通常使用pt（安卓系统中为sp，只是名称不同）。UI设计中，字号的具体设置数值往往是新人最关心的问题，这在官方的组件文件中通常能找到，不过官方设定的字号并非强制要求。字号方面，最重要的一点是对“最小字号”的认知，也就是该类文字能够被正常阅读的最小尺寸。在使用中文时，最小字号应控制在11pt；而数字和英文的最小字号则为9pt。
1.3.字重 - FontWeight
字重是文字笔画粗细的设定，因为在排版中，不同的字段类型对字重的要求不同，比如标题往往需要比较粗的笔画，注释文字需要比较细的笔画等等，所以我们要通过更改字体字重的方式来实现。
常见的字重通常分为三个等级，粗 (Blod)、常规 (Regular)、细 (Light)，如果字重较为丰富的字体则会在每个等级下再包含了多种字重。例如，苹方字体中，从细到粗包含了极细、迁细、细体、常规题、中黑体、中粗体等七种。
1.4.字色 - FontColor
字色即文字对应的颜色，这个就没有必要多做解释了。只是大家需要注意的是，通常 UI 的字色只能使用纯色，而不能使用渐变色。并且，字体的颜色显示和透明度有一定的关联，在比较规范的设计过程中，切记不要使用透明度调节的方式来淡化字体的颜色
排版属性
1.文本区域
在普通的设计软件里，当我们在画布上添加文本时，会生成一个文本区域，也就是用于显示该层文本内容的区域。通常来说，文本区域分为三种类型：水平适应、定宽模式和固定尺寸。水平适应是默认的文本区域模式，我们输入的内容能无限向右延伸，只有按下回车键，文字才会换行。定宽模式指的是我们设定一个固定的文本区域宽度，当字数超出这个宽度时，文本就会自动换行，直到内容全部显示完毕。
2.对齐模式
对齐模式指的是文本的对齐方向，包括左对齐、居中对齐、右对齐三种方式，这一点大家在初中使用Word时应该就已经学过了。不过需要注意的是，文本对齐的标准是由文本区域的边缘来决定的，只有在设置了定宽模式或固定尺寸的文本区域中，对齐操作才有实际意义。
3.字间距
字间距是单个字符之间的水平距离，这个属性的设置可以控制文本的横向宽松程度，设置的单位是和与字号相同。这个属性对于中文的排版来说并没有太多用处，因为中文的字符区域是以正方形进行设计的，且在设计时就以已经考虑了最佳的默认显示样式，如果随意调节这个参数，只会降低用户的阅读体验。而对于英文来说字间距就显得尤为重要，因为不同字母的字宽是不同的，往往需要我们根据字号和字重的不同动态调节间距参数，所以苹果在官方字体规范中使用 SF 不同字号状态下就会应用不同的字间距数值。
4.行高 - LineHeight
行高是本篇内容中最重要的内容，也是引起最多人困惑的知识点，因为对于文本高度来说，实际上有 3 个属性，如果没有事先了解，那么在设计过程中就会产生一系列的问题无法解决，下面就来讲讲这三个属性是什么。
字高
字高即文字显示的区域高度，比如字号是 12pt，那么字高就是 12pt，细心的同学可能量过，在文字上画一个 12pt 高的矩形，文字的高度比矩形还小。这是因为，字高要显示的不止是文字本身，尤其是中文字体中，还涉及到中英文混排的上升、下沉线，以及标点符号。
行高
在一般的 UI 软件中，在行高中输入 0 即为默认的行高状态，我们可以发现通常默认行高一定比字号本身更大，例如字号为 12pt 的文字行高为 17，导致文本区域高度大于实际的字高。这是一个正常现象，因为如果行高和文字同高或更小，那么在多行文本状态下就无法正常显示。
结尾
以上就是我们在 UI 设计过程中会涉及的文字相关属性，看起来不少，而且很复杂，但只要结合后续对于文字排版的具体应用内容，就可以很快掌握，从此再也不会在文本的设置和标注上被难倒
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
