俗话说眼见为实，但其实我们的眼睛经常欺骗我们。眼睛通过光的反射接收信息，然后经过一次「脑补」最终形成我们所谓「看见」的图像。脑补这个过程会因为各种原因的影响导致我们对于「看见」的事物的理解产生偏差。这一点对图形化操作界面的设计非常影响。既然无法绕过，设计师就要学会如何去「适配」人类的视觉惯性画出“正确”的界面。

　　一. 物理尺寸与视觉尺寸

　　长宽 400px 的正方形与长宽 400px 的圆形哪一个更大?假如这样问你的话，那么答案当然是一样大。但是来看看下面这张图，长宽各 400px 的两个图形看起来并不一样大。你的眼睛告诉你 400px 的正方形比 400px 的圆形更大一些。物体的物理尺寸是一样的，但视觉尺寸却有可能不一样。

　　为了更加准确地证明这个现象的存在，下面这张图给出辅助线，大家好好看看。

　　我们改变一下圆形的尺寸，看看现在这两个图形的视觉尺寸有没有更接近一些?

　　每个人的感官可能都不一样，但对于我来说，调整尺寸后的两个图形看起来才是一样大的，至少也不会像图一一样，让人第一眼就认为正方形比较大。为什么会这样?因为我将圆的直径增加了 50px。

　　现在我们将图形都叠起来看，看看为什么会产生这种那么明显的误差。400px 的两个图形叠在一起，你会发现整个圆形都被包裹在了正方形之内，而正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。再将 400px 的正方形与 450px 的圆形叠在一起，正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近，也就是我们常说的“一样大”。

　　不仅是圆与方，所有的图形都能够造成这样的偏差。当我们追求“看起来一样大”这个目标的时候，某些形状的物理尺寸应该更大一些。

　　这个现象对于界面造成的影响会有哪些呢?譬如说，当绘制一套 icon 的时候，我们当然是追求每个 icon 都看起来一样大。但假如我们只通过物理尺寸来进行量度的画，画出来的 icon 必然会个大个小，乌七八糟，更糟糕的是，这种问题经常发生，手机里随便打开个 app 都能发现这样的问题。

　　在画 icon 的时候，一定要把视觉尺寸这个无法用数字进行衡量的维度考虑进去。视觉重量小的元素要放大，视觉重量大的元素要缩小。建议大家可以去下载 HIG 的标注 icon 与 Material Design 的标准 icon 看看，数百个图标每一个的物理尺寸都不尽相同，但看起来全部都是一样大的，这是高水平的表现，值得细细学习与参详。

　　抽出几个当做例子，大家看看。

　　加个粉色等大的边框，或许你会看得更加清楚。

　　不是每个人都会有空给每个图标加个框来测量视觉尺寸的平衡，这里教个大家一个老司机才会的办法，搞个高斯模糊，如果高斯模糊之下每个图标看起来都差不多大，那么就可以说大致达成了视觉尺寸相等。

　　面对那些不需要由我们画的 icon，比如分享到 Twitter、分享到 Instagram ，官方已有提供的 icon，用起来也要注意。

　　下面举个例子，Facebook 和 Instagram 的 icon 是正方形的，而 Twitter 和 Pinterest 的 icon 一个是不规则图形，一个是圆形，所以为了达到视觉尺寸上的相等，当它们一起出现的时候，我们要放大 Twitter 和 Pinterest 的 icon，实际效果如图所示。