微信二维码
微博二维码
qq号二维码

最详细的 UI 文字应用指南(上)

李赫男 2019.10.10 1584人浏览
文字应用指南

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

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

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

文字的基本认识

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

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


最详细的 UI 文字应用指南(上)

1. 文字属性

字体 FontFamily

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

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

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

最详细的 UI 文字应用指南(上)

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

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

最详细的 UI 文字应用指南(上)

字号 FontSize

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

最详细的 UI 文字应用指南(上)

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

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

字重 FontWeight

最详细的 UI 文字应用指南(上)

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

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

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

最详细的 UI 文字应用指南(上)

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

字色 FontColor

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

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

最详细的 UI 文字应用指南(上)

字符样式

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

最详细的 UI 文字应用指南(上)

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

2. 排版属性

文本区域

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

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

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

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

最详细的 UI 文字应用指南(上)对齐模式

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

最详细的 UI 文字应用指南(上)

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

字间距

字间距是单个字符之间的水平距离,即文字 「田字格」 边框的间距,默认状态下通常为 0,用来控制文本的横向宽松程度,单位也是 pt。

这个属性对于中文的排版来说并没有太多用处,因为中文的字符区域是以正方形进行设计的,且在设计时就以已经考虑了最佳的默认显示样式,所以只有一些比较特殊的场景会用到。

而对于英文来说字间距就显得尤为重要,因为不同字母的字宽是不同的,往往需要我们根据字号、字重的不同动态调节间距参数,所以苹果在官方字体规范中使用 SF 不同字号状态下就会应用不同的字间距数值。

为什么很多英文设计稿一看就是中国设计师做的,因为这它们使用的都是字间距为 0 的英文,在英文母语环境下这样的间距是无法被接受的。

最详细的 UI 文字应用指南(上)

行高

行高是一行文本垂直方向的高度,这个高度和字高无关,文字内容默认处于这个高度的水平居中位置,如下图所示。

最详细的 UI 文字应用指南(上)

在一般的 UI 软件中,我们可以发现通常默认行高一定比字号本身更大,例如字号为 12pt 的文字行高为 17,导致文本区域高度大于实际的字高。这是一个正常现象,因为如果行高和文字同高或更小,那么在多行文本状态下就无法正常显示。

最详细的 UI 文字应用指南(上)

但是,还有一个在 Sketch、XD 等软件中没有包含的属性需要引起我们重视,那就是 —— 「行间距」。

行间距是一个独立于行高之外的属性,在一些复杂的设计、排版软件中会出现,以及iOS、Android 等前端语言中也有提供这个属性,它是造成我们标注与实际开发过程出错的罪魁祸首。

无论是设计过程中,或者设计标注文件中,都要抛弃掉任何有关行间距的概念,具体的原因会在后续内容中说明,这里只要搞清楚它们的区别即可。

段间距

前面我们已经了解了,在定宽和固定尺寸的文本区域中,文字超出一定数量会换行,这是自动执行的,但当我们想要对数量较多的文字做出主动的划分,就会对内容进行换行操作,即——生成新的段落。而段间距,就是和前面所有元素无关的控制段和段之间距离的属性。

最详细的 UI 文字应用指南(上)

根据亲密性的原则,段落之间首尾的行之间间距应该大于段内的间距,这时候就应该增加段间距,使得文本的阅读体验得到进一步的提升。

比如本段和上一段内容……

               

分享到:
天津UI设计培训-CleanPNG免抠素材网站
  • 2020.11.30
  • 不会选题等于白发!小红书爆款选题这样做才有效!天津短视频运营培训
  • 2025.05.12