哈喽，大家好。北京5PLUS UI设计学校为了帮助更多的小伙伴提高设计ui水平和设计意识，会整理一些比较细致且有实际案例的设计知识分享给大家。5PLUS是一所专业ui设计学校、ui设计 培训机构，有很多出色的ui设计师学习在这里学有所成。如果觉得好，就分享给更多人吧。

我们的眼睛会经常误导我们。但是如果你知道人类视觉的特殊性，你就可以做出更好的设计。字体设计师不仅使用视觉技巧来创建可读的、平衡良好的字体，而且对交互设计人员也很有帮助。

在20世纪20年代，格式塔视觉知觉理论发展起来。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。您可能已经听说过接近原则或共同命运规则之类的东西。本文引用格式塔理论的一些观点，强调实际方面而不是科学研究。

1.视觉大小与实际大小

下面的两个图形那个更大？是400像素的正方形还是400像素的圆形？从几何学上讲，它们的宽度和高度是相等的。但请看下面的图片。我们的眼睛会发现方形比圆形更大一些。

这是带有参考线的版本

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

至少很难立刻说出来哪一个比另一个更大。这并不奇怪，因为我增加了圆的直径。

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

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

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

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

现在这些图标在视觉上是平衡。

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

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

但有时我们使用现有的图形，例如，用作共享按钮的社交网站图标。Facebook和Instagram图标是方形的，而Twitter是一个鸟形轮廓，Pinterest以环绕的“P”代表。这就是为什么Twitter和Pinterest图标有点大，以便它们看起来与Facebook和Instagram图标平衡。

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

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

要注意的事

• 视觉重量是人眼感知物体大小和意义的方式，它并不一定等于物体的像素大小或面积。
• 圆形，菱形，三角形和其他非方形形状需要更高和更宽，以便与方形形状进行视觉平衡。
• 图标区域应该有一些空间用于视觉平衡。这对于图标集非常重要，它们应该看起来一致。

原文链接：https://medium.muz.li/optical-effects-9fca82b4cd9a

作者：SlavaShestopalov