美文网首页产品面面观产品经理进阶UI设计
直角还是圆角?按钮设计背后的逻辑分析

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

作者: Clip设计夹 | 来源:发表于2020-09-28 12:16 被阅读0次

大家好,我是Clippp。今天为大家带来的文章是「按钮」设计。很多小伙伴都思考过这样一个问题:按钮设计到底用直角还是圆角?本文透过表面分析本质,对按钮设计的理解带来质的提升。

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

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

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

一、圆角更易于识别?

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

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

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

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

二、应该使用全圆角吗?

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

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

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

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

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

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

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

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

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

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

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

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

3、全圆角按钮不能堆叠

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

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

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

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

四、圆角的美学

圆角看起来很现代。应用圆角的趋势始于移动端,然后扩展到Web端。

圆角传达了一种简单、乐观和开放的态度。这也解释了为什么它适用于许多设计系统,并在图标、按钮和插图中被广泛使用。

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

总结

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

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


精彩推荐:

1、聊聊卡片式设计的运用

2、案例分析:栅格系统的布局设计

3、如何设计深色模式?这3点因素需要考虑

4、深度解析:服务蓝图的应用逻辑设计

相关文章

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

    大家好,我是Clippp。今天为大家带来的文章是「按钮」设计。很多小伙伴都思考过这样一个问题:按钮设计到底用直角还...

  • 今天的我知识点

    button 按钮 input 文本域 border-radius:直角变圆角 去掉input的...

  • 圆角、直角、文本按钮的10个设计指南总结

    1.按钮的强调等级 2.按钮类型应该在风格上进行区分,以提供其层次结构的视觉提示。一个主要的操作按钮应该比次要的或...

  • iOS 高性能设置圆角

    圆角是一种常见UI效果设计,与直角相比要柔和许多,适合暖色调设计。而在设置圆角时会带来一定的性能损耗,下面介绍几种...

  • Day01-界面分析

    一个支付相关的页面设计。整体视觉感舒适。 关键词:简约、磨砂效果 形:卡片都是圆角设计,按钮微圆角和大圆角区分不同...

  • 用CSS美化你的JavaFX界面

    1.原型参照 2.系统性地设计你的CSS主要设计了全局字体、按钮基础样式、按钮圆角、按钮悬停样式、各种配色主题样式...

  • 一个按钮的时光之旅

    按钮的设计以灰度为主。几乎每个按钮的设计中都会显示精致的渐变、圆角和阴影。 按钮的形式不会发生巨大的变化, 但有更...

  • Day26-UI设计

    简介:一个支付相关的页面设计。 整体视觉感舒适。 关键词:简约、磨砂效果 【形】卡片都是圆角设计,按钮微圆角和大圆...

  • shap圆角动画

    如何对一个背景做动画,圆角变直角,直角变圆角?可以通过对shap的cornerRadius值做属性动画。 创建一个...

  • 如何快捷的写css来美化你的界面

    一.写基本 系统性的设计你的css 例如:全局字体、按钮基础样式、按钮圆角、按钮悬停样式、各种配色主题样式、单选、...

网友评论

    本文标题:直角还是圆角?按钮设计背后的逻辑分析

    本文链接:https://www.haomeiwen.com/subject/dtsduktx.html