下面是几个例子的对比。左列的“Cancel”和“OK”的大写字母高度明显比右边的好，因为“Cancel”没有下半突出的部分，“OK”全部都是大写，所以通常使用按钮。右列中只有“Sync”按钮适合小写字母高度，因为它的名称有上、下突出的元素;“Cancel”和“OK”的单词似乎太高了。

　　图标按钮的情况稍微有些不同。让我们来看看当下流行的圆形按钮中的“发送”图标。哪种图标按钮更能平衡?

　　或许你已经注意到左边的图标按钮有问题。这是由不同的对齐方式形成的。左边是将图标当成矩形。某一程度上这是对的，因为当你将一个SVG或PNG文件发给开发者时它是在平面上的一个矩形表单。右边展示了图标所有的尖头边缘都与圆形按钮背景的距离相等。

　　如果要给开发者一个文件，你需要留一些区域，以至于可以将图标放在右侧视觉背景的中心。

　　相同的“Play”按钮。如果直接将圆角矩形和三角形对齐，看起来会很奇怪。

　　如果想让三角形的视觉位置看上去更好，对齐并环绕这个按钮背景的圆。

　　谨记：

　　有尖头边缘的形状应该相对更大一些，便于与相邻的矩形保持平衡。

　　对齐大写字母是在按钮背景中定位按钮名称的一个广泛使用且有效的方法。

　　在按钮上准确定位三角形图标的一个有效办法是用圆环绕它且与背景对齐。

　　3.视觉圆角

　　什么可以比圆更圆?之前我从没考虑过，但就像我在文章开头所说的一样，我们的眼睛很奇怪，有时看到的并不是我们想的那样。看看下面图片中的圆，哪个是最平滑的圆形?

　　我之前问的人会在3号和4号圆之间做选择。1号和2号明显过窄，5号过于饱满。如果重叠第3个和第4个，一个是几何圆一个修正圆，我们会发现第2个比第1个视觉上稍微重一点，所以我们看上去会更圆一些。

　　为了说明我的理解，我用三个著名的集合字体——Futura、Circe和Geometria来表达字母“o”。因为高质量的字体是基于人类的视觉感知和复杂的视觉系统而建立的，所以它们的圆形看起来比几何图形更圆。这些字母你看上去会有不舒服的体验吗?

　　把这几个几何圆重叠。即使是最几何的Futura体的“o”也有四个部分。Circe和Geometria的字母尽管他们的高度和宽度都相等，但还是比圆宽。

　　在视觉上，一个经过修改的圆(右边)看起来比一个几何图形(左边)更圆。

　　我们应该如何运用这一现象呢?例如，在Photoshop、Illustrator或Sketch中使用嵌入的圆角特性，但视觉效果不是很好。

　　人的视线会立刻看到直线变曲线，但这一变化很不自然。

　　确定重新考虑我们视觉感知。

　　这种圆有一个超出几何圆的额外的面积，使直线在变曲线时不那么明显。

　　试着去感受这些圆之间的区别。

　　我们现在将这一方法用在圆形按钮上。

　　你可能会注意到右侧按钮的圆角更平滑，看起来更舒服。

　　应用程序的图标也是一样的。不能简化地使用标准圆角达到完美。在讨论这一话题前先来看看2个不同的圆角形状。

　　第1个是在Sketch上创建的圆角矩形。第2个是超椭圆，也可以叫作拉梅曲线(Lamé curve)。是由法国数学家Gabriel Lamé发现的，根据使用的公式，从一个像四角星形状变成实际上是圆形的正方形。

　　Marc Edwards提出了拉梅曲线公式，它的形状是平滑而完美的。从iOS 7系统开始的图标都是根据它做成的。

　　之后这个形状被增加了黄金分割比例和网格，为设计师引导新的图标。

　　使用像超椭圆这样的形状的主要好处是它们的很圆且光滑的外观。另一方面，这些非标准的形状很难插入到真实的界面中。你可以将多个SVG组合在一起，将特殊的公式或脚本加入到代码中，或者使用像Apple为其应用图标所做的PNG掩码。