也谈圆角

这篇文章是 Hi-iD 老师「从圆角到圆角」一文的笔记,加入一些相关的信息。也算是杂谈。

文中提及绘制 iOS 的图标圆角用的是多段标准圆弧去拟合成的连续曲线。为什么在已经是 Retina 视网膜屏幕上还要采取「古老」的标准圆弧去绘制图标曲线?

我们都遭遇过不同平台的繁杂,相互之间转化格式,打散重构,这其中伴随着严重的失真和误差。你在 Ai 里绘制出一根完美的连续曲线跑到别的或陈旧或新生的平台里可能连续性就断了,又或者出现各种未知的变化,这些失控对设计一致来说是不得不面对的。

设计为了保持在执行的一致性,屈服于最基础的曲线运算方式「标准圆弧/直线」,去向下兼容,也是向陈旧基础设施的屈服。陈旧不意味着劣质,同样这也不意味着我们需要重新发明轮子,因为转译到处都在发生。

向陈旧设施屈服之后,即使最陈旧的绘图平台也支持标准圆弧的完美显示,开发者在各种平台都可以在最小公差下重现曲线效果。

物理的圆角/像素的圆角alt

alt

从泄露的 iPhone Ⅹ CAD 图纸看开来,刘海部分的圆角显然是用标准圆弧绘制出来的,而真实的效果则是连续的曲线,显示着不同的边缘。再从 Apple 的宣传片截图来看,刘海部分的屏幕是直接切断的,黑色的刘海下不再有像素。不像底部的屏幕弯折部分还保有像素「弯折可以用来除掉屏幕控制芯片占用的面积」。

那么为什么刘海的边缘曲线不是连续而实际显示效果则是连续的呢?我产生了一个猜想:这块 OLED 屏幕的所有圆角会不会就是用标准圆弧切割的,四个边缘大圆角以及刘海曲线则通过部分黑色像素不显示来重新「切割」以营造出 G2 连续的效果。

即熄屏状态下各圆角为标准圆弧,亮屏状态下通过部分像素不点亮来重塑边缘曲线来达到连续曲线的效果。

这就意味着宣传片中的屏幕结构图是虚假的,这样处理或许是怕用户看到不显示的像素而产生迷惑。当然这只是一个猜想,不一定对。但是反过来想,如果屏幕生产切割时就采用了 G2 圆角,那将是很新奇的东西。

20171015 更新:
现在看来,iPhone Ⅹ 应该是单纯用 BM 黑边遮盖来塑造曲线,是否有遮盖住像素不好说。这就没那么新奇了。

备注:

标准圆弧常指从标准圆形上切割出来的曲线,在连续性上可以达到 G1 连续。

G1 连续可以理解为整条线段的切线连续。
G2 连续可以理解为整条线段的曲率连续。

详细介绍可参考 Apple 产品上的曲线进化历程

参考文献:字体平滑,反锯齿,和次像素渲染(收集)中谈到的曲线算法。