UI设计师,你真的了解平滑圆角吗?(附使用指南)repo

2022-10-27 11:21:37 浏览数 (2)

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

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

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

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

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

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

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

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

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

下图是常规圆角,试试看:

换成平滑圆角呢?

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

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

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

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

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

让我们实际看看这个。

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

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

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

总结

  1. 使用圆角可以让眼睛更好的遍历不同的元素。
  2. 使用平滑圆角可以让这种便利效果更加缓和和微妙。

通过使用圆角平滑,您可以使布局和元素更容易在视觉上遍历,提高可用性,并最终提高目标用户的参与度。

原文:https://uxplanet.org/ui-ux-design-corner-smoothing-720509d1ae48

0 人点赞