来源:medium  作者：Shan Shen

BIGD翻译整理

在设计中，我们应该用圆形按钮还是直角按钮？圆形按钮是否具有更好的可用性？我们又该如何做出正确的抉择？

圆形还是方形？

当你深入了解应用程序中圆形按钮背后的用户体验时，可能会遇到这些问题——我们可以轻易地通过改变按钮的大小、颜色和阴影使它们更加突出，但却很难在动作按钮和其他非交互元素之间找到正确的平衡。

通过变量来增加按钮的可发现性

圆角识别度更高？

答案是肯定的，通常圆角设计对视觉更加友好。比如当我们将纸牌排成一行时，圆角纸牌总数更容易计算。

圆角比尖角更容易辨认

这是因为圆角卡片上，易区分的边缘会引导我们的眼睛识别视觉差异。相反的，有棱角的卡片看起来是一样的，统一的，不太可能引起我们的注意。

「小编注：在文章《Why Rounded Corners Are Easier on the Eyes》中指出，巴罗神经学研究所进行科学研究发现，“角落的感知突出性与角落的角度呈线性关系。锐角产生比浅角度更强的虚幻显着性。换句话说，角落越尖锐，它就越亮，看起来就越难。（如下图）」

所以通常在网格布局中，圆角的表现更好。

例如，在TurboTax的网页中，使用圆角设计的顶部部分要比使用尖角设计的中间部分更加引人注目。

Turbotax 网页

应该使用全圆角吗？

如果你的界面中有大量的空间可以利用，那么全圆角按钮是非常好的选择。例如在Spotify mobile和web apps中，全圆角绿色按钮的放置非常成功地将用户的注意力引向了行为召唤按钮。

「小编注：行为召唤——Call To Action Design，透过设计让用户自己想到要做某种行为，而不是要求、强迫用户去做。」

Spotify应用程序中的圆形按钮

从整体来看，由于Spotify的用户体验与播放有关:播放音乐、播放播客和发现播放列表，因此应用程序中的主要交互非常简单。圆形的播放按钮与专辑、列表UI极为不同，这反过来又鼓励用户点击“播放”。

Spotify中“播放”的互动

什么时候不用圆角？

以下是几个全圆按钮引发可用性问题的实例。

1.全圆按钮看起来像标签。

当圆形的按钮看起来与标签完全一样时，用户会感到困惑：“我是否点击按钮或过滤器？”

圆形按钮还是标签?这很难说。

2.全圆按钮在显示嵌套选项时失败

全圆按钮通常包含一个V形图标，表示有可用的嵌套选项。触发嵌套选项的有效触摸区域锁定为V形图标（16x16或24x24像素）的大小。

这是一个相当小的点击区域

但如果我们使用半圆角按钮，就可以丢弃V形图案，使按钮充当弹出按钮。单击后，将显示所有可用选项，这种方式显然更加有效。

Apple不鼓励使用圆形按钮作为动作按钮。全圆形按钮通常专门用于“ 帮助 ”或呈现互斥选项（单选按钮）。

Apple动作按钮

▼

Apple帮助按钮

▼

Apple选择按钮

▼

来自Apple 人机界面指南的图像

3.全圆形按钮不适合堆叠

当我们在表格或网页中堆叠全圆角按钮时，它们会看起来不太合适。假设我们有一个有10行的数据表并且每行都有一个按钮，那我们最终会有10个全圆角按钮，它们看起来都像主操作按钮。

替代方案是我们可以使用无边框按钮，例如新macOS通知中的按钮，或仅在悬停时显示按钮选项。通过最小化按钮的存在，用户可以专注于他们正在与之交互的应用程序。

使用非边框按钮进行堆叠布局

圆角的美学

圆角看起来很现代，应用全圆角设计的趋势从移动端开始，然后扩展到了Web UI。圆角设计传达了简约、乐观和开放的态度，这也是为什么它适用于许多设计系统，并在图标、按钮和插图中被广泛使用的原因。

Chrome浏览器在最近的更新中就应用了圆角地址栏，以表明其在移动设备上的圆形Google搜索栏的合并功能。在登录新页面之前，用户还可以在键入过程中获得搜索结果的简要视图。

与其圆形外观统一，Chrome工具栏中的其他按钮也具有圆形悬停状态。在其他更新的Google应用程序（如日历，Gmail和云端硬盘）中也很容易找到圆形元素。

最后

在选择圆角按钮或直角按钮之间其实并没有对错。按钮弧度大小真正的意义在于是否能鼓励和授权用户与应用程序进行交互，并通过各种方式减少干扰。

END

用设计的角度看世界，用学习的方式来成长

BigDcc