Question

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

Answer 1

我作一下补充，从逆向绘图的角度开始。我觉得逆向是了解一个设计的最好手段，无论是简单大概的还是复杂精确的，而逆向会碰到两个问题，这两个也是设计生成的最主要的人为操作：选择和逻辑。逻辑比较容易找到线索，比如是同心圆或者内接外切还是中心线对齐等等再到复杂泛化一点的逻辑，而选择掺杂于逻辑之中，有时较难确定。
仅仅是对这个图形的逆向解读，与评价 iOS 7 及其他无关。
iOS 7 的图标图形，在官方网站中有绘制演示（ Apple - iOS 7），粗一看就是根据各种几何关系（就是逻辑）生成的图形，而且发布会那天开头有一个视频也是类似这种点线形式的图形呈现。下面是我的一个逆向绘制：
3. 沿倒角圆弧作内接正方形。
5. 再以刚才的圆作内接正方形。
6. 以刚才的内接正方形作内接圆。
7. 拉出那些分割线。
8. 开始处理圆弧部分，放大以便看得清。
9. 切掉 1/2 圆弧以及部分上边直线。
10. 在这两线段之间作 G2 连续过渡（曲率连续）的曲线。
11. 对称复制刚才的半段。
12. 处理剩余其他几个角。
可能从 9 开始的处理方式很多人不太了解，因为这是工业设计中较常用的处理手段。但因为都是关于视觉对曲线过渡的感官体验，所以在平面设计中也能碰到，在此作一下简略介绍。
通常在平面设计软件中（我接触有限，包括脚本之类并没去查询过）圆角就是软件提供的默认工具，那么画圆角四边形就是一个矩形的数值可以个圆角的弧度值。
现实是这个问题很复杂，因为人的视觉感知力有阈度，而且不同情况下会不同比如环境等等，但不可否认的是，这个曲率突变是存在的。而这在产品设计中就非常容易察觉了，特别是高光介入，而且产品的三维带动人动态的去感知，尽管可能人是不动的，比如曲线不流畅就是曲率过度的问题。
上图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 圆体之工艺、设计与性感 里面有一些类似的介绍及手段，就是作好直线到曲线部分的缓冲，在这篇来说，就是曲率的连续过渡。
至于圆角四边形，除了通过比例关系来校正外，或许有插件能快速绘制？或者等软件方了。