我们的眼睛很奇怪，经常误导我们。但是如果你知道人类视觉的特殊性，你就可以构建出更好的设计。不仅字体设计师可以利用光学技巧来创建可读和均衡的字体，这对于界面设计师也很有帮助。

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

01 测量的，和视觉的尺寸

更大的是400px 的正方形还是400px 的圆形？

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

这是带参考线的版本：

让我们看一下另一张图片，在视觉重量上面，你觉得它们相同吗？

很难看出谁大谁小吧，这是因为我增加了圆形的直径：

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

我们可以看到菱形或三角形也是一样的道理：为了在视觉上与正方形平衡，它们应该更宽更高，以便它们的区域相似。基于区域的方法非常适合最简单的形状。

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

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

我们来看一组视觉平衡的图标：

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

检查是否视觉平衡的最简单方法是高斯模糊。如果你的图标变成差不多相似的斑点，那么它们久具有相同的光学重量。

但有时我们会同时用到一些logo，比如用作共享按钮的社交网络的logo。Facebook和Instagram是方形的，而Twitter以鸟形轮廓代表，Pinterest以环绕的“P”代表。我们能够发现：Twitter和Pinterest图标有点大，这是为了让它们看起来与Facebook和Instagram图标平衡。

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

但是，如果我们更改了按钮的样式，就不需要放大了。在下面的图片中，按钮和文本框高80px，但由于强烈的黑色填充，右侧的按钮看起来视觉加重了，这与文本框就视觉平衡了。

要记住的事情

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

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

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

02 不同形状的对齐

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

在像素方面，答案是坚定的“是”。然而，乍一看，下条纹看起来比上条纹短。

再来看看这张图片，有变化吗？

我对下条纹进行了光学补偿。允许尖峰超出上条纹长度20px，这是补偿尖峰之间间隙，并使两个形状在光学上相等的方法。

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

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

那么，如何对齐有背景的纯文本和段落呢？这取决于背景的视觉密度。如果是浅色，可以将突出显示的段落与文本的其余部分对齐。

由于背景是浅的，它不会中断通常的文本流。

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

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

同样的原理也适用于按钮和输入框。当然，这不是教条，只是一个基于人类视觉感知的建议。

左侧输入框的浅色背景可以超出标签和内容。“发送”按钮的右边缘与输入背景的右边缘不完全对齐，因为按钮颜色较深，从视觉角度看更重。
在右边，输入框有实心边框，我将它们与标签对齐，而用户的输入在框中有缩进。“发送”按钮有一个三角形的边，按钮向右移动一点，以便与上面的矩形输入框保持平衡。

接下来，我们将进一步讨论对齐——文本和图标按钮的对齐。看看下面的按钮，文本看起来是居中的对吧？

诀窍是，在右边的按钮上，我把单词向左移动了一点，因为右边是三角形的。此外，箭头状按钮宽40像素，在光学上与矩形按钮相同。

原文还讲了一些英文按钮的对齐建议，鉴于我们中文方块字本身比较规范，译者认为没有必要在本文展开讲，因此这里省略部分内容，感兴趣的同学可以去原文地址看。

接下来我们来看看在圆形里面放置三角形图标的例子，你觉得哪一个更平衡呢？

希望你注意到左边的图标有问题。如果图标是矩形，左边图标的对齐方式在某种程度上是正确的，但三角形的锐边与圆距离相等时，

如果我们在为开发人员切图，我们是需要保留一些区域的，以便他们可以将图标在背景上以光学方式居中。

“播放”按钮也是一样的道理。如果直接将这些形状：一个圆角矩形和一个三角形-对齐，它们看起来会很奇怪。

如果你想要更好地定位三角形，请画个圆并将此圆圈与按钮背景对齐。

要记住的事情

1、带有锐边的形状应该更大或更长，以与相邻的矩形对象保持平衡。
2、帽高对齐是在按钮背景上定位按钮名称的有效方法。
3、正确定位按钮上的三角形图标的有效方法之一是画个圆覆盖它并与背景对齐。

03 光学圆角

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

我以前问过的人在数字3和4之间选择。数字1和2肯定太瘦了，5太胖了。如果我们把第三个和第四个变种——一个几何圆和一个修改过的圆——重叠起来，我们会发现后者比第一个变种重一些，因此对我们的眼睛来说更光滑。

为了表达我的意思，我从三种著名的几何字体中取了字母“O”——Futura、Circe和Geometria。鉴于高质量的字体是建立在人类视觉感知的基础上，并使用复杂的光学结构系统，我认为它们的圆形看起来比几何图形更圆。

让我们用几何圆把它们重叠。即使是最几何的Futura的“O”也有四个突出部分。此外，Circe和Geometria的字母比圆圈还宽，但即使它们的高度和宽度相等，我们也能看到这四个“肚子”，就好像它们饿了，吃得过饱。

所以，从光学角度来说，一个修改过的圆（右边）比一个几何的圆（左边）看起来更“圆”。

我们如何利用这种现象？当然是拐角圆角！如果直接使用设计软件中的圆角功能，结果将不会是光学上的最优。

人的眼睛会立即发现一条直线突然变成曲线的地方。这种圆角看起来不自然。

考虑到我们的视觉感知，我修正了这个问题。

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

试着感受一下这些圆角方法之间的区别。

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

你可能已经注意到右边的按钮有更平滑的圆角，对你的眼睛来说更舒服。
APP图标也是同样的道理，不只是使用标准的圆角来达到完美的结果。但在我们深入讨论这个主题之前，让我们先看看两个不同的圆形。

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

关于超椭圆的绘制方式可以参考超级叶写的这篇文章：干货 | 如何快速在PS/AI/Sketch中绘制超椭圆

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

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

使用像超椭圆这样的形状的主要好处是它们的平滑外观。但在另一方面，这些非标准形状很难插入到实际界面中。应该将多个SVG组合在一起，在代码中包含特殊的公式或脚本，或者像苹果公司的应用程序图标那样使用PNG蒙版。
至于设计过程本身，有一个简单的圆角修复方法。我们需要将可恢复的圆角效果转换为轮廓，进入形状编辑模式，并手动将曲线控制柄彼此靠近，这样调整后就没有直接调圆角那样生硬了。

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

要记住的事情

1、几何上的圆角看起来像人造的，因为你可以很容易地看到直线突然变成曲线的点。
2、光学上正确的圆角需要特殊的公式或手动调整形状。

一个小彩蛋

请看下面这张图，你觉得哪个更方一点呢？左边还是右边？

留言告诉我吧！

原理：

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

参考资料

1、Barry Smith, “Gestalt Theory: an Essay in Philosophy,”《格式塔理论：哲学论文》，1988年。对格式塔理论起源和哲学方面的深入研究。 

2、Steven Lehar, “The World in Your Head: A Gestalt View of the Mechanism of Conscious Experience,”《你头脑中的世界：意识体验机制的格式塔观点》，2002年。这本书解释说，我们看到的不是现实世界，而是它在大脑中的反映。 

3、James J. Gibson, “The Perception of the Visual World,”《视觉世界的感知”》1950年（一份扫描件，一些图像质量很差）。这本书展示了我们大脑中的物理过程如何影响我们看待世界的方式。 

4、James J. Gibson, “The Ecological Approach to Visual Perception”,《视觉感知的生态方法》，1979年。 

5、George Boeree, “Gestalt Psychology.”《格式塔心理学》格式塔思想的简史。 

6、格式塔心理学的创始人: Max Wertheimer, Kurt Koffka, and Wolfgang Köhler.