其实也是一个很小很小的问题，甚至做完都没看出差别来——手机系统应用的平滑圆角。但整个过程还有趣的，设计出来后连自己也感到匪夷所思。

下面就给大家分享一下这道“数学题”~

平滑圆角
——————————

首先平滑圆角就不是一个什么新鲜东西，在工业设计中有一直应用——为了圆角衔接处不生硬，避免断层感。

可以简单理解成：曲线和直线连接处的斜率，是按一定规律变化的（左一、二）
而不是突然变化（右一）

在2013年IOS7发布之后，它也瞬间火了起来，那时候一堆人出来研究苹果的平滑圆角是怎么画的。

其中个人觉得最方便好用的方法如下：
使用羊角螺线去画，从原点开始，取斜率从0去到1那一段。(蓝色那段)

画出的圆角的确是和ios的圆角贴合，但究竟是不是这么画苹果也没有公开。可能就是普通的拉一下，我们过度解读罢了。

但这些都不重要！

而平滑圆角也并不是只有这么一种解，比如我继续用上面的羊角螺线，我取斜率从1到正无穷这这一段，一样也是平滑圆角，但“大小”就不一样了。

平滑圆角有千千万万种，在“过渡位置”做过平滑处理，都可以称为平滑圆角。（并不严谨，但不影响使用）

那么哪一种平滑圆角最舒服最好呢？
这就是一个关于审美的感性问题了，不同厂商有不同的审美（总不能和苹果一样吧）

而这就是这次需求的主要起因...

沟通、思考、设计
——————————

“这个圆角，每年都改，前年尖一点，去年圆一点，今年又尖又圆，还要全局统一，做完用户还看不出来，有必要吗？”除了图标设计，圆角也变了的

“PNG太大，还有锯齿，SVG等矢量方案适用性也不够高。
就算牛逼的我可以用代码给你写出来，但你这么多个锚点，写出来系统运算会很卡的。”

那么，
是不是该让开发写出来，减少日后版本的工作量呢？
那又如何少一点锚点同时实现平滑圆角呢？

用羊角螺线做？这样即使开发能写出来，但我在设计软件上画不出来啊...
还是说知乎大神的其他各种公式呢？

我不知道你看不看得懂，反正我看着挺晕的 _(:з」∠)_ 

带着这些问题，看了一堆相关文章。
最后在 Figma 上的圆角工具上找到了灵感！

它就像是固定了中间的点，只有两边在移动。
这看着不就是我常用的贝塞尔曲线吗？！

于是根据变化，根据开发的要求，开始反推，构建它的公式、列出各种已知数未知数...

在一次开车等红绿灯的时候全都想通了，甚至脑中已经算出了所有点的位置（道路千万条，安全第一条 ）

然后再经过多组数据对比，图形对比等，将未知数不断减少成为固定系数（α=14°，β=15°）最后只保留圆角半径R和平滑幅度a，得出如下的方案数据。 

到了这里，设计过程其实就完了，后面就是开发根据这些数据和公式去敲代码了。

最终这个圆角可以随时改变大小、平滑度。领导想怎样都行，有理有据有记录，并不用担心做了重复的工作~甚至可以让领导自己DIY一个（开发的确根据这些代码敲了个平滑圆角小软件）

P.S.

整个过程，需要设计的地方并的不多，就一道“数学题”（三角函数）。
但也的确是一次难忘的“设计”，毕竟解决了问题。

没错，牛逼的你还会欧拉公式，可以将上面的公式再简化。市面上也有很多专业的数学软件，可以画出更平滑的圆角，但无所谓啦，暂不影响使用。

讲了这么多有的没的，这些东西看似毫不相关，其实冥冥中一直在影响着我，我的思维，我的成长。或许这些就是所谓的“经验”吧，THX~

Powered by Froala Editor