在线设计工具中，称此为平滑圆角

UI设计师，你真的了解平滑圆角吗？

静电说：圆角这个概念在iOS 13开始普及，圆角平滑可以应用于应用中的任何元素中。我们都知道，在Figma或者Sketch中使用圆角是太稀松平常的事情了，但是圆角真的那么简单吗？并不是。

通常情况下，我们所使用的圆角是普通的圆角，而在iOS的图标中，我们所使用的图标的圆角被称为“超椭圆”。

效果是不是不太明显？但是如果你放大了看的话，会发现确实有区别，正是这点差异造成了我们观感的区别：

如何在Figma中应用圆角平滑呢？

圆角平滑工具实际上隐藏在Figma的圆角工具集。确保打开“独立角”，在右侧的三个点按钮中，您会找到角平滑工具。

此值可以设置为 0–100%，其中 60% 是 iOS 的圆角数值。

在Sketch中也可以应用圆角平滑，只需要在下拉菜单中选择“平滑”选项即可。

为什么要使用圆角平滑呢？

其实原因非常简单，它可以让人眼更容易的从一个元素过渡到另一个元素。看下面的图：

下图是常规圆角，试试看：

换成平滑圆角呢？

这样明白我在说什么了吧？即使在设计中颜色值有点模糊（如上面的橙色和阴影），眼睛也更容易从一个元素过渡到另一个元素。

这是因为人类的光学系统通常遵循直线，当眼睛遇到拐角时，您的光学系统会做与您物理到达拐角时相同的事情，它想要停下来。

但是，对于上面的圆形示例，情况就不同了。人眼会跟随曲线，但随后会更容易地从曲线上移开，因为没有角落可以卡住。所以发生的情况是，边界由更多的直线建立，但由曲线缓和。这使我们能够拥有独立的元素，而不会让它们之间的视觉过渡非常生硬。

但为什么一定是超椭圆呢？

它使曲线本身变得平滑，因此到圆角的过渡也是平滑的，而不仅仅是角本身。

让我们实际看看这个。

那在真实的UI设计中，它会是什么样的呢？

从缩略图看起来可能差别不是很大，但是我们放大一页页的看，它会对您的 UI 在视觉上遍历的“难易”程度产生重大影响。

当设计从直角过渡到平滑圆角之后，即使圆角相对较小，眼睛的视觉流也会有明显改善。

总结

使用圆角可以让眼睛更好的遍历不同的元素。
使用平滑圆角可以让这种便利效果更加缓和和微妙。
通过使用圆角平滑，您可以使布局和元素更容易在视觉上遍历，提高可用性，并最终提高目标用户的参与度。

新手必学教程！如何快速在PS、AI及Sketch中绘制超椭圆？

UI设计中，超椭圆是一个介于圆和方之间的形状，常用来作为图标的背景框。

这种形状并不能通过简单调整圆角矩形直接获得，

本期教程将告诉你最简单的几种制作方法，欢迎举一反三~

教程内容

什么是超椭圆

超椭圆 ( Superellipse )，又叫Lamé curve，是一种类似于椭圆的封闭曲线。在笛卡尔坐标系里，超椭圆曲线上的点根据数值的不同，会呈现出不同的曲率。

而在UI设计中，超椭圆则是一个介于圆和方之间的形状，饱满可爱，常被用来作为图标的背景框。

值得注意的是，超椭圆与圆角矩形是有明显区别的（如下图），圆角矩形我们通过调整矩形的圆角就可以轻易得到，那么超椭圆应该如何绘制呢？

01 · 在PS中绘制超椭圆

1.
1. 绘制一个正圆；
2.

3.
2. Ctrl+T自由变换；
4.

5.
3. 变形（如图点击右上角图标，或对着圆形点击右键，选择变形）；
6.

7.
4. 在变形样式中选择【膨胀】，回车；
8.

9.
5. 再次Ctrl+T，按住Shift进行旋转；
10.

11.
6. 完成！

02 · 在AI中绘制超椭圆

1.
1. 绘制一个正圆；
2.

3.
2. 效果-变形-膨胀；
4.

5.
3. 变形选项：调节【弯曲】，叶哥建议将滑杆往左边调，这样可以直接得出一个正确角度的超椭圆，省去了旋转的步骤，节约时间；
6.

7.
4. 对象-扩展外观；
8.

9.
5. 完成！

03 · 在Sketch中绘制超椭圆

1.
1. 显示-显示网格；
2.

3.
2. 在网格中绘制一个正圆；
4.

5.
3. 双击正圆，进入锚点编辑；
6.

7.
4. 分别将正圆的四个锚点向内或向外拖移一个网格；
8.

9.
5. 完成了哈哈哈！

总结

超椭圆在UI设计中是介于圆与方之间的一种形状，并且有区别于圆角矩形。 在PS和AI中，利用膨胀变形效果即可快速得到超椭圆效果，而在Sketch中，只能手动调整圆形的四个锚点。 还有许多种方法可以绘制超椭圆，叶哥这篇文章只给大家总结了最快速的方法。

接下来，你们是不是也能轻松绘制出萌萌哒的超椭圆了呢？

附加一点