做一套让人满意的UI设计确实很难，其中涉及到的布局、间距、排版、颜色等如此多的选择，做设计决策时常常让人不知所措，如果再加上可用性、无障碍性和心理学，难度更是可想而知了。

当然了，大部分视觉和交互设计决策都是依靠一套逻辑规则来指导的，这即不需要艺术天赋，也不是直觉，而是一些简单的规则。掌握一套逻辑规则可以帮助我们更高效地做出设计决策。没有逻辑系统的话，或许只能凭感觉来一遍遍的调整元素，直到它看起来合适为止。

解释这套逻辑规则最好的方式就是展示实践的过程，现在让我们开始吧。

下面的案例是给一个海外短期物业租赁APP做的产品详情页的方案。左侧是原设计，右侧是应用了一些逻辑规则后的结果。

即使没有太多的设计经验，我们也能感觉的到左侧的设计显得凌乱、复杂。这是因为它存在许多影响可用性的设计问题。让我们通过以下逻辑规则或指南，一步一步地解决原设计中的问题：

1. 使用空间分组相关元素

2. 保持一致性

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

4. 创建清晰的视觉层次

5. 删除不必要的样式

6. 有目的地使用颜色

7. 确保界面元素的对比度至少为3:1

8. 确保文本的对比度至少为4.5:1

9. 不要仅依赖颜色作为指示

10. 使用单一无衬线字体

11. 选择小写字母较高的字体

12. 限制大写字母的使用

13. 仅使用常规和粗体字

14. 避免使用纯黑色文本

15. 左对齐文本

16. 正文文本行高至少1.5倍

下面会逐一介绍这些规则，并展示如何改进原始设计的。

       使用空间分组相关元素

将信息分解成较小的相关元素组有助于构建和组织界面，这样人们可以更快、更容易地理解和记住信息。

我们可以使用以下方法来分组相关元素：

• 将相关元素放在同一个框架中

• 将相关元素放置在彼此靠近的位置

• 使相关元素看起来相似

• 将相关元素对齐在一条连续的线上

使用框架来分组界面中的不同元素是最好的视觉处理方式。在我们的例子中，内容之间缺乏空间使得设计看起来杂乱且难以理解。增加间距有助于清晰地分组内容，使其更有条理且更易于理解。

       保持一致性

在用户界面设计中，一致性意味着相似的元素看起来相似并且以相似的方式工作。这不仅应该在你的设计方案里保持一致，还应该与其他成熟的设计案例保持一致。这种可预测的功能性提高了可用性并减少理解偏差，让用户不需要反复学习每个元素的工作方式。

在我们的例子中，图标样式不一致，有些是实心的，有些不是。这会让很多人感到困惑，因为实心图标通常表示一个元素已被选中。通过使用2pt的描边粗细和圆角来勾勒所有图标，可以提高一致性，并使每个图标具有相似的视觉重量。此外，文本标签也需要添加到图标中，以确保人们真的能理解它们的含义，特别是那些使用屏幕阅读器的人（屏幕阅读器是一种通过语音或盲文向看不见界面的人描述界面的软件）。

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

如果元素看起来相似，人们将理解为它们会以相似的方式工作。因此，尽量确保对具有相同功能的元素使用一致的视觉处理。相反，对于功能不同的元素，确保它们看起来不同。

在我们的例子中，图标的视觉风格与“立即预订”按钮相似。这使得它们看起来像是可交互的。去除图标的蓝色和按钮样式，就可以避免将它们误认为是可交互的元素。

       创建清晰的视觉层次

界面中的信息并非都具有相同的重要性。按重要性顺序呈现信息，使更重要的元素看起来更加突出。清晰的视觉层次有助于人们快速浏览信息并关注感兴趣的区域。它还通过创造一种秩序感来提升美观度。我们可以通过尺寸、颜色、对比度、间距、位置和深度的变化来创建清晰的视觉层次。

下面展示的是一个没有视觉层次的例子，以及按照重要性呈现元素后的效果。

一个快速而简单的方法就可以测试呈现的视觉层次是否清晰，即“眯眼测试”。只需眯起眼睛看我们的设计，或者也可以将设计模糊化处理。这些情况下仍然应该能够辨别出最重要的元素，并识别出界面的用途。让我们对原设计应用“眯眼测试”。可以看到，有多个元素以相似的强度争夺了视觉注意力。同时，左下角的主交互按键完全不突出。

主交互区域应该是界面上最突出的元素，我们可以给它一个高对比度的背景颜色和粗体字重。之后，应用“眯眼测试”到更新后的设计中，主交互按键显然是最突出的元素。视觉层次现在更加清晰，但仍有改进的空间。例如，正文的字段相对其重要性仍然过于突出。接下来我们将介绍一些快速的排版指南，有助于调整视觉层次。

       删除不必要的样式

不必要的信息和视觉样式会分散注意力，并增加认知负担。避免不必要的线条、颜色、背景和动画，以创建一个更简单、更专注的界面。

在我们的例子中，围绕图像的空白空间和边框增加了视觉复杂性。它们不需要来传达信息或分组元素，因此我们可以放心地将它们移除，以简化设计。

       有目的地使用颜色

有目的地而节制地使用颜色。避免仅仅为了装饰而使用颜色，因为这会造成视觉混淆并分散注意力。设计时我们可以先从黑白开始，然后在传达含义的地方引入颜色。

一个简单的方法就是将品牌色应用于文本链接和按钮等交互元素。这有助于教导用户哪些是可交互的，哪些不是，并避免在非交互元素上使用品牌颜色。

当然了，也并不是所有的交互元素都需要添加颜色，因为有些元素已经有了视觉提示表明它们是可交互的。例如，在下面的例子中，无论是否有蓝色链接，卡片整体仍然感觉是可交互的。

在我们的例子中，蓝色的标题可能看起来很漂亮，但是它会让文本看起来像是可交互的。为了避免混淆，我们将标题中的蓝色去掉，因为它并不是可交互的元素。同时，我们还会将星级评分等其他非交互元素中的蓝色去掉。这样做可以更清楚地看出哪些是可交互的，哪些不是。

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

对比度是指两种颜色之间的亮度差异度。它以从1:1到21:1的比例表示。例如，黑色背景上的黑色文字具有最低的1:1对比度，而白色背景上的黑色文字具有最高的21:1对比度。为了确保视力受损的人群能够清楚地看到界面细节，对比度至少要达到Web内容可访问性指南（WCAG）2.1 AA级别的颜色对比度要求。这意味着用户界面元素，如表单字段和按钮，需要至少具有3:1的对比度。

在我们的例子中，箭头图标的对比度太低。给图标添加阴影和在图像顶部三分之一添加渐变覆盖层，可以使图标在不同背景下有足够的3:1对比度。

       确保文本的对比度至少为4.5:1

为了确保视力受损的人群能够清晰阅读文本，它需要符合WCAG 2.1 AA级别的对比度要求：

• 小文本（18px及以下）需要至少4.5:1的对比度。

• 大文本（超过18px并且加粗或者超过24px并且常规权重）需要至少3:1的对比度。

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

同时，位置信息文本的对比度也太低了。细体字使其更难阅读。使用较深的灰色调可以帮助提高文本的可读性。我们对文本进行进一步更新。

       不要仅依赖颜色作为指示

有许多不同类型的色盲，比如，有些色盲者很难区分红色和绿色，但有些人根本看不到任何颜色。为确保界面对色盲人士也具有可读性，我们不能仅依赖颜色来传达含义或区分视觉元素。你需要使用额外的视觉提示来区分界面元素。

在我们的例子中，颜色蓝色用于“评价”的文本作为链接存在。如果移除颜色，链接文本看起来与其他文本完全相同，因此色盲者无法识别它是一个链接。在链接文本下划线可以清晰地将其与其他文本区分开来，在没有颜色的情况下也能被识别为链接。

       使用单一无衬线字体

字体是具有相似风格或美学的相关字形的集合。Helvetica是一个字体的例子，它可以有很多个样式，如Helvetica Bold和Helvetica Regular两种不同样式。在界面设计中，最安全的做法是使用单一的无衬线字体，因为它们通常更易读、中性和简单。

在我们的例子中，标题使用了衬线字体，有些人阅读起来会有些困难，并且会分散注意力。此外，字体的风格与这款APP中的某些照片不匹配。使用无衬线字体简化标题可以帮助提高可用性和美观性。

       选择小写字母较高的字体

使用小写字母时，选择字形较高和更大字间距的字体会更易读。字体中小写字母的高度称为x高度。

我们的例子使用了Gill Sans字体，其小写字母的x高度相对较低。如果将字体更改为具有较大x高度的字体，如Lato，有助于提高可读性。

       限制大写字母的使用

除非我们想更大声的告诉用户，否则没有任何理由将文本全部使用大写字母。大写字母看起来很吵且难以阅读。

正常的阅读习惯，会倾向识别单词的整体形状，而不是一个个的字母。起伏的形状会帮助我们更快地识别单词。然而大写字母都有相同的矩形形状，就会迫使用户一个字母一个字母地阅读。

在我们的例子中，位置文本全部使用了大写字母。我们将其改为句首大写，即只有第一个词和专有名词（人名、地名或事物名）首字母大写，有助于提高可读性。

       仅使用常规和粗体字

一个字体中有很多字体样式可用，并不意味着你需要在设计中全部使用。使用过多的不同样式会给界面增加混乱感。同时也难以保持整体的一致性。

通过只使用常规和粗体字，保持设计系统简洁和简明。

使用小技巧：

• 使用粗体字来强调标题。

• 对于其他较小的文本，使用常规字体。

• 如果决定使用非常细或非常粗的样式，确保仅用于标题和较大字号的文本。

在我们的例子中，位置文本使用了细体字。尽管我们已经将对比度提高到所需的4.5:1比例，但细字符仍对某些人有阅读困难，将字形调整到常规可以帮助提高可读性并简化设计。

       避免使用纯黑色文本

在UI设计中，避免使用纯黑色通常是比较安全的做法，因为它与白色之间的对比度非常高。这种高对比度会在阅读文本时导致眼部疲劳。

黑色具有0%的色彩亮度，而白色具有100%的色彩亮度。这种亮度的巨大差异会使我们的眼睛更加紧张。因此，最好避免纯黑色与白色对比，并选择使用深灰色。

在我们的例子中，多个文本元素使用了纯黑色。我们将其改为深灰色有助于提高可读性。在区别视觉层次中，我们注意到物业描述文本过于突出，为了确保界面元素按重要性呈现，我们使用了较浅的灰色来降低物业描述文本的突出性。

       左对齐文本

我们习惯从左到右、从上到下的模式阅读。因此，为了最佳的可读性，最好保持文本左对齐。居中对齐适用于标题和简短文本，因为可以被快速的阅读。对于长段落的正文文本，避免使用居中对齐或两端对齐是比较安全的做法，因为每行的起始点不断变化，用户的眼睛需要更加努力地寻找每行的起始点。

在下面的例子中，文本使用了左对齐，这有助于提高可读性和整体布局的清晰度。

在我们的例子中，物业描述文本是居中对齐的。将文本左对齐可以提高可读性，同时也与上方左对齐的文本保持一致。

       正文文本行高至少1.5倍

行高是指两行文本之间的垂直距离。增加行间距可以防止人们重复阅读同一行文本，也有助于整段文本看起来和感觉上舒适。为了提高可访问性和可读性，特别是对于长段落文本，确保行高至少为1.5（150%）。一般来说，将行高保持在1.5到2之间效果较好。

在我们的例子中，行高只有1（100%），将其增加到1.6（160%）有助于提高可读性。

完成了！

通过一系列简单但有效的UI设计规则，我们快速发现并解决了示例设计中的一大堆问题，这些规则看起来可能有一些限制性，但它们并不是为了禁锢我们的创造力。相反，请将它们视为构建、探索和实验的坚实基础。

显然，UI设计并不一定那么难。它看起来像是一种神奇的艺术形式，但其中很多都是由我们刚刚学习的逻辑规则或指南构成的。使用客观逻辑，而不是主观意见，可以更快更容易地设计出直观、可访问和美观的界面。