请不要让眼睛欺骗了你

我们的眼睛是奇怪的器官，经常告诉我们谎言。但是如果你了解人类视觉的特殊性，你就可以构建更平易近人的设计。类型设计师不仅利用光学技巧来创建可读且均衡的字体，而且对于构建用户 - 计算机交互的界面设计者也很有帮助。

在20世纪20年代，开发了视觉感知的格式塔理论。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。您可能已经听说过接近原则或共同命运规则等事情。本文涉及格式塔理论的一些要点，并强调实践方面而非科学研究。底部有关于该主题的推荐材料列表。

1.测量和光学尺寸

更大的是：400像素的正方形还是400像素的圆形？从几何学上讲，它们的宽度和高度是相等的。但请看下面的图片。我们的眼睛立即发现方形比圆形重要。

这是带指南的版本。

让我们看一下带有正方形和圆形的图片。在视觉重量方面，它们与你相同吗？

至少很难立刻说出来，哪一个胜过另一个。不足为奇，因为我增加了圆的直径。

我重叠了第一个和第二个例子的形状。在左侧，400像素的正方形比400像素的圆形面积更大。这就是为什么我们看到它在视觉上更大。在右边，圆和正方形是平衡的。基本上，它们具有相似的面积，而它们的宽度和高度不同。

我们可以看到与钻石或三角形相同的效果。为了在视觉上与正方形平衡，它们应该更宽更高，以便它们的区域相似。基于区域的方法与最简单的形状完美配合。

如何在界面中使用此功能？例如，当您创建一组图标时，重要的是要使它们均衡，以便没有图标突出太多或看起来太小。如果我们直接将图标刻入方形区域，则更像方形的图标看起来会更大。

我建议通过允许视觉上较小的图标悬挂在图标区域之外并在视觉上较重的图标和图标区域之间留出一些空间来补偿不同形状图标的重量。

现在一些真正的图标在光学上平衡。

现在很清楚为什么图标区域总是比图标主体大 - 只是为了允许非方形图标适合它并且看起来不小于方形图标。

检查视觉平衡的最简单测试是模糊项目。如果您的图标变成或多或少相似的斑点，它们具有相同的光学重量。

但有时我们使用现有的图形，例如，用作共享和喜欢按钮的社交网络徽标。Facebook和Instagram图标是方形的，而Twitter由鸟形轮廓和Pinterest以环绕的“P”代表。这就是Twitter和Pinterest图标有点大的原因，因此它们看起来与Facebook和Instagram图标保持平衡。

光学平衡问题的另一个例子是与圆形按钮放在一起的文本框。如果按钮直径等于文本框高度，则按钮看起来会比我们的眼睛小。当你放大一点点时，整个结构将变得更加平衡。

但是，如果您更改按钮的样式，则不需要放大。在下面的图片中，按钮和文本框高80像素，但由于强烈的黑色填充，右侧的按钮看起来并不“丢失”。

要记住的事情

• 光学重量是人眼如何感知物体的大小和重要性，并且它不一定等于其像素大小或面积。

• 
  

• 圆形，菱形，三角形和其他非方形形状需要更高和更宽，以便与方形形状进行光学平衡。

• 图标区域应该有一些空间用于光学平衡。这对于一组图标来说至关重要，这些图标应该始终如一。

2.不同形状的对齐

光学对准是光学平衡主题的逻辑延续。看看下面的条纹。它们看起来好像长度相同吗？

Pixelwise，答案是坚定的“是”。但是，初看起来，下部条纹看起来比上部条纹短。

两条纹的又一张照片。有什么变化吗？

我对下部条纹应用了光学补偿。允许尖峰超过上条纹长度20像素是补偿尖峰之间的间隙并使两个形状在光学上相等的方式。

现在有一些更复杂的不同形状条纹的例子。

因此，如果您正在制作带有折叠条纹和文字的海报，或者您在网上商店的产品卡上放置了明亮的“折扣”条纹，请注意使它们在光学上平衡。锋利的边缘应该超出其他形状，特别是如果它是一个矩形。

那么对齐纯文本和具有背景的段落呢？这取决于背景的视觉密度。如果它很亮，您可以将突出显示的段落与其余文本对齐。

由于背景很浅，因此不会中断通常的文本流。

密集背景可以使用不同的方法。在图片上，黑色背景与文本的其余部分对齐，而其中的白色文本放置有缩进。

与浅色背景的情况不同，黑色背景具有相当大的光学重量，如果目标是无缝插入一个段落，最好将其与下图所示的方式对齐。

相同的原理适用于按钮和输入字段。当然，这不是教条，只是基于人类视觉感知的推荐。

左侧输入字段的浅色背景可以超出输入标签和用户输入。“发送”按钮的右边缘未与输入背景的右边缘完全对齐，因为按钮较暗并且从视觉角度看起来较重。

在右侧，输入具有实线边框，我将它们与标签对齐，而用户的输入在框内有缩进。“发送”按钮具有三角形边。按钮向右移动一点，看起来与上面的矩形输入字段平衡。

在这里，我们正在接近对齐的另一个方面 - 文本和图标按钮的对齐方式。看看下面的按钮。文字看起来居中，不是吗？

诀窍是，在右键上我将单词向左移动了一点，因为右边是三角形。此外，箭头状按钮的宽度为40像素，看起来在光学上等于矩形按钮。

文本按钮不仅具有水平对齐方式，而且还具有单词和背景的垂直对齐方式。我想讲的第一种方法用于各种操作系统，站点和应用程序的接口。它是基于字体大写字母高度的对齐方式（所谓的高度）。它等于“H”或“I”的高度。

基本上，大写字母上方和下方的空格与按钮的边缘相等。这是有道理的，因为命令名称通常用标题大小写，英文字母有更多的上升部分，上部伸出部分（l，t，d，b，k，h），比下降部分，下部悬挂部分（y，j，g， p）。

另一种方法是使用字体的小写字母（所谓的x高度）的高度来对齐名称和背景。在sans和sans serif界面字体中，它等于字母“x”的高度 - 这并不奇怪。

这种方法也很有意义，因为文本的主要光学权重集中在放置小写字母的区域。

这些方法之间有什么区别吗？是的，有区别。并没有那么大。

以下比较的更多示例。由左列表示的上限高度方法对于“取消”和“确定”肯定更好 - 因此广泛使用的按钮 - 因为“取消”没有下行，“好”是所有大写。右栏中显示的x高度方法仅适用于“同步”按钮，其名称同时具有上部和下部伸出元素; “取消”和“确定”字样似乎过高。

图标按钮的情况与文本按钮略有不同。让我们在圆形按钮背景上放置一个流行的“发送”图标。哪种变体看起来更加平衡？

希望你注意到左边的东西有问题。这是因为不同的对齐方法。如果图标是矩形，则第一个选项处理图标。在某种程度上，这是正确的，因为当您向开发人员发送SVG或PNG文件时，它是一个矩形的纸张，上面有纸平面艺术品。右侧变体显示图标的位置，其所有锐利边缘与圆形按钮背景的距离相等。

如果您为开发人员准备文件，则需要保留一些区域，以便他们可以将图标在背景上以光学方式居中。

与“播放”按钮相同的故事。如果直接对齐这些形状 - 圆角矩形和三角形 - 它们看起来很奇怪。

如果您想要更好地定位三角形，请环绕它并将此圆圈与按钮背景对齐。

要记住的事情

• 具有锋利边缘的形状应该更大或更长，以与相邻的矩形物体看起来平衡。

• 帽高度对齐是在按钮背景上定位按钮名称的有效方法。

• 在按钮上正确定位三角形图标的有效方法之一是环绕它并将圆与背景对齐。

3.光学圆角

什么比圆圈更环形？我曾经认为没什么，但正如我在本文开头所说的那样，我们的眼睛很奇怪，有时会感觉不到我们所期望的东西。那么，下图中的哪个圆圈看起来最圆滑？

我之前询问的人是在3号和4号之间进行选择。数字1和2绝对太瘦，5太丰满了。如果我们重叠第三个和第四个变体 - 一个几何圆和一个修改过的圆 - 我们会发现后者比第一个更重，因此， 我们的眼睛更平滑。

为了表明我的意思，我从三种着名的几何字体中取出了字母“o” - Futura，Circe和Geometria。鉴于高质量字体是基于人类视觉感知而构建的，并且使用了复杂的光学构造系统，我认为它们的圆形形状看起来比几何形状更圆。这些信件难道不适合你的眼睛吗？

让我们用几何圆圈重叠它们。即使是最几何的Futura的“o”也有四个突出的部分。此外，Circe和Geometria的字母比圆形更宽，但即使它们具有相同的高度和宽度，我们也可以看到这四个“肚子”好像它们是饥饿和过度的。

因此，从光学上讲，修改后的圆圈（右侧）看起来比几何圆形（左侧）更“圆形”。

我们怎样才能使用这种现象？当然，对于角落舍入！如果您在流行的图形编辑器中使用嵌入式舍入功能，结果将不是光学上的好。

人眼立即检测到直线突然变成曲线的点。而这种舍入看起来并不自然。

我在考虑到视觉感知的情况下解决了这个问题。

这种圆角在几何圆之外有一个额外的区域，使得线与曲线不相连的点。

试着感受这些舍入方法之间的区别。

现在我们可以将此方法应用于圆角按钮。

你可能已经注意到右边的按钮有更光滑的圆角，让你的眼睛更舒服。

与app图标相同的故事。人们不会简单地使用标准的圆角来获得完美的结果。但在我们深入研究这个主题之前，让我们来看看两个不同的圆形形状。

第一个是圆角矩形，我在Sketch中创建。第二种形状是超椭圆，也称为Lamé曲线。它是由法国数学家加布里埃尔·拉姆（GabrielLamé）发现的，根据公式的不同，可以从四角星到形状看起来像圆角正方形。

Marc Edwards提出了Lamé曲线的公式，使得光滑和光学完美的形状。从iOS 7开始的图标基于它。

后来这个形状通过添加黄金比例和网格来修改，以指导设计师的新图标，但这是一个不同的故事。

使用像超级椭圆这样的形状的主要好处是它们的光滑外观。另一方面，这些非标准形状难以插入真实界面中。应该将多个SVG组合在一起，在代码中包含特殊的公式或脚本，或者使用像Apple那样的PNG掩码作为其应用程序图标。

至于设计过程本身，有一个圆角的简单修复。您需要将可恢复的舍入效果转换为轮廓，进入形状编辑模式并手动移动曲线手柄彼此更近。

锐角倒角的差异更为明显，这对于绘制道路或地铁方案非常重要。

要记住的事情

• 几何圆角看起来很人造，因为你可以很容易地看到直线突然变成曲线的点。

• 光学正确的转角圆角需要特殊的配方或手动调整形状。

奖金

有时，一个不理想的几何方形看起来更加方形。你可能会想，“多么荒谬的废话？”那么，您如何看待下方的广场？哪种形状看起来更方形？

如果你选择了左边的形状，你就能听到你无偏见的视觉感受。

当得知我们的眼睛对物体的高度比对它的宽度更敏感时，我个人感到惊讶。它解释了为什么即使在几何字体中，字母“o”总是比几何圆宽，并且字母“H”的垂直茎总是比水平的更粗。