# J 的艺术，R 的艺术

今天在[微博上](http://weibo.com/2214257545/Ff47uBgZb)看到日本航空（JAL）的视频广告（[Youtube](https://www.youtube.com/watch?v=jf7T7TY7134) 和[腾讯视频](https://v.qq.com/x/page/r0531bq5zfi.html)），这个广告叫做《The Art of J》（J 的艺术），共分三篇，分别是《Precision》、《Privacy》和《CONNECTIONS》（精度、隐私和连接）。广告视频拍摄得很美，比如《Precision》中厨师凭着高超的技艺使每一个手工做出的寿司重量都是 27 克，打出的广告语是“Precision is in our culture.”（精度在我们的文化中），五次获得世界上最准时航班的殊荣，用手工难于控制的寿司重量与航班的精准形成对应的阅读关系。接着的《Privacy》是来讲座椅空间和乘坐环境的私密性好，没有什么东西能来打扰你，一位折纸艺术家在他的商务舱内作出了一件复杂又漂亮的折纸作品。通过 [JAL 的网站](http://www.jal.co.jp/en/inter/service/business/seat/skysuite.html)可以看到这是他们商务舱的座位，这一套的座位设计以直线型为主，在转角等地方使用了很多三角元素，看上去整个空间都是平整和有效率，不受打扰。

![the table in JAL 777-300ER](http://www.hi-id.com/atcl/2017/the-art-of-r-table-in-JAL-777-300ER-2.jpg)

但是在看《Privacy》这个视频时，全程都在受打扰，而打扰来自于旋转桌，这个带圆角的旋转桌设计与整体舱位设计看上去有点格格不入，大圆角与小圆角的直线折角设计，更怪异的是这个桌子的四个圆角还是不一样的大小，绕着顺时针方向一级级增大。

![the table in JAL 777-300ER](http://www.hi-id.com/atcl/2017/the-art-of-r-table-in-JAL-777-300ER.jpg)

有意思的是，《Privacy》这支广告中的道具摆设却很细致，看上图这个具有颜色渐变的纸片的排列，右上和右下两处角落的纸片似乎在印证 1 和 2 两处的圆角大小不同，虽然左下违背了这一规律，但是可以看出上图的四个圆角依次在增大，按照 [JAL 的网站](http://www.jal.co.jp/en/inter/service/business/seat/skysuite.html)对这个旋转桌子的示意，可以判断这几处的圆角设计并不是因为旋转这个功能需要来确定的，或许通过圆角的大小在示意旋转的方向，如果是这样就太过于隐晦了。

比圆角大小更“干扰”人的是圆角处理，设计师使用了简单的圆角工具，圆弧与两头直线的过渡方式只是 G1 切线连续，看右上角的大圆角处尤其明显，两段直线，中间一段 1/4 的圆弧形成的圆角。

如今人们经过 Apple 产品的美学特征熏陶，尤其是 2013 年 iOS 7 发布时，将界面的圆角四边形图片也改成了曲率连续的圆角四边形后，不只是设计师，大众对这些细节的处理也敏感和直接了，或许以前只是觉得不太顺畅，现在就会立刻发觉。在平面上讨论圆角的形态，各种连续的表现，\[ i D 公 社 ] 在 2009 年就经过一次讨论。

![the art of r alias](http://www.hi-id.com/atcl/2017/the-art-of-r-alias-1.png)

G0 还是 G1 连续指的是两条曲线形成连接的数学关系（直线是曲线的一种），曲线具有曲率（按定义说就是曲线上某个点的切线方向角对弧长的转动率），大小即曲率半径的倒数，所以通常我们说一条曲线越平缓，越接近直线也就是它越“不曲”，就是曲率越小，曲率越大曲线就越弯曲。连续就是调查连接处的曲率关系。

如上图所示（图形来自与 [Alias 帮助页面](http://help.autodesk.com/view/ALIAS/2018/ENU/?guid=GUID-882B194B-E044-4921-B130-47391EFA1443)），有 G0、G1、G2 和 G3 四种连续，G3 以上的连续可以按 G3 的描述向上理解，但是除了特殊需求，通常很少用到 G3 以上的连续。上图绿色的如梳子一样的线，表示着此处曲率的大小（越长曲率越大），称作曲率梳状线，曲率梳状线的外轮廓形成曲线也是连续的。G0（位置连续）指的是两条曲线相连接，但是两条曲线仅仅是相连接，在连接点位置的切线方向不一致，所以梳状线在此处形成了一个角度。G1（切线连续）指的是两条曲线不仅仅是相连接，在连接点位置的切线方向一致，但是曲率半径的大小不相等，所以梳状线在此处虽然共线但各有长短。G2（曲率连续）指的是两条曲线不仅仅是相连接，在连接点位置的切线方向一致，而且曲率半径的大小也相等，所以梳状线在此处不仅共线而且长短相同。G3（曲率连续）指的是两条曲线不仅仅是相连接，在连接点位置的切线方向一致，而且曲率半径的大小也相等，进一步在此处的曲率变化率也是相同，所以梳状线在此处不仅共线而且长短相同，而且梳状线的外轮廓线在连接点位置是切线连续的。更高阶的连续形式就是依次往下推进。

![the art of rounded corner](http://www.hi-id.com/atcl/2017/the-art-of-r-rounded-corner-1.png)

在直角上形成的圆角如上图所示，仅仅以 G1 和 G2 为例子，直线的曲率为 0，它的曲率变化率也为 0，所以在与直线相连时，G3 及更高的连续没有意义。G1 就是使用 1/4 的圆弧来形成两条直线的连接的，圆弧的曲率在曲线的每一处都是相等的，所以与直线相连，就形成了从 0 到某一个曲率的跳动，在视觉效果上就是曲线的不连续感，在曲率发生变动的一段。而 G2 保证了曲率从 0 逐渐增大的过程，所以在视觉效果上它是连续光滑的。而从直线到曲线不同的过渡形态，也会带来不同的结果。

![the art of r alias](http://www.hi-id.com/atcl/2017/the-art-of-r-alias-2.png)

上图[来自这](http://help.autodesk.com/view/ALIAS/2018/ENU/?guid=GUID-E1BDFBD0-33CC-44C4-866D-5F367105A050)，显示了同一连续条件下，即 G2 曲率连续情况下，不同的过渡形态，可以从梳妆线的形状来对比，即曲率变化的加速度的不同。左图为先缓和再急剧在缓和，右图为先急剧再缓和（接近匀速）在急剧，中间的为介于两者之间，左图容易在中间形成曲率的最大值，而右图中端更接近圆形。

在用 G2 连续的曲线来制作圆角时，一般需参照上图右的梳状线形态，因为我们需要用一条曲率连续变化的曲线来模拟曲率恒定的圆，G0 连续的圆角即 1/4 圆弧虽然在头尾处的曲率突变给人带来不顺畅的视觉体验，但是它的圆度是确定的，我们用 G2 连续的曲线来制作，除了需照顾到头尾过度的顺畅，还要照顾到它的中间段与圆足够接近，也就是要求保证它的圆度，让它的曲率看上去尽可能相同，那么在圆角上，我们识别到“曲”的地方就是中间段，所以它的曲率变化梳状线应该如右图所示。

![the art of r alias](http://www.hi-id.com/atcl/2017/the-art-of-r-alias-3.png)

上图[来自这](http://help.autodesk.com/view/ALIAS/2018/ENU/?guid=GUID-E1BDFBD0-33CC-44C4-866D-5F367105A050)，圆弧形成的圆角好处就是它的数字是确定的，也就是可以描述，可以口头传递，所以在设计和制作过程中，形态的传递很方便，比如说“R=5 mm”的圆角，即使我们在此处用 G2 的曲线来模拟，我们也会说 R 等于多少，自由曲线 NURBS 曲线是计算机来描述的，无法口头描述。所以在日常的工作中，我们通常会先确定这个 R 值，然后再来绘制过渡曲线，而我们绘制的 G2 曲线需要一个过渡的区间，这个区间往往需要比圆弧形成的圆角过渡更大，以便在中部达到跟圆弧圆角一样的数值，即我们确定的 R，如上图所示，左图为 G0 的圆弧圆角过渡，中间为变化区间不变，但是中间的 R 值就发生了变化，而右图则把两头的连接点位置向各自方向后退，以便曲线的中段达到所需的 R 值。

![the art of rounded corner](http://www.hi-id.com/atcl/2017/the-art-of-r-rounded-corner-2.png)

G1 和 G2 连续的不同数学特性不只是在正视的情况下能够识别出来，在透视的情况下也能分辨而出，透视是在视平面上的投射，所以是从 0 跳到一个数字，还是从 0 逐渐过渡到一个数字，投射之后这种特征是维持的。

但是最终作用于我们的是视觉效果，而不是数学关系，我们可以辨别处不同的顺畅程度，但是无法测出它的数学结构，而且我们看到的所有东西都是模拟世界的实体，数学只是对关系的一种归纳。就好像我们用放大镜去看产品的每条边线，它们都是连续的，只有我们通过辨别和归纳后，才能猜出设计师是否采用了 G2 曲线连续，所以，我们对曲线连续的分辨和执行，除了在软件中使用各种数学工具检测外，更重要的是退到宏观一层，就像去看待一个已经制造完的产品去观察。

![the art of rounded corner](http://www.hi-id.com/atcl/2017/the-art-of-r-rounded-corner-3.png)

也就是说，并不是 G2 连续是万能的，或者时刻都必要的。

就好像《Privacy》这个视频中，我们最容易判断它是 G1 连续的就是来自与右上角的大圆弧，原因不在于它的 R 值大，而是与直线边形成的对比关系，比如上图所示的左图，就很难分辨出它是 G1 连续还是 G2 连续。

另外从制作的矢量图到输出成上图的点阵图，有一个栅格化的过程，栅格化就像是工业生产中的一种加工，它也有加工精度，加工会影响到最终曲线连续的视觉特征。比如在设计图纸上圆角过渡是 G1 切线连续，但是到了机床、抛光、打磨等等生产制程，圆角过渡可能变得更自然顺畅，尤其是如上图左这样的小圆角，如果是大圆角，像 JAL 商务舱旋转桌的左上角一样，就很难通过后续的加工过程来自我修正，因为它太大了必须在设计时就作出决定；在矢量图到点阵图的栅格化过程中也会如此，所以时刻关注宏观化后的效果也是同样重要的。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.jasonzhang.cc/read/apple/j-de-yi-shur-de-yi-shu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.