另外一个达不到视觉尺寸相等的重灾区就是表单配按钮这种常见的组合。通常是长方形的表单如果和直径相等的圆形按钮摆在一起，必然也会出现圆形按钮看起来比较小的问题。

　　处理方法相信大家也都知道了，略微放大按钮，这样整个表单和按钮才能达到视觉平衡，视觉尺寸才能相等。

　　对于这个现象的处理方法并没有那么简单，就拿上面那个例子来讲，有没有除了放大按钮以外的其他处理手法呢，当然是有的。条件允许的话我们可以对按钮添加一些颜色，让它看起来的视觉重量更重，这也能达成视觉尺寸相等。

　　记住这些点

　　物体有物理尺寸，但是人眼所见，并对面积或体积自行加以理解后所认知的视觉尺寸并不会与物体的物理尺寸完全相等。

　　正方形的视觉重量是最重的，越接近正方形的 icon 看起来也会更重，更大，反之更轻更小。

　　规范建议绘制 icon 的安全区域主要就是为了解决视觉尺寸对等问题，留给设计师的操作空间。

　　二. 视觉对齐与形状

　　视觉对齐可以说是视觉尺寸这种现象的一种逻辑上的延伸。还是跟上半部分一样，来看张简单的图，这两个东西对齐了吗?

　　以物理尺寸的角度来看，它们绝对对齐了，因为这两个长条是一样长的。但是，由视觉的角度来看，上面那一条是不是看起来比下面那一条长一点?

　　我们修改下长度再看看。

　　试着增加下面那条长条的长度。让下面那条长条多出 20px，这时候它们看起来才是对齐的，达成了视觉对齐。

　　再来看看几种常见的样式。

　　以下这种彩带样式的图相信大家都做过，要让整个图看起来平衡、整齐，就要利用上这种现象，有意识地加长需要加长的部分，才能做到对齐。

　　我们再看一个实验例子，带背景的文本要如何进行对齐。这时候要根据背景颜色的深浅决定对齐的方式。

　　如果是浅色背景的话，我们就不需要改变文本的长度，直接添加背景，浅色的背景由于视觉重量轻，尚且不会造成什么不好的影响。

　　如果是深色背景的话，做法就不一样了。如图所示，我们要让黑色背景与文本对齐，而放置于黑色背景之内的文本要有一定程度的缩进，这样才能达到视觉对齐的效果。

　　与浅色背景不同，深色背景的视觉重量本身比较重，要让文本看起来更加一体的话，就一定要这样做。否则抓眼的背景会过分突出，让看起来对齐的感觉消失。

　　这种现象与排列原则最常应用于按钮与输入框。

　　左边的浅色背景输入框框体不会与标签文字对齐，框内文本才会与标签对齐。右侧的深色边框的输入框的框体就要与标签文字对齐，而框内容无需与标签文字对齐。再看看发送按钮，左边的发送按钮与浅色背景的输入框为了达成视觉对齐故意地做短了一点点，右边的发送按钮也因为形状的缘故被故意地做长了一点，达成视觉对齐。

　　看起来非常简单，可是仅仅一个对齐的细节还是非常多的。现在我们单拿一个按钮出来挖掘更多细节。看看下面这个按钮，你会觉得里面的文字是完美居中的对吧。