圆角 Apple的那些从圆角到圆角

2021-04-16 23:15:12 奇闻趣事圆角,曲线,曲率,圆角,圆弧

IPhone一直都是关于屏幕的。史蒂夫·乔布斯在2007年的发布会上称第一代iPhone的3.5英寸显示屏为“巨大的屏幕”，还联想到iPhone设计初期的“无限池”形象。所有的设计元素都跟随着屏幕，不能分散用户的注意力。iPhone X的全屏设计将把这一理念的实施推向一个划时代的高度，分为两个时代。

但是只有一个大屏不能打开未来，屏幕比例、帧宽等参数也不能作为划分时间的依据。用户的认知不受某些参数控制，从89%增加到90%对用户来说没有质的变化。质变必须作用于用户的认知，而不是靠语言错觉或者宣传手段来说服，一个关键，也就是设计，要靠真实的形象和产品来传递。

一个革命性的产品背后有很多技术支持，每一个创新的实现背后都有很多复杂的具体工作，但是用户实现的是产品的“外在形象”，这是不言而喻的，不是技术造成的。用户认可的产品外部形象与技术无关。比如用户认可的手机就是它的外在形象。手机内部的CPU或者手机的制作过程对用户来说是没有意义的。所以设计师工作的两面性在于，在舞台前，需要将外在形象与背后的技术分开，而在幕后，需要将外在形象与背后的技术联系起来。我们看到的炫耀技巧的设计，是设计师期望外部形象与背后的技术相关联的设计，是我们经常看到的针对参数的设计。

产品的外部形象越简洁，越容易识别，脱离技术连接就越有说服力。

很多手机厂商总会用一种手段来推广自己的大屏手机，比如平面广告或者视频，就是让手机屏幕上的内容和背景融合，让人觉得手机不见了，或者说边框不见了。这种宣传手段强调的是手机的技术参数，与“外在形象”关系不大。

整个屏幕与iPhone X上的技术脱节，塑造iPhone X整个屏幕外部形象最重要的设计特点就是四个圆角。柔性OLED屏幕的裁剪和折叠，相应的电路堆叠技术，或者圆角处的亚像素抗锯齿渲染等技术内容，厂家都可以用来向用户说明自己创新的独特性，但对于用户来说，真正在意的是外部图像，也就是这种独特的圆角全屏。总的来说，这么大的圆角屏是反技术的，不符合技术的理性取向，也就是为什么需要更多额外的技术支持，但是在产品之上，在用户关心的外部形象之上，这个圆角屏是很自然的结果。根据手机外形形成的统一的屏外轮廓，符合全面屏的概念；另一方面，突破常规的图像(屏幕永远是正方形)可以显示它的革命。

苹果标志性圆角曲线在iPhone X中的应用，通过其外部形象，将它划时代的意义向前推进，与其他厂商的同类产品形成了差距。人们会进一步认为iPhone X才是真正的综合屏，而其他的设计，比如屏幕外轮廓不跟机身形状，会被认为是不完整的。同时，如果屏幕圆角很小，更像是技术创新产品，脱离不了技术关联感，也就是无法给用户认知带来创新。在iPhone X上，屏幕的圆角以及圆角形成的整体图像的重要性，可以通过苹果对屏幕顶部缝隙的处理来验证。从苹果的产品图纸和宣传资料来看，屏幕上的缝隙不仅是Notch不加掩饰的，而且是强调和渲染的。为了突出Face ID并形成象征性的视觉元素，全屏图像也以不引人注目的方式得到强调。我们甚至可以确认，iPhone X上端屏幕间隙两侧的圆角区域，只是为了制造一个“外部图像”。从功能性、技术性、合理性等方面来说，更倾向于让屏幕上端齐平无缝隙。这种外在形象是如此重要，苹果甚至在软件界面上也不会过分掩盖这种差距。

我们知道，从iOS开始，苹果就把产品上的圆角曲线应用到界面上，主要围绕圆角四边形图标。从iPhone X上的iOS 11可以看到，界面上增加了更多的圆角曲线元素，如上图中的转角所示，从外到内，形成了一层更加连续的度。从最外面的圆角到手机图标，如果仔细算的话，这个角至少可以算。

到处都是圆角。

早期的电脑用的是CRT显示器，是真空玻璃管制成的。为了保证其安全性、气密性和工艺性，CRT显示器玻璃应做成凸形，其周围的外轮廓不是正方形，而是凸弧形成的四边形，四角当然是圆角。所以早期的CRT显示器基本都是凸形的，四个角都是大圆角。

以上图片是1981年的施乐之星8010和1984年的麦金塔电脑。我们可以看到当时屏幕周围的设计是如何抵消曲面屏的反直觉的。通常的做法是用盖子把一个相对方形的显示区域圈起来，比如施乐Alto，四个角的圆角可以让显示区域显得更平整(因为四个角收缩的更多)。施乐之星8010是封面下的内容展示区，而Macintosh是大黑边，更小更平。Macintosh上这个黑边是界面显示黑，不是显像管上的非显示区，和“用黑盖住iPhone X上的屏幕缝隙”是一样的。

麦金塔界面周围有小圆角，可以看做是设计好的圆角。

左图为1983年发布的Lisa Office System 3.1(图片来自维基百科)。可以看到界面的四个角和计算器的界面轮廓都有圆角四边形。

根据安迪·赫兹菲尔德在《原麦金塔》上的文字，苹果在软件界面上出现圆形四边形可以追溯到1981年，安迪·赫兹菲尔德在《圆形矩形无处不在》！在这一节中，我们谈论圆形四边形的诞生故事。当时，苹果公司的天才程序员比尔·阿特金森(Bill Atkinson)正在向团队展示他如何在只有68000个处理器的丽莎和麦金塔电脑上快速绘制圆形和椭圆形。史蒂夫·乔布斯看了之后有了另外一个想法。他说:“圆和椭圆都不错，但是你能画出圆角的四边形吗？现在可以画了吗？”比尔·阿特金森回答说这很难做到，他并不认为这真的需要一个圆角四边形。史蒂夫·乔布斯立即强烈回应:“到处都是圆形的四边形！看看这个房间，你就知道了！”他还带比尔·阿特金森出去看看他能遇到多少个圆四边形。最后，比尔·阿特金森被说服在第二天下午拿出了令人满意的结果。

然后，苹果的软件界面上到处都是圆形的四边形。

iOS的圆形图标

随着2013年iOS 7的发布，苹果更新了iOS上标志性的圆角图标轮廓，将工业设计中的曲线连续性概念应用到视觉设计中。iOS 7之前的圆角图标也包含了通用图形设计软件中绘制的圆角四边形，圆角部分为圆弧，所以直线和曲线的连接点处的曲率立即从0过渡到一个恒定值。视觉感受是过渡不顺利。为了保证平滑，需要在从直线到曲线的过渡中进行连续变化，从0逐渐过渡到某个值，而不是从0跳到某个值。实际上不是简单的事情，曲线的过渡也是讲究技巧的事情，也需要一定的数学意识。

在介绍新的圆形图标轮廓时，iOS 7在上图右侧给出了一个线框图。图中圆角处的密集点比较混乱，反向开裂并不难。因为苹果最近在UI设计资源上下载了iOS UI素材，里面有圆角图标轮廓的矢量图，我们可以通过这个矢量图来挖掘一些信息。

简单的概念

上图A显示的是1/4圆弧过渡的圆角，iOS 7之前的圆角图标，平面软件通常绘制的圆角四边形，以及我们通常所说的“圆角”，都是上图A所示的方式。因为直线的曲率为0，圆弧的曲率为固定值，所以从直线到圆弧的曲率有一个突变。虽然是切线连续(G1连续)，但不能达到曲率连续(G2连续)。视觉上我们可以清晰的感受到不顺畅的过渡。

在上图b中，用一条曲线代替四分之一圆弧进行过渡。绘图时要求连线两端达到连续曲率，即该曲线的曲率从两端的0开始逐渐连续增大。我们从图的四个角可以看出过渡是平滑的，但是有一个问题，似乎四个角不够圆。虽然光滑但不够圆，但我们也可以从曲率示意图中观察到，这条曲线的曲率不具有圆的特征，因为圆的曲率处处相等，齐次统一。

我们需要做的是综合以上两种情况。曲线与直线的连接端保证了平滑过渡，并尽可能提到曲线的圆度，即曲线中段部分曲率的变化极其适中，接近圆的均匀曲率特性。

上图C是采用这种策略的标志，曲线两端连续过渡，中间缓慢过渡，接近相等。

但是上面的图C只是一个大概的示意图。实际工作中，要求会比这个高。比如圆度有多高，甚至可能需要考虑曲率过渡的速度或加速度。此外，还会涉及到数据传输，比如从设计到生产的传输过程中，如何保证形状的逼真度。

但是让我们否认一些关于iOS圆形图标的常见猜测。

IOS圆角图标不是超级椭圆

一个有趣的现象是，如果反方向更依赖于猜测，你会发现结果是指向你自己的假设，而讨论iOS圆角图标是什么样的图标和曲线，或者在产品上拟合曲线，A、B、D走向不同，大家都认为是正确的，看拟合结果，完全吻合。

比如iOS 7发布后不久，就有人觉得是Superellipse，很多人看到这个吓人的专业词就觉得很接近了。而且他们看试衣图的时候，都是很接近的搭配，还给了一个如何在Photoshop中使用的指导。但是他们不知道平面软件用的是三阶贝塞尔曲线，拟合用的是五阶方程。实际上，超椭圆是一条自始至终的曲线，但没有直线段。iOS 7的圆角图标明显有直线部分。如果这个可以匹配，可以想象用视觉来判断是否高度拟合是多么的不靠谱。

根据维基百科，超椭圆是椭圆函数的推广，即曲线阶数为2时为椭圆，阶数为4时为上图左侧所示的正方形圆，圆与正方形之间有一个图形(诺基亚的MeeGo UI图标被认为与Squircle类似)，上图右侧为5阶曲线。

目测可见超椭圆为曲线，找不到圆度。从曲率分布示意图可以看出，曲率始终处于连续的过渡状态，阶数越高，加速度越大，即曲率过渡越平滑。

类似于超圆角，Rhino中有一个圆角工具(右键)。圆锥圆角四边形用圆锥曲线(圆锥曲线)绘制成四分之一图形。圆锥圆角四边形的一个极值是圆，另一个极值是直角四边形，所以圆锥圆角四边形是没有圆度的曲线。二次曲线的数学结构简单，因为阶数不高，所以适合画一些不圆不方的图形。与上述超椭圆曲线相比，可以发现圆锥曲线的圆四边形线的成形能力不如高阶曲线，即一个跨度内曲线的形状成形能力非常有限，因此除了特殊要求外，这种曲线很少使用。另外，由于是二次曲线，输出数据时要注意。

IOS圆角图标不是羊角螺旋

欧拉螺线或Cornu螺线与上述类似。如果你符合iOS的圆形图标，你可能会得到一个高度匹配的结果，但事实并非如此。

过去，爪形螺旋常用于公路和铁路工程，“以缓解直线路线和圆形路线之间的曲率变化”(维基百科介绍)。爪形螺旋的主要特点是曲率从0开始，随着曲线长度(弧长)的增加而线性增加。因此，当爪形螺旋的尾部与圆相连时，曲线的曲率必须是连续的。上图右侧所示的两个图形，一个是与圆相连的(圆四边形内部)，另一个是一个爪形螺旋的镜像连接(圆四边形，左上角)，两者在曲率上都是连续的(G2连续)。

由于爪形螺旋的这一特性，曲线随着曲线长度的增加而线性增加，这使得它有许多应用。在上图右侧，虽然我们可以看到曲率变化率的曲线(红线)有尖点和不连续性，但曲线本身(低阶)是光滑连续的。上图右边的圆角四边形左上角，使用了爪形螺旋的镜像连接，曲率从0到某个值线性增加，然后回落到0。按照我们上面的基本概念，这样的曲线不是圆度。

由于爪形螺旋具有这样的特性，我们可以在中间加一个圆弧，如上图的直角四边形右上角所示，得到一个连续的圆角，圆度得到保证。曲线与直线段是连续的，三条曲线形成的圆角曲率变化率不是连续的，但也是很简单的数学结构，从0增加到某个值，停留，然后下降到0。爪形螺线可以用三次曲线逼近，因此在实际应用中有相应的便利，比如在平面矢量绘图软件中使用它绘制类似iOS圆角图标的曲线连续圆角四边形。

方法是，你可以从维基百科下载爪形螺旋矢量图(SVG)，然后定义圆角曲线中圆弧的大小，然后确定圆角曲线的总长度，也就是画出上面图1所示的图，然后画出图2所示圆弧一端的切线和法线，画出直线的垂线，形成一个类似三角形的形状。然后将这个三角形移动到爪形螺旋线，固定位置，如图3所示，然后移动斜线找到这个斜线与爪形螺旋线的相切位置，如图4所示切掉爪形螺旋线，得到一段爪形螺旋线，放大或缩小，放入圆角曲线圆弧的两端，如图5所示。

这种绘制方法可以方便地在平面软件中完成，因为目前平面软件中没有其他相应的工具可以直接或辅助绘制这样一个圆角四边形，可以保证曲率和圆度的连续性。那么曲线细化的关键是确定弧段的大小及其占整个曲线长度的比例。

羊角螺旋这样画出的圆角四边形有两个缺点(羊角螺旋两端的中间圆弧)。一种是整条曲线的曲率是连续的，但曲率变化率是不连续的。另一种是羊角螺旋线线段的曲率增加是线性的，所以曲率变化的速率是恒定的，虽然曲率有加速度。当对曲线的质量有较高要求时，或者在3D产品上实施时，不仅对产品的形状有要求，对产品的光学性能如高光也有要求时，就需要使用更平滑、更连续的曲线，因为重要的是所有的差异都可以用眼睛看到。

IOS圆角图标

在苹果的UI设计资源网页上，下载了iOS的UI素材，素材中提供了iOS圆角图标的矢量图，可以导入到各种绘图软件中使用。此外，所提供向量的分布模式与iOS 7发布时描述的圆角图标的分布模式相同，因此可以确认该矢量图的真实性。

宏观上iOS的圆角图标由四条直边和四条曲线组成。从圆角曲线曲率变化示意图可以看出，它满足上述要求，即首先是一条曲率连续的曲线，然后可以保证曲线的圆度，使其看起来像一条圆弧。另外我们可以看到曲率变化有加速度，曲率变化的状态大致可以分为五个阶段。第一阶段，即直线附近，曲率以较慢的速度增加，达到一定值进入第二阶段，即快速增长阶段。达到一定程度后，连续平滑过渡到第三阶段，几乎以恒定速度以极其平缓的速度变化，即圆弧阶段，之后变化过程方向相反，第四阶段是快速下降，第五阶段是缓慢下降到0。

圆角处“慢-加速-平缓-加速-缓慢”的变化轨迹比较典型，但应用要看具体情况，用iOS圆角图标的曲率变化曲线并不能满足各种要求。

iOS图标圆角处的曲线有11个分界点，分为10条曲线，均为3阶贝塞尔曲线。如果你仔细看这10条曲线，你会发现它们并不是严格曲率连续的(G2连续)。当你看曲率示意图时，你可以看到曲率值有轻微的跳跃。而不是形成尖点，有阶段差异。如上图蓝圈所示，每两条相连的曲线相交处都可以找到这些阶段差异，但它们太小，在上图中看不到。

虽然从严格的数学意义上来说，这样的曲线连接只能实现切线连续性(G1连续性)，但我们是否达到一个标准取决于公差范围。如果在公差范围内，那么就是曲率连续。更重要的是，我们要从宏观角度和实际应用来判断，这样的阶段差异不会影响曲线的平滑度。

那么这些线段和线段差异是如何产生的呢？我们先在圆角处划分曲线。

如上图所示，当我们测量分段曲线并测量其曲线长度(弧长)时，我们会发现上图中标注的这些线段的长度是完全相同的，除了靠近直线端的两条曲线段，它们被再次分段。

在这种重新分割中，一条曲线长度为A的曲线被分成两条曲线长度分别为0.46*a和0.54*a的曲线。这种切割方式看起来很随意，推断有三种可能:一种是留给作者的签名，可以用来追踪(万一被他人侵犯)或者其他功能；第二种可能是留下来干扰反向的干扰因子；第三种可能是保证传输过程中数据的安全性和保真度。

上图是保证数据传输的安全性和保真度的例子。第一条曲线是直线曲率连续的五阶曲线，所以交点处的曲率为0。如果这个曲率连续的曲线不进行处理，传输到三阶曲线最高的软件，很有可能在曲线变换过程中变成中间。如蓝色所示，曲线弯曲方向已经改变。为了避免变换过程中不必要的错误，在一些极值处，比如从0开始变化，将其设置为一个接近0的值，比如上图所示，可以给它一个很弱的曲率。(注:这是个人经验，未经理论验证)

我们不需要考察0.46*a和0.54*a的原点，因为我们可以确定iOS中这个曲线段的曲线长度(弧长)相等，都是三阶曲线。那么首先可以否认的是，这个图肯定不是设计师一张一张画出来的，也不是程序自动生成的。因为这10条曲线是太多可能性中的一种，合理的解释是通过其他曲线和高阶曲线转化为多段三阶曲线，而这个转化过程是基于等曲线长度的，从而达到上述由多段曲线长度为a的曲线组成的圆角。

那么为什么不用3阶多段曲线直接画呢？由于三阶曲线最多只能满足G2连续性，因此不能有效地用来绘制光滑曲线。如果要使用多段曲线，需要使用高阶曲线，如5阶或7阶。

iOS圆角图标如何保证圆度？我们可以看看圆角部分中间的两条曲线。根据上述长度关系，中间两条曲线占总曲线长度的1/4。我们可以看到，一条曲线两边的R值略有不同，可以说明这两段的设计者都是圆弧要求的，但为什么会不同呢？因为圆弧是用三次曲线近似的，所以如果用二次曲线，可以画出曲率完全相等的圆弧。但是二次曲线的引入会给后续的图形添加和数据传输带来不可预测的复杂性。在3D相关设计中，大部分场景需要三次曲线来画圆弧。基本上，

所以绘图问题如上图所示，x，r，l的值需要提前确定，这些值的确定就是这个圆角的设计工作。x是直线一端到圆弧中心的距离，必须是正数。圆弧形成的圆角是前面提到的G1连续圆角，X的值为0。R代表圆角的大小，但是因为我们要做一个曲率连续的圆角，一端的圆弧小于1/4，也就是上图中的L值，所以R大小的设计不能完全依赖于G1连续圆角的感觉。X，R，L值的确定是一个需要反复推敲的过程，不断画出草稿来找出答案。

x，r，l的值一旦确定，就是一个如何画图的问题。

上图是到达iOS圆角图标最直接快捷的方法。图1是两条直线段之间的7阶2跨曲线，即总共有9个控制点，而7阶曲线在这里是高度可塑和对称的，因此只需操作4个控制点就可以完成任务，第二个和第三个控制点由于曲率连续性将与直线共线。图2是拟合圆，特别是对角线区域，做高拟合，前后操作控制点。图3显示当曲线被调整到令人满意时，它从中间断开。图4示出了具有相同长度的四条曲线的七阶曲线，该四条曲线是通过再次切割并将圆角曲线的一半切割成四个相等的部分而获得的。图5显示了将这四段7阶曲线转化为3阶曲线(四个控制点)，并进行微调以保证每两条相连曲线的切线是连续的，曲率的截面差控制得尽可能小。图6是镜像后的结果。

这种画图方法的关键点在于拟合圆，需要对控制点进行操作，也可以使用一些分析工具(比如分析最大曲率和最小曲率之差)，使曲线尽可能接近圆。还有一个关键点就是曲线要先分段再按顺序降阶，这样降阶产生的变形就能很好的控制。如果在第三步将完整的7阶曲线直接转换为3阶8段曲线，不仅形状误差会超过允许的公差，更差的曲率变化曲线也很难达到平滑。

但是这种方法有一个缺点，就是圆的拟合部分要花时间操作，圆角曲线的中点不在预先给定的准确位置。改进方法如下。

设5阶2跨曲线的一端与直线的曲率连续，另一端与中间圆弧的分解率连续。其他的操作方法和前面的方法类似，即将曲线段等分，缩减为三阶曲线，微调曲率，完成镜像。

以上方法参考的是类似iOS图标圆角的10条曲线的绘制，但在实践中有时不需要那么复杂，可以考虑以下方法。

我们知道三条曲线，所以可以用五阶曲线直接连接一条直线和一条圆弧，只要调整曲线的曲率变化即可。

此外，它可以用三阶曲线来完成。当使用三阶曲线时，操作只有一个控制点。因为另一个控制点必须与圆弧和直线连续，所以它必须位于直线延长线与圆弧端点切线的交点处。因此，这个可操作的控制点可以被拖动以实现连续曲率。曲率连续的位置点只有一个，虽然用手拖动只能尽量靠近。而正是因为这个特点，如果用三阶曲线来完成直线和圆弧之间的曲率连续性，那么这个三阶曲线是确定的，所以算法可以用来完成求解，前提是确定了上面提到的x，r，l的值。在x，r，l的值确定的情况下，用这种方法形成三条曲线的连接可能不是很有效。比如上图右下角所示的三阶曲线，曲率最大值出现在内部而不是尾部，会影响曲线的质量。如果在这种情况下可以改变x的值，即可以微调三阶曲线与直线的连接位置，可能会带来更好的效果。

虽然用三阶曲线绘制圆角曲线相对简单，只需要移动一个控制点，但由于缺少曲率分析和渲染模块，在平面软件中实现操作仍然很困难。

苹果杰出的交互设计师Bas Ording(就像iOS时代的Bill Atkinson)在2013年申请了US9396565的专利(2016年获批)。专利名称为“用户图形界面元素中的边界渲染”。专利内容是画一个三阶曲线的圆角四边形，依据是基于这个三阶曲线的四个控制点是有约束力的。

根据三阶曲线与两条直线和圆弧之间形成曲率连续性后，三阶曲线控制点位置的特点，通过算法实现基础排序。他的圆角生成需要输入圆弧段的半径和圆弧两侧两条非圆弧曲线与圆角曲线总弧长的比值。可以通过输入这两个参数来生成圆角曲线。如果输入四边形的长度和宽度，可以生成圆角四边形。我没有完全理解他的算法，但他给出的结果是上图中Q2Q1之间的距离是Q3Q2的两倍，可见这个算法不能一概而论，只是覆盖了曲线的某个子集，可能他在计算过程中加入了其他限制因素。