我们的眼睛是奇怪的器官，经常向我们撒谎。眼睛通过光的反射接收信息，然后经过一次脑补最终形成我们所谓看见的图像。脑补这个过程会因为各种原因的影响导致我们对于看见的事物的理解产生偏差。因此当你知道人类视觉感受的特性时，你就可以通过人类视觉惯性做出“正确”的设计。
1.视觉尺寸和物理尺寸
哪个更大：400像素的正方形 or 400像素的圆圈？在几何上，它们的宽度和高度是相等的。但看看下面的图片。我们的眼睛立即发现这个方块比这个圆圈大。因此，物体的物理尺寸是一样的，但视觉尺寸却有可能不一样的。
图1-1
图1-2
圆的直径增加了 50px：让我们再看一个正方形和一个圆形的图片。改变圆形尺寸，调整尺寸的后的两个图形看起来才是一样大的。至少也不会像图一一样，让人第一眼就认为正方形比较大。
图2-1
图2-2
为什么发生这种情况？我重叠了第一个示例（400像素正方形和圆形）和第二个示例（400像素正方形和450像素圆形）的形状。如下图所示，正方形超过“a”区域的圆圈，而圆圈超过“b”区域的正方形。左：正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。右：正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近，也就是视觉上的“一样大”。
菱形或三角形也是相同的效果，所有的图形都能够造成这样的偏差。要与视觉尺寸平衡，它们应该更宽，更高，以便它们的区域相似。比较区域的方法适用于具有足够简单的形状。
这个现象对于界面设计会造成哪一些问题呢？例如，当绘制一套 icon 的时候，重要的是要使它们全部保持均衡，以便没有图标突出显示或显得太小。如果我们直接将图标写入方形区域，则更像方形的图标看起来会更大。
我建议通过允许视觉上较小的图标悬挂在图标区域之外并在视觉上较重的图标与图标区域之间留出一些空间来补偿不同形状图标的重量。也就是：视觉重量小的元素要放大，视觉重量大的元素要缩小。
举个例子：这些真实的icon是视觉尺寸平衡的。
模糊测试
检查视觉平衡的最简单的方法是模糊测试。如果您的图标变成相似大小的斑点，则它们大致具有相同的视觉尺寸。
但有时我们会使用已有的图形，例如社交网络标志。Facebook和Instagram的图标是正方形的，而Twitter则由一个鸟类剪影和Pinterest环绕的“P”表示。这就是为什么Twitter和Pinterest图标更大一些，以便它们与Facebook和Instagram图标保持平衡。
视觉平衡问题的另一个例子是：表单配按钮。如果按钮直径等于文本框高度，那么按钮对我们的眼睛看起来会更小，但是如果稍微放大一点，整个构造就会更加平衡、视觉尺寸才能相等。
但是，如果更改按钮的颜色，则不需要放大。在下面的图片中，按钮和文本框高80像素，但由于强烈的黑色填充，让它看起来的视觉重量更重，这也能达成视觉尺寸相等。
重要的是要记住
1. 视觉尺寸是人眼对物体尺寸和重要性的感知程度，并不一定等于其像素尺寸。
2. 圆形，菱形，三角形和其他非正方形形状需要更大、更重才能与方形形状进行视觉平衡。
3. 图标区域应该留有一定的安全区域。这对于一组图标来说非常重要，留给设计师的操作空间解决视觉尺寸对等问题。
网友评论