UI资讯-UX设计之——按钮使用实例、类型和状态

2016-7-7 CGWANG

按钮是一个普通的、日常交互中都可能碰到的基本元素。但对创建一个流畅的交互体验过程来讲,按钮则是一个至关重要的元素,因此,投入一定精力到该元素的设计上是非常有意义的。另外,我们也为大家梳理出元素的基本类别跟状态——都是为了创建出高效的按钮进而提升用户体验你所必须了解到的基本信息。


一、使用按钮的最佳实例

1、使按钮看起来确实像按钮

仔细想想一个按钮究竟是如何通过良好的设计向用户传达其功能可见性的。用户又是怎样将一个元素理解成按钮的?最简单的办法就是使用形状和颜色让元素看起来像一个按钮。

Groupon 登录页面突出主要按钮

另外,你需要认真考虑下设计中涉及到的元素的可触摸尺寸。就帮助用户从一堆元素中识别出按钮一事,按钮本身的尺寸大小也发挥着重要的作用。其实各种平台中的设计指南中也都指出了其要求的最小设计尺寸。而来自 MIT Touch Lab 的一项研究表明,手指的平均触摸大小在10-14mm之间,指尖的范围则在8-10mm,这就使得最合适的尺寸下限应该在10mm x 10mm左右。


2、注意按钮的位置和顺序

应该把按钮放在用户容易发现或预期看到的位置。例如,iOS UI guidelines 中的实例:

按钮的摆放顺序也非常重要,尤其对一双成对的(比如“前一个”和“下一个”)选项按钮。一定要确保最重要的按钮在视觉设计上更为突出。

在下面的示例中,我们使用红色标示出可能代表毁灭性操作的按钮。请注意重要按钮不光在颜色和对比度上更加突出,其位置也放在了对话框的右侧。

3、要不要使用标签

标签用来告诉用户操作按钮后会发生什么。

同样是上面的示例,如果没有使用合适的文本标签,情况如下,瞧瞧,你感觉到这其中的不同了吗?

4、行为召唤按钮(CTA)

应该使最重要的按钮(尤其是行为召唤类按钮)看起来确实是最重要的。


二、按钮形状

通常情况下,你会根据网站/应用程序的类型将按钮设计成直角或圆角型。一些研究指出,圆角按钮能够提升信息的表现力并吸引用户的注意力到元素的中心处(文本部分)。


圆角矩形按钮


你当然也可以更具创新,使用其他诸如圆形、三角形或者自定义形状的按钮,但是请牢记选择后者可能会更有风险。

悬浮按钮是使用自定义形状按钮的一个很好的例子

请确保贯穿整个应用程序的控件保持良好的一致性,好让用户能够轻易的识别出你的界面元素并能够分辨出究竟哪些是按钮。


三、按钮类型和行为

1、浮动按钮

浮动按钮通常成直角型,通过一定的阴影表明其可点击性。相比与扁平的设计,其增加了整体尺寸,在比较拥挤的界面上更清晰可见。

(1)使用。作为内联元素使用,在一个包含多样性内容的布局里面强调动作。

(2)行为。按下后浮动按钮略微弹起并填充颜色。

(3)实例。浮动按钮要比扁平按钮更为突出,实例如下:

作者:Benjamin Brandall

你也许还想了解

电话咨询 在线咨询 查看地图 入学报名