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ù)。