什么是“丝滑”的曲线

什么是“丝滑”的曲线

14 2021-12-08 11:58:45

## 背景

今年雷军“被骗”的新闻轰动一时——传闻小米花数百万邀请国际设计师原研哉为品牌Logo升级，而升级后的Logo看起来却跟原本的看起来没什么区别，网友大呼“这钱白花了”、“不就改个圆角矩形样式 border-radius: 19px; 就行吗”......看到原研哉照片后甚至有人说是老罗染发出来骗钱了，老罗本人还出面辟谣。

![](/img/pic/2021120811021416438_png_720_397_58956)
> 小米Logo对比

![](/img/pic/2021120811023349339_png_720_937_529710)
> 老罗辟谣

当然，设计大师带来的品牌升级值不值数百万暂且不讨论，那小米的新Logo真的跟圆角矩形是一样的吗？曾经我也认为是，但在工作中了解曲线平滑后，我对此事有了新的看法。

![](/img/pic/2021120812022107351_png_1534_476_556121)
> 网友自制圆角矩形Logo

## 曲线连续的等级
正如高数中提到的“函数连续不一定可导，但可导一定连续”，函数可导称得上是一种“更高等级”的连续。挪用过来，函数的导数即斜率连续意味着某种好的连续。推而广之，函数的二阶导数连续则代表曲率（曲线的弯曲程度）的连续，等级更高......

曲线的连续也有着多个逐步递进的等级定义：

- **G0** 曲线不出现断点即可，包括折线等最宽泛的连续
- **G1** 曲线斜率连续，曲线没有突刺

![](/img/pic/2021120811243202241_png_810_452_356592)
> G1连续，简单两圆相切各取一段拼起来，看似平滑了但又不完全平滑。栅格为曲率，注意曲率是带符号的，符号表示左右

- **G2** 曲线曲率连续，看起来也流畅了很多
- **G3** 曲率的变化也连续，肉眼已经难以区分，但确实有种说不出来的顺眼感

![](/img/pic/2021120811260009342_png_822_460_417065)
> G2连续，减少了G1连续的“刻意感”

![](/img/pic/2021120811263182743_png_842_468_433570)
> G3连续，已经难以区分差异了

- **G4** 纵享丝滑

![](/img/pic/2021120811271485944_png_828_462_406069)
> G4连续

简而言之，我们日常生活中对“连续”曲线的定义符合G0连续，对“平滑”的定义符合G1连续；对“顺畅”、“美观”的平滑曲线则更多是知其然不知其所以然了。

在工业设计中，对于曲线平滑的要求却不仅仅是G1连续这么简单。

## 圆角矩形和超椭圆曲线

### 圆角矩形是什么

圆角矩形在设计中很常用，既避免了矩形的古板严肃，又避免了圆形空间利用率不足的问题，是一种折衷方案。而圆角矩形的实现也非常简单：将矩形的四个直角用一定半径的圆弧代替即可，通过调整半径大小可以改变圆角矩形的形态，而圆形和矩形此时可以看作特定参数下的圆角矩形（圆角半径很大的方形 and 半径为0的圆角矩形）。

![](/img/pic/2021120811562115749_png_910_562_256626)
> 圆角矩形

此时再回看网友自制的小米新Logo和官方发布的新Logo，会发现官方Logo明显比自制Logo看起来更平滑更舒适，正是因为自制Logo仅为G1连续，并不够“平滑”。

![](/img/pic/2021120811583306750_png_1316_608_358993)
> G1连续的自制Logo，从曲率为0的直线跳变为曲率为固定值的圆曲线

### 超椭圆是什么

超椭圆的函数定义：$$\vert\frac{x}{a}\vert^n + \vert\frac{y}{b}\vert^n = 1$$

超椭圆是G3连续的，即每个象限的曲线变化率是连续的，均为从0连续提升至某固定值，再从该固定值降低到0。在n不同的情况下，曲率变化率会有区别。

![](/img/pic/2021120811312545146_png_670_360_81017)
> 不同n的超椭圆

原研哉的团队也尝试了多种a=b=1且不同n的超椭圆，最终选定的是n=3的这一个，我相信设计师觉得这是美好而和谐的。

![](/img/pic/2021120811281175445_png_885_506_194543)
> 不同n下的Logo

![](/img/pic/2021120812083956052_png_740_690_276651)
> 圆角矩形与超椭圆对比

***PS：超椭圆还有一个特点，整个超椭圆是完全由曲线组成，不包含直线部分的。***

为了贴合修改过的超椭圆边框，其实内部的“M”字母的圆角也做了修改，将原本明显的圆角矩形样式改成了与外框类似的更平滑的曲线。

![](/img/pic/2021120812144149753_png_960_472_330771)
> M字母修改后看起来更舒服了，你觉得呢？

同样的，为了适应外框而修改内部圆角曲线的不仅仅是小米，我们再来看看以出色的工业设计而闻名的苹果。

### 苹果图标中的平滑曲线

从iOS 7开始，苹果更新了自家产品标志性的圆角图标轮廓，将工业设计中常用的曲率连续变化的概念应用到视觉层面，发布了iOS图标设计模板，通过模板设计的App图标都能够满足G3连续，使得整个iOS系统的设计感都得到了提升，让用户看着更舒服。

![](/img/pic/2021120811322241747_png_720_357_180775)
> iOS图标设计模板

站在更高的角度，甚至iPhone X从手机边框到App图标的逐层圆角都得到了统一。

![](/img/pic/2021120811324095948_png_670_356_212701)
> iPhone X的“洋葱式”圆角组合

不过，根据参考资料，苹果的圆角使用的G3连续曲线并非超椭圆，而是多条三阶贝塞尔样条曲线拼接实现的。参考资料中推测这可能是对其他更高阶的样条曲线拟合而来的，或许是为了减少计算资源消耗？

![](/img/pic/2021120812481483356_png_670_450_75453)
> 苹果图标G3连续曲线的曲率变化

总之，参考资料中当年很多人对苹果图标圆角曲线进行逆向和拟合，做了数种推测，俨然已经成为类似寻找圣杯的游戏了。其中一种拟合比较接近的方式是使用**羊角螺线**（aka 回旋线 aka 欧拉螺线，见下文）拼接的G2连续曲线，几乎已经像素级贴合。

***ps：可以找参照物试试手机或电脑的圆角是不是标准圆弧。***

通过这个例子可以看出，高等级连续的平滑曲线不仅在视觉设计中应用，在常见的一些硬件设计中也非常常见。更进一步，在日常生活中我们也有无时无刻不在接触的重要场景——道路设计。

## 道路设计中的缓和曲线

在上述的平滑曲线特性中，从G2等级开始有一个关键点：**曲率连续**。

在我们的直观感受中，曲率是一个模糊的概念，表明曲线的弯曲程度（或者说就是圆的半径倒数），曲率连续的特点似乎并不重要。但在道路设计中，这直接影响到车辆行驶安全。

道路的曲率与车辆的转向角度正相关，也就与方向盘的控制角度直接关联。设想一下，当车辆速度和方向盘旋转角度固定时，车辆的行驶轨迹将是一个圆形；方向盘角度越大，轨迹圆的半径越小。

有一些道路的拓扑设计很容易通过常识意识到：

- 道路得连续（**G0连续**，虽然是废话）
- 道路不能是折线，需要尽量平滑，预留转弯的圆弧道路，十字路口除外（**G1连续**）
- 限速越高的道路转弯半径应该越大，避免侧翻
- ......

但不满足G2连续的道路会为驾驶操作带来困难：

- 如果转弯处直接将直线与圆弧道路拼接，在连接处将会出现曲率跳变（`0 —> A`）
	- 对应的，驾驶员**必须在直行到拼接点时快速转向**，必然偏离设想的轨迹，带来安全隐患
- 如果S型道路是两段圆弧直接拼接（如上文case），在连接处也会出现曲率跳变（`A —> -B`符号变化）
	- 对应的，驾驶员**必须在转弯到拼接点时快速回正后反打方向**，同样影响安全驾驶

![](/img/pic/2021120814443039059_png_1058_688_56918)
> G1连续时的曲率变化

因此，绝大多数道路设计在条件满足时会在直线和圆曲线之间增加一条曲率由0到圆曲率的缓和曲线，以及在圆弧与圆弧之间增加直线、缓和曲线，用于帮助驾驶员适应曲率的变化而转向。缓和曲线一般选用羊角螺线（回旋线）。

### 羊角螺线

羊角螺线（Clothoid）的定义比较复杂，其特性是长度与曲率成正比关系，即原点时曲率为0，曲线越长越弯曲，原始羊角螺线最终收敛在`x=y=sqrt(PI)/2`处。由于其在缩放后具有几何相似性，通常使用的是归一化后的羊角螺线，收敛在`x=y=0.5`处。

![](/img/pic/2021120812334044254_png_1094_1056_335478)
> 原始羊角螺线

有了羊角螺线，根据圆曲线和直线的相对位置后，可以计算出归一化羊角螺线需要的起终点，经过缩放旋转最终连接直线和圆曲线。

![](/img/pic/2021120812353257955_png_478_448_91466)
> 缓和曲线连接圆（曲率固定）与直线（曲率0）后曲率连续

![](/img/pic/2021120814473401960_png_1088_706_120137)
> G2连续时的曲率变化

在增加缓和曲线后，道路可以实现G2连续。虽然曲率变化还不平滑（是折线），但对驾驶员而言不用快速变向，驾驶安全性已经大大提高。

***ps：不仅道路设计，行驶轨迹规划也非常需要考虑G2连续。也许对于老司机来说弯道漂移甚至排水沟过弯都信手拈来，但现在情况不一样了——我们迎来了自动驾驶系统。自动驾驶系统无论是从行驶舒适角度或是从复杂路况处理的角度，都依赖一条高质量连续的目标行驶轨迹，避免频繁的加减速和转向。***

### 补充

除了羊角螺线外还有其他可用作缓和曲线的曲线，如三次抛物线、双纽线等。

要实现G1连续是相对容易的，但从G2连续开始实现难度陡增，G3和G4连续就更不必说，投入高且收益越来越小（不对比很难通过肉眼分辨），因此一般的工业产品做到G2连续就差不多了。

## 总结

随着连续等级的提高，可以看到曲线确实越来越“平滑”了。在吃惊于肉眼竟然在曲率不连续时会有不和谐感的同时，也对“平滑”一词有了更深入的理解。一些设计虽不起眼，但实实在在为舒适性、美观性做出了极大的改变。

最后，今天你离设计师更近一步了！

## 参考资料

[你们不要再吵了啦！小米 200 万做的新 Logo 已经很棒了啦！ | 爱范儿](https://www.ifanr.com/1408808)

[价值200万的小米新LOGO 你上你也行？ - Xiaomi 小米 - cnBeta.COM](https://www.cnbeta.com/articles/tech/1109067.htm)

[iOS 7 的圆角图标是怎样一个图形？ - 知乎](https://www.zhihu.com/question/21191767)

[从圆角到圆角 · [ i D 公 社 ]](https://www.hi-id.com/?p=3445)