你能发现，我把右边按钮中的文字稍微往左边移动了一点吗?因为右边按钮的右边缘是三角形，而不是正方形。另外，右边按钮比左边按钮宽了40像素，使得它们看上去是一样大的。如下图所示。

　　文字按钮不仅有水平对齐，也存在文字和背景的垂直对齐。我想告诉大家的第一种方法经常在各种操作系统、网站和应用界面设计中使用。它是根据字体大写字母的高度(所谓的的大写字母高度)对齐的，它的高度等于大写字母“H”或“I”的高度。

　　基本上，在按钮中，大写字母距按钮顶部和底部的距离都是相等的。这是合理的，因为按钮的名字都是写在标题中的，而且英文字母中的上行字母(ascender，字母向上斜，比如：l、t、d、b、k、h)比下行字母多(descender，字母向下斜，比如：y、j、g、p)。

　　另一种方法是在文字按钮中根据小写字母的高度对齐(所谓的X高度)。在sans和sans serif字体中，这个高度等于字母“x”的高度，不要惊讶哦～

　　这种方法也是合理的，因为文字的主要光学重量会集中到小写字母所在的区域。

　　那这两种方法之间有什么区别吗?

　　虽然这两种方法之间有区别，但是区别不是很大，如下图。

　　我们再来看几个例子。

　　下图中的左侧所代表的是根据大些字母对齐的方式，这也是“Cancel”和“OK”按钮最常见的摆放形式。因为“Cancel”没有下行字母，“OK”都是大写字母。

　　下图中的右侧所代表的是根据x高的对齐方式。这对“Sync”按钮来说是最好的摆放形式，因为它刚好有一个上行字母和一个下行字母。相对来说，“Cancel”和“OK”的摆放形式看上去有点靠上。

　　而在图标按钮中又有些许不同。让我们把常见的“发送”图标放在一个圆形的按钮中，如下图。你看一下哪种放置方式看起来更和谐?

　　可能你已经注意到上图左边的按钮看上去不太对劲。这是因为不同的对齐方式引起的。第一个按钮把三角形的图标当成了矩形。在某种程度上它是对的，因为当你把SVG或PNG格式的图标发给研发时，研发会把它放在一个正方形的区域里。而第二个按钮在放置图标时保证图标每个角到圆形按钮边缘一致。如下图所示。

　　当你在给研发准备图标时，你需要预留一些区域，以保证研发把图标放在正方形的背景里可以居中，并且看上去是和谐的。

　　这在“播放”按钮中也是一样的。如果你直接把三角形的图标居中放在正方形的背景里，如下图左边所示，它看上去会很奇怪。

　　但如果你想要三角形看上去和谐，那你可以把它当成一个圆形，然后让正方形的背景和它居中对齐。

　　总结(敲黑板)：

　　带有棱角的形状要比没有棱角的形状稍微大一点，才能和正方形的物体看上去一样大。

　　大写字母对齐广泛使用在有背景的按钮上放置按钮名字时。

　　有效处理三角形图标在按钮上的放置位置的方法是，将三角形当成一个圆形，然后再和背景对齐。

　　3 光学圆角

　　有什么东西会比圆形更圆呢?之前我一直以为这种东西是不存在的。但是正如我在文章开头说的那样，我们的眼睛很奇怪，有时候它感知到的事物并不是我们期待的那样。

　　你看一下下图中哪个圆是最圆的?