打开这些软件做个圆角试试看,人眼对于直线在某个点开始转成曲线非常敏感,软件确实使用了一个完美的正圆来做圆角,但是给人的感受就是生硬且不自然。
我们拿那个视觉正圆来手动做个圆角比比看。
生硬的过渡瞬间消失,用非正圆画出来的圆角非常丝滑。
这枚非正圆因为胖了一些,多出来的那点正好给予了一定的过渡,让直线向曲线的改变更加平顺。这也是更接近 iOS 圆角的圆角制作方法。
我们把两个圆角画法放到一起比较。
圆角按钮也同样适用。
你的眼睛肯定能够察觉得出来右手边的那组按钮的圆角看起来更圆,更自然,也更悦目。 这个技法在 App 的 icon 的制作上也有大量的使用空间,在深入分析之前,我们来看看下面两个 icon。
左边是 Sketch 正圆圆角直出,右边是非正圆手动制作的 icon。很明显,右边那个更像 iOS 的 icon,看起来非常悦目,非常舒服。业界内也将绘制出这样的圆角的曲线称为 Lamé 曲线 (Lamé curve),由一位法国数学家, Gabriel Lamé 发现并命名。
这种曲线的方程式如下,从 iOS7 起,iPhone 所有的 icon 都基于此进行设计。除了那些 blingbling 的细节以外,除了这一种说法之外,还有说是由连个堆成的羊角曲线拼出来的。iOS 还有很多这些内涵深厚的细节,不得不感叹用户界面设计真是一门精深的学问。 上面提到的参考线在这儿都有科普:《新手科普文!每个设计师都该懂的参考线完全手册》
后面人们又根据黄金分割等理论加上了一些必要的参考线,最后就形成了 iOS App icon 的设计规范。
记住这些点 完美的正圆画出来的圆角会有因过渡生硬而产生非常明显的不自然感。 要做出 iOS 的圆角矩形的那种高端圆角需要一顿手动操作。 (责任编辑:admin) |