AMO全媒体运营
首页 知识星球 UI按钮的类型与设计实践

UI按钮的类型与设计实践

按钮是界面设计中一个很重要的元素,可以吸引用户的注意力并将引导用户到不同的页面或完成特定的操作,在创建流畅、高效的用户体验方面起到重要作用。 按钮看起来很简单,但有效且高效的按钮设…

按钮是界面设计中一个很重要的元素,可以吸引用户的注意力并将引导用户到不同的页面或完成特定的操作,在创建流畅、高效的用户体验方面起到重要作用。

UI按钮的类型与设计实践

按钮看起来很简单,但有效且高效的按钮设计仍然受到很多设计原则的支撑。作为设计师,我们应该如何改进设计,让按钮更易于操作呢?一起来看看~

一、UI设计中不同类型的按钮

1、CTA按钮

号召性按钮(CTA)是界面中的交互元素,用来执行特定的操作,例如联系我们、订阅信息、购买产品或加入购物车等。

CTA按钮作为执行重要操作的按钮,在设计上应该更醒目,能让用户快速分辨出来。

UI按钮的类型与设计实践

2、文字按钮

文字按钮是以可点击的文字作为按钮,文字底部没有图形背景。文字按钮的操作面积小,突出程度低,多用于不太重要的操作。

UI按钮的类型与设计实践

3、下拉按钮

在有的网站导航栏中,单击选项会出现下拉列表,展示更多二级选项,方便用户可以查看并选择更多的操作。

UI按钮的类型与设计实践

4、描边按钮

描边按钮是背景透明效果的按钮,用于辅助操作。当界面中有多个按钮时,使用描边按钮有助于划分视觉层次结构,高优先级的按钮使用填充效果,辅助按钮使用描边按钮。

UI按钮的类型与设计实践

5、汉堡按钮

汉堡按钮隐藏在菜单栏中,当我们点击时,菜单将展开并显示所有的选项。汉堡按钮广泛应用于web和移动应用中。

UI按钮的类型与设计实践

6、悬浮按钮

悬浮按钮(FAB)位于界面的最高层级,优先级高,通常为圆形,在界面中执行最常见的操作。

FAB按钮常用于创建新项目或者发表内容等操作,FAB的位置应确保按钮具有较高的可访问性和可视性。在有的产品中,点击FAB会出现更多的操作,将常用的操作聚集到一个按钮中。

UI按钮的类型与设计实践

二、有效的按钮设计实践

1、让按钮看起来可点击

当用户与界面交互时,他们应该快速明白什么是可点击,什么是不可点击的。作为设计师,我们不会希望用户花很长的时间来理解他们看到的元素,因为用户花的时间越长,产品的可用性就越差。

为了确保用户能够明确知道按钮是否可点击,我们可以使用用户熟悉的按钮样式,例如方形边框的填充按钮、圆角填充按钮、带有阴影的填充按钮、描边按钮等。

UI按钮的类型与设计实践

其中最为常见和熟悉的设计是带阴影的彩色填充按钮,当用户看到这样的按钮时,他们会立刻明白这是一个可点击的按钮。

2、考虑按钮在界面中的位置

按钮的位置很重要。作为设计师,我们不希望用户花时间寻找按钮,而是应该将按钮放在用户期望的位置上,方便用户去操作。

对于按钮在界面中的位置,首先要了解F型和Z型的浏览模式。

F型浏览模式

UI按钮的类型与设计实践

在F型模式中,用户通过水平移动的方式读取界面上方的内容,构成F的顶部栏。然后用户向下移动页面,再次水平移动,再以垂直移动的方式浏览左侧的内容,形成F型的主干。当界面中有大量数据时,通常会遵循这样的浏览模式。

UI按钮的类型与设计实践

Z型浏览模式

UI按钮的类型与设计实践

Z型浏览模式模仿了人眼阅读的路径——从左到右,从上到下。

用户首先从左上角到右上角扫描,形成Z的顶部条。然后向左下角扫描,最后再向右看,形成Z型的浏览动线。

UI按钮的类型与设计实践

3、标注按钮的作用

按钮应该始终有清晰的注释,展示点击时将执行的操作。过于通用或者模糊的注释可能会让用户感到困惑。

UI按钮的类型与设计实践

4、正确调整按钮大小

按钮的大小代表了元素优先级的高级。尺寸较大的按钮表示更重要的操作。

当在一个界面中存在多个操作按钮时,为了让最重要的按钮看起来更突出,可以考虑让这个按钮比其他按钮的尺寸更大,并且利用颜色和对比,让这个最重要的按钮更吸引视线。

UI按钮的类型与设计实践

5、始终提供反馈

每当用户点击按钮时,他们期望界面能有提示或者反馈。在激活按钮时,按钮应该改变状态,给用户一个反馈,便于用户知道点击按钮发生了什么。

UI按钮的类型与设计实践

最后

以上总结了设计中按钮的6种类型以及5种改进按钮设计的方法,希望通过这些内容能让大家对按钮设计更重视,对已了解的按钮设计知识查缺补漏!

慢慢来比较快,如觉得有帮助。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

决定未来职业高度的“软技能”,作为设计师该如何培养?

决定未来职业高度的“软技能”,作为设计师该如何培养?

如果你像我一样,关注了许多设计和技术博客,那你一定读过大量诸如:介绍如何做移动端设计,什么是精益设计,如何做到完美适配,...
我们需要用户增长设计师UGD吗?

我们需要用户增长设计师UGD吗?

一位招聘负责人和我抱怨说,他们最近刚发出UI招聘,就收到数量恐怖的求职申请,现在设计师这么难找工作了吗?又叹气说:“数量...
设计师该如何做知识管理(上)

设计师该如何做知识管理(上)

不久前,很荣幸受到 58UXD 团队邀请,做了《设计师该如何做知识管理》的线上分享。预料之外的是,这次分享收获了远超预期...
这套网页设计,看你能偷走多少排版技巧

这套网页设计,看你能偷走多少排版技巧

当我们收集的灵感图越多,越难回头整理、查看,趁着这段时间,我仔细研究了每天在社群发布的“网页设计”灵感部分。 发现这些作...
9种常用UI界面中的控件规范,UI设计师要学的哦!

9种常用UI界面中的控件规范,UI设计师要学的哦!

我们在设计UI 界面的时候,有一些控件几乎总是会用到。用户熟悉了它们的交互模式,也因此建立了心智模型,很清楚如何通过这些...

发表回复

返回顶部