去掉圆角_【第2054期】不顾一切找圆角 —— Figma 实时平滑圆角方案探究

前言

这么多年见过公式最多的分享了。今日早读文章由@Martin翻译授权分享。

正文从这开始~~

本文明晰的展示了 Figma 工程师是如何通过程序挑战，寻找最完美的问题解法。

在 1972 年，Charles Eames (查理伊姆斯)在一次著名的访谈中，探讨了 「关于设计本质的一些基础问题」(译者注：Figma 链接挂了，这里换了一个)。这些问题中的第一个问题就是：「你如何定义设计」？他的回答是「一种将元素排列组合，以达到特殊目的的规划手段」。

伊姆斯夫妇

在后续的问题中，他的回答都非常简短俏皮。但当谈论到设计的限制时,他开始深思熟虑，严肃起来：「设计的关键点之一便是：设计师对于设计的边缘和设计的限制的了解、经验和认知；以及有了对设计限制的认知之后，他有多少意愿和热情去在限制内进行设计。」

尽管我不是一个设计师 —— 我是 Figma 的工程师。然而 Eames 的评论对我的工作也非常有价值。我不是排列 UI 元素，设计产品，我是排列数学概念，形成代码表达式来实现工具功能。我实现的代码同样也要考虑到 时效、简化成本、维护、美学 等方面的限制。

最近的一个项目验证了上面的这些理论。我的任务是给 Figma 添加一个类似 Apple 'squircle' 平滑圆角的功能支持。然而对此我的了解不多，我得做点调研。

现在回顾起来，这个项目简直就是数学奥德赛，开始的失败令人焦虑，过程中出现了很多隐藏的问题和新的限制，在各种压力下探索出最终的解决方案。简而言之，每个设计师出方案的时候都有过这种体验，某种意义来说，很多设计师每天都这样。

为了让跟我一样的数学极客能从过程中获得乐趣，也为了展示数学是如何成为解决问题的利刃，我将整个过程从零开始在下面展示。

译者注：个人认为了解设计限制包括承载设计的媒介是设计师的道德，能否客观评估自己之前的设计经验在限制下是否有效 或 怎样将之前的经验转换为限制下的成果是设计师的重要能力

平滑的 Squircle 圆角

在我还没加入 Figma 之前，2013 年 6 月 10 日 Apple 发布了 iOS 7 。其中有一些改动非常的精巧：主屏的图标看起来更圆润、有机。他们移除了直角圆角，加入了平滑圆角 squircles (‘square’ 和 ‘circle’的混成词)。

差异在哪儿？老实说，差异非常微小 —— 平滑圆角从原来直角圆角开始的地方开始弯曲，但是整个曲面上去掉了一些部分，相比直角圆角来说，从直角到弯曲的部分更加柔顺。

使用数学语言来描述便是：squircle 圆角的边缘曲率是连续的，而直角圆角不是。这看似微不足道，但这种设计小细节却有很大的体验影响：squircle 圆角没有直角圆角那种人工雕琢痕迹，它的感觉就像河床上捡到的因冲刷而成形的鹅卵石，看起来统一且自然。

1.1 — 直角圆角 vs squircles 圆角: 看上去差距不大！

工业设计师很了解曲率对于物体感受的影响。仔细看看你手头的 Macbook,或者看看老版的 Apple 有线耳机。你可以看到它们表面的高光是非常顺滑的。

这是设计中不显山漏水的曲率连续导致的。对于苹果来说，软硬结合，从硬件到软件界面，将设计风格一统，不是什么难事。

译者注：见微知著，我们的 UI 设计 正在从粗放型设计到精细型设计转变，Apple 往往在小处涵盖 自然的、逻辑通顺 的设计细节，其中包含了很多数学理论，值得我们学习。

从形式到公式

我们 Figma 的人当然喜欢 iOS 的设计师的这些设计。我们还觉得我们 Figma 的用户也需要这样的圆角功能。为了让用户在设计的时候能够使用平滑圆角，我们需要寻找一个精确的数学描述以便实现功能。

幸运的是，人们从 iOS 7 发布后就开始在网络上探讨、咨询这个问题，我们肯定不是第一个吃螃蟹的人。Marc Edwards 的 Fundamental initial work 文章中包含了一张截图，指出这个形状是从椭圆公式推导出来的，因此叫「超椭圆」。下面这个公式可以描述 圆、椭圆和超椭圆，形状取决于 变量 a, b 和 n:

n = 2, a = 5 ,b = 3 的时候，你会在标准坐标系上获得一个 半径 x 轴 5 格，y 轴 3 格 的椭圆。n = 2 ， a = b = 1 则描绘了一个标准的单位圆。然而，如果 n > 2 的时候，结果就是超椭圆 —— 椭圆形状与图形本身的方格边框进行混合， n 越大，圆角就越来越「锐利」，在之前的网上讨论中，一般认为 Apple 的圆角形状是 n = 5 时候的形状。如果你 动手试一试, 你会发现圆角形状跟 iOS 7 确实很像。

如果这是真的数学描述，那我们只需要想办法用几段 Bezier 跟圆角契合上，然后做点工程上的事儿，把功能整合进 Figma 就行了。尽管如此，不幸的是有些人认真的跟进了之后，发现 超椭圆 公式实际上不完全对 —— The hunt for the squircle (然而，在发现之前， 已经有很多人使用那个「不完全对的公式」 到界面跟图标上了)。实际上，上边的公式不管怎么调节 n，都跟实际的 iOS 图标形状有微小的差异。

我的探索第一次进到了死路：我们有优雅简单的公式，看起来跟 iOS 圆角也很像，但其实公式并不一样，我们想要给用户提供最正确的功能，因此还要继续探索。

既然研究走到了死路，项目想要继续进展便需要加倍的努力，但很荣幸地、我再一次站在了别人的肩膀上得以继续探索。Juicy Bits 的 Mike Swanson ，做了一个假想：那就是 squircle 平滑圆角是使用几段贝塞尔曲线拟合的。遗传算法提炼 iOS 圆角公式 (译者注：网站又挂了，web archive 将就下吧)，他使用遗传算法提炼了 484 次，将形状优化的跟 Apple 官方圆角形状差不多了。他得出的这个观点非常的新潮，后续跟进的 Manfred Schwind 更是直接贴出了 实现。效果看上去跟 iOS 图标没差，所以现在我们已经有了两种不同的实现平滑圆角的贝塞尔方法：别人已经搞出来了,我们啥也不用干了！

译者注：平方公式方法跟三角函数 360 度推点法有性能问题，这个可以参考我上一篇文章，贝塞尔方法是一个比较不错的动态绘制方案，这里补充一个关于 iOS UIKit 的平滑圆角快速实现 —— Continuous Rounded Corners with UIKit

一些问题

在我动手搬运代码到 Figma 之前，还有两个细节，需要考虑：

首先࿰