可读性设计– Web排版指南(带有信息图)

本文概述

• 数字印刷术的挑战
• 选择最佳字体在屏幕上阅读
• 格式化以获得愉快的阅读体验
• 永远不会跳过测试
• Web排版指南

几乎任何人都可以选择字体, 只需在下拉列表中单击一个名称。然而, 选择正确的字体是设计过程中最慎重的决定之一。

字体设计师将其职业奉献给手工字母。在这些小形状中, 专家可以平衡情绪和中立性, 个性和实用性, 易读性和灵活性。选择特定设计的字体需要考虑很多问题。

传统上, 平面设计师一直都在根据印刷设计来研究排版的基础知识。但是, 由于设计师的角色现已涵盖所有类型的数字媒体, 因此印刷术是驯服的更大野兽。本着精通基础知识的精神, 在选择字体并设置其格式以获得最佳阅读体验时, 请使用以下网络排版提示。

数字印刷术的挑战

当涉及印刷设计时, 用户如何与之交互的变量很少。打印页面不会因持有者而变形, 可以严格控制颜色, 字体保持静态。真是奢侈。数字字体更加流畅。屏幕上显示排版时, 有许多因素会影响其显示方式, 其中包括：

• 屏幕尺寸：无法预测, 但是自适应设计旨在适应尺寸上的任何细微变化。但这意味着排版有时是徒劳的。
• 屏幕分辨率：像素密度在文本可读性中起很大作用。技术的进步使高分辨率屏幕更易为大众所用, 但设计师应牢记旧技术的局限性。
• 屏幕校准：亮度级别确定颜色在屏幕上的显示方式。网页设计的颜色选择需要适应所有类型的屏幕设置。

选择最佳字体在屏幕上阅读

数字设计是一项难以捉摸的技术-不久之前, 我们仅限于与低分辨率显示器兼容的几种字体。

我们的字体选项突飞猛进。它们是为屏幕精心打造的, 并且在某些细微差别上进行了设计, 以增强清晰度。正如打印字体会像墨水陷阱一样吸引眼球以提高可读性一样, 好的Web字体也会这样做。

用于打印的字体被设计为由墨水制成。 Web字体设计为由正方形像素组成。

设计不必局限于通用的标准字体(Times New Roman现在可以退休)。设计人员可以使用无数种选择来获取网络安全且可访问的字体。 Google字体, 字体库和Adobe Typekit都是其中一些, 可以轻松集成并提供多种选择。

格式化以获得愉快的阅读体验

选择字体仅仅是一个开始。围绕线长和线高的决策会决定数字设计的成败。有一些简单的技巧-切勿使用全部大写字母, 并尽量减少字体的数量-但是许多格式化决定取决于反复试验。

Grid Lover使用户可以自定义类型格式, 以实现最佳可读性。 CSS生成在侧面, 以便于实现。

理想的文本大小取决于所选字体, 因为x高度和反斜度等因素都会影响易读性。然后, 文本大小将确定行的高度和长度。测试这些决策之间关系的一种简单方法是使用诸如Grid Lover之类的工具, 该工具使用滑块来更改每次测量的外观。

在一块文本后面选择背景颜色与字体颜色本身一样重要。两者之间的对比将决定副本的可读性。 WebAIM的对比度检查器有助于轻松确定颜色组合的对比度, 从而使调色板符合辅助功能标准。

永远不会跳过测试

在设计屏幕体验时, 指南很有用, 但是有太多因素无法知道设计何时成功, 而无需现场观察。测试屏幕上的印刷术和显示设置是否落在平均水平的边缘上, 例如快过时的智能手机, 最大的高分辨率显示器以及屏幕突然变亮。通过极端条件的设计已准备就绪, 可以完全用户访问。

Web排版指南

屏幕设计时需要考虑很多因素, 并且随着技术和产品的进步, 设计条件将不断变化。但是, 在排版方面, 似乎有些事情总是成立。

这是选择正确的字体并对其进行格式化以提高可读性的综合指南。

下载此信息图的PDF版本。

将此信息图表嵌入网站。

• • •

在srcmini设计博客上进一步阅读：

• 剖析版式解剖学的复杂性
• 了解字体分类的细微差别
• 话语很重要-UX复制的真正价值
• 创建UI风格指南以获得更好的UX
• 网站重新设计的基础-案例研究