用户界面设计很难。由于布局、间距、排版和颜色方面有如此多的选择，做出设计决策可能令人不知所措。如果再加上可用性、可访问性和心理学，那就更加困难了。

幸运的是，UI 设计没有这么难。在近 20 年的产品设计师工作中，意识到大部分视觉和交互设计决策都受到系统控制逻辑指导方针。不是艺术天赋或神奇直觉，只是简单的指导方针。

当然，艺术天赋会有所帮助，但直观、易用且美观的界面设计中的很多要素都是可以学习的。拥有一套逻辑指导方针系统可以帮助您有效地做出明智的设计决策。如果没有逻辑系统，您只能凭直觉来移动东西，直到看起来很漂亮。

最快的学习方式就是实践，所以让我们从 UI 设计技巧开始吧。

修复示例界面的 UI 设计技巧

以下 2 个设计是针对短期房产租赁应用程序的房产详情页。第一个是原始设计。第二个是应用一些逻辑准则的结果。

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

让我们使用以下 UI 设计技巧逐一修复原始设计中的问题：

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 对比度。有很多工具和Figma 插件可以帮助您测量颜色对比度，我最喜欢的是Web AIM 在线对比度检查工具和Contrast Figma 插件。

为了确保视力受损的人能够清楚地看到界面细节，至少要满足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 bold 和 Helvetica regular 是 Helvetica 字体中的两种不同字体。

在界面设计中使用单一无衬线字体是最安全的，因为它们通常是最清晰、最中性和最简单的。以下是我最喜欢的 10 种用于 UI 设计的免费字体。

在我们的示例中，标题使用了详细的衬线字体，这有点难以阅读并且可能会分散某些人的注意力。它还具有可能与该房产租赁应用程序中的某些照片不符的个性。将其简化为无衬线字体（如正文所使用的字体）可以帮助提高可用性和美观性。

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

寻找小写字母较高且字母间距较大的字体，因为它们在小尺寸时通常更易辨认。字体中小写字母的高度称为 x 高度。

我们的示例使用了 League Spartan 字体，该字体的 x 高度相对较低。将字体更改为 x 高度较大的字体（如 Inter）有助于提高可读性。

以下是字体从 League Spartan 更新为 Inter 之后的示例。

12.限制使用大写字母

除非你正在对别人大喊大叫，否则没有太多理由使用大写字母。大写字母声音大，难以阅读。

阅读时，你会看单词的形状，而不是看每个字母。形状可以帮助你更快地识别单词。大写单词都具有相同的矩形形状。这迫使你逐个阅读每个字母。

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

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

虽然某种字体有很多种粗细，但这并不意味着你需要在 UI 设计中使用所有粗细。使用多种不同的粗细会给界面带来干扰和混乱。这也使得始终如一地使用每种粗细变得更加困难。

仅使用常规和粗体字重，保持设计系统简洁明了。有些字体有半粗体字体选项，如果粗体太重，您可以使用半粗体字体选项代替粗体。

快速使用提示：

• 使用粗体字体来强调标题。
• 对其他较小的文本使用常规字体粗细。
• 如果您决定使用非常细或粗的字体，请将它们保留用于标题和较大的文本，因为它们在较小的尺寸下可能难以阅读。

在我们的示例中，位置文本使用较细的字体粗细。即使我们将对比度提高到所需的 4.5:1 以上，但较细的字符对于某些人来说仍然难以阅读。将字体粗细增加到常规有助于提高可读性并简化设计。

14. 避免纯黑色文字

对于 UI 设计来说，避免使用纯黑色通常是最安全的，因为它与白色的对比度非常高。这种高对比度可能会导致阅读文本时眼睛疲劳。

黑色的亮度为 0%，而白色则为 100%。亮度差异太大，眼睛会更吃力。最安全的做法是避免将纯黑色与白色搭配，而选择深灰色。

在我们的示例中，多个元素使用了纯黑色。将其更改为深灰色有助于提高可读性。之前在查看视觉层次结构时，我们注意到属性描述文本过于突出。为了确保界面元素按重要性顺序呈现，我们对属性描述文本使用了较浅的灰色以降低其突出性。

15. 左对齐文本

英语的阅读顺序为从左到右，呈 F 形向下。因此，最好将文本左对齐，以获得最佳可读性。对于较长的正文，最安全的做法是避免居中对齐或两端对齐。这更难阅读，尤其是对于那些有认知障碍的人来说。

居中对齐适用于标题和短文本，因为这样可以快速阅读。但是，居中对齐会使较长的正文更难阅读，因为每行的起点不断变化。你的眼睛需要更加努力才能找到每行的起点。

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

16. 正文的行高至少为 1.5 倍

行高是两行文本之间的垂直距离。行之间的空间有助于防止人们重复阅读同一行文本。它看起来和读起来也更舒服。

为了便于阅读和访问，尤其是对于较长的正文，请确保行高至少为 1.5（150%）。通常将行高保持在 1.5 到 2 之间效果会更好。

在我们的示例中，行高仅为 1（100%）。将其增加到 1.5（150%）有助于提高可读性。

通过一些简单但有效的 UI 设计技巧，我们很快发现并修复了示例 UI 设计中的一大堆问题。如果需要，我们可以进一步定制装饰性视觉风格以匹配特定的品牌氛围。UI 设计指南看似严格，但它们并不意味着限制您的创造力。相反，将它们视为构建、探索和实验的坚实基础。

希望你开始意识到 UI 设计并不一定那么难。它可能看起来是一种神奇的艺术形式，但很多都是由逻辑指导方针组成的，就像我们刚刚学到的一样。使用客观逻辑，而不是主观意见，可以更快、更轻松地设计出直观、易用且美观的界面。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。