视觉细节像字体，颜色和对齐等创建可用的体验和表达品牌特征(如友好或可靠)。

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

例1:字体和间距

我们的第一个例子是Medium.com．这个设计利用网格、留白和排版系统来创造舒适而美丽的阅读体验。

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

在您的设计中，设置列网格并保持对齐在不同的页面和元素上一致。任何对齐不一致都应该是有目的的 - 定义明确的规则来指导您（并记住左对齐支持扫描性）.

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

文本行与行之间的额外空格。的领先的，即段落类型的每一行基线之间的距离，在默认间距(通常比字体大小大2px)的基础上略有增加。在这种情况下，前导字体比字体大小大4-6px，帮助创建一个通风和开放的文本块。减少标准的行间距会导致上升和下降器之间不舒服的碰撞，以及密集的读数。如果你有几段文字，可以考虑增加默认的+2px前导，否则可能会让你在视觉上感到密集和沉重。

动距和跟踪调整。设计师还考虑了字母之间因其特殊形状而产生的尴尬间距。字距调整和跟踪通常应用于较大的字体，如标题，其中的空格更明显。缺口通常出现在形成一个角度的字母周围，如W、Y、V或t。例如，在标题中锻炼在日本是什么样子，字母之间的间距W和h在这个词什么已被轻微压缩。虽然大多数字体会自动调整字距(它内置在字体样式中)，但可以考虑手动调整较大的标题或标志的字距，因为这些字体之间的间距很明显。

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

例2:层次和颜色

我们的第二个例子是Ritual.com这是一家维生素公司。这个设计使用层次、颜色和意象来创造吸引人的视觉体验。

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

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

清晰的视觉层次。视觉的层次结构引导眼睛并标出重要的页面元素。在这个例子中，眼睛首先被吸引到最大的字体元素，大标题。至关重要的为女性，可以让用户快速、简洁地浏览页面内容。我们的注意力就会转移到黄色图片上添加到购物车按钮。

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

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

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

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

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

示例3：一致性

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

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

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

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

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

结论

设计看起来并不是偶然的。设计中的每个决定都应该有意图，最好有一个视觉设计系统作为后盾。虽然没有单一的东西可以解释一个设计看起来好或不好，但遵循一些原则会增加它看起来好的可能性:

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

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