返回

从零开始学 UI

#设计知识
#知识库
22%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
首页知识库设计知识从零开始学 UI

UI 文字的属性设置

UX百科编辑部 编辑于 2023-12-1349人正在学
50

了解完字体的显示逻辑,下面就要认识字体的 —— 属性。在不同 UI 设计软件中,文字的可编辑属性是基本相同的,虽然可设置属性不多,但都很重要。

只要完整的理解文字的属性,才可以在后续看懂规范中文字的解释和后续的演示案例。文字在 UI 中涉及的属性包含两个部分:

  1. 文本属性:字体、字号、字重、字色、样式
  2. 排版属性:文本区域、对齐模式、字间距、行高、段间距

1. 文本属性

字体 – Font

字体在上一节说过,指的是文字的图形风格,由安装在系统中的字体文件提供。系统或软件可能都会有自己内置的字体,可以在字体列表中进行选择。想要使用别的字体,就需要下载对应的字体并在系统中安装,软件才能调用。

其中,字体文件是有区分语言的,如英文、中文、日语、阿拉伯字体等等,使用其它语言字体文件无法显示中文。但基本所有字体文件都会包含英文字母和阿拉伯数字,所以在设计中文界面时,使用中文字体输入英文数字并没有问题。

UI 设计常用的字体可以下载我们准备好的资源:

点击链接 提取码:12mn

字号 Font Size

文字的字号,即文字的大小数值。这个数值的逻辑并不是文字的实际长宽的控制,而是“字形区域高”的数值。

举个简单的例子,中文 “一”,高度可能就占2-3像素,所以它的字号就是特殊的和别的字不同嘛?

在学习中文的时候,我们都用过田字本练习写字,每个田字格就是字形的区域,不管你在里面写多大或多小的文字,都对字形区域没有影响。而字号控制的就是这个田字格的大小,区域越大文字就越大,反之亦然。

苹果和安卓有有官方的字体字号规范建议,但那都是基于英文的规范,和中文的使用逻辑并不等同,所以无需完全对照,我们会在后续的演示中陆续进行说明。

字号最重要的一环在于 “最小字号” 的认识,低于这个字号就无法被正常阅读,下面是应用数值:

中文最小字号:10-11

英文最小字号:9

字重 FontWeight

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

字重有一些比较基本的命名逻辑,从细到粗有 Light、Regular、Medium、Bold、Heavy 等。

字体的粗细设置并不是软件自动生成的,每个字重代表一套独立的字体图形,同样需要在字库中安装才能选择。比如一套苹方字体,每个字重就是一个独立的字体文件。如果点开菜单,只有默认一种字重,那就证明该字体的其它字重你没有安装,所以无法对它进行调节。

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

在中文 UI 设计中,主要就使用 Light 细体、Regular 常规体、Meidum 中黑体、Bold 中粗体4个字重。

字色 FontColor

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

具体的色彩制定逻辑会在后续的色彩章节中分享。

文字样式 FontStyle

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

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

2.排版属性

文本区域

我们在画布添加文本,就会生成一个文本区域,即显示该层文本内容的区域,常见的文本区域类型包含以下三种:

  • 自动宽度:默认的文本区域,输入文字内容可以无限向右延伸,只有按回车键才可以对文字做换行。
  • 自动高度:是我们确定一个固定的文本区域宽度,则文本会在字数超过区域宽度后自动进行换行,直至显示完为止。
  • 固定尺寸:是对文本区域设置一个固定的宽度和高度,文本内容虽然也会自动换行,但当高度不足时,则超出的内容会被隐藏,而不会正常显示。

UI 设计中不会使用回车来进行换行,且单行文本大多都有字数限制,所以设计过程中主要使用定宽和固定尺寸的模式。

对齐方式 Align

对齐模式,即文本的对齐方向,有左、中、右、两端对齐四种对齐方式。其中两端对齐是平面画册、杂志排版场景中才会使用,因为它会更改每行文字之间的间距,在界面设计中避免使用。

除了垂直方向的对齐外,还包含水平方向上、中、下的对齐模式,它们只有在固定尺寸模式下才能发挥作用,一般应用在需要制作响应式效果的组件中。

字间距 Font Tracking

字距是文字字形区域的左右间距,用于控制单行文本排列的宽松或紧凑效果。

在英文文本中,每个字母字形区域宽度不同,字距的应用非常频繁,不同字体、字号都会使用不同的字距进行调节,这在官方规范中也有反应。

由于 tracking 的单位为 1/1000em,所以实际数值应除以1000;如 6pt 的 SF pro text 字间距应为 41/1000=0.041

但中文的显示逻辑和英文不同,中文的字形区域是以“田字格”式的矩形组成,每个矩形宽度相同,字体在出厂状态就自带最佳的空间留白,无需单独设置字距,所以在中文界面设计中,正常文本都使用默认0的字间距即可。

行高 Line Height

行高是每行文本高度的属性,行高决定了多行文本之间的宽松程度,行高的设置也决定了文本区域的大小和多行文字之间的宽松度。

行高是垂直方向的空间高度,字体会有默认的行高且大于字号数值,文字在行高的区域中居中显示。

在 UI 的设计中,因为行高而多出的文本区域就是排版用于对齐的区域,而不是文字的边缘本身。无需在设计中强行修改行高和字号相同,一般情况下,行高可以比默认值更大,但不能比默认值更小。

段间距 Paragraph spacing

如果要在一个文本区域中输入大量的文字,那么在行之上就还会增加“段”这个单位,也就是我们熟悉的段落。行和行之间使用行高来提升上下的留白,而段与段之间,则使用段间距来增加间隔,提高阅读性。

在没有段间距的情况下,我们会喜欢使用多打一个回车来换行增加段落间距,但使用段间距可以避免这个问题。根据亲密性原则,段间距的设置最好小于行高最佳,不会让段落之间过于离散。

UI 的文字应用,就是对以上属性的正确认识并进行合理的设置。

点赞
收藏
学会
7045049
下一篇: 基本色彩模式的认识
配色是一门很复杂的学问,在学习配色的方法之前,首先要理解的是色彩的模式。 色彩模式是一种用来描述、记录色彩的方法,而不同场景,方法就不一样。因为不同的场景中组成色彩的要素不同,如果不做区分,就会造成颜色记录和使用上的误差。 常见的色彩模式包含HSB、RGB、CMYK 三个大类。 色彩模式分类 HSB...
笔记 (14)
只看自己
logo
Hurricane 记录于 2024-08-13
最小字号
原文: 字号最重要的一环在于 “最小字号” 的认识,低于这个字号就无法被正常阅读,下面是应用数值: 中文最小字号:10-11 英文最小字号:9
Annis 记录于 2024-07-28
ok
原文: 段间距的设置最好小于行高最佳,不会让段落之间过于离散。
上课困难户 记录于 2024-06-26
参考LOFTER文字阅读排版,突破了这种规则。阅读起来感受明显不同。
原文: 根据亲密性原则,段间距的设置最好小于行高最佳,不会让段落之间过于离散。
木可杨 记录于 2024-05-13
1
根据亲密性原则,段间距的设置最好小于行高最佳,不会让段落之间过于离散。
原文: 根据亲密性原则,段间距的设置最好小于行高最佳,不会让段落之间过于离散。
Amily 记录于 2024-03-02
根据亲密性原则,段间距的设置最好小于行高最佳,不会让段落之间过于离散。
原文: 根据亲密性原则,段间距的设置最好小于行高最佳,不会让段落之间过于离散。
Amily 记录于 2024-03-02
Mark: 字号最重要的一环在于 “最小字号” 的认识,低于这个字号就无法被正常阅读,下面是应用数值: 中文最小字号:10-11 英文最小字号:9
原文: 字号最重要的一环在于 “最小字号” 的认识,低于这个字号就无法被正常阅读,下面是应用数值: 中文最小字号:10-11 英文最小字号:9
凯尔队长 记录于 2024-02-18
对于界面中注释型的文字,就用这么大
原文: 中文最小字号:10-11 英文最小字号:9
Tutti 记录于 2024-02-06
段高
原文: 在没有段间距的情况下,我们会喜欢使用多打一个回车来换行增加段落间距,但使用段间距可以避免这个问题。根据亲密性原则,段间距的设置最好小于行高最佳,不会让段落之间过于离散。
Tutti 记录于 2024-02-06
行高
原文: 在 UI 的设计中,因为行高而多出的文本区域就是排版用于对齐的区域,而不是文字的边缘本身。无需在设计中强行修改行高和字号相同,一般情况下,行高可以比默认值更大,但不能比默认值更小。
Tutti 记录于 2024-02-06
最小字号
原文: 字号最重要的一环在于 “最小字号” 的认识,低于这个字号就无法被正常阅读,下面是应用数值: 中文最小字号:10-11 英文最小字号:9
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞