用户界面设计虽复杂，但可遵循逻辑准则简化。

纵观UI设计经验，发现大部分设计决策依循简单指导方针，而非艺术天赋或直觉。

掌握逻辑UI设计指南，能高效做出明智决策，避免仅凭感觉调整设计。

学习的最佳途径是实践，

故分享以下几个UI设计技巧，助力学习。

是因为它包含许多有问题的设计细节，对可用性构成风险。

也许你已经可以找到一些？

01

使用空间对相关元素进行分组

将信息分解成较小的相关元素组有助于构建和组织界面。这使得人们更快、更容易理解和记忆。

可以使用以下方法对相关元素进行分组:

1. 1. 将相关元素放置在同一容器中。
2. 2. 与空间相关的元素靠近在一起。
3. 3. 使相关元素看起来相似。
4. 4. 在连续线中对齐相关元素。

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

特别是使用空间是一个非常有效和简单的ui设计技巧，以组相关的元素。您还可以组合分组方法以帮助更清晰地显示分组。

在我们的示例中，内容之间缺少空间使设计看起来混乱且难以理解。增加间距有助于清晰地对内容进行分组，使其更有条理，更容易理解。

02

保持一致

Ui设计的一致性意味着相似的元素以相似的方式看起来和工作。无论是在你的产品中，还是与其他成熟的产品相比，这都应该是正确的。这种可预测的功能提高了可用性，减少了错误，因为人们不需要不断学习事物是如何工作的。

在我们的示例中，图标样式不一致，因为有些是填充的，而另一些则不是。这可能会让一些人感到困惑，因为填充的图标通常表示一个元素被选中。用2pt描边权重和圆角勾勒所有图标，提高了一致性，并给每个图标一个相似的视觉权重。

03

确保外观相似的元素功能相似

如果元素看起来相似，人们会期望它们以类似的方式工作。因此，请尝试确保对具有相同功能的元素使用一致的视觉处理。相反，尝试确保具有不同功能的元素看起来不同。

在我们的示例中，图标容器具有与 “立即预订” 按钮类似的视觉样式。这让他们看起来很互动，即使他们不是。从图标中删除蓝色和按钮样式有助于避免将它们误认为交互式元素。

04

创建清晰的视觉层次结构

并非界面中的所有信息都具有相同的重要性级别。

旨在通过使更重要的元素看起来更加突出来按重要性顺序呈现信息。

清晰的重要性顺序或视觉层次结构有助于人们快速扫描信息并专注于感兴趣的领域。

它还通过创造秩序感来改善美学。您可以使用大小、颜色、对比度、间距、位置和深度的变化来创建清晰的视觉层次。

下面是一个没有清晰视觉层次的网站英雄横幅的例子，后面是一个元素按照重要性顺序清晰呈现的例子。

测试您的视觉层次结构是否清晰的快速简便的ui设计技巧是使用斜视测试。

只需眯起眼睛，看看你的设计。

或者，您可以进一步远离屏幕或模糊设计。您仍然应该能够分辨出最重要的元素是什么，并识别界面的用途。

让我们将斜视测试应用于我们的示例。我们可以看到，有多个元素以同样强烈的突出性争夺注意力。与此同时，左下角的主要动作一点也不突出。

主要动作通常应该是界面上最突出的元素。

给它一个高对比度的背景颜色和大胆的字体重量有助于实现这一点。

将斜视测试应用于更新的设计，主要动作显然是最突出的元素。

视觉层次现在更清晰了，但仍有改进的空间。

例如，正文文本块相对于其重要性级别仍然过于突出。我们将学习一些快速排版指南，这将有助于纠正视觉层次结构。

05

删除不必要的样式

不必要的信息和视觉风格可能会分散注意力，并可能增加认知负荷 (使用界面所需的脑力)。

避免不必要的线条，颜色，背景和动画，以创建更简单，更集中的界面。

在我们的示例中，图像周围的空白和边框增加了不必要的视觉复杂性。

不需要它们来传达信息或对元素进行分组，因此我们可以安全地删除它们以简化设计。

06

有目的地使用颜色

谨慎和有目的地使用颜色。尽量避免将颜色纯粹用于装饰，因为它可能会令人困惑和分散注意力。

从黑色和白色开始，并在颜色传达意义的地方引入颜色。

一种简单有效的方法是将品牌颜色应用于文本链接和按钮等交互式元素。

这有助于教人们什么是互动的，什么不是。尽量避免在非互动元素上使用品牌色彩。

您不需要为所有交互式元素添加颜色，因为有些元素已经具有指示它们是交互式的视觉提示。

例如，以下示例中的卡片仍然具有交互性，无论是否带有蓝色链接。

在我们的原始示例中，蓝色标题可能看起来不错，但它使文本看起来具有交互性。

为了避免混淆，我们从标题中删除了蓝色，因为它不是交互式的。

我们还从其他非交互式元素 (如星级) 中删除了蓝色。这使得更容易看到什么是互动的，什么不是。

07

确保界面元素的对比度为3:1

对比度是两种颜色之间感知亮度差异的量度。它表示为从1:1到21:1的比率。

例如，黑色背景上的黑色文本具有最低的1:1对比度，而白色背景上的黑色文本具有最高的21:1对比度。

在我们的示例中，照片上的箭头图标的对比度太低。使用灰色的图标，并添加一个纯白色背景给它足够的3:1的对比度，无论它坐在照片上。这也降低了交互成本，因为图标的点击区域现在更大且清晰可见。

原始示例中的主按钮对比度也太低。我们以前在解决视觉层次结构时修复了它，但在这里也值得一提。

低对比度按钮的风险在于，低视力的人可能不会将其识别为按钮，因为他们看不到按钮的形状。

将按钮对比度提高到3:1以上使得按钮可访问，并且还有助于校正视觉层次。

了解详情按钮设计提示避免常见的错误。

将箭头图标和按钮的对比度增加到3:1以上的比例为我们提供了以下设计。

我们正在一点一点地到达那里，但我们还有更多的问题要解决。

08

我们修好了!

通过一些简单但功能强大的ui设计技巧，我们很快发现并修复了我们的示例ui设计中的一大堆问题。

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

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