【光学尺寸】用户界面中的光学效果：插图指南

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

在 1920 年代，格式塔的视觉感知理论出现了。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。您可能已经听说过 “接近原则” 或“共同命运规则”之类的内容。本文引用了格式塔理论的一些要点，重点介绍了实践方面而不是科学研究。底部有关于该主题的推荐材料列表。

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

让我们再看一张带有正方形和圆形的图片。就视觉重量而言，它们等于您吗？

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

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

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

如何在界面中使用此功能？例如，在创建图标集时，重要的是要使它们都具有良好的平衡性，以使图标不会显得太突出或太小。如果我们直接在方形区域内刻入图标，则更多方形图标将看起来更大。

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

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

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

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

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

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

要记住的事情

• 光学重量是人眼如何感知物体的大小和重要性，并且不一定等于其像素大小或面积。
• 圆形，菱形，三角形和其他非正方形形状需要更高和更宽才能与方形形状在光学上保持平衡。
• 图标区域应保留一些空间以进行光学平衡。这对于看起来一致的图标集至关重要。

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

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

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

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

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

可以将不同的方法用于密集的背景。在图片中，黑色背景与其余文本对齐，而其内部的白色文本则带有缩进位置。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果要使三角形的光学位置更好，则将其围绕并使其与按钮背景对齐。

要记住的事情

• 具有尖锐边缘的形状应更大或更长，以与相邻的矩形对象保持平衡。
• 帽高对齐是在按钮背景上定位按钮名称的有效方法。
• 正确将三角形图标放置在按钮上的有效方法之一是将其包围并使其与背景对齐。

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

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

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

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

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

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

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

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

您可能已经注意到，右侧的按钮具有更平滑的圆角倒角，并且您的眼睛更加舒适。

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

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

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

后来通过添加黄金比例比例和用于指导新图标设计者的网格对这种形状进行了修改，但这是另一回事。

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

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

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

要记住的事情

• 几何圆角看起来很虚假，因为您可以轻松地看到直线突然变成曲线的点。
• 光学上正确的圆角需要特殊的公式或手动调整形状。

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

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

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

本文对这一主题的理解有限，所以我鼓励您继续探索它。以下是有关格式塔心理学起源及其初步思想的文章和书籍清单。

• 巴里 · 史密斯（Barry Smith），“ 格式塔理论：哲学论文 ”，1988 年。对格式塔理论的起源和哲学方面的深入研究。
• 史蒂文 · 莱哈尔（Steven Lehar），“ 头脑中的世界：意识意识机制的格式塔观 ”，2002 年。这本书解释说，我们看到的不是现实世界，而是大脑中的反映。
• 詹姆斯 · 吉布森（James J. Gibson），《视觉世界的感知》，1950 年（扫描副本，有些图像质量低下）。这本书展示了大脑中的物理过程如何影响我们看待世界的方式。
• 詹姆斯 · 吉布森（James J. Gibson），“ 视觉感知的生态方法 ”，1979 年。（有关关键思想的文章可在线获得。）
• 乔治 · 鲍里（George Boeree），“ 格式塔心理学”。格式塔思想简史。
• 格式塔心理学创始人的传记：Max Wertheimer，Kurt Koffka和WolfgangKöhler。
  https://medium.muz.li/optical-effects-9fca82b4cd9a