用户界面设计很难。有这么多关于布局、间距、排版和颜色的选项可供选择，做出设计决策可能会让人不知所措。当您将可用性、可访问性和心理学添加到组合中时，它会变得更加困难。

幸运的是，UI 设计不必如此困难。在近 2 年的产品设计师工作中，我意识到我的大部分视觉和交互设计决策都受逻辑规则系统的约束。不是艺术天赋或神奇的直觉，只是简单的规则。

拥有一个逻辑规则系统可以帮助您有效地做出明智的设计决策。没有逻辑系统，您只是根据直觉来移动东西，直到它看起来很漂亮。

我喜欢规则和逻辑，但设计决策很少是非黑即白的。与其必须遵守严格的规则，不如将以下建议视为在大多数情况下都能很好地发挥作用的有用指南。

最快的学习方法是边做边做，所以让我们开始吧。

让我们使用逻辑规则修复这个例子

以下2个设计是针对短租房app的房源详情页。第一个是原始设计。第二个是应用一些逻辑规则或准则的结果。

即使没有太多视觉或交互设计经验，您也可能会注意到原始设计感觉凌乱、复杂且难以使用。这是因为它包含许多有问题的设计细节，对可用性构成风险。也许你已经可以发现一些？

让我们使用以下逻辑规则或准则一次解决原始设计中的问题：

1. 使用空格对相关元素进行分组
2. 始终如一
3. 确保外观相似的元素功能相似
4. 创建清晰的视觉层次
5. 删除不必要的样式
6. 有目的地使用颜色
7. 确保界面元素具有 3:1 的对比度
8. 确保文本具有 4.5:1 的对比度
9. 不要仅仅依靠颜色作为指标
10. 使用单一的无衬线字体
11. 使用带有较高小写字母的字体
12. 限制大写字母的使用
13. 仅使用常规和粗体字重
14. 避免纯黑色文本
15. 左对齐文本
16. 正文至少使用 1.5 倍的行高

1.使用空格对相关元素进行分组

将信息分解成更小的相关元素组有助于构建和组织界面。这使得人们更快更容易地理解和记忆。

您可以使用以下方法对相关元素进行分组：

1. 将相关元素放在同一个容器中
2. 空间相关元素靠在一起
3. 使相关元素看起来相似
4. 将相关元素对齐成一条连续线

使用容器是对界面元素进行分组的最有力的视觉提示，但它会增加不必要的混乱。寻找使用其他分组方法的机会，它们通常更微妙并且可以帮助简化设计。

特别是使用空间是对相关元素进行分组的一种非常有效和简单的方法。您还可以组合分组方法以帮助更清晰地显示分组。

在我们的示例中，内容之间缺乏空间使设计看起来杂乱无章且难以理解。增加间距有助于清楚地对内容进行分组，使其更有条理且更易于理解。

2. 保持一致

UI 设计的一致性意味着相似的元素以相似的方式看起来和工作。在您的产品中以及与其他成熟产品相比时，这应该是正确的。这种可预测的功能提高了可用性并减少了错误，因为人们不需要继续学习事物的工作原理。

在我们的例子中，图标样式是不一致的，因为有些是填充的，有些不是。这可能会让一些人感到困惑，因为填充图标通常表示选择了一个元素。使用 2pt 笔划粗细和圆角勾勒出所有图标的轮廓可以提高一致性并为每个图标提供相似的视觉重量。

文本标签也被添加到图标上，以帮助确保人们能够理解他们的意思，尤其是那些使用屏幕阅读器的人（描述界面的软件，使用语音或盲文，给看不见的人）。

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

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

在我们的示例中，图标容器具有与“立即预订”按钮相似的视觉风格。这使它们看起来具有交互性，即使它们不是。从图标中移除蓝色和按钮样式有助于避免它们被误认为是交互元素。

4.创建清晰的视觉层次

并非界面中的所有信息都具有相同的重要性。旨在通过使更重要的元素看起来更突出来按重要性顺序呈现信息。

清晰的重要性顺序或视觉层次结构可帮助人们快速扫描信息并关注感兴趣的领域。它还通过创造一种秩序感来提高美感。您可以使用大小、颜色、对比度、间距、位置和深度的变化来创建清晰的视觉层次结构。

这是一个网站英雄横幅的示例，没有清晰的视觉层次结构，后面是一个按重要性顺序清楚显示元素的横幅。

测试视觉层次是否清晰的一种快速简便的方法是使用斜视测试。只需眯起眼睛，看看你的设计。或者，您可以远离屏幕或模糊您的设计。您仍然应该能够分辨出最重要的元素是什么，并认识到界面的用途。

让我们将斜视测试应用于我们的示例。我们可以看到，有多个具有相似显着性的元素在争夺注意力。同时，左下角的主要动作一点也不突出。

主要操作通常应该是界面上最突出的元素。给它一个高对比度的背景颜色和粗体字体有助于实现这一点。这也解决了低对比度按钮的可访问性问题，我们稍后会研究这个问题。

将斜视测试应用于更新的设计，主要动作显然是最突出的元素。

视觉层次结构现在更加清晰，但仍有改进的空间。例如，相对于其重要性级别，正文块仍然过于突出。我们将很快学习一些快速排版指南，这将有助于纠正视觉层次结构。

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 对比度要求：

• 小文本（18 像素及以下）需要至少 4.5:1 的对比度。
• 大文本（大于 18 像素且粗体或大于 24 像素且具有常规粗细）需要至少 3:1 的对比度。

在我们的示例中，照片计数元素中的小文本对比度不足。我们通过增加灰色容器的不透明度并添加文本阴影将对比度提高到 4.5:1 以上。

位置文本的对比度也太低。细字体使它更难阅读。使用较深的灰色阴影有助于使文本更易于访问。我们将进一步更新文本以尽快改进它。

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

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

为确保色盲用户可以访问界面，您不能仅依靠颜色来传达含义或区分视觉元素。您需要使用额外的视觉提示来区分界面元素。

在我们的示例中，蓝色用于“评论”文本以指示它是一个链接。如果颜色被移除，链接文本看起来与其他文本一样，所以色盲无法分辨这是一个链接。在没有颜色的情况下，给链接文本加下划线可以清楚地将其与其他文本区分开来。

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

字体是一组具有相似风格或美感的相关字体。Helvetica 是字体的一个例子。字体是字体内的变体，例如粗细或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字体中的两种不同字体。

在界面设计中使用单一的无衬线字体是最安全的，因为它们通常最清晰、中性和简单。

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

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%) 有助于提高可读性。

最终效果

通过一些简单但功能强大的 UI 设计指南，我们很快发现并修复了示例设计中的一大堆问题。

希望您开始意识到 UI 设计不必如此困难。它可能看起来是一种神奇的艺术形式，但其中很多是由我们刚刚学到的逻辑规则或指南组成的。使用客观逻辑而不是主观意见，可以更快、更轻松地设计直观、易于访问且美观的界面。

原文：
https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules