UI设计中文字的排版与应用认知篇

  • A+
所属分类:经验思维

本文来源: 酸梅干超人(公众号: 超人的电话亭), 共 3712 字

UI是一门偏向排版的设计类型,而对于排版来讲,最重要的东西既不是软件操作深度,也不是视觉设计创意性,而是对于文字的排版与应用。对于新手来说,注意力往往被案例中精致配图,花哨的配色,酷炫的动画吸引,而忽略文字的重要性。实际上,文字才是界面的骨骼和灵魂,掌握好文字的使用,即使没有前面这些元素的加持,也可以设计出非常优秀、吸引人的界面。

UI设计中文字的排版与应用认知篇

相信有一定 UI 界面设计经验的同学,已经会感觉到对文字的应用上有力不从心的感觉,不止是文字中包含的细节无法理解,并且不知道该如何定义文字属性的参数。本次的分享就会将主题围绕在文字中展开,分为认知和应用的上下两个部分,帮助你们一次弄懂和 UI 有关的文字知识。下面,先从文字的认识开始。

UI设计中文字的排版与应用认知篇

文字的认识分为两个部分,包括文字属性、排版属性。文字属性即软件中对文字进行设置的最基础的属性,这里用主流 UI 设计软件 Sketch 的文字设置进行说明(XD/Figma 等基本相同)。

UI设计中文字的排版与应用认知篇

1.1.字体 - Font

首先,我们要讨论的是文字的字体,字体即文字设计的不同风格,相信大家都已经只知道。那么值得注意的是,字体是如何显示到我们的电子设备中的呢?这就要说到字体文件了,当字体设计公司或者设计师完成一套字体的设计时,会将这些字体合并成一个标准的字体格式文件,常见的如 OTF、TTC、TTF 等等。这些字体文件,本质上也是矢量文件,因为界面中任何一个可见的文字都是已经已经设计好的矢量图形轮廓,设计师将这些图形置入并分配对应的编码,于是系统就会通这些编码来调用文字图形。

UI设计中文字的排版与应用认知篇

任何设计软件的字体都是从系统中调用的,所以,如果系统本身没有这个字体文件,那么我们在设计软件的字体列表中就找不到它,即使作为设计师我们的电脑上可以使用这个字体,而程序员、用户的设备中没有,那么也依然无法显示该字体。所以,商业系统为了显示的统一性,都有规范各自平台默认的字体,例如 iOS 使用的苹方和安卓的思源黑体,以防设计师过度发挥,导致字体在客户端无法正常显示。

UI设计中文字的排版与应用认知篇

1.2. 字号 - FontSize

文字的字号,即文字的大小尺码。在 APP 的界面中,通常使用 pt 作为字号的单位 (安卓是 sp  但是只是称呼的不同)。在 UI 设计中字号的设置有哪些值通常是新人最关注的问题,通常在官方的组件文件中可以找到,不过官方的字号设定并不是强制性的。字号最重要的一环在于 “最小字号” 的认识,即该类文字能够被正常阅读的最小尺寸。在使用中文时,最小的字号应该控制在 11pt,数字和英文则是 9 pt。

UI设计中文字的排版与应用认知篇

1.3.字重 - FontWeight

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

UI设计中文字的排版与应用认知篇

当我们点开字重选项菜单的时候,里面显示的字重是字体文件本身具备的属性,也就是设计了不同字重的矢量图形。如果点开菜单,只有默认一种字重,那就证明该字体只有当前的字重,我们无法对它进行调节。还有有一些特殊的字体,字重会显示在字体列表中,而不会集成到字重的选项里。

UI设计中文字的排版与应用认知篇

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

UI设计中文字的排版与应用认知篇

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

1.4.字色 - FontColor

字色即文字对应的颜色,这个就没有必要多做解释了。只是大家需要注意的是,通常 UI 的字色只能使用纯色,而不能使用渐变色。并且,字体的颜色显示和透明度有一定的关联,在比较规范的设计过程中,切记不要使用透明度调节的方式来淡化字体的颜色。

1.5.字符样式 - FontStyle

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

UI设计中文字的排版与应用认知篇

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

UI设计中文字的排版与应用认知篇

UI设计中文字的排版与应用认知篇

在界面中,没有合理的排版属性设置,那么文本的阅读性就极差。排版属性属于 UI 文字知识中的进阶内容,也是最被忽视的地方,这一节的内容需要大家仔细阅读。

1.文本区域

在一般设计软件中,我们在画布添加文本,就会生成一个文本区域,即显示该层文本内容的区域。通常,文本区域有三种类型,水平适应,定宽模式,固定尺寸。水平适应就是默认的文本区域模式,我们输入的内容可以无限向右延伸,只有按回车键才可以对文字换行。定宽模式,是我们确定一个固定的文本区域宽度,则文本会在字数超过区域宽度后自动进行换行,直至显示完为止。固定尺寸,是对文本区域设置一个固定的宽度和高度,文本内容虽然也会自动换行,但当高度不足时,则超出的内容会被隐藏,而不会正常显示。

UI设计中文字的排版与应用认知篇

2.对齐模式

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

UI设计中文字的排版与应用认知篇

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

UI设计中文字的排版与应用认知篇

3.字间距

字间距是单个字符之间的水平距离,这个属性的设置可以控制文本的横向宽松程度,设置的单位是和与字号相同。这个属性对于中文的排版来说并没有太多用处,因为中文的字符区域是以正方形进行设计的,且在设计时就以已经考虑了最佳的默认显示样式,如果随意调节这个参数,只会降低用户的阅读体验。而对于英文来说字间距就显得尤为重要,因为不同字母的字宽是不同的,往往需要我们根据字号和字重的不同动态调节间距参数,所以苹果在官方字体规范中使用 SF 不同字号状态下就会应用不同的字间距数值。

UI设计中文字的排版与应用认知篇

由于 tracking 的单位为 1/1000em,所以实际数值应除以1000;如 6pt 的 SF pro text 字间距应为 41/1000=0.041这是一个非常考验设计师排版能力的细节,也是看英文设计稿一眼就能区分是不是中国设计师做的核心因素。

4.行高 - LineHeight

行高是本篇内容中最重要的内容,也是引起最多人困惑的知识点,因为对于文本高度来说,实际上有 3 个属性,如果没有事先了解,那么在设计过程中就会产生一系列的问题无法解决,下面就来讲讲这三个属性是什么。

字高

UI设计中文字的排版与应用认知篇

字高即文字显示的区域高度,比如字号是 12pt,那么字高就是 12pt,细心的同学可能量过,在文字上画一个 12pt 高的矩形,文字的高度比矩形还小。这是因为,字高要显示的不止是文字本身,尤其是中文字体中,还涉及到中英文混排的上升、下沉线,以及标点符号。

行高

UI设计中文字的排版与应用认知篇

行高是一行文本垂直方向的高度,文本在每一行的垂直方向居中。比如我们采用定宽模式显示了三行文本,如果行高是 20,那么文本框高度就是 20*3 = 60,在 UI 软件中,字体在不同字号的状态下都有不同的默认行高。在一般的 UI 软件中,在行高中输入 0 即为默认的行高状态,我们可以发现通常默认行高一定比字号本身更大,例如字号为 12pt 的文字行高为 17,导致文本区域高度大于实际的字高。这是一个正常现象,因为如果行高和文字同高或更小,那么在多行文本状态下就无法正常显示。默认行高是一个安全数值,大于文字是属于正常现象,我们在排版过程中可以增大它的数值,但是完全不建议对其进行缩小,在后面的分享会做出说明。

行间距

UI设计中文字的排版与应用认知篇

第三个行间距,即行与行之间的间距。可能有同学还会产生疑问,行高不就能控制不同行文字之间的间距嘛?是,但并不完整。行间距是一个独立与行高的属性,即文本有了行高以后可以在下方增加一段行间距出来。虽然有一些软件对文本的设置可以单独控制行间距,但常用的 UI 设计工具只能控制行高,所以我们可以关注行之间文字的间距 = 行高 - 字号。如果一个文字 12 行高 20,那么两行文字的实际间距即为 8。看到这里相信大家已经会头晕了,尤其是没有界面设计经验的同学会觉得,这和我们设计界面有什么关系?别急,我们会在应用部分的参数设置案例上做更详细的讲解。

5. 段间距

这是我们要讲解的最后一个参数,依旧文本距离有关的参数。在一篇完整的文章中,有段这个单位,它是文章中最基本的单位。前面我们已经了解了,在定宽和固定尺寸的文本区域中,文字超出一定数量会换行,这是自动执行的,但当我们想要对数量较多的文字做出主动的划分,就会对内容进行换行操作,即生成新的段落。根据亲密性的原则,段落之间首尾的行之间间距应该大于段内的间距,这时候就应该增加段间距,使得文本的阅读体验得到进一步的提升,比如你们现在看到的本段内容。

UI设计中文字的排版与应用认知篇

UI设计中文字的排版与应用认知篇

以上就是我们在 UI 设计过程中会涉及的文字相关属性,看起来不少,而且很复杂,但只要结合后续对于文字排版的具体应用内容,就可以很快掌握,从此再也不会在文本的设置和标注上被难倒。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: