设计用户界面可不是一件容易的事情。就说布局、间距、字体和颜色，每一项的选择都多到让人眼花缭乱，新手设计师无从下手并不奇怪。如果当你还需要考虑产品的可用性、无障碍性以及人类心理学等因素时，那么，挑战将愈发复杂。
不过，有个好消息，我们有方法可以简化 UI 设计过程。作为一名从业 20 多年的产品设计师，我发现大部分视觉和交互设计决策都源于一套清晰的逻辑原则。这些原则并不是源于艺术天赋或直觉，而是真正的指导原则。
当然，创意天赋固然有用，然而，能让界面变得直观、包容且视觉上令人愉悦的核心技能，完全是可以通过学习掌握的。采用结构化的方法，可以帮助我们做出明智且一致的设计选择。如果没有这种方法，我们可能只能依靠反复试错来让设计“看起来正确”。
那么，最好的学习方式是什么呢？那肯定是实践出真知咯！接下来，我们一起探索一些实用的 UI 设计技巧。
即使你没有太多 UI 设计经验，你或许也能感觉到原始设计“有点不太对劲”。这是因为其中存在一些设计缺陷，这些缺陷可能会对可用性产生负面影响。或许你也已经注意到其中的一些问题了。
接下来，让我们一步步拆解优化原始设计的过程，并且使用这些 UI 设计技巧逐一解决每个问题：
根据元素之间的关联程度调整间距
确保界面元素的对比度比值至少 3:1
为最重要的操作使用单一主按钮 确保按钮具有足够的点击目标区域 确保重要内容始终可见 减少大字号文本的字间距 不要仅依赖颜色作为唯一的指示方式 尽量避免使用多种对齐方式 确保文本的对比度比值至少 4.5:1 考虑移除容器以简化界面设计 仅使用常规和加粗两种字体粗细 保持一致性 不要将极简主义误认为是简单化 平衡图标与文本的搭配
这种利用间距的方法是将信息分组为更小单元的最有效方式之一。如果将每个分组看作一个矩形，你会发现界面是由许多小矩形构成的，这些小矩形又嵌套在更大的矩形中。从最内层的矩形开始应用较小的间距，然后随着向外扩展，逐渐增加矩形之间的间距。
确定界面元素之间的理想间距可能是一项令人沮丧且耗时的任务，因为可选方案几乎是无穷无尽的。与其一次一像素地反复试错，不如创建一套简单的预设间距选项，以便加速做出决策。
设定简单的“T恤尺码”间距选项，基于 8 点的增量。这也被称为使用 8 点网格，因为所有界面元素最终都会对齐到一系列垂直和水平的 8 点间隔的参考线。对于更复杂的界面，可以使用 4 点增量以获得更多控制。
就像排版尺度一样，随着间距选项变大，增幅也应更大。这确保了较大界面元素的间距是成比例的。
在我们的示例中，仅使用了超小间距（8点）和小间距（16点）的预设间距选项来分隔矩形，无论它们的关联性如何。这导致设计显得杂乱、拥挤且难以理解。根据元素之间的关联性增加间距有助于清晰地分隔和分组内容。
2. 确保界面元素的对比度比值达到 3:1
对比度是衡量两种颜色之间感知亮度差异的指标，其比值范围从 1:1 到 21:1。例如，黑色文字在黑色背景上的对比度比值最低，仅为 1:1；反之，黑色文字在白色背景上的对比度比值最高，为 21:1。市面上有很多工具或 Figma 插件可以帮助我们测量颜色之间的对比度，我经常使用 Web AIM 在线对比度检查工具和 Contrast Figma 插件。
为了确保视障人士能够清晰地看到界面细节，至少要满足 Web 内容无障碍指南（WCAG）2.1 的 AA 级颜色对比度要求。这意味着用户界面元素（如表单字段和按钮等）至少需要达到 3:1 的对比度比值。
在我们的示例中，图标和按钮的对比度过低。对比度过低的按钮可能导致视力较弱的用户无法识别它们是按钮，因为他们看不清按钮的形状。为按钮添加足够对比度的边框，这样可以使它们更加易用。同时，移除按钮的浅灰色背景填充，避免用户误以为按钮处于禁用或非激活状态。图标的低对比度问题则可以通过使用更深的灰色轻松解决。
3. 为最重要的操作使用单一主按钮
在大多数网站或应用项目中，我们需要设置三种按钮权重来区分操作的重要性：主按钮、次按钮和三级按钮。根据界面的复杂程度，我们可能还需要设计更小或更大的按钮尺寸。
以下是一些常见、易用且具备清晰视觉层级的按钮样式，它们的层级区分不仅仅依赖于颜色。这些并不是设计按钮的唯一方法，但确实是相对安全的选择。想要避免常见错误？可以了解更多按钮设计技巧。
主按钮的目的是在界面上突出显示最重要的操作。这有助于用户理解下一步该怎么做，以完成他们的任务。
使用主按钮的指导原则：
如果界面上没有单一最重要的操作，则使用次按钮或三级按钮来处理这些操作。
避免在一个屏幕上使用多个主按钮，因为它们会争夺注意力，并导致用户对下一步操作产生困惑。
在我们的示例中，假设“关注”操作是最重要的，因此将其设置为主按钮。
4. 确保按钮具有足够的点击目标大小
较小的点击目标比较大的更难点击或触摸。对于运动控制受限的人来说，这种情况尤为明显，甚至对于单手持手机并用拇指操作的人来说也是如此。
可以尝试遵循以下指导原则，确保按钮（以及其他交互元素）具有足够的点击目标大小：
按钮的尺寸至少为 48pt×48pt。这与 8pt 网格对齐，并且略大于 WCAG 推荐标准的 44pt×44pt。 对于经常使用的按钮，可以将尺寸设计得更大，以提高操作效率并避免用户错过这些按钮。 按钮之间至少间隔 8pt，以防止用户误触错误的按钮。
6. 减小大字号文本的字间距
一个让大标题看起来更美观的小技巧就是减小它们的字间距（即字母之间的间距）。具体减小多少字母间距取决于字体和字号，但通常情况下，文本字号越大，减小字间距就越大。
这是因为许多字体是为了在小字号的长段落文本中阅读而设计的。这类字体被称为“正文字体”（text type），其字间距较宽，以便在小字号时提高可读性。而对于“演示字体”（display type），通常不需要减小字间距，因为它们是专为大字号设计的，通常字间距本身就较小。
7. 不要仅依赖颜色作为指示元素
不要只通过颜色来传递意义或区分视觉元素，因为视力低下或色盲用户可能无法识别这些指示元素。可以使用其他视觉提示来区分界面中的元素。
在我们的示例中，有两个区域可能会让用户感到困惑。我们可以让它们更加清晰。
如果你查看文章列表上方的 3 个标签，“文章”是被选中的标签可能并不明显。这是因为目前仅通过微妙的颜色差异来表示标签的选中状态。被选中的标签添加下划线可以让这一状态更加清晰。
8. 尽量避免使用多种对齐方式
使用的对齐方式越多（左对齐、右对齐或居中对齐），界面看起来就会越复杂。我们的眼睛为了适应和追随这些不同的对齐方式，需要频繁移动我们的眼睛，这样会让我们耗费更多精力。当在界面的某个小组件或部分中使用多种对齐方式时，这种问题会更加明显。
坚持使用单一的对齐方式（或尽量减少对齐方式的种类）有助于简化界面，使其看起来更加整洁有序。
在我们的示例中，标签是居中对齐的，而页面上的大多数其他元素是左对齐的。这种对齐方式的混用增加了不必要的复杂性，导致认知负担（用户使用界面时所需的脑力）就会上升。将标签改为左对齐可以让界面更加整洁。
9. 确保文本的对比度比值达到 4.5:1
为了确保视力受限的用户能够清晰地阅读文本，文本需要满足以下 WCAG 2.1 AA 级对比度要求：
小字号文本（18px 及以下）需要至少 4.5:1 的对比度比值。
大字号文本（加粗字体大于18px，或常规字体大于24px）需要至少 3:1 的对比度比值。
在我们的示例中，未选中标签上的小字号文本对比度不足。使用更深的灰色可以提供足够的对比度。
10. 考虑移除容器以简化界面
将信息拆分成较小的相关元素组有助于构建和组织界面。这可以让用户更快、更轻松地理解和记住内容。
我们可以通过以下方法对相关元素进行分组：
将相关元素放置在同一个容器中 将相关元素排列得更紧凑 让相关元素在外观上保持相似 将相关元素对齐在一条连续的线上
使用容器是对界面元素进行分组的最强视觉提示，但是，它也可能会增加不必要的视觉干扰。可以尝试使用其他分组方法，它们通常更为细腻，并能帮助简化设计。
在我们的示例中，每篇文章周围的容器是多余的，因为已经使用了多种其他分组方法。移除这些容器还可以为内容腾出更多空间。
11. 仅使用常规和加粗字体粗细
即使某种字体提供了多种粗细选项，也不意味着你需要在UI设计中使用所有这些选项。使用过多不同的字体粗细会给界面增加噪点，同时也会使得在设计中统一使用某种字体粗细变得更加困难。
通过仅使用常规（regular）和加粗（bold）两种字体粗细，可以让我们的设计系统保持简洁、清晰。如果加粗字体显得过于厚重，一些字体还提供了半粗体（semi-bold）作为替代选项。
快速使用小贴士：
使用加粗字体粗细（bold）为标题加以强调。 使用常规字体粗细（regular）用于其他较小的文本。 如果我们选择使用非常纤细（extra light）或厚重（thin）的字体粗细，把它们留给标题或较大的文本，因为在较小字号下这些字体可能难以阅读。
在我们的示例中，文章详情部分使用了三种不同的字体粗细。尽管“超轻”（extra light）和“纤细”（thin）字体粗细的对比度超过了所需的 4.5:1 对比度比值要求，但这些字体对于某些用户来说可能难以阅读。将字体粗细增加到“常规”（regular）可以改善可读性并简化设计。而为文章标题使用“半粗体”（semi-bold）能够使其更突出。
仅使用两种字体粗细后，设计呈现如下效果。到这里，我们在应用这些 UI 设计建议方面已经取得了不错的进展，不过，仍有一些问题需要解决。
12. 保持一致性
在 UI 设计中，一致性意味着相似的元素在外观和功能上表现一致。这一点不仅适用于我们的产品内部，也适用于与其他成熟产品的对比。这种可预见的功能性能够提升可用性并减少错误，因为用户无需反复学习如何使用。
在我们的示例中，每篇文章的图片采用了尖角设计，这与按钮和图标的圆角设计不匹配。将图片的角改为圆角可以帮助建立更一致的视觉语言。你或许认为这些细微的设计细节影响不大，但是它们叠加起来就会让整个设计显得更加“对味”。
13. 不要将极简主义与简单混为一谈
极简并不等于简单。设计师往往偏爱极简界面，因为它们看起来美观、干净。但极简界面虽然元素和样式更少，但是用户理解和使用并不一定简单。
极简界面常常由于缺乏良好可用性所需的关键细节，而显得模糊或令人困惑。简化并不仅仅是减少元素。移除或隐藏过多内容可能会损害可用性。我们需要确保没有删除关键信息或细节。
在搭配图标与文字时，尽量确保它们在视觉上具有相似的突出性，以实现更加平衡且统一的视觉效果。
我希望更多设计师开始意识到，UI 设计并不一定要让人感到不知所措。虽然它有时看起来像是一门只有天赋异禀的设计师才能掌握的神秘艺术，但是，许多优秀的界面设计都基于清晰、合乎逻辑的指导原则，就像我们在这里总结的那样。
依靠客观的指导原则，而不是主观意见，可以设计出直观、易用且视觉精美的界面，变得更加简单（且快速）。我们多多练习使用这些 UI 设计技巧，它们就越自然地融入我们的设计过程中。将它们作为基础，勇于探索、尝试，并从中激发我们的创造力。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問(wèn)
