一份如何做视觉上平衡的icon，正确的对齐方式，完美的圆角的绘制指南。

    我们的眼睛会骗人，如果你知道人类视觉特点，会做出更亲和、干净的设计。不只是字体设计师会利用视觉效果，UI设计师也可用。

    1920年代，视觉格式塔理论建立，它解释了眼睛如何处理图像，大脑如何叙述它。你可能听过“接近原理”和“相似原理”。本文着重讲格式塔理论的实操方面。

1、测量大小和视觉大小

    400px*400px的方形，和400px*400px的圆形哪个大？几何上来说，他们一样大，但是看下图，我们眼睛立即能察觉，方形大于圆形。

    辅助线标记

    我们再来看一组，就视觉重量而言，他们是不是相似了？

    很难立即发现哪个更重，不奇怪，我刚刚增大了圆形的直径。

    我重叠了第一组和第二组的例子。左边，400px的方形确大于400px的圆形。看右边，他们的面积是均衡的。基本上，不同形状，面积相近都会出现不同的宽高。

    我们能看一看发生在方形和三角形上同样的效应。为了平衡方形，他们要变得更宽更高。不仅是面积，而是把它们归纳为区域，更能把事做好。

    如何把道理用在界面上？举例，设计图标时重要的是让它们保持平衡，所以不能让一个图标太突出或者看着太小。如果我么直接把图标装进方形区域，就会觉得方形图标太大了。

    我推荐补偿图标与方形不同的图标的重量，让视觉上更小的图标伸出视觉上更重的方形区域。

    现在一些图标已经采用了视觉上的平衡。

    现在已经明确了，为什么icon区域总是大于图标主体。就是让非方形的icon看起来不小于方形icon。

    用模糊的方法简单测试一下视觉平衡图标。如果你看这些斑点差不多大，它们的视觉重量就是相似的。

    有时，我们要处理已经存在的图像，例如，分享时候链接的社交网站logo的按钮。 Facebook和Instagram是方形的，可推特是个鸟，Pinterest是个“P”。这就是为什么推特和Pinterest的icon看起来大一点了，这样它们能跟脸书和Ins大小均衡。

    另外一个例子，是输入框和圆形按钮在一起。如果按钮直径跟输入框高一样，按钮在我们眼里就会更小，如果我们放大一点，整个结构看起来就更平衡了。

       但如果你更换了按钮样式，增大就不用了，如下图，输入框旁边放80px的按钮，右边的不显得“亏”而显得“盈”。

谨记

视觉重量是人眼如何感知物体的大小，并不一定等同于像素大小或面积。

圆、菱形、三角形和其他非方形的几何图形宽高要在视觉上与方形平衡。

 为了视觉上的平衡，图标要留出一点区域，并且始终一致。

2、对齐不同形状

    视觉上的对齐是视觉平衡的逻辑延续。下图的条带，它们看起来一样长吗？

    像素上，是的。但，看起来下面的比上面的短。

    下一张图，俩条带变了吗？

    我把“视觉补偿”用在了下面的带子上，允许延长带子20px来补偿间隙，可以使两个条带的视觉更加平衡。

    还有一些复杂的形状条带形状。

    所以，如果你创作了折叠的丝带，再在上面写文字，或者你把打折信息写在困在网店商品卡的丝带上，想让他们视觉上平衡， 尖角可以突出形状外围一点，特别是长方形的情况。

    那如何对齐无背景的文本和有背景的段落呢？这取决于背景的深浅。如果背景亮，你就把里面的部分跟外面部分的文本对齐。

    不像在亮背景上的案例，暗背景上的有相当的视觉重量，如果目标是把它无缝插入段落中，那就要像下图一样的对齐方式了。

       同样的道理适用于输入框和按钮。当然不是教条的规则，只是基于视觉感知的推荐。

    左图，较亮的输入框背景是可以超出输入标签的左侧的；右下角Send按钮是完全对齐输入框右侧的，虽然它颜色比较重，但是对比度没那么强，形状又比较饱满。

    右图，输入框为实线描边，我把输入标签和边框对齐，而用户输入的内容在框内有缩进。Send按钮有三角形边缘，按钮往右移了一点以维持视觉平衡。

    我们再来看一种情况，文字与按钮的对齐，看下面的按钮，它们看起来都居中是吗？

    其实窍门是右边那个按钮的文字稍微往左移动了一点，因为右边缘是三角形的。还有，带箭头的按钮比左边宽40px。

    按钮和文字不仅有垂直对齐，也有水平对齐的问题。首先，我想说文字的水平对齐用于讲各种操作系统的界面、网页和应用的界面中。文字的高度是基于大写字母的最高高度，基本等同于H和I的高度。

    基本上，文字的上下距离按钮边缘的距离是相等的。这是合理的，因为命令名常是大写开头，有更多上升的趋势，l, t, d, b, k, h这样上升的部分多于y, j, g, p这样下延的部分。

    另一种方式，是小写字母的上下与按钮上下端等距的方法（x高度）。为什么这么叫，在有衬线和无衬线字体里，小写x高度一样。

    这种方法也是合理的，因为视觉重量主要集中在小写字母的范围内。

    这俩方法有什么区别？是区别不大。

    下图更多案例中，Cancel和OK更适合使用大写高度对齐的方法。因为Cancel没有向下延伸，而OK全是大写。x高度对齐法在下图中仅适合用在Sync按钮中，其文本包含了向上伸展和向下延伸。Cancel和OK用x高度对齐法就有点太高了。

    图标与按钮的关系就与文字不同了。我们看这种流行的发送按钮和圆形按钮，哪种排布更平衡？

    希望你已经发现了左边的问题了。这出现在对齐方案上。第一种，是矩形范围对齐，当然是没错的，你切出来的svg/png就是矩形的，工程师的开发时看到的也是矩形。第二个方案，移动了图标的位置，使图标锐利的突出与圆形边缘等距。

    如果你输出给工程师，你要偏移一些距离，让图像维持在视觉中点。

    同样的道理，播放图标如果对它们的物理宽高对齐，方形和三角形看起来就会很奇怪。

    如果你想把三角形对齐的更好，请给它做个外接圆，用外接圆形的宽高来对齐外层按钮。

谨记

    有锋利边缘的物体，在与矩形同类物体相邻的时候应该做的更长。

    用大写高度对齐法通常是对齐文字与背景按钮的有效方法。

    使三角形图标与按钮对齐，用其外接圆与背景按钮对齐的方法确定图标内容的偏移。

3、圆角的视觉配置

    如何比圆形更圆？我之前没想过这问题，但就像文章开始我说的，眼睛总是不如我们期望的那样反映事物。所以，下图那个圆形显得更圆润？

    人们通常会选择3和4。1和2看起来当然太瘦削了，5看起来太膨胀了。如果我们把第三个第四个圆叠在一起，称为几何圆和修改过的圆。我们会发现后者较前者更加厚重，相对而言，在我们眼中更加平滑。

    为了展示的更明确，我用三个知名字体字母“O”——Futura, Circe, 和 Geometria。鉴于这些高精度的字体是基于人类的视觉感知使用了复杂的视觉构成法，我认为它们的圆形，看起来比几何圆形更圆润。难道它们不能让你的眼睛愉悦嘛？

    让我们交叠它们和几何圆形。就连最接近几何的Futura的“o”都延伸出了一点。Circe和Geometria的字母是，整体更宽了一些，但是，就算它们是同等宽高的，我们也会看到这四个“肚子”。

    所以从视觉上来说，左边那种被修改过的圆形会比右边的几何圆形看起来更加圆润。

    我们如何利用这原理？当然是圆角啦！如果你在当前流行的图像编辑软件中用“嵌入式舍入”（就是普通布尔运算做出的圆角）的功能，结果是，视觉上不怎么好。

    人眼会突然注意到从直线变化为曲线的那个点。这个圆角就看上去不怎么自然啦。

    考虑到视觉感受，我解决了这个问题。

    这种类型的圆角在圆形外面有一个额外的区域。

    试着去体会两个方案之间的不同吧。

    把这个圆角处理法用在圆角按钮会发生什么呢？

    你能注意到右边的按钮的圆角更加顺滑，更能亲和你的眼睛。

    同样的故事也发生在app icon上。用标准的圆角是不能达到完美的效果的，但在深入研究这个主题前请看看这两个图形的不同。

    第一个是Sketch里做的圆角矩形；第二个是勾选了“平滑圆角”的圆角矩形，也称作Lamé曲线。这是法国数学家加布里埃尔·拉姆发现的规律，这套公式可解决从四角星形到圆角矩形的的平滑问题。

    Marc Edwards提出了拉姆曲线的公式，使得形状在视觉上光滑而完美。ios7的桌面图标开始基于此公式。

    后来这个形状通过黄金分割网格进行了修改。其思想是不变的，不过这是另一个故事了。

    是用“平滑圆角”的好处主要是它们超级平滑的外观。但从另外一方面看，这些非标准的形状是难以使用到真实界面当中的。应该将多个SVG组合在一起，在代码中包含特殊的公式或脚本，或者使用像Apple的应用程序图标一样把png放在一个统一的蒙版上。

    对于设计来讲，有个简单的修改圆角的方式，你要先进入编辑路径模式，把他们变成非标准的路径，直接操作贝塞尔角点的杠杆，让它们彼此靠近一点。

    锐角倒角的效果更明显，这在地铁地图这样的图里是很重要的。

谨记

    几何圆角看上去就像人造的，因为人很容易看到直线和曲线的接缝点。

     视觉平滑拐角需要手动操纵角点杠杆。

还没完

    有些不理想几何正方形看起来不那么正方，你可能会说“省省吧”。那你看下面哪个正方形显得更正呢？

    如果你选左边，那就是听从了自己无偏见的视觉感受了。

    人眼感知物体的高度比宽度更加敏感，我是感到惊讶的。他解释了，即使是几何字体，“O”字也比几何的圆宽，而且字母“H”的垂直线宽也比水平的线宽度更宽。

推荐阅读

    本文对该主题的理解有限，您可以继续探索。 这里有关于格式塔心理学起源及其最初想法的文章和书籍清单。

    巴里史密斯，《格式塔理论：哲学论文》，1988年。深入研究格式塔理论起源以及人类感知的哲学和心理方面。

     Steven Lehar，《你头脑中的世界：意识体验机制的完形视图》，2002年。这本书解释了人们如何看待现实。 事实证明，我们看到的不是现实世界，而是它在大脑中的反映。

    詹姆斯J.吉布森，《视觉世界的感知》，1950年。 这本书展示了我们大脑中的物理过程如何影响我们看待世界的方式。

     詹姆斯J.吉布森，《视觉感知的生态学方法》，1979年。

     George Boeree，《格式塔心理学》。

    格式塔思想的简史。 格式塔心理学创始人的传记：Max Wertheimer，Kurt Koffka和WolfgangKöhler。