前言

介绍了使用设计规则来进行用户界面设计的方法。列举了 16 条设计规则，并通过对一个房产详情页面设计的示例进行展示，展示了如何使用这些规则来改善设计。这些规则包括使用间距将相关元素分组、保持一致性、确保外观相似的元素具有相似的功能、创建清晰的视觉层次结构、删除不必要的样式、有目的地使用颜色等。通过遵循这些规则，设计师可以做出更易于使用和美观的界面设计。今日前端早读课文章由 @ikoofe 翻译分享，公号：KooFE 前端团队授权。

正文从这开始～～

用户界面设计是一项挑战性的工作。在布局、间距、字体和颜色等方面有如此多的选择，做设计决策可能会让人感到不知所措。当您还需要考虑可用性、可访问性和心理学等因素时，情况就更加复杂了。

幸运的是，用户界面设计并不需要那么难。在我作为产品设计师工作的近 20 年里，我意识到，大多数视觉和交互设计决策都遵循一套逻辑规则。并不是艺术的灵感或者神奇的直觉，而是简单的规则。

拥有一套逻辑规则可以帮助您高效地做出明智的设计决策。如果没有逻辑系统，您只能凭直觉调整设计，直到看起来漂亮为止。

我喜欢规则和逻辑，但设计决策很少是非黑即白的。与其遵循严格的规则，不如将以下建议看作在大多数情况下都有效的有益指导。

实践是学习的最快路径，所以让我们开始吧。

我们来运用设计规则来修改下面例子

下面这两个设计是用于短期租赁房产应用的房产详情页面的。第一个是原始设计，第二个是使用一些设计规则作出的设计。

即使您没有太多的视觉或交互设计经验，也能发现原始设计凌乱、复杂且难以使用。这是因为它存在许多设计细节问题，会对可用性造成风险。或许您已经发现了其中的一些问题。

让我们使用以下设计规则来逐个解决原始设计中的问题：

• 使用间距来将相关元素分组

• 保持一致性

• 确保外观相似的元素具有相似的功能

• 创建清晰的视觉层次结构

• 删除不必要的样式

• 有目的地使用颜色

• 确保界面元素具有 3:1 的对比度比

• 确保文本具有 4.5:1 的对比度比

• 不要仅依靠颜色作为指示器

• 使用单一无衬线字体

• 使用具有更高小写字母的字体

• 限制使用大写字母

• 仅使用常规和粗体字重

• 避免使用纯黑色文本

• 左对齐文本

• 为正文文本使用至少 1.5 行高度

1. 使用间距将相关元素分组

将信息分组，每个组包含相关元素，可以帮助我们构建和组织界面。可以让人们更快、更轻松地理解和记住信息。以下是将元素分组的方法：

• 将相关元素放在同一个容器中

• 将相关元素紧密排列在一起

• 使相关元素看起来相似

• 将相关元素对齐成一条连续线

使用容器是对界面元素进行分组的常用方式，但它可能会额外带来一些混乱。使用不同分组方法，并将它们巧妙地进行应用，可以帮助我们简化设计。

特别是使用间距将相关元素分组是一种非常有效且简单的方法。您还可以结合使用不同的分组方法，以帮助更清晰地显示分组信息。

在我们的例子中，内容之间缺乏间距使设计看起来杂乱且难以理解。增加间距有助于明确地对内容分组，使其更有组织且更易于理解。

2. 保持一致性

UI 设计中的一致性意味着，看起来相似的元素，它们的使用方式也相似。这一点应该在您的产品内部和与其他成熟产品进行比较时都成立。这种可预测的功能可以提高可用性并减少错误，因为用户并不需要不断学习如何使用它们。

在我们的例子中，图标的样式不一致，有些是填充的，有些不是。这可能会让一些人感到困惑，因为填充的图标通常表示元素已选择。使用 2pt 笔画宽度和圆角勾勒所有图标可以提高一致性，使每个图标具有类似的视觉效果。

除此之外，还添加了文本标签以帮助确保人们可以理解它们的含义，特别是那些使用屏幕阅读器（一种描述界面的软件，使用语音或盲文，向无法看到界面的人描述它）。

3. 确保外观相似的元素具有相似的功能

如果元素看起来相似，人们会期望它们以相似的方式工作。因此，请尽量确保具有相同功能的元素使用一致的视觉处理。相反，尽量确保具有不同功能的元素看起来不同。

在我们的例子中，图标容器具有类似于 “立即预订” 按钮的视觉样式。这使它们看起来是可交互的，尽管它们实际上并不是。从图标中移除蓝色的颜色和按钮样式有助于避免它们被误认为是可交互的元素。

4. 创建清晰的视觉层次结构

在界面中，不是所有信息的重要性都一样。要根据重要程度来呈现信息，让更重要的元素看起来更突出。

清晰的视觉层次，有助于人们快速扫描信息并聚焦感兴趣的区域。它还通过创建一种秩序感来提高美感。您可以使用大小、颜色、对比度、间距、位置和深度的变化来创建清晰的视觉层次。

这是一个没有明确视觉层次的网站横幅的示例，然后是一个清晰呈现元素重要性顺序的示例。

使用 The Squint Test（眯眼测试）来快速而简便地测试你的视觉层次是否清晰。只需眯起眼睛看着你的设计。或者，你可以离屏幕远一些或模糊你的设计。你应该仍然能够看出最重要的元素并识别界面的作用。

让我们把 Squint Test 应用到我们的例子中。我们可以看到有多个同样突出的元素竞争着吸引注意力。与此同时，左下角的主要操作却毫不突出。

主要操作通常应该是界面上最突出的元素。给它一个高对比度的背景颜色和加粗的字体重量有助于实现这一点。这也修复了低对比度按钮的辅助功能问题，我们稍后会详细探讨。

应用 “眯眼测试” 到更新后的设计中，主要操作是最突出的元素。

5. 移除不必要的样式

不必要的信息和视觉样式会分散注意力并增加认知负荷（使用界面所需的大脑功率）。避免使用不必要的线条、颜色、背景和动画来创建更简洁、更集中的界面。

在我们的例子中，图像周围的白色空间和边框增加了不必要的视觉复杂度。它们不需要传达信息或分组元素，因此我们可以安全地将它们删除以简化设计。

6. 有目的地使用颜色

节约使用颜色并且有目的地使用它。尽量避免仅用颜色作为装饰，因为它可能会让人感到困惑和分心。从黑白色开始，仅在颜色能够传达信息的地方使用它。
一个简单而有效的方法是将品牌颜色应用于文本链接和按钮等交互元素。这有助于让人们了解哪些是交互式的，哪些不是。尽量避免在非交互元素上使用品牌颜色。

不需要在所有交互式元素上添加颜色，因为有些已经具有表明它们是交互式的视觉提示。例如，下面示例中的卡片即使没有蓝色链接也仍然感觉具有交互性。

在我们的原始例子中，蓝色的标题看起来可能很漂亮，但它使文本看起来像是交互式的。为了避免混淆，我们从标题中移除了蓝色，因为它不是交互式的。

我们还从其他非交互式元素（如星级评分）中移除了蓝色。这样就更容易看出什么是交互式的，什么不是。

7. 确保界面元素具有 3:1 的对比度

对比度是两种颜色之间视觉亮度差异的度量，以 1:1 到 21:1 的比率表示。例如，黑色文本在黑色背景上具有最低的 1:1 对比度比率，而黑色文本在白色背景上具有最高的 21:1 比率。有许多在线工具可以帮助您测量不同颜色之间的对比度比率。
为了帮助确保视力受损的人清晰地看到界面细节，请努力满足 Web 内容无障碍性指南 (WCAG) 2.1 级 AA 色彩对比度要求。这意味着用户界面元素，如表单字段和按钮，需要具有至少 3:1 的对比度比率。

在我们的示例中，箭头图标的对比度太低。将阴影添加到图标并在图像的顶部三分之一处添加渐变覆盖层可以使图标具有足够的 3:1 对比度，无论它放在什么样的图像上都可以清晰可见。

在原始示例中，主按钮对比度也太低了。我们之前在解决视觉层次结构时已经修复了它，但在这里也值得提一下。

增加箭头和按钮的对比度到 3：1 以上使按钮可访问，同时也有助于修正视觉层次结构。

将箭头和按钮的对比度提高到 3：1 以上，得到以下设计。虽然逐渐逼近理想状态，但仍需解决更多问题。

8. 确保文本具有 4.5:1 的对比度

为了确保视力受损的人能够清晰地阅读文本，需要满足以下 WCAG 2.1 AA 级对比度要求：

• 小文本（18px 及以下）需要至少 4.5:1 的对比度。

• 大文本（大于 18px 且加粗或大于 24px 且正常重量）需要至少 3:1 的对比度。

在我们的示例中，照片计数元素中的小文本对比度不足。我们通过增加灰色容器的不透明度并添加文本阴影来增加对比度比率，使其超过 4.5:1。

位置文本的对比度也太低了。细字重量使其更难阅读。使用较深的灰色调有助于使文本更易于访问。我们将很快对文本进行进一步更新，以改善它的可读性。

9. 不要仅依靠颜色作为指示器

有许多不同类型的色盲，主要影响男性。通常，色盲者很难区分红色和绿色，但有些人根本无法看到任何颜色。

为确保界面对色盲者具有可访问性，不能仅依靠颜色来传达含义或区分视觉元素。您需要使用其他视觉提示来区分界面元素。

在我们的示例中，“评论” 文本上使用蓝色表示它是链接。如果去掉颜色，链接文本看起来与其他文本相同，因此色盲者无法确定它是链接。在没有颜色的情况下，下划线链接文本可以清晰地将其与其他文本区分开来。

10. 使用单一的无衬线字体

字体是一组具有相似风格或美学的相关字体。Helvetica 是一个字体的例子。字体是字体内的变化，例如粗细或大小。例如，Helvetica 粗体和 Helvetica 常规体是 Helvetica 字体内的 2 种不同字体。

对于界面设计，最好使用单一的无衬线字体，因为它们通常是最易读、中立和简单的。

在我们的示例中，标题使用了一种详细的衬线字体，可能有点难以阅读，会分散注意力。它还具有一些个性，可能与此物业出租应用程序中的某些照片不匹配。使用无衬线字体简化它可以帮助提高可用性和美学。

11. 使用具有较高小写字母的字体

寻找具有较高小写字母和更大字母间距的字体，因为它们通常在小尺寸下更易读。字体中小写字母的高度称为 x 高度。

我们的示例使用了 Gill Sans 字体，它的 x 高度相对较低。更改为具有更大 x 高度的字体，例如 Lato，有助于提高可读性。

以下是我们的示例在将字体从 Gill Sans 更改为 Lato 后的外观。

12. 限制使用大写字母

除非你在向人们大声喊叫，否则使用大写字母没有太多合理的理由。它们很吵，也很难读。
阅读时，你看的是一个单词的形状，而不是看每个字母。形状可以帮助你更快地识别单词。大写单词都有相同的矩形形状。这迫使你一个字母一个字母地阅读。

在我们的示例中，位置文本使用了大写字母。将它改为句子大小写，只有第一个单词和专有名词（人名、地名或物品名）使用大写字母，有助于提高可读性。

13. 仅使用常规和粗体字重

仅仅因为字体中有许多字重可用，并不意味着您需要在设计中使用所有字重。使用许多不同的字重会给您的界面添加噪音和杂乱。它还使得使用每个字重时更加困难。

通过仅使用常规和粗体字重，使您的设计系统简单而简洁。

快速使用提示：

• 使用粗体字重强调标题。

• 对于其他较小的文本，请使用常规字重。

• 如果您决定使用非常细或非常粗的字重，请将它们保留用于标题和较大的文本，因为它们在较小的字号下可能难以阅读。

在我们的例子中，位置文本使用了较轻的字重。即使我们已经将对比度提高到了所需的 4.5:1 对比度比例以上，细小的字符仍可能对一些人难以阅读。将字重增加到常规可以改善可读性并简化设计。

14. 避免使用纯黑色文本

对于 UI 设计而言，通常最安全的方式是避免使用纯黑色，因为它与白色形成极高的对比度。这种高对比度可能导致阅读文本时出现眼睛疲劳和疲劳感。

黑色具有 0% 的色彩亮度，而白色具有 100% 的色彩亮度。这种较大的色彩亮度差异会导致我们的眼睛更加努力地工作。因此，最好避免在白色背景上使用纯黑色，而选择使用深灰色。

在我们的例子中，多个元素都使用了纯黑色。将其更改为深灰色有助于提高可读性。此前，在查看视觉层次结构时，我们注意到属性描述文本太显眼了。为确保接口元素按照重要性的顺序呈现，我们为属性描述文本使用较浅的灰色以减弱其突出程度。

15. 左对齐文本

英语是从左到右阅读的，呈 F 字形向下阅读。因此，为了达到最佳的可读性，最好保持文本左对齐。对于长文本内容，最安全的做法是避免使用居中对齐或两端对齐的文本。这对于那些认知障碍患者来说阅读更加困难。

居中对齐适用于标题和短文本，因为可以快速阅读。然而，居中对齐会使长文本内容更难读，因为每行的起始点不断变化。你的眼睛需要更努力地找到每行的起始点。

在我们的例子中，属性描述文本采用了居中对齐。将其左对齐可以提高可读性，同时与上面的左对齐文本保持一致。

16. 正文文本应至少使用 1.5 行高

行高是指两行文本之间的垂直距离。行与行之间的空间有助于防止人们重复阅读同一行的文本。同时，合适的行高看起来更加舒适，也更容易阅读。

为了提高可读性和可访问性，特别是对于长文本内容，请确保行高至少为 1.5（150%）。将行高保持在 1.5 到 2 之间通常效果良好。

在我们的例子中，行高只有 1（100%）。将其增加到 1.6（160%）有助于提高可读性。

我们修好了！

通过一些简单但强大的用户界面设计准则，我们很快就发现并修复了我们的示例设计中的许多问题。

我希望您开始意识到用户界面设计并不需要那么困难。它可能看起来像一门神奇的艺术形式，但其中很大一部分是由我们刚刚学到的逻辑规则或指导方针构成的。使用客观逻辑而不是主观意见，可以更快速、更轻松地设计直观、易于访问和美观的界面。

关于本文
译者：@ikoofe
译文：https://mp.weixin.qq.com/s/3S7CHeiXRgF66HUz7EOGWQ
作者：@Adham Dannaway
原文：https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。