iOS 7 的圆角图标是怎样一个图形?

[图片] 图片截自: Apple - iOS 7 (即 design_icondraw.mp4: http://movies.apple.com/me…
关注者
2,628
被浏览
374,667

28 个回答

研究了一下, 应该是用的两个对称的羊角曲线(

Euler spiral

)拼出来的。

截取羊角曲线上的一段, 从原点开始斜率取从0到1

具体用了笨方法, 在AI上用45°倾斜的直线去切

对称复制一下

最后是效果图, 和官网截图完美契合

效果图

^____________^

2017/10/20 补充,请见专栏文章:从圆角到圆角

以下答案 2013/06/15 撰写

---

我作一下补充,从逆向绘图的角度开始。我觉得逆向是了解一个设计的最好手段,无论是简单大概的还是复杂精确的,而逆向会碰到两个问题,这两个也是设计生成的最主要的人为操作:选择和逻辑。逻辑比较容易找到线索,比如是同心圆或者内接外切还是中心线对齐等等再到复杂泛化一点的逻辑,而选择掺杂于逻辑之中,有时较难确定。

仅仅是对这个图形的逆向解读,与评价 iOS 7 及其他无关。

iOS 7 的图标图形,在官方网站中有绘制演示( Apple - iOS 7),粗一看就是根据各种几何关系(就是逻辑)生成的图形,而且发布会那天开头有一个视频也是类似这种点线形式的图形呈现。下面是我的一个逆向绘制:



1. 120 px 的正方形。为什么是 120 px,因为以 iPhone 为例。
2. 27 px 四周圆角。为什么 27 px,这是一种选择,或许是经过列举比较选择而出的(我倾向于这,具体下面有介绍),或者 27 是个好数字。
3. 沿倒角圆弧作内接正方形。
4. 作内接正方形的内接圆。以内接正方形边长的 0.6 为直径作圆,为什么是 0.6,这是一个选择,选择背后的考虑或许可以挖,在这略过。
5. 再以刚才的圆作内接正方形。
6. 以刚才的内接正方形作内接圆。
7. 拉出那些分割线。
8. 开始处理圆弧部分,放大以便看得清。
9. 切掉 1/2 圆弧以及部分上边直线。
10. 在这两线段之间作 G2 连续过渡(曲率连续)的曲线。
11. 对称复制刚才的半段。
12. 处理剩余其他几个角。

可能从 9 开始的处理方式很多人不太了解,因为这是工业设计中较常用的处理手段。但因为都是关于视觉对曲线过渡的感官体验,所以在平面设计中也能碰到,在此作一下简略介绍。


通常在平面设计软件中(我接触有限,包括脚本之类并没去查询过)圆角就是软件提供的默认工具,那么画圆角四边形就是一个矩形的数值可以个圆角的弧度值。

上图 2 就是一个圆角四边形,它有两个数值(因为是正方形),边长和半径为 27 的圆弧。这样的过度,在图示红点处,曲率发生了突变(曲率就是半径的倒数),从 0 直接跳到 1/27 了,这种突变在视觉上的体验是怎样呢?

现实是这个问题很复杂,因为人的视觉感知力有阈度,而且不同情况下会不同比如环境等等,但不可否认的是,这个曲率突变是存在的。而这在产品设计中就非常容易察觉了,特别是高光介入,而且产品的三维带动人动态的去感知,尽管可能人是不动的,比如曲线不流畅就是曲率过度的问题。

上图 12 就是用曲率连续的曲线来过度,它已经不是圆弧了,所以不能简单用 R=27 的圆弧来形容了,而是高阶的曲线,用这条曲线来拟合圆弧,是的在视觉上感觉它还是一段 R 值恒定的圆弧。而实际上,它从 0 到 27 有一段连续的过度了,在视觉上它就更加流畅。

这里面牵扯到很多问题,像圆弧这些曲线(有时称“欧几里德”曲线)是确定的、简洁的以及有数据的,而高阶曲线的数学描述是复杂的,有时前者会更纯粹而后者过于驯服化。从这一点来说,上面步骤中 9 是一种协调,因为这可以保证了中间点的弧度确定是 27,如果我不是半段半段来拟合,而是整个 1/4 圆弧用曲线来拟合,那就在理论上没有确定的点了,除了两头的无穷大半径。

我这个逆向做对了吗,没有,因为我也只是拟合,而且 Apple 那个动画中圆弧上的几个点不好解读,如果解读成曲线内的 point (简单理解成曲线内分段点吧,说详细还复杂),那么看上去连接直线一方的过度有过压缩,理解成分段的指示,那就不太理解连接直线处的两个点,因为看上去不是均分。

另外在曲线的连续上没必要做到 G3 连续,所谓 G2 连续如上所说是曲率连续而 G3 是曲率连续的曲线曲率连续。

曲率连续在平面设计是否必要?看情况。即使圆角四边形,也要看情况,有的过度处的生硬察觉不出,因为和整体的比例有关,有的很容易察觉出,有的还能带动视觉产生各种偏差感知,比如直线段的向内凹陷等等。

平常遇到圆角四边形的时候可以注意一下,尤其是那种大大咧咧的设计,就很容易体会到那种不连续的不舒服。在这不列举了。


一个简单的例子,就是 iPhone,很多 App 制作演示的时候就是直接用圆角四边形模拟的,而实际上它不是圆角,右侧是用 Apple 官方外观图纸配上去的,而左侧来自:Mailbox - Put Email In Its Place

那么在使用平面软件时如何考虑这个问题,其实通常情况不必考虑这个问题,因为只要仔细控制贝塞尔曲线的控制点和手柄就可以了,你感觉光滑连续漂亮了就可以了,因为视觉是判决者,只是在直线到曲线过渡是要多注意。另外 Type is Beautiful 曾经有过一篇文章:FF-DIN 圆体之工艺、设计与性感 里面有一些类似的介绍及手段,就是作好直线到曲线部分的缓冲,在这篇来说,就是曲率的连续过渡。

至于圆角四边形,除了通过比例关系来校正外,或许有插件能快速绘制?或者等软件方了。

补充:另外的图形生成方式可见 @Ami 的答案,需要补充的是,逆向或者猜测生成过程是寻找设计内的逻辑,而不是设计师的生产过程,设计师设计可能更没有逻辑,而尺寸的规整或许是最后。

补充 2:步骤 10 和 11 具体操作时需要一些编辑,如果直接 G2 连续还是会在两半段圆弧的中间形成曲率的一个下凹尖点。以及在原圆弧中点出要求新曲线的弧度半径为 27 是没有必要的,因为只是一个点的弧度,只要要求这个位置就行,也就是首中尾三个位置确定,中间曲线去拟合原 27 的圆弧。

补充 3:如何用 Adobe Illustrator 等绘制 iOS 7 里的圆角四边形?