16条效果显著的UI设计小规则

用户交互界面（User interface，以下简称UI）设计并不简单。在布局、间距、排版和颜色等方面有非常多的选项，让人难以做出设计决策。如果您还要兼顾可用性、可访问性和心理学，那就难上加难了。

幸运的是，UI设计也没有想象中那么难。在将近20年的产品设计师生涯中，我发现大部分的视觉和交互设计决策都是受逻辑规则系统管理的。并非依靠艺术天赋或神奇的直觉，而只是一些简单的规则。

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

我喜欢规则和逻辑，但设计决策没有明确的对错之分。以下的建议不是必须严格遵守的规则，而是在大多数情况下都行之有效的指南。

最快的学习方式就是实践，让我们马上开始吧。

让我们用逻辑规则来修正一个例子

以下两款设计是 短期房子租赁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. 确保外观相似的元素功能相似

如果元素看起来相似，人们就会希望他们有相似的功能。因此，要尽量确保对功能相同的元素进行一致的视觉处理。反之，尽量确保功能不同的元素看起来也不同。

在我们的示例中，图标容器的视觉风格与“Book now”（立即预订）按钮相似。这让它们看起来像是可交互的，尽管它们并不是。去掉图标上的蓝色和按钮样式有助于避免它们被误认为是可交互的元素。

4. 创建清晰的视觉层次

界面中并非所有信息的重要性都相同。所以应该按照重要程度来排列信息，让更重要的元素看起来更突出。

明确的重要性顺序或视觉层次有助于人们快速扫描信息，并将注意力集中在感兴趣的区域。它还能通过营造秩序感来提升美感。您可以利用大小、颜色、对比度、间距、位置和深度的变化来创建清晰的视觉层次。

下面是一个没有明确的视觉层次的网站横幅的例子，随后是按重要性顺序调整后的设计，后者的视觉层次明显更清晰。

使用“眯眼测试”（The Squint Test）是测试视觉层次是否清晰的一个简单快捷的方法，只需眯起眼睛观察您的设计。或者您可以离屏幕更远一些，或者使您的设计变模糊。完成以上的动作后，您应当仍然能够分辨出哪些是最重要的元素，并识别出界面的用途。

让我们将“眯眼测试”应用到我们的例子中。我们可以看到，有多个同样突出的元素在争夺注意力。与此同时，左下角的主要操作一点也不突出。

主操作一般是界面上最突出的元素。使用高对比度的背景颜色和粗体字有助于实现这一目标。这同时也解决了低对比度按钮的可访问性问题，我们将稍后讨论这个问题。

对更新后的设计进行“眯眼测试”，主要操作显然是最突出的元素。

视觉层次现在变得更加清晰了，但仍有改进的空间。例如，相对于正文的重要性而言，正文块仍然过于突出。我们马上就会学到一些快速排版指南，这将有助于纠正视觉层次。

5. 删除不必要的样式

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

在我们的例子中，图片周围留白和边框增加了不必要的视觉复杂度。它们没有用来传达信息或对元素进行分组，所以我们能安全地删除它们，以简化设计。

6. 有目的地使用颜色

有目的、有节制地使用颜色。尽量避免单纯为了装饰而使用颜色，因为它们会造成混乱和分散注意力。一开始请使用黑白颜色，在有意义的地方才引入颜色。

一个简单有效的办法是在可交互的元素（例如文字链接和按钮）上使用品牌颜色。这有助于告诉人们哪些是可交互的、哪些不是。尽量避免在不可交互的元素上使用品牌颜色。

您不需要给所有可交互的元素添加颜色，因为有些元素已经有视觉提示表明它们是可交互的。例如，无论有没有蓝色的颜色链接，以下示例中的卡片都让人感觉是可交互的。

在我们最初的例子中，蓝色的标题可能看起来不错，但它让文本看起来像是可交互的。为了避免混淆，我们去掉了标题上的蓝色，因为它是不能交互的。

我们还去掉了其他不可交互的元素（例如星级）上的蓝色。这就更容易分辨哪些是可交互的、哪些不是。

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

对比度是衡量两种颜色之间感知亮度差异的指标。它以 1:1 ～ 21:1 的比率表示。例如，黑色背景上的黑色文字具有最低的 1:1 对比度，而白色背景上的黑色文字具有最高的 21:1 对比度。有很多在线工具可以帮助您测量不同颜色之间的对比度。

为了帮助确保视力障碍者能清楚地看到界面细节，至少要达到《网页内容可访问性指南》（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. 不要只依赖颜色作为指示器

色盲有多种不同类型，主要影响男性。一般来说，色盲患者很难区分红色和绿色，但有些患者完全看不到任何颜色。

要确保色盲患者也能使用界面，就不能仅仅依靠颜色来表达含义或区分视觉元素。您需要使用额外的视觉线索来区分元素。

在我们的示例中，“reviews”（评论）文本使用了蓝色来表明这是一个链接。如果去掉颜色，链接文本看起来就和其他文本一样，色盲患者就不能辨认出这是一个链接。给链接文本添加下划线可以清楚地将它与其余没有颜色的文本区分开来。

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

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

使用单一的无衬线字体进行UI设计是最安全的，因为它们通常是最易读、中性和简单的。

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

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

去找小写字母较高、字母间距较大的字体，因为它们在小尺寸下通常更清晰易读。字体中小写字母的高度称为 x-height。

我们的示例使用的是 Gill Sans 字体，它的 x-height 相对较低。将字体改为 x-height 较高的字体（如 Lato）有助于提高可读性。

下面是字体从 Gill Sans 升级到 Lato 后的示例。

12. 限制大写字母的使用

除非您是在对别人大喊大叫，否则使用大写字母的正当理由并不多。IT’S LOUD AND DIFFICULT TO READ.（声音大、难以阅读。）

在阅读的过程中，您会看整个单词的形状，而不是每个字母。形状可以帮助您更快地辨认单词。而大写字母都具有相同的矩形形状，这迫使您逐个阅读每个字母。

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

13. 只使用正体和粗体字

一个字体集有多种字体粗细程度可供选择，但这并不意味着需要在您的设计中全部都用上。使用很多不同粗细的字体会使界面变得杂乱。这也增加了统一字体粗细的难度。

只使用正体（Regular）和粗体（Bold），使您的设计系统简洁明了。

在我们的示例中，位置文本使用了较细的字体。即使我们增加对比度到所需的 4.5:1 以上，纤细的字母对一些人来说还是难以阅读。将字体的粗细程度增加到普通字体，有助于提高可读性、简化设计。

14. 避免使用纯黑色文本

在UI设计中，通常最安全的做法是避免使用纯黑色，因为它与白色的对比度非常高。这种高对比度在阅读文本时会造成眼睛疲劳。

黑色有 0% 的色彩亮度，而白色有 100% 的色彩亮度。色彩亮度的巨大差距会使我们的眼睛阅读时很辛苦。最安全的做法是避免纯黑色对白色，而选用深灰色。

在我们的示例中，纯黑色被用于多个元素上。把它改成深灰色有助于提高可读性。先前在观察视觉层次的时候，我们注意到房产描述文本过于突出了。为了确保界面元素按重要性顺序展示，我们对属性描述文本使用了浅灰色，以降低其突出程度。

15. 文本左对齐

英文是从左到右、呈“F”型向下阅读的。因此为了最佳的可读性，最好保持文本左对齐。对于长篇正文，最安全的做法是避免文本居中对齐。尤其对于一些有认知障碍的人，它更加地难以阅读。

居中对齐可用于标题和短的文本，便于快速阅读。然而，居中对齐使得较长的正文更难读，因为每行的起点会不断变化。您的眼睛需要更加卖力才能找到每一行的起点。

在我们的示例中，属性描述文本是居中对齐的。改为左对齐文本提高了可读性，也与上文左对齐文本保持一致。

16. 正文至少使用 1.5 行高

行高是（Line height）指两行文字之间的垂直距离。行间距有助于防止人们重读同一行文字。这样阅读起来也更加舒适。

为了便于访问和阅读，尤其是长篇正文，请确保行高至少为 1.5（150%）。一般来说，行高保持在 1.5 到 2 之间效果较好。

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

我们改好了！

通过一些简单却强大的UI设计指南，我们很快就发现并解决了示例设计中的一大堆问题。

我希望您开始理解，UI设计其实并不难。UI设计看似是一种神奇的艺术形式，但其中很多内容都是由逻辑规则构成的，就像我们刚刚学到的那些。通过使用客观的逻辑规则，而不是主观臆断，可以更快、更容易地设计出直观、易用和美观的界面。

想了解更多？

以上只是我的UI设计书中的部分逻辑驱动指南。您还可以在书中找到数百个详细的示例。

顺带一提，如果您觉得本文对您有帮助，请给我点个赞，这对我来说意义重大。还可以在 Twitter 和 LinkedIn 上关注我，以获取每日设计技巧、工具、资源和灵感。

原文

《16 little UI design rules that make a big impact》—— Adham Dannaway