我们的眼睛很奇怪，经常误导我们。但是，如果你了解人类视觉的特殊性，则可以构建更好的设计。字体设计人员不仅利用视觉技巧来创建可读且平衡感很好的字体，而且对于从事人机交互的设计人员也很有帮助。

在1920年代，格式塔的视觉理论出现了。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。你可能已经听说过“亲近原则”或“共势原则”之类的内容。本文引用了格式塔理论的一些要点，重点介绍的是实践方面而不是科学研究。

1.测量和视觉尺寸

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

这是带有辅助线的版本。

让我们再看一张有正方形和圆形的图片。就视觉重量而言，对你来说它们相等吗？

至少很难立即分辨出哪个比另一个更重。不足为奇，因为我增加了圆的直径。

我将第一个和第二个示例中的形状进行了重叠。在左侧，400px的正方形的面积大于400px的圆圈的面积。这就是为什么我们在视觉上看到它更大的原因。在右边，圆和正方形是平衡的。它们的面积相似，而宽度和高度却不同。

我们可以看到菱形或三角形具有相同的效果。为了在视觉上与正方形保持平衡，它们应该更宽和更高，用来使它们的面积相似。基于区域的方法与最简单的形状完美配合。

如何在界面中使用此功能？例如，当你创建一组图标时，重要的是要使它们都保持良好的平衡，以免图标突出太大或看起来太小。如果我们直接在方形区域内设计图标，则更多方形图标将看起来更大。

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

现在，一些真实的图标在视觉上达到了平衡。

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

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

但是有时我们会使用现有的图形，例如用作共享按钮的社交网络图标。Facebook和Instagram图标是正方形的，而Twitter用鸟的轮廓表示，Pinterest用带圆圈的“ P”表示。这就是为什么Twitter和Pinterest图标更大，以便它们与Facebook和Instagram图标保持平衡的原因。

视觉平衡问题的另一个示例是将文本框与圆形按钮放置在一起。如果按钮的直径等于文本框的高度，则在我们看来，该按钮看起来会更小。当您稍微扩大它时，整个结构将变得更好地平衡。

但是，如果你更改按钮的样式，则不需要放大。在下面的图片中，按钮和文本框的高度为80px，但由于黑色填充的原因，右侧的按钮看起来没有“失重”。

要记住的事情

• 1.视觉重量是人眼感知物体尺寸和重要性的方式，不一定等于其像素尺寸或区域。

• 2.圆形、菱形、三角形和其他非正方形形状需要更高和更宽才能与方形形状在光学上保持平衡。

• 3.图标区域应保留一些空间以进行视觉平衡。这对于看起来一致的图标至关重要

2.不同形状的对齐

视觉对齐是视觉平衡主题的逻辑延续。看看下面的条纹。它们看起来长度一样吗？

以像素为单位，答案是肯定的“是”。但是，乍一看，下部条纹看起来比上部条纹短。

两个条纹的另一张照片。有什么改变吗？

我对下部条纹应用了视觉补偿。允许尖角超出上面条纹的长度20px来补偿尖角之间的间隙，并使两个形状在视觉上看起来相等。

现在有一些形状更复杂的条纹示例。

因此，如果你要创建带有折叠条纹和文字的海报，或者在在线商店的产品卡上贴上显眼的“折扣”条纹，请注意使它们在视觉上保持平衡。锋利的边缘应该超出形状的其余部分，特别是在矩形的情况下。

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

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

另一种方法是可以用于深色的背景。在图片中，黑色背景与文本的其余部分对齐，而其中的白色文本被缩进。

与背景较浅的情况不同，黑色背景具有较大的视觉重量，如果目标是无缝插入段落，则最好按照以下所示的方式对齐。

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

左侧输入字段的浅色背景可以超越输入标签和用户输入。“发送”按钮的右边缘没有完全与输入背景的右对齐，因为按钮的颜色更深，从视觉角度看更重。

在右边，输入有实线边框，我用标签对齐它们，而用户输入在框内有缩进。“发送”按钮有一个三角形的边。按钮向右移动了一点，以便与上面的矩形输入框保持平衡。

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

诀窍是，在右侧按钮上，由于右边缘为三角形，因此我将单词向左移动了一点。此外，箭头形按钮的宽度为40px，看起来在视觉上与矩形按钮相等。

文本按钮不仅具有水平对齐，而且还具有单词和背景的垂直对齐。我要介绍的第一种方法用于各种操作系统、网站和应用程序的接口。它是基于一种字体的大写字母的高度(所谓的大写高度)的对齐方式。它等于H或者l的高度

基本上，大写字母上下的空间和按钮的边缘是相等的。这是有道理的，因为命令名称通常包含标题大小写，并且英文字母具有更多的上半部分，上半部分如 l、t、d、b、k、h）比字母下半部分多，下半部分如 y、j、g、p。

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

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

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

下面提供更多示例进行比较。对于“Cancel”和“OK”（被广泛使用的按钮），由左列代表的上限高度方法绝对更好，因为“取消”没有降序，并且“OK”都是大写字母。右栏中显示的x高度方法仅对“Sync”按钮更好，该按钮的名称同时具有上下突出的元素；“Cancel”和“OK”两个词似乎放置得太高了。

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

希望你已经注意到左边的那个有问题。由于不同的对齐方式而发生这种情况。如果图标是矩形，则第一个选项将对其进行处理。在某种程度上，这是正确的，因为当您将SVG或PNG文件发送给开发人员时，它是一个上面有纸平面艺术品的矩形纸。右侧变体显示图标的放置方式，使其所有尖锐边缘与圆形按钮背景的距离相等。

如果为开发人员准备文件，则需要保留一些区域，以便他们可以使图标在背景上正确居中。

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

如果要使三角形的视觉位置更好，则将其拉出正圆辅助线并使其与按钮背景对齐。

要记住的事情

• 1.具有尖锐边缘的形状应更大或更长，以与相邻的矩形对象保持平衡。

• 2.大写字母高度对齐是在按钮背景上定位按钮名称的有效方法。

• 3.正确将三角形图标放置在按钮上的有效方法之一拉出圆形辅助线并使其与背景对齐。

3.视觉圆角

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

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

为了说明我的想法，我从Futura，Circe和Geometria这三种著名的几何字体中选取了字母“ o”。鉴于高质量字体是基于人类的视觉感知而构建的，并且使用了复杂的视觉构造系统，因此我认为它们的圆形看起来比几何形状更圆。

让我们将它们与几何圆重叠。即使是最几何化的Futura的“ o”也有四个突出部分。此外，Circe和Geometria的字母比圆圈宽，但是即使它们的高度和宽度相等，我们也可以看到这四个“主体”，要么小了，要么大了。

因此，从视觉角度而言，修改后的圆（右侧）看起来比几何圆（左侧）更“圆滑”。

我们如何使用这种现象？当然要进行圆角处理！如果你在流行的图形编辑器中使用嵌入式舍入功能，则效果将不佳。

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

考虑到我们的视觉感知，我修复了此问题。

这种舍入具有超出几何圆的额外区域，使得直线与曲线相交的点不明显。

只是尝试感受一下这些舍入方法之间的差异。

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

你可能已经注意到，右侧的按钮具有更平滑的圆角倒角，并且视觉上更加舒适。

与应用程序图标相同的故事。人们不仅使用标准的圆角取整来达到理想的效果。但是，在深入探讨该主题之前，让我们看一下两个不同的圆形。

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

马克·爱德华兹（Marc Edwards）提出了Lamé曲线的公式，该公式产生了平滑且视觉上完美的形状。从iOS 7开始的图标均基于此。

后来这个形状被添加了黄金比例比例和网格来指导新图标的设计者，但那是另一回事。

使用超椭圆形状的主要好处是它们光滑的外观。另一方面，这些非标准形状很难插入到实际的接口中。你可以组合多个svg，在代码中加入特殊的公式或脚本，或者使用PNG遮罩，就像苹果为其应用程序图标所做的那样。

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

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

要记住的事情

• 1.几何圆角看起来很虚假，因为您可以轻松地看到直线突然变成曲线的点。

• 2.视觉上正确的圆角需要特殊的公式或手动调整形状。

福利

有时，不理想的几何正方形看起来更像方形。你可能会想，“这是什么荒谬的废话？” 那么，你如何看待下面的正方形？哪种形状看起来更像方形？

如果您选择了左侧的形状，那么您就可以听到无偏见的视觉声音。

当我得知我们的眼睛对物体的高度比其宽度更敏感时，我很惊讶。它解释了为什么即使在几何字体中，字母“ o”也总是比几何圆宽，而字母“H”的竖线总是比横线粗。

原文地址 https://medium.muz.li/optical-effects-9fca82b4cd9a

作者：Slava Shestopalov

翻译：心语Shirley  排版校对：盖世

Powered by Froala Editor