【网页设计】两种形状的按钮哪种更适合你的设计？

发布时间：2022-12-29|点击：5次

---

　　现在网页设计中的按钮大多采用圆角或是直角矩形，那到底是圆角矩形好还是直角矩形好呢?两种矩形又适用在何种环境下，两者要如何转化呢?这里告诉大家几点小诀窍。

　　从人的视觉体验来看，设计中可以多用圆角矩形

　　圆角在艺术上的美感很容易被意识到，但不是每个人都能准确的解释这种美感从何而来。这个问题的关键其实就在于你的眼睛。

　　有专家说，眼睛更容易接受圆角矩形而不是直角矩形，因为圆角矩形在视觉过程中更易认知。中央凹是视网膜中视觉最敏锐的区域)在处理圆形时最快，处理边缘则需要涉及更多的大脑中的“神经影像工具”。于是，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。

　　圆角比尖角更容易识别

　　这是因为卡片角落的可辨别边缘引导我们的眼睛识别视觉差异。相反，具有尖角的卡片看起来彼此相同且统一，这不太可能吸引我们的注意力。

　　圆角使得信息更易于处理

　　圆角对于地图和图表更有效果，因为它们使得我们的眼睛更容易跟随着线条，它更好地适合了头部和眼睛的自然运动[5]。锐角将你的视线从线径上移开使得你在线径改变方向时仿佛经历一种突然的暂停。但是圆角，则引导你的视线平滑地连续地在边角上过渡。

　　在网格布局中，圆角的表现更好。

　　例如，在TurboTax的仪表板上，与使用尖角卡的中间部分相比，使用圆形卡的顶部非常引人注目。

　　那么在设计时应该使用完全圆形的按钮吗?

　　当你深入了解应用程序中的圆形按钮后面的UX时，可能会遇到这些问题。我们知道更大的按钮尺寸，更亮的颜色和更强的阴影可以使按钮更加突出，但在动作按钮和其他非交互元素之间找到正确的平衡是很有挑战性的。

　　全圆形按钮具有足够空间的接口。在Spotify移动和web应用程序中，全圆绿色按钮的放置非常成功地引导用户注意。

　　Spotify应用程序中的圆形按钮

　　

　　从上下文来讲，由于Spotify用户体验完全与游戏有关：播放音乐，播放播客和发现播放列表，因此应用程序中的主要交互非常简单。全方位播放按钮与专辑和列表ui极为不同，这反过来又鼓励用户点击“播放”。

　　什么时候不应该选用全圆形按钮?

　　全圆形按钮看起来像标签。

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

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

　　完全圆形的按钮在显示嵌套选项时失败。

　　完全圆角的按钮通常包含一个V形图标，表示有可用的嵌套选项。触发嵌套选项的有效触摸区域锁定为V形图标的大小。

　　全圆形按钮不适合堆叠。

　　当我们在表格和卡片中堆叠完全圆形的按钮时，它们看起来不合适。假设我们有一个有10行的数据表并且每行都有一个按钮，我们最终会得到10个圆形按钮，它们看起来都像是主要的动作按钮。

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

　　圆角或直角按钮的选择最终由设计决定

　　在按钮上应用圆形外观或锐角外观之间没有对错。鼓励和授权用户与应用程序交互，并通过各种方式减少干扰。