字体、颜色和对齐方式等视觉细节创造了可用的体验和表达品牌特征(如友好或可靠)。

很容易看到一个设计，并注意到它看起来不错。这通常更难确定为什么？看起来不错。在本文中，我们分析了三种用户界面设计，并讨论了视觉设计原则这使得他们很有吸引力。

示例1：排版和间距

我们的第一个例子来自Medium.com本设计采用网格、空白和排版系统，创造舒适而美丽的阅读体验。

与栅格对齐．首先，有一个列网格(上图中的粉色线)。列网格提供对象对齐的垂直锚定线。因为侧边栏内容是左对齐到最左边的网格线，所以设计看起来很清晰，侧边栏内容也很容易扫描。文章文本也按列网格线左对齐。

在您的设计中，设置柱网，并在不同的页面和元素之间保持对齐一致。任何对齐不一致都应该是有目的的-定义清晰的规则来指导您（记住左对齐支持扫描性)．

排版方差。介质在同一个介质中使用不同的类型样式字体（小写、粗体、斜体、下划线）和颜色的细微变化（黑色与灰色）来区分不同类型的内容。虽然过多的变化会破坏一致性并使设计看起来杂乱无章，但中文本的变体是一致且有目的的。例如写的表示它是节标题。这种差异让设计看起来不那么单调，但仍然让人感觉与文本的其余部分紧密相连。根据经验，确定一个排版系统，将你的设计限制在1-2种字体之内;始终使用相同的类型变体(斜体，粗体，小写)为相同的目的(甚至在整个网页或界面区域)。

文本行与行之间的额外空格。的领先的，即段落类型的每行基线之间的距离，比默认间距（通常比字体大小大2倍）稍大。在本例中，前导比字体大小大4–6px，有助于创建一个空灵且开放的文本块。减少标准行距会导致上行和下行之间不舒服的碰撞，以及密集的读取。如果你有几个段落的文本，可以考虑增加默认值+2px，否则会觉得视觉稠密。

紧排和跟踪调整。设计师还考虑了字母之间因其特殊形状而产生的尴尬间距。字距调整和跟踪通常应用于较大的字体，如标题，其中的空格更明显。缺口通常出现在形成一个角度的字母周围，如W、Y、V或t。例如，在标题中日本的运动是什么样子的，字母之间的间距W和h在这个词什么虽然大多数字体族都自动调整字形（它是内置到类型样式中），但是考虑手动调整大标题或标记之间的间距，其中字母之间的空间是明显的。

总的来说，这些设计细节使设计变得美观，同时也实现了网页的首要目的——易于阅读。

例2:层次和颜色

我们的第二个例子是Ritual.com，一家维生素公司。该设计使用层次、颜色和图像来创造有吸引力的视觉体验。

精致的调色板。调色板仅限于两种基本颜色：蓝色和黄色，经典互补色特别选择的蓝色和黄色有助于设计的吸引力-黄色不太亮，蓝色足够暗，在白色背景上读起来。如果黄色和蓝色是CMYK的主要颜色(青色和亮黄色)，这个设计看起来就不会这么复杂(更像90年代早期的网站设计)。在为你的设计选择颜色深浅时，创建一个调色板，并反复切换不同的颜色，看看哪种颜色搭配起来更好。不要使用任何类似于荧光笔的东西。在原色的基础上稍微调整一下颜色会使你的颜色选择更加完美。例如，上面的截图经过了修改(下图)，以展示如果使用了原色，设计将会是什么样子。

我们喜欢用Adobe的颜色调色板的灵感。如果你喜欢另一个网站上的颜色，试着找出原因——是特定的颜色组合，色调，还是饱和度?通过将调色板限制在少数几种颜色中，你可以将注意力集中到设计上，因为需要考虑的元素很少(因此，可以减少干扰)。设计将创造一个更强大的品牌代表。

清晰的视觉层次。视觉的层次结构引导眼睛并标出重要的页面元素。在这个例子中，眼睛首先被吸引到最大的字体元素，大标题。本质的为女性，它为用户提供了一个快速、简洁的页面内容概述。然后，我们的注意力转移到黄色图像和添加到购物车按钮。

注意标题中的混合排版处理：本质的对于女性来说,“哪一个大概是努力强调产品的重要性和为女性定制的事实。

在您自己的设计、混型处理时，一定要:

1. 在一个标题中最多使用两种不同的字体处理。(对于字体处理，我们指的是常规、斜体和粗体的多个权重，每个都有一个斜体变体)。最重要的单词用粗体或下划线，次要的单词用斜体。少即是多——例如，如果“女性”也加了下划线，设计就会显得杂乱无章。它将与“基本”的大胆处理相竞争，并颠覆阅读等级制度。
2. 保持页面样式一致。由于“基本”在本标题中以粗体显示，因此应在“基本”上以粗体显示生活必需品对男人来说“类别登录页。

阅读标题后，我们的注意力转移到产品的大图片和黄色添加到购物车按钮。

使用高质量的图像。意象可以为产品描述增加有价值的信息。直接风格的照片，没有额外的杂乱分散从产品，影响了整体的视觉设计。图像背景与产品背景无缝融合卡片它们的出现使页面看起来很复杂。你设计中的照片应该帮助用户从视觉上理解产品或概念，而不仅仅是为了装饰。为了提升你的设计，让你的图像通过匹配它们的背景颜色与周围空间的背景颜色来融入设计的其余部分。

例3：一致性

我们的第三个例子来自Spotify这种设计有效地利用了视觉处理的一致性，在整个应用程序中创建了一个有凝聚力的倾听体验。

一致的视觉处理。当视觉元素的使用不一致或偶尔出现时，设计看起来就会显得不专业和缺乏润色。在Spotify中，许多视觉元素在应用程序的不同区域中保持一致。首先，在所有应用程序屏幕上，列之间的间距(左右槽)都是相同的大小。此外，在体裁中，顶部网格线(以及屏幕顶部标题的对齐和定位)和排版处理保持一致。当渐变颜色在不同类型中变化时，它会保持一致的色调和饱和度。

其次，每个类别都有一个带有定制艺术品的瓷砖。虽然每个类别都有特定的颜色和图形，但瓦片在布局和层次上是一致的。例如，每个类别的名称(例如，流行、摇滚、教育上搜索屏幕）位于每个瓷砖上的相同位置。瓷砖中的图像（即专辑封面艺术）始终位于右侧，从瓷砖上渗出。这些细节使整体设计具有内聚性和抛光性。

在你的设计中，你应该致力于创造一个视觉系统，并在不同的体验区域中坚持它。例如，让你的网页周围的元素间距相同或相同单位的倍数(例如，如果标题和正文之间的基本间距是5px，可以使用2个基本间距单位来分隔不同的部分，等等)。

创建分组的空间。接近,或者元素周围的间隔有助于建立组。在我们的示例中，内容块之间的最小空间你的顶级流派（流行和摇滚乐)表示他们属于一起，而教育的和真正的犯罪属于受欢迎的播客类别。在设计中创建分组时，在标题与其内容之间使用更少的空间，在分组之间使用更多的空间。

结论

设计不是偶然的。设计中的每一个决定都应该有意图，最好有视觉设计系统的支持。虽然没有一件事可以解释一个设计是否好看，但遵循一些原则会增加它看起来好看的可能性：

• 将排版(和其他图形元素)对齐到网格上。将每个元素锚定到网格系统中的一条线上。
• 建立清晰的层次结构和调色板。确定设计中最重要的是什么，并有意对其应用特定的视觉处理（大小、颜色、位置），以便用户首先看到它。
• 保持一致。定义清晰的视觉规则，并在整个设计中始终如一地应用它们。

正是这些设计原则的应用共同使设计变得漂亮，并有助于提供可用的体验。