直角还是圆角:按钮设计背后的逻辑分析

编辑导语:按钮设计成直角比较好还是圆角比较好呢?这看似是一个小问题,但是实际上关乎着用户的体验感。本文作者就针对这个问题,为我们进行了按钮设计背后的逻辑分析。

1598862311-5251a6e682e0372

按钮设计到底用直角还是圆角?面对这样的问题要学会透过现象看本质,也就是透过按钮看体验。表面上看我们只是单纯在设计按钮,实际上每一次调整都关系到按钮设计背后的用户体验。

直角按钮需要换成圆角按钮吗?圆角按钮的可用性是否更好?如何选择合适的按钮样式?

当深入到按钮设计背后的用户体验时,可能会遇到这些问题。为了让按钮突出,我们可以设计更大的尺寸、更亮的颜色和更深的阴影。

1598862311-73dd1adec5807cc

但在界面设计中,按不仅要突出,还要与其他元素保持适当的平衡,选择圆角or直角起到关键作用。

一、圆角更易于识别?

毫无疑问,圆角的识别度比直角更高。把两类卡片各自对齐,我们能更容易计算出圆角卡片的总数。

1598862312-5050665dc68e106

这是因为圆角卡片的边角有更明显的边缘,可以引导我们的视觉差异。相反,直角卡片看起来彼此一样,因此不太可能引起我们的注意。

所以在网格布局中,圆角的效果更好。

1598862313-3a21cf174d18e1d

例如在TurboTax界面中,使用圆角卡片的上半部分要比使用直角卡片的下半部分更引人注目。

1598862313-85dd2d8cafa199d

二、应该使用全圆角吗?

在有足够空间的界面中,全圆角按钮的表现会更好。例如:在Spotify的移动端和web端中,全圆角的绿色按钮非常成功地吸引了用户的注意力。

1598862314-3c9df65f6dbb230

从内容上来看,Spotify的用户体验全都与播放有关:播放音乐、播放播客、发现播放列表,因此App中的主要交互非常简单。

圆角播放按钮的设计与其他的图标完全不一样,反过来鼓励用户点击“播放”。

1598862315-47f990ea1ab893a

三、什么时候不用全圆角?

在以下几个情况中,全圆角的按钮可能会导致可用性问题。

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

与圆角半径小的按钮相比,全圆角按钮看起来更像标签。用户习惯于点按钮而不是标签,所以面对这样的设计会感到困惑。

1598862316-2dab89fa78daa24

2. 全圆角按钮无法显示嵌套选项

当全圆角按钮带有可用的嵌套选项时,通常会在右侧显示一个V形图标,触发嵌套选项的有效触控区域就锁定到V形图标的大小(16或24像素)。

1598862317-ef14f1ea1b89f32

这是一个很小的可点击区域:

1598862318-9a4efb22871c1e1

如果我们改用半圆角按钮,可以把整个按钮当作触控区域。单击后将显示所有可用选项,这样更有效。

1598862319-a42d716deddcc0b

苹果不建议将圆形按钮作为操作按钮,全圆角按钮通常用于“帮助”或“选择”。

1598862320-b4f2697a64e6a6f

3. 全圆角按钮不能堆叠

每个页面中通常仅有一个全圆角按钮作为主要操作按钮,起到引导和触发的作用。

假设我们的数据表有10行,每行都有一个按钮,那么最终会有10个圆角按钮,结果是它们看起来都像主操作按钮,反而影响操作。

1598862321-96801927f4c620c

替代方法是使用无边框按钮进行堆叠布局,就像iPhone通知的按钮一样,或者只在悬停时显示按钮选项。

通过最大程度地减少按钮的出现,用户可以将精力集中在交互的内容上。

1598862321-1a29133652a40bb

四、圆角的美学

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

更新后的谷歌浏览器也将之前的直角搜索框改成了全圆角的形式,用户在搜索时还可以获得搜索结果的简要视图。

1598862322-1f5103636f342b9

五、总结

按钮应该用圆角还是直角没有对错之分,合适的才是最好的。

透过表面看本质,我们不仅仅是在调整按钮的圆角弧度,实际上还在尽可能减少干扰,鼓励和引导用户与产品交互。

服务及版权声明

根据二〇〇二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。

本网站所有发布的源码、软件和资料,均为作者提供或网友推荐收集各大资源网站整理而来,仅供功能验证和学习研究使用。

所有资源的文字介绍均为网络转载,本站不保证相关内容真实可信,同时不保证所有资源100%无错可用,也不提供相应的技术支持,介意勿下。

您必须在下载后24小时内删除,不得用于非法商业用途,不得违反国家法律,一切关于该资源的商业行为与本站无关。

如果您喜欢该程序,请支持正版源码,得到更好的正版服务。、如有侵犯你的版合法权益,请邮件与我们联系处理(邮箱:1910529407@qq.com),本站将立即改正。

本声明为本站所有资源最终声明,所有与本声明不符的表述均以本声明内容为准。


微咔网 » 直角还是圆角:按钮设计背后的逻辑分析
访问统计
3203547
用户总数
3618
资源总数
3368
运营天数
1263
赞助VIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡