惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
雷峰网
雷峰网
S
SegmentFault 最新的问题
博客园 - 【当耐特】
博客园_首页
量子位
爱范儿
爱范儿
博客园 - 叶小钗
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Jina AI
Jina AI
V
V2EX
美团技术团队
V
Visual Studio Blog
博客园 - 三生石上(FineUI控件)
IT之家
IT之家
Hugging Face - Blog
Hugging Face - Blog
Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
博客园 - 聂微东
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
The Cloudflare Blog
宝玉的分享
宝玉的分享
WordPress大学
WordPress大学
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
曲线,一个更接近完美的答案 - 少数派
2020-12-30 · via 少数派

编注:视频文字稿内容由少数派整理以方便阅读查找,要了解完整信息,建议直接观看视频。


这是一个完美的正方形,每条边都十分平滑、顺畅,没有瑕疵。试着把尖角变成 1/4 的圆进行连接,便得到了一个圆角矩形。在大多数平面绘图软件中,圆角矩形都是用这种方法绘制出来的。但是它的线条足够顺滑吗?

我们放大它的一角,在曲线与直线连接的地方过渡其实是不自然的。200多年前,人们便开始尝试对平滑过渡的曲线进行计算,于是后来便诞生了很多种缓和曲线,在诸如测绘、工业设计之类的工作中起着十分重要的作用。

画面中的「羊角螺线」就是其中之一,我们使用羊角螺线起点处的这段曲线绘制一个圆角矩形,会得到一个过渡十分顺滑的结果。相比之下,右边那个简单粗暴的圆角矩形,也就显得十分粗糙。

而经过优化的形状,与 iPhone 中 App 图标的轮廓看起来几乎一模一样。在 iOS 7 之后,苹果开始大规模采用这种曲线过渡的规范,使得「曲率连续」这个概念不再由专业设计师独享,而是成为了更多爱好者们所热衷的话题,「G2 连续」这个词也被更多人所熟知。

仅仅是点与点的贴合可以称为「G0 连续」,在点与点连续的基础上如果还有相切关系,那就可以称为「G1 连续」,而如果它们的曲率还有着更为连续的变化,可以称为「G2 连续」。当然,这种描述并不精确,但是理解至此暂且足够。

用通俗点的方法来说,其实就是让曲率以一种看起来好像先慢后快的方式达到峰值,使其更加顺滑,这与动画中的速度曲线倒还有那么一点点的异曲同工之妙。如果以匀速前进,看起来就会比较生硬,而如果让它突然加速再缓慢停止,就会模拟惯性,产生一种丝滑的感觉。

在很多平面软件中绘制曲线的功能被称为「钢笔工具」,而它们的本质一般都是一种叫做的「贝济埃」的曲线,其实更多时候人们愿意称其为「贝塞尔」。这次所聊的 Bézier 曲线由法国人提出,所以按照法语发音应该叫做「贝济埃」更为恰当。

这是一种通过设定几个点然后插值进行拟合的方法,数理逻辑在这里不做深究。我写了一个模拟程序进行演示,看看就好。

通过递归的方式,我们可以绘制出更高阶的贝济埃曲线。以 Adobe、Affinity 为首的平面软件产品,采用的都是三次贝济埃曲线。但 Adobe 的曲率工具和 Affinity 的钢笔智能模式分别使用了完全不同的算法,这两种算法产生的曲线必然经过节点,无法通过手柄进行灵活的调整,但是却能够自动生成较为顺滑的曲线,在 CAD 中这比较常见,这里就不多赘述了。

去掉三次贝济埃曲线内部的杠杆,便是我们所熟知的钢笔工具的模样了。起始点与结束点就是我们在软件中绘制的节点,而其余两个点形成了我们用来调整曲线的手柄。设计师们如何才能在节点繁多、复杂的情况下,绘制出连接更顺滑的曲线呢?

回到短片开头,那个粗糙的圆角矩形,我们将每一个节点向内进行偏移,然后再适当拉长手柄,其实就可以对曲率连续进行一定程度的优化。这种调整在数理上并不精准,但在平常的工作中如果只是为了满足观众的视觉其实已经足够了。

有一些软件中有着相关功能,比如 Figma 中的 Corner Smoothing 原生就能满足这个需求。

在使用贝济埃曲线进行绘制的时候,有着一个重要的规范。首先要尽可能的将节点放在「极值点」的位置,然后让节点与手柄保持水平或垂直对齐,这可以让绘制变得更加容易。因为这样只需要调整手柄的长度就可以拟合自己想要的曲线结果,这个规则在字体设计中尤为重要。

因为在低精度屏幕上,算法会根据这种位置的节点对显示效果加以优化,专业的字体设计软件甚至会有自动添加极值点的功能,但是在例如宣传美术、艺术插画领域等,这些最终会输出固定精度位图的情况,倒也可以适当放松标准。

在字体设计领域中也有着经典的案例,「筑紫明朝体」是一款应用于印刷及平面设计领域的字体,并不是为了在数位屏幕上显示而设计的。藤田重信用极少的节点数量绘制了优美的曲线线条,相应地也就降低了字体文件的大小,品质极高。

了解了这些规范,我们尝试着绘制这样的一个形状。你可能会在起始、结束、中间设定三个节点构成这个形状,但这样我们会发现线条中间出现了不顺畅的情况,还需要对这个节点进行单独的调节。而调整后,他与手柄也无法以水平的对齐方式存在了。

但其实我们将这个节点删除,拉长两端的手柄,同样可以绘制出这个形状。如此看来,之前中间的点就是在徒增烦恼。这个案例告诉我们,要在满足效果的前提下,尽可能简化节点的数量。即便如此,一个图形还是有可能以多种不同的布点方式绘制出来,都是熟能生巧和经验之谈了,需要我们勤加练习。

这是 iPhone X 底部的 Dock 栏,而这是 iPhone 12 底部的 Dock 栏。相同的系统,却有着完全不同曲率的圆角。这是为了和机身外观的圆角形成更好的呼应。曲率从工业设计走进图形领域,从平面之外传播到平面之内,这一条条排比舒适的顺滑曲线却又让它在平面之内超越了平面。

我们在设计的究竟是什么,是圆角吗?不。

是在设计一个更接近完美的答案。