这14个设计 UI 设计技巧及应用实例赶紧了解下

！！设计用户界面绝非易事！！

面对布局、间距、排版、色彩方面数不尽的选择，很容易感到无所适从。而当你再叠加上可用性、无障碍访问和人类心理学等考量时，挑战只会倍增。

但这里有个好消息：UI设计不必感觉如此复杂。作为一名拥有超过20年经验的产品设计师，我发现我的大多数视觉和交互设计决策都是由一套清晰的逻辑指南所引导的。不是靠艺术天赋或直觉，而是靠直截了当的指导原则。

当然，创意天赋有其用武之地，但使界面变得直观、包容且视觉愉悦的大部分要素绝对是可以通过学习掌握的。拥有一个结构化的方法，能让你做出明智、一致的设计选择。若没有这种方法，你基本上就是在依靠反复试验来让东西“看起来顺眼”。

而最好的学习方法是什么？通过实践。所以，让我们开始应用一些UI设计技巧吧。

UI设计技巧：修复一个示例界面

以下设计是一个社区博客平台的个人资料页面。第一个例子是原始设计。第二个是快速应用了一些逻辑驱动的UI设计技巧后的结果。

即使你没有太多的UI设计经验，你可能也会感觉原始设计就是有些“不对劲”。这是因为它包含了一堆可能对可用性产生负面影响的设计缺陷。你可能已经发现了其中一些问题。

现在，让我们一步步 walk through 改进原始设计的过程，用这些UI设计技巧逐个解决问题：

界面元素之间的间距量应取决于元素的关联紧密程度。关联更紧密的元素通常应该更靠近，以显示它们的相关性。不相关的元素则应通过放置更多空间来分隔。

以这种方式使用间距是将信息分解成更小组块的最有效方法之一。如果你将每个组块想象成一个矩形，你会开始注意到界面是由许多小矩形嵌套在大矩形中构成的。从最内层的矩形应用小间距开始，并随着你向外移动逐渐增加矩形之间的间距。

为间距创建一套简单的、基于8pt增量（通常称为8点网格法）的预定义选项（如XS: 8pt, S: 16pt, M: 24pt, L: 32pt, XL: 48pt），可以更快地做出决策，避免逐个像素试错的烦恼。

在我们的示例中，无论关联程度如何，矩形之间只使用了超小（8pt）和小（16pt）的预定义间距选项。这导致设计看起来杂乱、挤压，难以理解。根据关联紧密程度增加元素之间的间距，有助于清晰分隔和分组内容。

以下是应用预定义间距选项之前和之后的示例。

对比度是两种颜色之间感知亮度差异的度量，表示为从1:1到21:1的比率。为了帮助确保视力障碍者能够清楚地看到界面细节，请至少满足Web内容无障碍指南（WCAG）2.1 AA级的颜色对比度要求。这意味着用户界面元素（如表单字段和按钮）需要至少具有3:1的对比度。

在我们的示例中，图标和按钮的对比度太低。低对比度按钮的风险在于，视力低下的人可能无法将它们识别为按钮，因为他们看不到按钮的形状。为按钮添加一个具有足够对比度的边框可以使它们变得可访问。同时移除了按钮的浅灰色背景填充，以免人们误认为它们处于禁用或非活动状态。图标的低对比度通过使用更深的灰色来轻松修复。

主按钮的目的是突出界面上最重要的操作，这有助于人们理解下一步该做什么以完成任务。

使用指南：

在我们的示例中，我们假设“关注”(follow)操作是最重要的，并将其设为主按钮。

小目标比大目标更难点击或触摸。

指南：

在我们的示例中，两个按钮的目标尺寸已足够，但有足够的空间使按钮更宽。既然有空间，可以加宽按钮以增加其目标尺寸。

人们不会使用他们看不到的东西。将东西隐藏在交互式菜单后面是保持界面简洁和极简的便捷方法，但这有风险，因为有些人可能会错过那些东西。如果有空间，请尝试确保重要的内容和操作在需要时是可见的。

在我们的示例中，操作被隐藏在交互式菜单内以帮助简化设计。虽然看起来干净利落，但存在一些人可能错过这些操作的风险。由于有空间显示“分享”(share)和“收藏”(bookmark)这两个操作，因此将它们显示出来有助于确保它们不被错过。

让大标题看起来更美观的一个小技巧是减少其字间距（字母之间的空间）。减少多少取决于字体和大小，但通常，文本越大，减少的字间距就越多。这是因为许多字体是设计用于在长篇幅正文中小尺寸阅读的（“文本字体”），它们具有较宽的字间距以增强小尺寸下的可读性。而为大尺寸设计的“展示字体”通常字间距较近，可能不需要减少字间距。

在我们的示例中，减少了人名的字间距以改善美观性。

不要仅仅依靠颜色来传达含义或区分视觉元素，因为视力低下或色盲的用户可能无法看到该指示器。应使用额外的视觉线索来区分界面元素。

在我们的示例中，有两个区域可能令人困惑。让我们使它们更清晰。

标签页： 文章列表上方的3个标签页中，“文章”(articles)是选中的标签，但这仅通过细微的颜色差异来指示，可能不明显。为选中的标签添加下划线有助于使其更清晰。

底部导航： 使用细微的颜色变化来区分选中的图标。为了使它更明显，将选中的图标填充为实心。

使用的对齐方式（左、右、居中）越多，界面可能看起来越复杂和混乱。我们的眼睛被迫更努力地工作，因为它们需要四处移动以尝试跟随每种对齐方式。坚持使用单一对齐方式（或尽可能少）有助于简化界面，使其看起来更整洁。

在我们的示例中，标签页是居中对齐的，而页面上大多数其他元素是左对齐的。对齐方式的混合增加了不必要的复杂性。将标签页左对齐有助于整理界面。

为了帮助确保视力障碍者能够清晰地阅读文本，需要满足以下WCAG 2.1 AA级对比度要求：

在我们的示例中，未选中标签页上的小文本对比度不足。使用更深的灰色可以提供足够的对比度。

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

你可以使用以下方法分组相关元素：

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

在我们的示例中，每个文章周围的容器是不必要的，因为已经在使用多种其他分组方法。移除容器也为内容创造了更多空间。

仅仅因为一个字体内有很多可用的字重，并不意味着你需要在UI设计中使用全部它们。使用过多不同的字重会给界面增加噪音和杂乱感，也更难保持一致地使用每种字重。

通过仅使用常规和粗体（或半粗体，如果粗体太重的话）字重，来保持你的设计系统简洁明了。

快速使用提示：

如果使用非常细或非常粗的字重，请将其保留给标题和较大文本，因为它们在较小尺寸下可能难以阅读。

在我们的示例中，文章详情使用了3种不同的字重。即使“超细”和“细”字重的对比度达到了要求的4.5:1以上，但对某些人来说字符可能仍然难以阅读。将字重增加到“常规”有助于提高可读性并简化设计。对文章标题使用“半粗体”有助于使其突出。

仅使用两种字体粗细即可得到以下设计。我们正在应用 UI 设计技巧，目前进展顺利，但仍有一些问题需要解决。

UI设计中的一致性意味着相似的元素看起来和工作方式相似。这应该在你的产品内部以及与其他成熟产品相比都是如此。这种可预测的功能提高了可用性并减少了错误，因为人们不需要持续学习东西的工作方式。

在我们的示例中，每篇文章的照片是尖角，这与按钮和图标的柔和圆角不匹配。将照片的边角变圆有助于创建更一致的视觉语言。你可能认为像这样的小细节无关紧要，但它们叠加起来会让设计感觉“对味”。

极简并不意味着简单。设计师倾向于偏爱极简界面，因为它们看起来漂亮干净。极简界面具有更少的元素和样式，但未必易于理解和使用。

极简界面通常可能因为缺乏良好可用性所需的关键细节而显得模糊或令人困惑。简化不仅仅是减少。移除或隐藏过多内容会损害可用性。你需要确保没有移除关键信息或细节。

在我们的示例中，底部导航图标看起来干净极简，但是每个人都清楚它们的含义吗？可能并非如此。为图标添加文本标签有助于确保人们（尤其是使用屏幕阅读器的用户）能够理解它们的含义。

当将图标与文本配对时，尝试确保它们具有相似的视觉比重，以获得更平衡和 cohesive ( cohesive cohesive) 的外观。

在我们的示例中，底部导航中的图标和文本对略微不平衡。图标和文本颜色相同，但图标更粗更大，这使它们更显眼。加深文本颜色可以增加其显眼度，从而与图标平衡。将文本对比度增加到至少4.5:1也确保了它对视力低下者的可访问性。

！！我们做到了！！

仅用一些直截了当的UI设计技巧，我们就能够识别并解决示例界面中的一系列问题。当然，如果需要，你可以进一步调整视觉风格以适应特定的品牌个性。但就这个例子而言，我们的重点是打好基础。

我希望你开始明白，UI设计不必让人感到不知所措。虽然它有时看起来像是一门为有天赋的人保留的神秘艺术，但优秀的界面设计很大程度上植根于清晰、逻辑的指南，就像你在这里学到的一样。

依靠客观的指南，而不是主观的意见，使得设计直观、无障碍且视觉精致的界面变得容易（且快速）得多。你越多地练习使用这些UI设计技巧，它们就越自然地成为你设计过程的一部分。将它们作为基础，并从中大胆地去探索、实验和发挥你的创造力吧。