16条小UI设计规则，产生巨大影响

幸运的是，用户界面设计不必那么难。作为一名产品设计师，我近20年来，我意识到我的大多数视觉和交互设计决策都受逻辑规则系统的约束。不是艺术天赋或神奇的直觉，只是简单的规则。

拥有一个逻辑规则系统可以帮助您有效地做出明智的设计决策。如果没有逻辑系统，你只是用直觉来移动东西，直到它看起来漂亮。

我喜欢规则和逻辑，但设计决策很少是黑白的。与其认为您必须遵循的严格规则，不如将以下建议视为在大多数情况下行之有效的有用指南。

最快的学习方法是做，所以让我们开始吧。

以下2个设计适用于短期物业租赁应用程序的物业详细信息页面。第一个是原始设计。第二个是应用一些逻辑规则或准则的结果。

让我们使用以下逻辑规则或指南一次解决原始设计的问题：

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

在我们的示例中，图标样式不一致，因为有些是填充的，有些则不是。这可能会让一些人感到困惑，因为填充的图标通常表示选择了一个元素。勾勒出所有具有2pt笔画重量和圆角的图标，提高了一致性，并使每个图标具有类似的视觉重量。

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

清晰的重要性顺序或视觉层次结构有助于人们快速扫描信息并专注于感兴趣的领域。它还通过创造秩序感来改善美学。您可以使用大小、颜色、对比度、间距、位置和深度的变化来创建清晰的视觉层次结构。

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

让我们将斜视测试应用于我们的例子。我们可以看到，有多个具有类似强烈突出地位的元素在争夺注意力。与此同时，左下角的主要行动一点也不突出。

不必要的信息和视觉风格可能会分散注意力，并可能增加认知负荷（使用界面所需的脑力量）。避免不必要的线条、颜色、背景和动画，以创建更简单、更集中的界面。

一种简单有效的方法是将品牌颜色应用于文本链接和按钮等交互元素。这有助于教人们什么是互动的，什么不是互动的。尽量避免在非互动元素上使用品牌颜色。

您不需要为所有交互式元素添加颜色，因为有些元素已经有视觉提示，表明它们是交互式的。例如，以下示例中的卡片仍然具有交互性，无论是否有蓝色链接。

在我们的示例中，箭头图标的对比度太低。在图标上添加阴影，并在图像的顶部三分之一上添加渐变叠加，使图标具有足够的3:1对比度，无论它位于哪个图像上。

将箭头和按钮的对比度提高到3:1以上的比例，这给了我们以下设计。我们正在一点一点地到达那里，但我们仍然有更多的问题需要解决。

在我们的示例中，照片计数元素中的小文本对比度不足。我们通过增加灰色容器的不透明度并添加文本阴影，将对比度提高到4.5:1以上。

为了确保色盲者可以访问界面，您不能仅依靠颜色来传达意义或区分视觉元素。您需要使用额外的视觉提示来区分界面元素。

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

黑色有0%的颜色亮度，白色有100%的颜色亮度。颜色亮度的巨大差异导致我们的眼睛更努力地工作。避免纯黑色和白色，而是选择深灰色，这是最安全的。

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

中心对齐可以适用于标题和短文本，因为它可以快速阅读。然而，中心对齐使较长的正文更难阅读，因为每行的起点不断变化。你的眼睛需要更努力地工作，才能找到每条线的起点。

为了可访问性和可读性，特别是对于长正文，请确保行高至少为1.5（150%）。将线高度保持在1.5和2之间通常效果很好。

5PLUS职业设计学院于2015年创于北京，三位联合创始人设计行业经历总计超过40年。坚守以“倾囊式教学”为中心的教学理念，知无不言言无不尽。希望借助自身行业背景及经验，打造国内最优秀的职业设计师培训学院，为设计师提供职业化进阶指导，提高设计师行业价值，为中国设计行业尽一份微薄之力。