Image by Willi Heidelbach from Pixabay
在UI设计中，文本是常用的元素之一，他是 传递信息 的主要工具。或许是因为它太过基础，很多时候我们会忽视它的存在，导致页面最终效果不够理想。对于注重用户体验的产品来说，每一个细节的偏差都可能成为致命伤。
“艺术是无依据可循的，但是文字排版却是有依据可循的。”
正文的大小、字阶的比例，字与字之间的距离、文本的颜色和对比度等，都是影响可读性和易读性的关键因素。
下文中提到的数值都只是一个参考，如果死磕数值那设计将失去了意义。重要的是理解你想通过页面传递给用户的信息，从而 明确设计目标，以此对你的设计进行针对型的调整。
在UI设计中，文本是常用的元素之一，他是 传递信息 的主要工具。或许是因为它太过基础，很多时候我们会忽视它的存在，导致页面最终效果不够理想。对于注重用户体验的产品来说，每一个细节的偏差都可能成为致命伤。
“在高分辨率的显示器普及的今天，为什么我们还把浏览器默认的最小文本12px来定义正文的标准字号？即使这个默认值已经存在了超过20年。”
正文大小
在打字机时代里，我们定义 12pt（点）的文本是 印刷品的最佳阅读尺寸（这个值还考虑通过文本尺寸控制书籍、杂志、报纸的纸张数量成本）
20世纪90年代，数字平台建立了 pt（点）到 px（像素）到转换，在默认分辨率为 72dpi 的 Mac OS 上直接转换 12pt 等于 12px 。
pt = 1/72(英寸), px = 1/dpi(英寸)
然而 12pt 在 Windows 默认的 96dpi 分辨率下等于 16px，当时的设计师普遍认为16px的正文太大了，因为那个年代的只有 14英寸的低分辨率屏幕作为衡量基础。
直到2004年，14px的文本仍然被认为对于正文来说是偏大的，但是从2011年开始 随着更大分辨率的显示器以及响应式技术的来到使得越来越多的设计师将14px的文本视为最小字体大小。
字阶
通过 字体大小区分内容层级 是常规的设计方法，如何选择字阶的大小达到比较满意的效果呢？
基于14px的主体字号我们可以通过一些“美”的比例得到一系例对应的字体大小组合，从而来支持产品及内容的需求；
Material Design 定义了13种尺寸组合，每种类型都有对应的语义说明：
Ant Design 定义了10种尺寸组合：
U-Design 定义了7种尺寸组合：
对比度
在 页面中文本需要足够的对比度才能保证内容清晰易读，过强或过弱的对比度都是不利于用户阅读的，有什么方法可以去 科学地衡量 这个对比度呢？
“无论你的技术水平或身体状况如何，网络应该为所有人提供信息访问”
实际上，W3C 的 Web 无障碍推进组织制定了 Web 内容无障碍指南(WCAG)，该指南针对Web上文本对比度给出了一些建议：
对比度等级 | 普通文本 | 大号文本 | 附属文本 |
AA | 4.5:1 | 3:1 | 无要求 |
AAA | 7:1 | 4.5:1 | 无要求 |
对比度等级：
AA 级: 符合要求的最小对比度
AAA 级: 增强版的对比度，以便中度低视力的用户在不使用对比度增强辅助工具的情况下可以阅读
大号文本定义：
至少有18pt或者加粗14pt大小的文本
如何快速的 验证页面是否符合WCAG 标准 呢？下面我列举一些自用的工具：
1）色彩对比计算器
2）网页在线比对工具
3）sketch色彩对比插件
字间距
在 较大尺寸的文本 中（例如标题）使用 更紧密的字间距，可以减少文本之间的空间提高可读性。
而在 较小尺寸的文本 中（例如正文）适当的 增加字间距，可以提高可读性，因为字符之间更多的空间增加了字形之间的对比度。
字体类型
在字体类型上除了我们常说的衬线字体与非衬线字体外，还有两种不同的间距类型：等宽字体和比例字体，这也是目前很多设计师容易忽略的区域。
比例字体：具有可变间距，每个字符宽度根据字符实际占用空间来定义
等宽字体：每个字符占据相同的空间宽度
下面提到的等宽字体和比例字体指的都是英语类字体，其实在现实社会中人们所书写的都是比例字体，但在计算机时代早期，因为技术限制的原因无法做到字体不等宽的设定从而产生的字体类型，随着技术的发展比例字体开始出现。
由于网络上有着 大量的内容信息和有限的可用时间，用户只会 阅读页面上大约28%的单词，通常会 扫读而不是阅读。而等宽字体就有一个很明显的缺陷，因为它所有 字符的宽度都是相同的并不适合扫读，所以在内容字体选择上不会使用等宽字体。
但是仍有
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/126495.html
摘要：正文概念本次要谈的移动不是，只是很普通的移动端的界面。默认行为作为之前开发端的人员，第一反应就是如何把那么大的界面内容展现到手机小小的屏幕上。就是在显示多行文字的时候，可能需要在自己期望显示多少行之后，省略后面的文字，然后以。。。 前言 开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没...
这是这个系列的第二篇，第一篇这见 这里： 以下是这个系列的简洁 UI 的 7 条规则： 光来自天空 (Light comes from the sky) 黑白优先 (Black and white first) 加倍你的空白 (Double your whitespace) 学习在图像上叠加文本的方法 ( Learn the methods of overlaying text on image...
阅读 128801·2024-02-01 10:43
阅读 372·2024-01-31 14:58
阅读 434·2024-01-31 14:54
阅读 81901·2024-01-29 17:11
阅读 2210·2024-01-25 14:55
阅读 1483·2023-06-02 13:36
阅读 2090·2023-05-23 10:26
阅读 470·2023-05-23 10:25
