视觉误差会对UI造成什么样的影响？（一）

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