设计用户界面绝非易事。布局、间距、字体和颜色的选择数不胜数，很容易让人不知所措。而当你考虑可用性、可访问性和用户心理等因素时，挑战只会越来越大。
但好消息是，UI 设计其实没那么复杂。从事产品设计师二十多年，我发现我的大部分视觉和交互设计决策都遵循一套清晰的逻辑准则。这些准则并非源于艺术天赋或直觉，而是直截了当的指导原则。
当然，创意天赋固然有用，但很多让界面直观、包容、赏心悦目的元素绝对是可以学习的。拥有结构化的方法能让你做出明智、一致的设计选择。如果没有它，你基本上只能依靠反复试验来让事情“看起来正确”。
最好的学习方法是什么？实践出真知。那就让我们深入探讨一些实用的 UI 设计技巧吧。
修复示例界面的 UI 设计技巧
以下设计是一个社区博客平台的个人资料页面。第一个示例是原始设计。第二个示例是快速应用一些逻辑驱动的 UI 设计技巧的结果。
即使你没有太多的UI设计经验，你大概也能看出最初的设计感觉不太“对劲”。这是因为它包含许多设计缺陷，可能会对可用性产生负面影响。你可能已经发现了其中一些。
现在，让我们逐步了解改进原始设计的过程，并使用这些 UI 设计技巧逐步解决每个问题：
根据元素之间的密切关系来划分空间
界面元素之间的间距大小应取决于元素之间的关联程度。关联程度越高的元素通常应该靠得更近，以显示它们的关联性。不相关的元素之间应留出更多空间来分隔。
以这种方式使用间距是将信息拆分成更小组别的最有效方法之一。如果你将每个组想象成一个矩形，你会注意到界面是由许多小矩形套在更大的矩形中构成的。首先在最内侧的矩形上应用较小的间距，然后随着向外移动，逐渐增加矩形之间的间距。
确定界面元素之间的理想间距可能是一项令人沮丧且耗时的任务。有无数的选项可供选择。与其一次一个像素地反复尝试，不如创建一组简单的预定义间距选项，以便更快地做出决策。
设置简单 T 恤尺寸的间距选项，以 8 点为增量。这也称为使用 8 点网格，因为所有界面元素最终都会与一系列以 8 点为间隔的垂直和水平辅助线对齐。对于更详细的界面，您可以使用 4 点为增量，以便更好地控制。
与排版比例尺类似，间距选项应该随着元素尺寸的增大而相应增大。这可以确保间距与较大的界面元素成比例。
在我们的示例中，无论矩形之间的关联程度如何，它们之间都只使用了预定义的超小间距 (8pt) 和小间距 (16pt)。这会导致设计看起来杂乱、挤压，并且难以理解。根据元素之间的关联程度增加间距有助于清晰地区分和分组内容。
以下是应用预定义间距选项之前和之后的示例。
2.确保界面元素具有 3:1 的对比度
在我们的示例中，图标和按钮的对比度太低。低对比度按钮的风险在于，视力较差的人可能无法识别它们是按钮，因为他们看不清按钮的形状。为按钮添加对比度足够的边框，可以提高可访问性。按钮的浅灰色背景填充也被移除，这样人们就不会误认为它们处于禁用状态或非活动状态。图标的低对比度问题可以通过使用深灰色轻松解决。
使用单个主按钮执行最重要的操作
对于大多数网站或应用项目，您需要设置三个按钮权重来指示操作的重要性：主要、次要和第三级。根据界面的复杂程度，您可能还需要较小或较大的按钮尺寸。
以下按钮样式熟悉易用，且具有清晰的视觉层次，并非仅仅依赖于颜色。它们并非设计按钮样式的唯一方法，但却是一种安全的选择。了解更多
按钮设计技巧，以避免常见错误。
主按钮的目的是突出显示界面上最重要的操作。这有助于人们了解下一步该做什么才能完成他们的任务。
使用主按钮的指南：
如果界面上没有最重要的操作，请对这些操作使用二级或三级按钮。
避免在屏幕上使用多个主要按钮。它们会争夺注意力，并导致用户对下一步操作感到困惑。
在我们的示例中，我们假设“关注”操作是最重要的，并将其作为主要按钮。
确保按钮具有足够的目标尺寸
与大目标相比，小目标更难点击或触摸。对于运动控制能力受损的人，或者单手用拇指握住手机的人来说尤其如此。
尝试并遵循以下准则，以确保按钮（和其他交互元素）具有足够的目标尺寸：
按钮尺寸至少为 48pt x 48pt。这与 8pt 网格对齐，并且略大于 WCAG 建议的 44pt x 44pt。
使常用按钮更大，以提高效率并避免错过它们。
按钮之间至少间隔 8pt，以防止人们误按错误的按钮。
在我们的示例中，两个按钮的目标尺寸已经足够，但仍有足够的空间来加宽按钮。由于还有空间，您可以加宽按钮以增加其目标尺寸。
5.确保重要内容可见
人们不会使用他们看不到的东西。将内容隐藏在交互式菜单后面是保持界面简洁简洁的便捷方法，但这存在风险，因为有些人可能会忽略这些内容。如果空间允许，请尽量确保重要的内容和操作在需要时清晰可见。
在我们的示例中，操作隐藏在交互式菜单中，以帮助简化设计。虽然看起来简洁明了，但存在一些风险，可能会让用户错过这些操作。由于需要留出空间来显示“分享”和“收藏”这两个操作，因此请将它们显示出来，以确保用户不会错过。
减少大文本的字母间距
让大标题看起来更好的一个小技巧是减小字母间距（字母之间的空间）。减小字母间距的程度取决于字体和大小，但通常情况下，文本越大，减小字母间距的幅度就越大。
这是因为许多字体设计用于长篇正文的小字号阅读。它们被称为“正文型”字体，字母间距较大，以便在小字号下更易辨认。对于“显示型”字体，您可能不需要减小字母间距，因为它们设计用于大字号，通常字母间距较小。
在我们的例子中，人名的字母间距减小了，以提高美观度。
不要仅仅依赖颜色作为指标
不要仅仅依靠颜色来传达含义或区分视觉元素，因为视力低下或色盲的人可能无法看到指示符。使用其他视觉提示来区分界面元素。
在我们的示例中，有两个地方可能会令人困惑。让我们来更清楚地解释一下。
如果您查看文章列表上方的 3 个标签页，可能不太容易看出“文章”是被选中的标签页。这是因为标签页的颜色差异非常细微，用于指示选中状态。在选中的标签页上添加下划线有助于使其更加清晰。
同样，在底部导航中，我们采用了微妙的颜色变化来区分所选图标和其他图标。为了更加明显，所选图标被填充了颜色。
尽量避免使用多重对齐
使用的对齐类型越多（左对齐、右对齐或居中对齐），界面看起来就越复杂、越混乱。我们的眼睛在移动时，为了跟上每种对齐方式，不得不更加费力。当界面中的一个小组件或部分使用多种不同的对齐方式时，这一点尤为突出。
坚持单一对齐方式（或尽可能少的对齐方式）有助于简化界面，使其看起来更整洁。
在我们的示例中，标签页居中对齐，而页面上的大多数其他元素则左对齐。这种混合对齐方式增加了不必要的复杂性，导致认知负荷（使用界面所需的脑力）略有增加。将标签页左对齐有助于保持界面整洁。
确保文本对比度为 4.5:1
为了帮助确保有视力障碍的人能够清晰地阅读文本，它需要满足以下 WCAG 2.1 AA 级对比度要求：
小文本（18px 及以下）需要至少 4.5:1 的对比度。
大文本（粗体字重 18px 以上或常规字重 24px 以上）需要至少 3:1 的对比度。
在我们的示例中，未选中选项卡上的小文本对比度不足。使用较深的灰色可以提供足够的对比度。
10.考虑移除容器以简化界面
将信息分解成更小的相关元素组有助于构建和组织界面，让人们更快、更容易地理解和记忆。
您可以使用以下方法对相关元素进行分组：
将相关元素放在同一容器中
空间相关元素紧密相连
使相关元素看起来相似
将相关元素对齐成一条连续的线
使用容器是分组界面元素最有效的视觉提示，但它可能会造成不必要的混乱。寻找机会使用其他分组方法，它们通常更巧妙，有助于简化设计。
在我们的示例中，每篇文章周围的容器是不必要的，因为已经使用了多种其他分组方法。移除容器还可以为内容腾出更多空间。
仅使用常规和粗体字体
虽然某种字体有很多种粗细，但这并不意味着你需要在 UI 设计中全部使用它们。使用过多不同的粗细会给界面带来干扰和混乱，也会使统一使用每种粗细变得更加困难。
仅使用常规和粗体字重，保持
设计系统简洁明了。某些字体提供半粗体选项，如果粗体字重过重，可以使用半粗体代替。
快速使用提示：
使用粗体字体来强调标题。
对于其他较小的文本，请使用常规字体粗细。
如果您决定使用非常细或粗的字体，请将它们保留用于标题和较大的文本，因为它们在较小的尺寸下可能难以阅读。
在我们的示例中，文章详情使用了三种不同的字体粗细。即使“超细”和“细”字体粗细的对比度高于所需的 4.5:1，但某些用户仍然可能难以阅读这些字符。将字体粗细增加到“常规”有助于提高可读性并简化设计。文章标题使用“半粗体”有助于使其脱颖而出。
仅使用两种字体粗细即可得到以下设计。我们正在应用 UI 设计技巧，目前进展顺利，但仍有一些问题需要解决。
12.保持一致
UI设计的一致性意味着相似的元素在外观和工作方式上保持一致。这不仅应该体现在您的产品中，也应该体现在其他成熟产品中。这种可预测的功能可以提高可用性并减少错误，因为用户无需不断学习其工作原理。
在我们的示例中，每篇文章的照片都有尖角，与按钮和图标的柔和圆角不匹配。将照片的角弄圆有助于创建更一致的视觉语言。你可能认为像这样的小细节不会带来太大的变化，但它们加在一起，就能让设计看起来“恰到好处”。
不要混淆极简主义和简单性
极简并不意味着简单。设计师倾向于极简界面，因为它们看起来美观简洁。极简界面元素和样式较少，但理解和使用起来并不一定简单。
极简界面通常会显得模糊或令人困惑，因为它们缺乏良好可用性所需的关键细节。简化不仅仅是减少。删除或隐藏太多内容可能会损害可用性。你需要确保没有删除关键信息或细节。
在我们的示例中，底部导航图标看起来简洁明了，但它们的含义清晰吗？可能并非每个人都清楚。在图标上添加文本标签有助于确保人们能够理解它们的含义，尤其是那些使用屏幕阅读器（一种使用语音或盲文向盲人描述界面的软件）的用户。
平衡图标和文字
当将图标与文本配对时，请尝试确保它们具有相似的视觉突出性，以获得更加平衡和有凝聚力的外观。
在我们的示例中，底部导航栏中的图标和文字略微不平衡。图标和文字颜色相同，但图标更粗更大，使其更加突出。将文字加深可以增强其突出度，使其与图标保持平衡。将文字对比度提高到至少 4.5:1 也能确保视力不佳的用户也能轻松阅读。
我们做到了！
仅凭一些简单的UI设计技巧，我们就能够识别并解决示例界面中的一系列问题。当然，您可以根据需要进一步调整视觉风格，使其更贴合特定的品牌个性。不过，在本例中，我们专注于确保基本原则的正确性。
我希望你开始明白，UI 设计并不需要让人感到不知所措。虽然它有时看起来像是一门只有天赋异禀的人才能掌握的神秘艺术，但许多优秀的界面设计都植根于清晰、合乎逻辑的指导原则，就像你在这里学到的那些一样。
依靠客观指导而非主观意见，设计直观、易用且视觉精美的界面会更加轻松（且快捷）。你越多地运用这些 UI 设计技巧，它们就越能自然而然地融入你的设计流程。以它们为基础，勇于探索、实验，并在此基础上进一步激发你的创造力。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
