一篇包含图示的指南，将教会你如何设计视觉上平衡的图标、视觉上对齐的形状以及完美的圆角。
译者注：在做设计时，是否常常感觉“明明这些元素在几何上应当是平衡的，看起来却总觉得不对劲？”作者这篇文章通过界面元素实例详细地解析了感官平衡和几何平衡之间的区别。原来我们的视觉感受是有偏差的，充分考虑人感知事物的方式，才能最终达到视觉上的平衡。
我们的眼睛真是奇怪的器官，它们经常欺骗我们。不过一旦你了解了人类视觉的独特性，你将能够构建更易用、更简洁的设计。不仅仅是字体设计师会利用视差的手段让字体变得更加可读和协调，对于界面设计师来说，这一技巧也非常有效。
1920年代，有关视觉感知的格式塔理论逐渐形成，解释了我们的眼睛如何处理不同的图像，而我们的大脑又如何去转译他们。你可能早已听说过类似的定律：相近性原则、共同命运法则等。本文参考了一些格式塔理论的观点，但更多聚焦于实践。对这一经典理论感兴趣的话，文末有补充读物清单。
1-实际尺寸和感官尺寸
哪个图形看起来更大：边长为400像素的正方形，还是直径为400像素的圆？从几何学的角度来说，它们的高和宽都相等，但仔细观察下图，我们的眼睛立马判断出，方形比圆形看起来更大。
附上尺寸标注：
让我们再看看如下的一组图形，这一组在视觉上是不是等大呢？
其实一眼看来难以分辨哪个图形更大，不难看出的是这里我其实将圆形的直径扩大了。
现在我将图1和图3中的两个图形分别重叠在一起，能够明显看出，第一组的方形面积要大于圆形，因此我们视觉上也觉得方形更大一些；而第二组看起来是等大的，因为圆形的高和宽都放大后，面积才能与方形相等。
在菱形与三角形中，我们也能发现相同的效果：要和方形在视觉上平衡，菱形 / 三角形的高与宽都必须大于方形，以达到近似的面积大小。对简单形状来说，基于面积的平衡法则是适用的。
那么在界面中该如何运用以上原则呢？
比如在设计icon时，让它们视觉上平衡就很重要，避免某一个icon看起来过重或过轻的情况。如果我们直接将这些icon放进大小相等的方框中，可以直观地看出，与方形越接近的icon看起来更大。（也就是面积法则）
对于这一情形，我主张通过适当放大面积较小的icon，缩小面积较大的icon来达到平衡。
下图是一些达到视觉平衡的icon：
这就解释了为什么icon所占的区块（icon area）总是比icon本身的高宽要大 - 是为了让非方形的icon能在这个范围内动态调整，以适应面积法则。
我们可以将画面模糊，如果这些色块看起来大小相似，它们在视觉上也就比较平衡。
但有些时候我们需要利用一些既有的图标，如在喜欢或分享功能中常常有的社交平台logo。Facebook和instagram的icon是方形的，Twitter和Pinterest不是，我们可以看出，后两者在高度和宽度上稍大一些，从而这一组图标在视觉上是平衡的。
另外一个视差效应的案例是文本框与圆形按钮的组合。如果圆形按钮的直径与文本框的高度相等，我们看起来总觉得按钮要小一些。如果将按钮的直径扩大一些，整个组合看起来明显更协调。
但如果你简单改变一下按钮的样式，也能达到增加视觉重量的效果。下图中我们可以看到，同样是80像素的高度，采用黑色填充的按钮就不再显得比文本框弱。
小结
1. 视觉重量指的是人眼如何感知对象的大小和重要性，并不直接等于对象的像素大小或所占面积。
2. 圆形、菱形、三角形和其他的非方形若要与方形元素获得相同的视觉重量，需要在高度和宽度上都扩大一些。
3. Icon所占的区块需要有一定的余量，以便于调整icon大小来达到视觉上的平衡。这一点对于必须保持一致性的一套icon来说非常重要。
2-形状的对齐
探讨完视觉的平衡后，另外一个话题是视觉上的对齐。让我们看看下图中的两个色带，他们看起来宽度相等吗？
以像素来说的话，答案肯定是”相等“。然而我们一眼看去，会觉得下面一个色带看起来短一些。
看看另外一张图，有变化吗？
这里我对下方的色带进行了一些视觉补偿操作。将它的长度比之前延伸了20像素，弥补了图形上的缺口，目前视觉上这两个色带看起来是对齐的。
下图是更多复杂一些的例子：
因此，如果你正在利用色带的元素绘制海报，或者在电商的商品卡片上设计”打折“的标志，并且纠结于视觉上的平衡感的话，让尖锐的边缘稍微凸出一些，尤其需要和方形元素对齐时。
下一个问题：有背景的文本如何与无背景的文本对齐呢？
这取决于背景的视觉重量。如果较浅，则可以直接和其他的文本对齐：
背景很浅的情况下，并没有影响到原有文本的视觉流：
背景较重时，则需要采取另一种方法。如下图所示，黑色背景与文本对齐，而其内部的文本则有一定的缩进。
和浅色背景不同，黑色背景视觉重量较重，如果想要整个段落保持一致、浑然一体，采用这种方式会更好。
这一原则也同样适用于文本框与按钮的对齐。这并不是一种教条，而是基于人的感知给出的建议：
在左侧浅背景的文本框中，背景可以超出文字的范围适当延伸，而不会影响label和文本框内容的对齐效果；而底部的发送按钮看起来右边缘与文本区域却不是完全对齐的，因为按钮颜色较深，视觉重量较重。
右侧案例中，文本区域由实线边框界定，label与文本框的边界对齐。发送按钮一侧为三角形，因此它向右边偏移了一点点从而与文本框的边界看起来平衡。
说到这里，我们涉及到了另外一种对齐的情况——文本或图标按钮的对齐。一起来看下图中的按钮，文本看起来是居中的，不是吗？
秘诀是我将右侧按钮中的文字向左侧偏移了一点点，并且右侧按钮比左侧按钮宽了40像素，从而这两者在视觉上平衡。
对于文字按钮来说，不仅仅需要考虑水平方向的对齐，还需考虑垂直方向的对齐。
我要探讨的第一种方式被广泛的用于操作系统、网站和应用中。即通过大该行文字中大写字母的高度（cap height）来进行对齐，与”H“或”I“的高度相等。
简言之，控制大写字母距上下边缘的间距相等。这样做是有一定道理的，系统指令常常是首字母大写的形式，并且在英文中，向上延伸的字母（l, t, d, b, k, h）比向下延伸的字母(y, j, g, p)出现的频率要高。
另外一种对齐的方式是以一个小写字母的高度作为标准（x-height）。在sans和sans serif字体中，等于字母”x”的高度。
这样做同样不无道理，因为一段文字的视觉重心通常落在小写字母所处的位置上。
这两种方式间有区别吗？
当然有，不过呢不是非常的明显。
下图中有很多的示例。左列是大写字高对齐法，对于“Cancel”和“OK”按钮来说是比较好的选择——前者没有下行字母，后者都是大写字母组成。右列中采用的事小写字高对齐法，对于“Sync”按钮来说更适用，这个单词中既包含上行字母，也包含下行字母；而“Cancel”和“OK”按钮如果采用这种方式，在视觉上会显得过高。
对于图标按钮来说，情况稍有不同。这里我们拿圆形背景下的发送按钮举例。下图中的哪一个看起来更加平衡呢？
希望你察觉到了，左侧的图标按钮看起来不是那么平衡。这两者也是采用了不同的对齐方式。
左侧按钮是将icon所占空间视作一个方形，来与背景对齐。这种方式也没什么错，因为切图给开发时，通常都是一个矩形的范围。右侧的按钮则是保证了图标尖锐的三个角与背景边缘的距离相等。
因此切图时，可以通过下图的方式，这样开发将元素居中后，最终效果是平衡的。
播放按钮所遇到的问题也是一样。如果你直接将三角形和矩形居中对齐，效果会有点奇怪。
与之前的方法类似，想要整个按钮在视觉上更平衡，你可以将它放在圆形辅助线中，再进行对齐操作。
小结
1. 包含锐角的形状需要适当的扩大或延伸，从而与一组的方形元素达到视觉平衡。
2. 大写字高对齐法是一种对齐按钮名称和背景的有效方式。
3. 想让三角形图标在按钮上处于适当的位置，将它放入圆形辅助线再对齐是一种行之有效的方法。
3-圆角视差
什么图形能够比圆形看起来更圆？我曾经认为答案很简单，肯定没有。但是正如我在文章开头所说的，我们的眼睛是很奇妙的器官，有的时候它并不会像我们所期待的那样感知事物。
所以让我们看一看，下面的圆中，哪一个看起来最顺最圆？
我询问了一些人，他们选择了3或者4。1和2看起来太窄，5又太鼓了。如果我们将3和4重叠在一起——一个几何上的纯圆和一个改进版的圆——我们会发现后者比前者形状稍微凸一些，我们的眼睛会认为它更顺滑。
为了进一步说明这一现象，我从三个著名的几何字体——Futura，Circe，Geometria中提取出字母“O”。高质量的字体往往基于人们的视觉感知进行设计，并会考虑到视差的影响，我假设它们中近似圆形的字体往往会比纯几何的圆形更加“圆”。下图中的三个O是否看起来非常舒服呢？
我们将它们和几何圆重叠在一起看看。即便是最接近几何形的Futura “O”，也有一定凸出的部分。尽管它们与几何圆的高宽基本一致，我们能够明显看出四个“啤酒肚”，仿佛它们都吃太多了~
因此，从视觉意义上，修正过的圆形（右侧）甚至比几何圆（左侧）看起来让人感觉更“圆”。
我们怎样利用这一现象呢？当然是用于圆角的设计！
如果你在绘图工具中使用内置的图形编辑功能设计圆角，结果看起来并不会非常完美
人眼能够瞬间识别出直线与曲线的交接点，圆的弧线看起来也不是那么自然。
通过考虑视差的影响能够解决这一问题。
这种圆角会比几何圆多出一点面积，让直线和曲线的交接显得不那么生硬。
感受一下这两种做法的差别吧：
我们可以将这种方法应用到圆角按钮中：
大家应该能够注意到右侧的按钮的圆角比左侧的看起来更加圆滑，对人眼来说更加舒适。
对于App icon来说，也是一样的道理。App icon中，为达到完美的效果，没有直接使用几何圆角。在深入这个话题之前，我们先看看下图的两个圆角矩形：
左边的是我在Sketch中绘制的一个圆角矩形，右边的是一个超椭圆（superellipse)，也叫做Lamé曲线，是由法国数学家Gabriel Lamé发现的，这是其中的一种形式。
Marc Edwards提出Lamé曲线看起来更加圆滑，并且从视觉上更加完美。从IOS7开始，App icon的外边缘都是基于这种曲线。
随后黄金分割比例和网格系统被加入到这个形状中，成为设计App icon的参考线，不过这是另外一个话题，我们就不扯远了。
虽然超椭圆这样的形式看起来更加的圆润顺滑，但这种非标准形状想要运用在真实界面中还是比较困难的。可以混合多个SVG文件、在代码中加入定制的公式或脚本或像苹果的app icon一样利用PNG蒙层达到效果。
单纯从设计角度来说，在sketch里面可以进入图形编辑模式，手动将曲线手柄拉长一些，让圆角形状更饱满。
在为锐角形状设置圆角时，这两种方法的区别会更佳明显。在绘制路网和地铁方案时，这一细节很重要。
小结
1. 几何圆角看起来非常刻意，因为人眼能够瞬间识别直线和曲线的交接处。
2. 对圆角的视觉调整需要特殊的公式，或者人工调整形状。
彩蛋
有的时候不完美的正方形看起来比真正的正方形“更方”。你可能会想，“这也太荒谬了！” 那让我们看看下图，哪一个你觉得更方？
如果你选择了左图，那你就是毫无偏见地遵从了自己的视觉感知。
当我首次知道我们的眼睛对于高度比宽度更敏感时，实在是非常惊讶。这就解释了即便在几何字体中，“O”的宽度也要比几何圆更宽一些；字母“H”中，垂直线总比水平线要粗。
推荐阅读
本文只是探索了这一话题非常有限的一些方面，因此我鼓励大家继续探索相关内容。下面我提供了一些与格式塔心理学的起源和概念相关的文章链接和书籍：
Barry Smith, “Gestalt Theory: an Essay in Philosophy”, 1988. A profound study on the Gestalt theory origin and the philosophical and psychological aspects of human perception.
Steven Lehar, “The World in Your Head: A Gestalt View of the Mechanism of Conscious Experience”, 2002. This book explains how people perceive reality. It turns out that we see not the real world but its reflection in the brain. (Chapter 1 is available online.)
James J. Gibson, “The Perception of the Visual World”, 1950 (a scanned copy, some images are low-quality). The book shows how the physical processes in our brain affect the way we see the world.
James J. Gibson, “The Ecological Approach to Visual Perception”, 1979. (A same-titled article with key ideas is available online.)
George Boeree, “Gestalt Psychology”. A brief history of Gestalt ideas.
Biographies of the founders of Gestalt psychology: Max Wertheimer, Kurt Koffka, and Wolfgang Köhler.
原文地址：[Optical Effects in User Interfaces (for True Nerds)]
本文的姊妹篇：[The Ultimate guide to flat icon set]