考虑一下,如何用视觉感知的方法来解决这个问题。
这种圆角在标准圆之外有一个额外的区域,使直线与曲线连接的地方没有那么生硬。
仔细观察这两个圆角之间的区别。
现在我们可以将这种方法应用于圆角矩形的按钮。
我猜你可能已经注意到右边的按钮有更平滑的圆角,对你的眼睛来说更舒服。
iOS图标也是如此。如果用简单的圆角工具是做不出这种圆角的。在我们深入讨论这个话题之前,我们先来看看下图两个不同的圆角矩形。
第一个是在sketch中创建的圆角矩形。第二个形状是超椭圆形,也称为Lamé曲线。它是由法国数学家GabrielLamé发现的,根据不同的公式,可以做出看起来像圆角矩形的形状。
Marc Edwards提出了Lamé曲线的公式,形成了光滑和视觉上完美的形状。iOS 7之后的图标都是基于它的。
后来,这种形状通过添加黄金比例和网格来规范化,用于指导绘制图标的设计师。
使用超椭圆形状的主要优点是它们更加圆润和光滑的外观,但是也有缺点,就是这些非标准的形状难以直接应用到实际的界面中。
程序员可以组合多个SVG,在代码中添加特殊的公式或脚本,或者使用iOS为其应用程序图标使用PNG蒙版。
针对设计师而言,有一个简单的调整圆角的方法。只需要将圆角矩形转换为轮廓,进入形状编辑模式,并手动将曲线手柄彼此靠近。
与传统意义的圆角矩形相比,这种超椭圆形更为生动,这对于绘制视觉准确的图标来说很重要。
划重点:
1. 标准的圆角看起来像是人造的,你可以很容易的看到直线突然变成曲线的点。
2. 视觉过渡自然的圆角需要特殊算法或手动调整形状。