Ui设计中按钮设计的分类和其设计原理

设计营销   2021-03-31

按钮是交互式元素之一,能根据特定的命令从系统中得到相对应的期望的反馈。基本来说,按钮是一个控制组件和控件,允许用户直接与数字产品进行沟通,并发送必要的命令来实现特定的目标。比如发送电子邮件、购买下单、下载、打开播放等操作。

用户界面设计的按钮非常多样化,可以满足多种用途。一种典型的、经常使用的按钮,它呈现出交互区域,通常清楚地表示可见性,并且具有特定的几何结构,通过这个按钮可以解释将要执行的操作。设计者需要花费大量的时间和精力去创造出高效、引人注目的按钮,这些按钮与一般的风格概念很自然地结合在一起,但它们的对比足够突出。

按钮设计原理:

大小:

尺寸是告诉用户布局元素的重要性,以及构建组件层次的一种重要方式。一种吸引人的、有效的呼唤式的按钮应该大到能迅速找到,但也不能太大,以免破坏布局结构。该设计规格严格规定了按钮的尺寸,Apple建议手机用户界面上的CTA至少要达到44*44像素,而Microsoft建议达到34*26像素。如果你是为手机设计的,不同类型的按钮的要求可能会很严格,所以要仔细研究设计规范的指导方针,以尽量减少由于UI设计不好而被拒绝的应用。

色彩:

要让一些按钮容易被注意,而一些小按钮则需要选择适当的颜色。但问题是,人类的情绪和行为与视觉环境密切相关,而色彩是其中一个最强大的工具。选择CTA的颜色时要记住这一点很重要:按钮和背景颜色必须有很好的对比度,这样按钮才能从其他UI组件中脱颖而出。

外形:

对于CTA按钮来说,它们通常看上去是水平的矩形。这是因为你要明白按钮是可点击的,并且人们通常把它看成一个按钮。按钮的形状也要与网页或app的设计风格相一致。

定位:

按钮的放置位置是建立可靠视觉层次和清晰导航的关键。若他们位于用户眼睛所不能捕捉到的区域,其他视觉方面(如颜色和尺寸)也可能不起作用。设计者必须了解可扫描区域,并将核心功能按钮放在用户可以操作的空间。

1.gif


一起来看一下在移动app和Web设计界面中经常被广泛使用的几种类型的按钮。

CTA按钮

这个CTA按钮被设计来鼓励用户在用户界面上采取某种行为。这个动作提供了特定页面或屏幕的链接(例如:购买,联系,订阅等等),换句话说,它将普通用户变成了订阅用户。所以从技术上说,它可以是任何类型的按钮,通过使用文本进行号召来支持。这和页面或屏幕上所有其他按钮都不同,因为它有一个引人注目的特性:它必须引起用户的注意,并激励他们去做他们想做的事情。


文字按钮

这里有一个按钮,上面有一段文字。这就是说文本周围没有形状、色块填充等等。所以,按照我们对这一现象在物质世界的标准理解,它看上去并不像一个按钮。在页面中,文本是唯一的视觉交互元素。然而,它是一个实时控件,允许用户与界面交互,鼠标悬停时,文本颜色会改变,或文本上出现下划线。另外,网站的标题也不加任何标签,只有文字。


下拉按钮

当你点击了下拉按钮,就会出现一个下拉列表。你经常会在设置按钮上遇到这种情况。在列表中,当用户选择一个选项时,它通常被标记为Activity。


汉堡按钮

这是一个隐藏菜单按钮。当您点击或者点击,菜单将展开。由于其形状由三条水平线组成,所以这个菜单(和按钮)看起来像是典型的汉堡。如今,它已经成为手机端页面布局中一个广泛使用的交互元素;关于它的优缺点的争论依然激烈。

Hombury菜单释放空间使界面更简洁、更透气;从功能上来说,它为其他重要的布局元素节省了很多空间。为响应和适应性设计,隐藏导航元素,使界面在不同的设备上显得更协调。


浮动操作按钮(FAB)

浮点(FloatingActionButton)(FAB)是在用户界面上浮动的图标。其形状、位置、颜色与界面的其他部分有很大的区别。

自2014年Google推出MaterialDesign后,FAB作为用户界面的一种元素,在网站和手机设计中得到了广泛的应用。

尽管FAB可以被看作是一个微不足道的、不重要的UI组件,但是它的效果非常重要,页面上FAB按钮的位置通常由高可见性因素决定,并可根据应用的通用设计概念进行更改。根据经验,每页只使用一个FAB。


共享按钮

由于社交网络、聊天和电子邮件的高度流行,这些按钮使得与其他人共享应用程序或网站内容变得容易。这样的按钮可以直接向社交网络帐户共享内容或成就。要让分享变得简单明了,它所呈现的图标带有特定社交网络的商标,而且容易识别。


虚拟按钮

虚实按钮,顾名思义,即在设计网页中的按钮时,它不再设计复杂的颜色、样式和纹理,而只是外部的线框表示轮廓,内部的只字片语表示功能,背景透出,与整个页面/背景相协调。


加号按钮

点击按钮允许用户向系统中添加一些新内容。取决于应用的类型,它可以是新发布的文章、联系人、位置、评论、条目等等。有一些时候,用户会直接点击这个按钮,进入创建内容的模式窗口,还有一些时候,点击之后会出现更多的菜单选项,这样就可以设置合适的交互流程,而不会让屏幕超载,这对屏幕空间有限的移动界面尤为重要。




维好维可-用户体验体验创新设计
合作咨询
+86-21-51115850
© 2010-2024  维好维可 | 用户体验创新设计公司
沪ICP备19006116号-1

联系我们,开启一场关于您项目的讨论会吧。

联系电话:
+86-21-51115850
商务邮箱:
hi@wellworks.cn
复制
公司地址:
上海市松江区茸阳路69号(百原PARK)贰号楼2楼

©2010-2024 维好维可 | 用户体验创新设计公司-版权所有

沪ICP备19006116号-1

需求留言 + 获取方案

提交信息后,我们的专属顾问会在1个工作日内与您联系。

怎么称呼?
您的手机?
您的邮箱?
您的需求?
维好维可-微信二维码