普象-让好设计发光

1981年的一天，苹果工程师比尔·阿特金森想出一个在屏幕上快速画出圆和椭圆的办法。画圆通常需要计算平方根，而当时苹果电脑使用的68000微处理器不支持这个功能。阿特金森想出一个变通的方法并兴奋地向乔布斯展示，乔布斯平静地告诉他：圆和椭圆挺好的，不过，要是能画出带圆角的矩形就更好了。

“我认为我们用不着这个，能满足基本的需要就可以了。”阿特金森说。

乔布斯很生气，“圆角矩形到处都有啊！”他指着白板、桌面和其他一些东西，都是带圆角的矩形。“你再看看外面，就会发现更多，基本上哪儿都有！”他把阿特金森拖出去转了一圈，指着车窗、广告牌和街道指示牌给他看，并带领走他走了3条街，发现17处这样的例子。最后，阿特金森说：“好了，你说的对，我认输，我想办法把圆角矩形做出来。”

第二天阿特金森成功演示了在屏幕上画出漂亮的圆角矩形。这件事以后，Lisa和Macintosh以及后来几乎所有的苹果电脑中，对话框和窗口都带上了圆角。

Lisa OS  1983

这是有明确记载的第一个与圆角明确相关的故事。

圆角实在是太常见了，以至于我们总是忽略了它。我在搜索与圆角明确有关的故事时，上文这个发生于1981年的事件成了最遥远的那一个。除了图形交互设计，在工业设计中，苹果则最早应用了具有一定曲率趋势特征的特殊圆角。

工业设计中的圆角

今天，许多用户已经注意到苹果产品设计中使用的特殊圆角。这种圆角不同于常规的四分之一圆，具有丝般顺滑的美感。

今天的产品设计中已经普及了类似的圆角。具体来说，这是一种通过nurbs/贝塞尔曲线绘制的，具有连续变化的曲率（甚至曲率变化率连续）的圆角。

不要被这些复杂的术语吓到，下文将详细介绍这种圆角的特点及其绘制方法。

圆角的特征可以用曲率来描述。曲率是表示曲线上某点的弯曲程度的量，曲率越大，表示该点处的弯曲程度越大，反之亦然。理解曲率的概念有助于我们更好地认识和描述各式各样的圆角设计。

比如这张图，右边曲线比左边曲线更为弯曲，所以可以看到，右边曲线中间处的曲率会更大。

再举一反三一下：圆的弯曲程度处处相等，所以圆的曲率也处处相等。那么直线呢，显然，直线根本不弯曲，所以直线的曲率为0。

由于苹果的圆角比较典型，绘制讲解部分就以苹果设备的圆角为范例。文末会提供源文件下载。

对iphone的圆角进行描边并显示曲率：曲率从0开始逐渐增大，中间段的曲率不变，随后又逐渐缩小至0。这种趋势状态不同于常见的四分之一圆，曲率始终顺滑过渡，没有发生突变，这就是此类圆角顺滑的原因。

中间段曲率呈现出不变的特征是对圆的模拟，保障了圆角的圆度。

绘制需使用Alias，Rhino，Creo等工业类软件，不建议使用平面类软件绘制，因为平面视觉类软件的曲线工具集通常只由3阶曲线构建，且不支持曲率显示，无法精准控制曲线走势。在UI/UX设计，平面字体设计等领域，引入工业软件负责曲线绘制，对提升细节品质有一定帮助，曲率显示模块能让作者精准调试细节，而不用总是依赖“感觉”“经验”之类模糊的不可量化的东西。

圆角曲线由控制点和阶数来定义。两端曲率从0开始增大，那就需满足G2以上连续性，所以此处最少需3✖2＝6个控制点，中间段则最少需3个控制点来拟合圆形。最终可得控制点总数量为9。

阶数部分则不同于《iPhone16的跑道圆》文中所提，绘制圆角不需要特定的阶数也能将圆度调试到比较理想的状态。不过在使用点数为9的曲线绘制圆角时，阶数需在5-8之间，低于5时会丧失圆度。

在软件中，设定一条点数为9，阶数为5的曲线，找一张高清图片，对着圆角进行描边，调整确认曲率的变化趋势特征，这样，一个漂亮的圆角就能绘制好了。

圆角与设计品质

现在有一种观点，认为Apple那样的曲率连续圆角可以代表好的设计品质，网络上甚至能看到一些设计爱好者抨击使用常规圆角的设计，认为其水准业余。

曲率圆角的普及一方面提高了一点点当下工业设计整体水平的下限，另一方面也在潜移默化中断送了创作者深入思考的可能。单一的审美标准和批量重复使用，有违设计的初衷。有价值的设计，应从思考开始，向可能性敞开。

上图为深泽直人的2.5R系列产品，钟和温度湿度计，边缘使用半径值为2.5mm的常规圆角。据深泽直人介绍，这是木材经过长期使用、风化后自然形成的弧度尺寸，是一种人们会熟悉的弧度。使用这样的圆角，用户会有亲切自然的直觉感受。

餐桌边缘自然形成的圆角

在这个设计中，圆角是否为曲率连续，无关紧要，没有人因为其常规圆角设计而做出负面评价。相反，将视野脱离纯技术层面的打磨圆角，转而专注感受、体验，才是这款设计打动人的原因。

第一代Nothing Phone也采用了常规圆角设计。

按照对圆角吹毛求疵者的观点，这样的设计看起来似乎显得业余，但显然，我们无法将业余二字与nothing联系起来，这种圆角呈现方式，是主动的设计选择。

Nothing Phone 1 的透明设计，体现出一种结构外露的倾向，但这种外露并非完全真实的内部结构展示，事实上，背板所见的细节都是为了营造一种结构外露的感受而精心设计的。这种感受并非基于物理上的真实性，而是基于视觉和心理上的共鸣。圆角作为构建这一设计理念的基本元素，同样肩负着构建这种感受的任务。

在结构设计中，通常不会使用精致的曲率圆角，这并非在看不见的地方偷懒，而是综合工程效率下的最优解，因此，常规的倒圆角，构成了“结构感”的基本面貌。外观轮廓使用倒圆角设计，整机的设计得以达成逻辑闭环：外观倒圆角与背板的外露结构一起，构建出了一个完整的假象。这种设计手法不仅仅是一种美学选择，更是在当下日益单调乏味的手机市场中，对流行设计的一种隐秘批判。

从直接的观感上来说，这样的设计，轮廓更清晰，面目更立体，甚至有那么一点清爽的意味，而那些精心打磨圆角细节的一众旗舰机，倒显得圆滑油腻了一些。

从设计到落地

完成一个实际项目需要不同岗位协作完成，在这个过程中，原始设计会在不同的平台/软件/物理实体上反复转化，对应的执行人员繁多，各自对设计的理解又有所不同，这样的层层传递难以确保设计的一致性。这就像传话筒游戏：一句话从开始到最后，已经完全变了味。

比如，很多工业设计师就有过自己绘制的漂亮圆角被其它工程师改成常规圆角的经历。在协作落地设计的过程中，我们总希望分工链条上的人有同样的审美偏好和职业技能，而忽视了提前制定规范。想确保设计在传递的过程中不出现偏差，原始的设计，就需要进行“转译”：将设计师眼中完美的理想曲线，转化成所有人都能听懂的“语言”。

圆角的转译

转译的办法很简单，具体来说，就是用多个圆弧段连接，拟合完整的圆角曲线。很早以前，人们就开始在工程制造中使用圆弧和直线的组合来描述曲线路径。

1916年，京师环城铁路，图片源自《遗失在西方的中国史：20世纪初的中国铁路旧影》

早在19世纪末建设铁路时，工程师们就已经采用这种方法进行轨道曲线的施工。在没有数控机床的时代，加工复杂的曲线轮廓也依赖于这种方法。例如，在早期航空工业中，为了满足气动性能要求，部件轮廓需要设计成光滑的复杂曲线。然而，当时的机械机床无法直接处理这些大尺寸复杂曲线，因此制图师会将曲线分解为多段圆弧或直线组合，并逐段加工，最后拼接成光滑的整体。

这种方法应用到圆角上后，我们只要标注好每段圆弧的半径值，圆心、起点、终点的坐标，就能明确输出传递圆角的造型。由于是纯粹的圆弧，文件可以在任意平台间传递，信息不会有任何失真损耗，进而确保了造型始终能维持原始状态。

除此之外，使用多段圆弧在设计上也具备优势。由于本质是圆弧段，我们在偏移这样的圆角曲线时，偏移形成的曲线也是圆弧，这就能确保偏移后的曲线控制点数量不变，且曲线之间完全等距，而使用贝塞尔/nurbs曲线直接偏移，则会出现控制点数量失控，或曲线扭曲的情况。

等距偏移：为了控制偏移距离一致的同时维持曲线流畅，控制点就需要密集分布，这就使得控制点数量激增，并导致模型曲面品质下降，文件大小失控。

等点偏移：这种偏移算法可以使得偏移后的曲线的阶数点数保持一致，但为了维持曲线流畅，就会牺牲偏移距离的一致性。

对多段圆弧衔接而成的曲线进行偏移，其效果兼容以上两种方式的优点，无论如何偏移，控制点总数不变，且能做到完全等距，曲线不扭曲。

不过以上做法并不一定适合所有设计工作，通常在一些外观轮廓、装配间隙需要管控的细节中会比较适用，比如手机上的圆角及局部装饰件等。

以iphone为例，其内屏圆角与外壳圆角为等距偏移关系，但屏幕定制方与外壳制造方通常是两家供应商，这时就可以使用多段圆弧偏移的办法分别输出设计的轮廓，这样做能有效管控两个部件的轮廓边界，确保装配后贴合严密，间隙均匀可控，整体效果和谐。

在一些尺寸较大的产品如钣金、建筑设计中，由于其成型工艺各自有其特殊性，就不能完全适用上面的方法，在实际工作中应酌情考虑。

误差的妙用

上文有个问题没交代明白：使用多段圆弧拟合高阶曲线，那这之间就会存在误差。并且曲率也不再顺畅，圆弧段之间是相切连续，曲率呈阶梯状，达不到G2以上的连续性。

从严格的数学角度去看，用多段圆弧衔接而成的圆角，内部曲率只能达到G1切线连续，似乎不符合我们对这类美学圆角的定义。

这涉及需求的本质：我们在绘制曲率连续圆角时，追求的并不是曲率连续本身，而是一种曲率变化趋势给圆角带来的光滑的感觉，并且这种感觉最终要体现在制造出的实物之上。曲率是否满足理想连续状态，并不是目的。

以文中绘制的圆角为例，我们将其高度设定为15mm，这大致是手机平板之类的产品上会使用的圆角尺寸。将原始曲线与圆弧曲线重叠在一起，测量可得偏差最大处为0.01mm。

显微镜下的iPhone15pro max屏幕，该区域位于灵动岛边缘，右下角标尺为0.03mm，图片来自ifixit

我们总想消灭误差，但误差总是客观存在的，当我们能正视误差时，误差也是可以被利用的，比如，圆弧与原始曲线之间的偏差，只要控制在制造公差的范围之内，就被轻易地消解。

与制造衔接

今天的产品制造中会大量使用到数控加工系统，由于设备的机械本质，事实上刀具不能行走理想的曲线路径，微观上看，刀具的行走路径是很多极其细微的直线段。所以在执行加工前，系统需要对输入的复杂图形进行编程转化，以便进行加工。

以文中绘制的圆角曲线为例，编程就是将单根高阶曲线转化成多段圆弧。这种方法可以降低计算复杂度，使系统能更高效地生成刀具路径。在精度控制、进给速度、刀具损耗等方面也有一定的优势。

在设计时对圆角曲线进行多段圆弧替换，相当于将一部分系统编程行为前置。圆弧转化的工作可以手动操作，也可让软件自动完成。在工业类软件中都有“把曲线转化为圆弧/直线”的命令，这些看似莫名其妙的命令，研究一下就会发现它们不会平白无故出现。

不过软件提供的圆弧转化算法都比较保守，以圆角为例，软件会将其分为很多细碎的圆弧，不如手动转化的简洁，所以在部分场景下手动转化圆弧依然具有价值，太多细碎的圆弧曲线不便于信息标注传递，并且徒增无用的数据冗余。

以上内容可以作为了解，相比过去，今天的加工中心大都支持高阶曲线的直接编译加工，设备也会配备编程工程师配合工作，设计师可以更关注原始设计的输出，以及后期实物品质的管控，选择一家靠谱的供应商，倒是更重要的事。

文件下载

文件中包含一个完整圆角和一个分段圆角，供参考。

使用夸克下载，链接：https://pan.quark.cn/s/484c205643cb

如果不是夸克用户，嫌另外单独下载麻烦，也可添加我的微信直接获取文件。