我们的眼睛是奇怪的器官，经常向我们撒谎。但如果你知道人类视觉感知的特性，你可以建立更平易近人的清洁设计。不仅型号设计师利用光学技巧来创造可读性和均衡的字体，而且对于建立用户机器通信的界面设计人员也有帮助。

1.测量和光学尺寸

400像素的方形还是400像素的圆形，哪个更大？在几何上，它们的宽度和高度是相等的。但看看下面的图片。我们的眼睛立即发现这个方块超过了这个圆圈。顺便说一下，与体重相关的词更适合描述光学效应。

如果你不相信我这些形状是准确绘制的，这是带有指南和数字的版本。

让我们再看一个正方形和一个圆形的图片。在视觉重量方面，他们是否等于你？

对我来说，绝对是的。至少很难立即判断哪一个胜过另一个。不足为奇，因为我将圆的直径增加了50个像素。

为了说明为什么发生这种情况，我重叠了第一个示例（400像素正方形和圆形）和第二个示例（400像素正方形和450像素圆形）的形状。如下图所示，正方形超过“a”区域的圆圈，而圆圈超过“b”区域的正方形。在左边，广场完全击败了这个圈子，就像从四面抱着它一样。在右边，圆圈和广场是平衡的; 他们中没有一个包含另一个; 他们每个人都有四件散件。基本上，在右侧，形状具有相似的面积，而它们的宽度和高度是不同的。

我们可以见证与钻石或三角形相同的效果。要与广场视觉平衡，它们应该更宽，更高，以便它们的区域相似。基于区域的方法适用于具有足够简单的形状。

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

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

现在一些真实的图标是光学平衡的。

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

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

但有时我们会使用已有的图形，例如用作共享和喜欢按钮的社交网络徽标。Facebook和Instagram的图标是正方形的，而Twitter则由一个鸟类剪影和Pinterest环绕的“P”表示。这就是为什么Twitter和Pinterest图标更大一些，以便它们与Facebook和Instagram图标保持平衡

光学平衡问题的另一个例子是放置一个圆形按钮的文本框。如果按钮直径等于文本框高度，那么按钮对我们的眼睛看起来会更小，但是如果稍微扩大一点，整个构造将更加平衡。

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

需要记住的重点：

1. 光学重量是人眼对物体尺寸和重要性的感知程度，并不一定等于其像素尺寸。

2. 圆形，菱形，三角形和其他非正方形形状需要更大才能与方形形状进行光学平衡。

3. 图标区域应该留有一定的光学平衡空间。这对于一组图标来说非常重要，它应该保持一致。

2.不同形状的对齐

光学对准是光学平衡主题和光学重量现象的逻辑延续。看看下面的条纹。他们看起来好像他们是相同的长度？

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

两个条纹的更多图片。有什么变化吗？

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

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

因此，如果您正在制作一张折叠条纹和文字的海报，或者您正在网上商店的产品卡片上放置一个明亮的“折扣”条纹，则可以使其光学平衡。锋利的边缘应该超出形状的其余部分，特别是如果它是矩形。

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

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

一种不同的方法可以应用于密集的背景。在图片上，黑色背景与文本的其余部分对齐，而其内部的白色文本与缩进部分放在一起。

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

相同的原则将与按钮和输入字段一起工作。当然，这不是教条，只是基于光学界面的视觉。

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

在右侧，输入具有固定的边界，并且我将它们与标签对齐，同时用户的输入在框内具有缩进。“发送”按钮有一个三角形边。将按钮向右移动以与上面的矩形输入区域保持平衡。

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

诀窍是，在右边的按钮我把这个词向左移动一点，因为右边是三角形的。而且，箭头状按钮的宽度为40像素，与光学元件的视觉效果相同。

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

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

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

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

这些方法有什么区别吗？是的，这是有区别的。但是，这并不是那么大。

下面的比较更多的例子。由左列代表的帽高方法肯定比“取消”和“确定”更好 - 广泛使用的按钮 - 因为“取消”没有下行，“确定”都是大写。右栏中显示的x高度方法仅适用于“同步”按钮，其名称具有较高和较低的伸出元素; “取消”和“确定”的词似乎被置于太高。

图标按钮的情况稍有不同。让我们把一个流行的“发送”图标放在一个圆形按钮上。哪个变体看起来更平衡？

希望你已经注意到左边的东西有问题。它是由于不同的对齐方法而发生的。第一个选项将该图标视为矩形。在某种程度上这是正确的，因为当您将SVG或PNG文件发送给开发人员时，它是一张带有纸面艺术的矩形表单。正确的变体显示图标放置的方式，其所有尖锐的边缘与圆形按钮背景的距离相等。

如果您为开发人员准备文件，则需要预留一些区域，以便他们可以将图标置于背景上，并且在视觉上正确。

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

如果您想更好地定位三角形，请将其包围，并将此圆形与按钮背景对齐。

需要记住的重点：

1. 具有锐利边缘的形状应该更大，以与邻近的矩形物体保持平衡。

2. 帽高对齐是在按钮背景上定位按钮名称的有效和广泛使用的方法。

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

3.光学角落圆角

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

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

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

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

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

我们如何使用这种现象？当然是为了四舍五入！如果您在流行的图形编（Photoshop，Illustrator或Sketch）中使用嵌入式舍入功能，结果将不够好。

人眼立即检测到一条直线突然变成曲线的点。这个四舍五入看起来不自然。

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

这种舍入除了几何圆之外还有一个额外的区域，使得一条直线符合曲线的点不易察觉。

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

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

我想你可能已经注意到右边的按钮有更圆滑的圆角，它对你的眼睛更加令人愉快。

与应用程序图标相同的故事。一个人不会简单地使用标准的圆角来达到完美的效果。但在我们深入探讨这个话题之前，让我们来看看两种不同的圆形。

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

马克爱德华兹提出了拉米曲线的公式，导致光滑和光学完美的形状。从iOS 7开始的图标是基于它的。

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

使用超椭圆形状的主要好处是它们的外观更加圆润和光滑。另一方面，这些非标准形状很难插入到真实的界面中。一个应该组合多个SVG，在代码中包含特殊的公式或脚本，或者使用像苹果公司那样的PNG屏蔽来实现其应用程序图标。

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

这种差异更加生动锐利的圆角，这对绘制光学正确的道路或地铁方案非常重要。

需要记住的重点：

1. 因为您可以很容易地看到直线突然变成曲线的点，因此几何圆角看起来很模糊。

2.  光学正确的角落圆化需要特殊的公式或对形状进行一些手动调整。

彩蛋

有时候一个不理想的几何方形看起来更像方形。你可能会想：“多么荒谬的胡言乱语？”那么，你如何看待下面的广场呢？哪个形状看起来更像方形？

如果你选择了左侧的形状，你已经设法听到你的无偏光学感知的声音。

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

作者：Slava Shestopalov              链接：https://medium.muz.li/optical-effects-9fca82b4cd9a