UI设计中的视觉平衡【百科全说】

我们的眼睛是一个奇怪的器官，经常对我们说谎，但是如果你了解人类视觉感知的特殊性，就能够理解眼睛的“谎言”，从而做出有亲和力和清晰的设计。理解“眼见”和“脑见”所产生的差异，对于构建人机交互的界面UI设计师来说，是非常重要的。

1.物理尺寸和视觉尺寸

一个400px的正方形和400px的圆形哪个看上去更大？从几何尺寸上看，他们的宽度和高度是相等的，但是从下图中的两个图形可以看出，400px的正方形要比400px的圆形更大一点。这里用与重量有关的词语描述视觉感知的差异会更合适，即400px的正方形要比400px的圆形在视觉感知上更重一些。

为了证明尺寸的正确性，下图给出了辅助线和数值。

我们继续看下图中的正方形和圆形，在视觉重量上，他们是否相等？

答案是肯定的，至少很难立即分辨出哪个更重，这是因为圆形的直径增加了50px。

为什么会这样？我们把上面两个案例进行了重叠。左图（400px的正方形与400px的圆形），圆形完全被包含进了正方形里面，正方形超过了圆形4个a区域，正是造成视觉误差的原因。右图（400px的正方形与450px的圆形），正方形超过了圆形4个a区域，而圆形也超过了正方形4个b区域，两个区域相互抵消。虽然他们的尺寸不同，但却有着相似的面积，所以圆形和正方形在视觉上达到了平衡。

相同的原理也作用在菱形和三角形上，为了达到与正方形在视觉上的平衡，他们应该变得更宽和更高，以达到面积上的相似。

那么，如何在界面设计中运用这些原理呢？当我们创建一组图标时，重要的是彼此之间保持视觉平衡，让一组图标看起来不会有过大或者过小的。如下图所示，如果在相同的正方形框中绘制图标，那么面积越大的图标则看起来越大。

所以这种情况之下，就要放大那些看上去较小的图标，缩小那些看上去较大的图标，来达到视觉重量上的平衡。

下图是一些实现了视觉平衡的图标示例。

现在我们清楚了为什么一个图标的背景区域总是大于这个图标的主体，是让了能让非方形的图标去调整大小，让他们看起来不会小于其他方形的图标。

通过一个简单的方法可以检查视觉平衡，即模糊，模糊后的图标能变成大小相似的点，就说明这些图标具有相同的视觉重量。

但有时我们会用到已有的图标组合，例如比较常见的“分享”图标，Instagram和Facebook是方形的，Twitter则是一个异形，Pinterest是一个圆形。这里Twitter和Pinterest的图标就需要稍做放大，是为了能与Instagram和Facebook的图标达成视觉上的平衡。

还有一个在视觉平衡上总是处理的不好的地方，是文字输入框配合圆形的按钮。如果这个圆形按钮的直径和输入框的高度一样，视觉上看起来就会觉得有些小，而稍稍放大之后，整个结构就会变得平衡。

但是如果改变了按钮的样式，则不需要放大。在下图中，圆形按钮和输入框的高度是一致的，将按钮填充成黑色，圆形实心按钮跟输入框就能达到一个较好的重量平衡。

划重点：

视觉重量是眼睛所接收到的物体的形状和感受，并不一定等于它的像素大小；
圆形、菱形、三角形等形状，设计时应稍大一些，以便跟正方形能达到视觉平衡；
图标四周要为视觉平衡留有一定空间，对于成组的图标来说，这点尤为重要。

2.形状的对齐

视觉对齐是对视觉平衡和视觉重量的一个延伸，看下图中的长条形，你觉得他们的长度一样吗？

其实这两条形状像素的长度是一样的，但是第一眼看上去，下面的线要短于上面的线。

再来一张，感觉有什么变化吗？

设计师对下面的两根线进行了视觉的补偿，将下面的线增加了20像素，增加了顶端的长度，使两个形状在视觉上达到平衡。

下图还有一些更加复杂的图形例子。

所以，当我们在设计一张有折叠条纹的海报，或在产品和网站上用到折叠条纹时，请注意要考虑视觉平衡：尖锐的边缘要比其他的区域突出一些，特别是如果它是一个矩形。

那如何对齐有背景的文本和段落呢？这取决于背景的视觉重量，如果背景是轻的，可以将突出的段落和其他文本对齐。

由于背景很浅，一般不会打断正常的阅读。

但在深色的背景上需要不同的处理，下图由于背景是黑色的，所以需要将背景与段落文本对齐，而背景中需要强调的白色文本则以缩进的方式对齐。

与浅色的背景不同，黑色有很大的视觉重量，如果目标是希望无缝的插入一段文字，最好是以下面的方式进行对齐。

相同的原则也可以用在按钮和输入框。

左侧浅色背景的输入框，标签文字没有跟输入框的边缘对齐，而是跟用户输入的内容对齐，右下角的发送按钮，也没有对齐输入框的最右侧，因为这个按钮是深色的，从视觉上看是重的。

右侧，输入框是一个描边的框，标签文字跟输入框的框体对齐，而用户输入的内容则有一定缩进；发送按钮有一个三角形的边缘，所以把此按钮向右移动，也是为了跟上面的输入框达到平衡。

下图我们来看另一种对齐，即文本在按钮中的对齐。下图中的按钮，文本看起来是完美居中的。

诀窍在于，右边的按钮，把文字向左边移动了，因为它右边的边缘是三角形。此外，右边箭头按钮的总宽度也增加了40像素，为了跟左边正方形的按钮看起来视觉上一致。

文本按钮不仅有水平对齐，还有垂直对齐，特别是对于英文字体。在操作系统，网站和APP的界面设计中最常用到的对齐方式是Cap高度对齐，是基于大写字母的高度对齐，等同于“H”和“I”的高度。

大写字母的上方与下方的间距是相等的。这种对齐方式被最广泛的应用也是有原因的。因为英文字母中有向上升部分的占多数，如：l, t, d, b, k, h。有下降部分的则占少数，如：y, j, g, p。而大写字母的高度与具有上升部分的英文字母高度基本一致。

另一种对齐的方法是使用字体的小写高度（所谓的“x高度”）来与背景对齐。在无衬线的字体中，它等同于字母x的高度。

这个方法也是有道理的，因为一个文字主要的视觉重量集中在放置小写字母那个区域。

这两种方法有区别吗？有区别，但是区别不大。

下面是更多的例子，左侧使用Cap高度对齐，右侧使用了x高度对齐。左侧使用了Cap高度的的 Cancel 和 OK 刚好视觉上居中，因为Cancel没有下降的字母，而OK都是大写字母。而x高度的方法在最右侧Sync按钮上是比较好的，因为字母中既有上升和下降的字母元素。右侧Cancel和OK在以x高度对齐的方式下都显得太过于靠上了。

说完了文字，我们在看图标的对齐。图标的情况略有不同，我们把一个发送的图标放到一个圆形里，哪一个看起来更加平衡？

希望你能注意到是左侧图标在对齐上有些问题，因为两个图标用了不同的对齐方法。左侧使用了默认的对齐方式，如果这个图标刚好是矩形，那么这样的处理方法是对的，因为把PNG或者SVG文件给开发同学时，他就是一个矩形的形状。而右边的对齐方法则是让图标的边缘跟圆形背景的边缘等距对齐。

如果当你准备切这样一个图标给开发，你需要预留一些空间，这样他就能够在视觉上达到对齐，如下图。

播放按钮也是同样的道理，如果你直接对齐一个三角形和圆角矩形，看起来就比较奇怪。

如果要更好的将三角形放置准确，请将其放置在一个圆形容器中，然后将这个圆跟背景对齐。

划重点：

具有不规则、锋利边缘的形状应更大，以便与相邻的矩形对象平衡。
在按钮文字对齐中，以Cap高度的对齐方式目前是应用最广的形式。
调整三角形图标对称时将它置入一个圆形容器，然后用这个圆形与背景对齐。

3.视觉导角

什么会比圆更圆？正如开篇所说，我们的眼睛是很奇怪的，通常我们感觉到的跟想象中的其实不一样，那么，下图里面的圆哪一个看起来是最圆的？

一般人都会选择3或4。人们觉得1和2太瘦，5又太胖，如果重叠第3和第4（一个几何正圆和一个修改过的圆），我们发现修改后的4号要比3号胖一点，这样的圆眼睛看起来会觉得更圆。一般人都会选择3或4。人们觉得1和2太瘦，5又太胖，如果重叠第3和第4（一个几何正圆和一个修改过的圆），我们发现修改后的4号要比3号胖一点，这样的圆眼睛看起来会觉得更圆。