来源:优设 作者:朱宇轩
好吧，希望你能够看出来左边那颗按钮是有问题的，实际上我在画这枚按钮的时候确实点了对齐，但是为什么还会出问题呢?跟文字按钮对齐一样，对齐的方式选错了。一般来说，我们都会默认将飞机当做是一个正方形来进行对齐，但由于图形形状的缘故，这样做必然是错的，将会导致 icon 过于靠左。
右边侧那枚按钮看起来就是对的，面对这种特殊的，带角的形状，一定要保证每个角距离按钮边缘的距离是一样的，而这种对齐的方式不能再将 icon 当做是一颗正方形来看。
这就不能依赖 Sketch 的对齐工具了，你要自己画个圆形作为参考线来进行对齐。
如下图，播放按钮也有三个角，那么做它的对齐工作也要注意啦。左边图那枚按钮就是直接点对齐的产物，看起来非常奇怪，对吧?
记住了，有角的 icon 要保证对齐的唯一方式是保证三个角到对应边的距离相等。
记住这些点
边缘有角的图形要拉长一些才能在视觉上与方形边缘的长度对齐。
制作文字按钮时一定要记得调整行距。
有角 icon 的对齐方法是保证每个角到边的距离相等。
三.视觉圆角
圆角也有细节?不是设置一下就好了么?当然不是，一个简简单单的圆角也有很丰富的细节。我们前面说过了，眼睛看到的东西并不能尽信，先来看看下面五个圆并尝试回答哪个圆最圆。
我问过了很多人，大部分的回答都是 3 和 4 比较圆。第一个圆有点瘦，而第五个又有点胖，都不是很圆。还是学上面用到的套路，我们把 3 和 4 叠起来看。实际上 3 号是一个正圆形，而 4 号圆被做胖了一点点，并不是一个正圆，不过也正因如此，很多人会认为 4 才是一个正圆。
这里存在一个现象，经过一点点修改(变胖)的圆对于人的肉眼来说会比正圆更像正圆，这句话有点拗口，但是就是这个道理。看看下图，左手边的圆是一个正圆，右手边的圆是一个经过修改的圆，你瞧瞧是不是这个感觉。
那么我们又该如何利用这种无法规避的错觉呢?利用这一点最常见的地方就是圆角啦，而最著名的实例当然就是在 iOS 里面最常见的圆角了。
我们常用的几款设计软件，Sketch、PS、Ai 提供的圆角设置用的是非常直接的计算，就是用一个物理正圆来计算你要的圆角，我们上面说到，人眼不会认为正圆是正圆，所以这也是你无法在 Sketch 直接画出 iOS 圆角的最大原因。
打开这些软件做个圆角试试看，人眼对于直线在某个点开始转成曲线非常敏感，软件确实使用了一个完美的正圆来做圆角，但是给人的感受就是生硬且不自然。
我们拿那个视觉正圆来手动做个圆角比比看。
生硬的过渡瞬间消失，用非正圆画出来的圆角非常丝滑。
这枚非正圆因为胖了一些，多出来的那点正好给予了一定的过渡，让直线向曲线的改变更加平顺。这也是更接近 iOS 圆角的圆角制作方法。
我们把两个圆角画法放到一起比较。
圆角按钮也同样适用。
你的眼睛肯定能够察觉得出来右手边的那组按钮的圆角看起来更圆，更自然，也更悦目。
这个技法在 App 的 icon 的制作上也有大量的使用空间，在深入分析之前，我们来看看下面两个 icon。
左边是 Sketch 正圆圆角直出，右边是非正圆手动制作的 icon。很明显，右边那个更像 iOS 的 icon，看起来非常悦目，非常舒服。业界内也将绘制出这样的圆角的曲线称为Lamé 曲线 （Lamé curve），由一位法国数学家， Gabriel Lamé 发现并命名。
这种曲线的方程式如下，从 iOS7 起，iPhone 所有的 icon 都基于此进行设计。除了那些 blingbling 的细节以外，除了这一种说法之外，还有说是由连个堆成的羊角曲线拼出来的。iOS 还有很多这些内涵深厚的细节，不得不感叹用户界面设计真是一门精深的学问。
上面提到的参考线在这儿都有科普：《新手科普文!每个设计师都该懂的参考线完全手册》
后面人们又根据黄金分割等理论加上了一些必要的参考线，最后就形成了 iOS App icon 的设计规范。
记住这些点
完美的正圆画出来的圆角会有因过渡生硬而产生非常明显的不自然感。
要做出 iOS 的圆角矩形的那种高端圆角需要一顿手动操作。
原文地址：User Interfaces
