正文之前，两个问题
哪个更圆？
哪个更方？
本文作者9月13号在Medium上发表了这篇文章，15号就开始翻译了，一直拖到现在，期间网上已经出现了各种版本，仍然继续翻完，为了加强印象吧。
希望于你有用。
原作者：Shestopalov
文章分为三个部分：
- 物理尺寸和视觉感知尺寸
- 不同形状的正确布局
- 完美的圆角
1、数学和视觉尺寸
哪一个尺寸更大？一个400px的正方形或者是一个400像素的圆形。几何学上来说，它们的宽度和高度是一样的。但是观察一下下面的图片，我们的眼镜能立即识别出正方形比圆形更重。顺便说一下，“重量”相关的词语更适合描述视觉效果。 
以防你不相信我的话，下面是加上参考线和数值的版本。
现在让我们再看一张图片，在视觉重量上，它们是一样的么？
对我来说，绝对是的。最起码很难立即说出哪一个更重。因为我把圆的直径增加了50px。 
为了说明缘由，我把两张图重叠在一起。如下图，可以看出来，在“a”区域正方形比圆形更重，然而“b”区域圆形比正方形更重。左边的图中正方形能完全包裹圆形，右边的图中圆形和正方形是平衡的，没有谁能包裹谁，圆形和正方形都有四小片内容。
同样的菱形和三角形也有同样的效果。为了与正方形有一样的重量，它们需要变得更大。
那…重点来了。这和界面设计有什么关系？
当你设计一组icon的时候，所有的icon看起来视觉平衡是非常重要的，以确保没有icon太突出或者太小。如果直接将icon放入正方形中，越接近正方形的icon会看起来更大。
我推荐把视觉重量比较轻的icon稍微超过icon区域的边界，而视觉较重的icon则在区域中留下一部分空白区域。
以下是一些视觉平衡的icon案例
图中很清楚的标明了为什么一个icon区域通常会比icon本身要大了—为了能让非方形的icon看上去更合适，看上去不比方形的icon小。
最简单的检查方式是将icon模糊掉，如果模糊掉之后看上去或多或少是相似的斑点的话，它们就具有相同的视觉重量。
但有时候我们需要与现有的图形打交道，比如：社交网络的logo萌会经常被用来作为分享或者喜欢的按钮。Facebook和Instagram的icon是方形的，而Twitter则是一个小鸟的剪影，Pinterest则是一个被圆形包裹的P字母。所以将它们放在一起的时候，Twitter和Pinterest的icon会可以放大一些，这样这一排icon看上去就一样大了。 
另一个情形是当输入框和圆形的按钮放置在一起的时候如果按钮的直径和输入框的高度一致的话，按钮会看上去显得小一点，但如果将圆形按钮放大一点，整个组合会看上去协调很多。
换一个情况，如果改变按钮的样式，可能就不需要放大按钮了。如下图，按钮和输入框都是80px高，右边的按钮看上去明显与输入框更和谐一些。
需要记住的几点：
- 视觉重量是人眼感知物体的尺寸和意义的方式，它不必和实际的物理尺寸相同；
- 圆形，菱形，正方形和其他非方形的形状需要更大以确保与方形的icon的视觉重量上一致；
- Icon区域需要为视觉平衡留出一些空白区域，对于一组系列icon来说是非常有必要的。
2、不同形状的正确布局
逻辑上来说视觉分布是视觉平衡及视觉重量现象的延续。让我们看一下下面的条形。它们看上去是一样长么？
从像素单位上来说，当然是的。但是第一眼看上去的时候回感觉下面的条形比上面的短一些。
再看另一张图，有什么改变么？
我稍微增加了一些下面条形的长度，让右侧尖的部分增长了20px，这样就可以弥补由于中间缺口，从而使得上下两条看上去“一样长”
现在一起看一下更复杂的条形
举个栗子，当你在设计一张在折弯的条形上放文字的海报时，或者只是放一些折线在产品卡片或者是在现实杭电的时候，需要注意它们是否达到了视觉平衡。尖锐的形状需要稍微超过一点主体形状，尤其是主体是长方形的情况下。 
那当排布一些带有背景的文字或者段落时该怎么办呢。这取决于背景的视觉密度。如果背景比较轻，可以把段落排布与其他部分一致。（直接看图比较明显。）
当背景比较轻的时候，它不会打断整个文章的文字流。
另一种形式是增加一个深色的背景。在下图中，把黑色的背景排列的与文字的宽度相同，文字则在背景上缩进排列。
与浅色的背景不同，深色的背景视觉重量很重，如果加背景的目的是想无缝的在文章流中加入一段文字，最好是像下图这样排列。
同样的院里可以用在按钮和输入框的排列中。当然，这不是教条，只是基于视觉感知的界面。（Of course, it’s not a dogma, just the optics-based vision of an interface.）
左边的文本输入框的浅色背景可以超出标签和输入的内容，可以注意到“send”按钮的右边和浅色背景的右边不是完全对齐的，因为按钮颜色比输入框颜色更深，从视觉感知上来说看上去更重。
再看右边，输入框有实线的边框，我将输入框与标签的文字对齐，而输入框内的文字则往里缩进了一些。“send”按钮有一边有三角，所以将按钮稍微往右边移动了一点。这样的话从视觉感知上来说，就看上去会比较平衡。
接下来看一下关于“分布”的另一个方面—文字和按钮形状的排列。观察一下下面的按钮，文字看上去在正中间不是么？
事实上，在右边的按钮中，我将文字往左边移动了一点，因为按钮的右侧是三角形，此外右边的按钮比左边宽40像素，以确保两个按钮在视觉感知上看上去一致。
文字和背景不仅有水平方向的排布，同样也有垂直方向的排列。第一点我想表达的是这能运用在操作系统，网站，APP等不同介质的界面上。垂直方向是基于大写字母的高度（也叫做cap-height）的，所以“H”和“I”的高度一样。
基本上一个大写字母顶部和底部到按钮上下的空间是一致的。这很有用，因为按钮文字通常用与标题相似，首字母大写，而有些字母有突出的部分—字母有部分在上方的（l,t,d,b,k,h）；字母有部分在下方的（y,j,g,p）
还有一种处理方式是根据小写字母的高度（也叫x-height）来排列字母和按钮底色。在衬线体和无衬线体的字体中，字母”x”的高度是一样的。
这样的排列方式同样有用，因为主要的视觉感知区域是小写字母集中的地方。
这两种方式有什么区别么？还真有，不过只是一点点。
下面有更多比较的例子。左边一列以cap-height（大写字母高度）为准排列的按钮更适合“cancel”和“OK”这样用的很多的按钮—因为“cancel”中没有字母有往下的小脚（descender…小翻实在能力有限），“OK”则全是大写字母。右边一列是以x-height（小写字母高度）为基准排列的，这一列中只有“Sync”这一个按钮比较合适，因为“Sync”在上下都有一部分字母的脚，此时“Cancel”和“OK”按钮看上去就不那么合适了。
这样的情况在带icon的按钮中也有一些差别。我们看下面的按钮，哪一个更加平衡？
希望你有注意到左边那个有点不对劲。这是不同的排列方式导致的。第一种做法是将整个icon放置在一个方形的区域内。对于特定范围内来说，这是正确的做法，因为当把SVG或者PNG文件给到工程师的时候就是一个带有图形的方形的区域块。右边的则表示所有的尖角到圆形的边缘的距离是一致的。
如果需要准备一个文件给开发，那么久需要预留一些空间，这样的话就能确保它能在视觉上保持平衡。
同样的来看“Play”按钮，如果直接按照方形区域来排列，会出现下面的情况—看上去很奇怪。
如果想让他看上去更合适，可以将三角形放在圆形当中，然后调整圆形和底色图形的位置。
需要记住的点：
- 带有尖角的形状应该更大一点以确保和方形元素看起来一致；
- 基于cap-height来排列字母和按钮背景色是一种行之有效的方法；
- 将三角形的icon元素放置在方形的背景上，有效的做法是用一个圆圈包围住三角的元素。
3、圆角的处理（圆角≠倒角）
有什么能比圆角更圆？我曾经也以为没有。但如同我最开始说的，我们的眼睛是是非常不可思议的，有时候它不会像我们所以为的那样传递信息。所以，下面那张图看起来更圆？
我之前问过的人大多会选择3或者4。1和2明显太瘦，5则显得太丰满，如果将3和4重叠在一起——会发现一个是几何意义上的圆形一个是优化过得圆形，第二个比第一个视觉上会稍微重一点，因此也看上去更圆一点。 
为了进一步的说说明这是怎么回事，我排列了字母O在三种著名的的几何字体的情况——Futura，Circe和Geometria。这样高质量的字体是基于人类的视知觉优化的，并且运用了复杂的系统来优化视觉上的感受，希望它们的圆看上去比几何圆形更圆。这些字母有让你的眼睛更愉悦么？
如果在它们上面叠加一个几何圆形，即使是最接近几何圆的Futura也有四块超出几何圆形的地方。此外，Circe和Geometria的字母则在宽度上也比几何圆形更宽，及时他萌和真正的几何圆形有同样的高度和宽度，也能看到有四块炒出来的“小肚腩”，看上去像吃多了一样。
所以从视觉感知上来说，经过优化的圆形（右边的）会比一个几何圆形看上去更圆。
那我们能怎么利用这一现象呢？当然是用在圆角中！如果直接用软件中默认的圆角工具—PS,AI,Sketch等…结果可能在视觉感知上不来说并不太好。
人的眼睛能立马看出来直线在哪里突然转成曲线，这样的圆角看上去并不太自然。
考虑到我们的视觉感知能力，我修复了这个问题。
这样的圆角在传统几何形圆角的基础上有一块额外的区域，来确保直线和曲线交界的地方不会那么明显。
尽可能体验一下两种不同处理方式的区别吧，看下图。
现在可以将这种方法应用到圆形的按钮中了。
相信你已经注意到右边一列的按钮看上去有更顺滑的圆角，而且视觉效果更好。
APP的icon同理。我们不会简单的直接使用默认的几何圆角就能得到完美的结果。在深入讨论这个问题之前，让我们看一下两种不同的圆角形状：
第一个是在Sketch中创建的圆角矩形，第二个则是“超椭圆”，也被叫做Lame曲线。是被一个叫做Gabriel Lamé的法国数学家基于数学公式从一个类四角星的形状变化而来的，看上去更圆。
Marc Edwards使用Lame的曲线创造除了一个顺滑的视觉效果完美的形状。从IOS7开始的ICON就是基于这个形状。
后来这个形状加上了黄金比例和网格，来指导设计师设计新的ICON。
使用超椭圆的好处是能看上去更加的圆润。另一方面，这些非标准的形状要应用在实际的屏幕中是比较麻烦的。一方面要结合各种SVGs文件，一方面也需要加载一些公式和脚本或者是像APPLE处理APP ICON一样用PNG蒙版的方式。
对于设计过程本身来说，有一个简单的处理方法。只需要双击进入可调整贝塞尔曲线的状态，手动将两个圆角的控制杆拉近一点即可。
这样的效果在尖锐的角上会更明显，这在画线路或者是地铁路的时候很重要。
需要记住的点：
- 几何圆角看上去很生硬是因为人能轻易的分辨出直线和曲线交界的地方；
- 视觉效果完美的圆角需要特殊的公式或者手动调整一些细节
彩蛋
有时候一个不是完全准确的方形看上去会更“方“一点。你可能会觉得这有点胡说八道。所以你觉得下面哪个方形更”方“？ 
如果你选择左边的形状，那你可能完全相信自己的视觉感知能力。
惊讶于人的视觉系统对物体的高度的感知敏感度会强于对宽度的敏感度。这就解释了为什么基于几何形状的字体，字母”O“通常会比实际的几何形状要宽，字母”H“的垂直高度通常比实际几何形状的要细。
原文链接
译的时候就学到很多能直接拿来用的tips，感谢原作者 Slava Shestopalov。
若有收获，就点个赞吧
0 人点赞
