「用户体验设计」按钮使用实例、类型和状态

创新互联帮您总结了按钮使用实例、类型和状态：

按钮是一个一般的、平时交互中都也许碰到的根本元素。但对创立一个流通的交互体会进程来讲，按钮则是一个至关首要的元素，因此，投入必定精力到该元素的规划上是十分有含义的。别的，咱们也为咱们梳理出元素的根本类别跟状况——都是为了创立出高效的按钮进而提高用户体会你所必须了解到的根本信息。

一、运用按钮的好实例

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

细心想想一个按钮终究是怎么经过良好的规划向用户传达其功用可见性的。用户又是怎么将一个元素了解成按钮的?最简略的办法就是运用形状和色彩让元素看起来像一个按钮。

Groupon 登录页面杰出首要按钮

别的，你需求仔细思考下规划中涉及到的元素的可接触尺度。就协助用户从一堆元素中识别出按钮一事，按钮自身的尺度巨细也表现着首要的效果。其实各种平台中的规划指南中也都指出了其请求的最小规划尺度。而来自 MIT Touch Lab 的一项研讨表明，手指的均匀接触巨细在10-14mm之间，指尖的规模则在8-10mm，这就使得最适宜的尺度下限应当在10mm x 10mm摆布。

2、留意按钮的方位和次序

应当把按钮放在用户简单发现或预期看到的方位。例如，iOS UI guidelines 中的实例：

按钮的摆放次序也十分首要，格外对一双成对的(比方“前一个”和“下一个”)选项按钮。必定要保证最首要的按钮在视觉规划上更为杰出。

在下面的示例中，咱们运用赤色标示出也许代表毁灭性操作的按钮。请留意首要按钮不光在色彩和比照度上愈加杰出，其方位也放在了对话框的右侧。

3、要不要运用标签

标签用来通知用户操作按钮后会发作什么。

相同是上面的示例，假如没有运用适宜的文本标签，状况如下，瞧瞧，你感觉到这其间的不相同了吗?

4、做法呼唤按钮(CTA)

应当使最首要的按钮(格外是做法呼唤类按钮)看起来确实是最首要的。

二、按钮形状

一般状况下，你会依据网站/运用程序的类型将按钮规划成直角或圆角型。一些研讨指出，圆角按钮可以提高信息的表现力并招引用户的留意力到元素的基地处(文本有些)。

圆角矩形按钮

你当然也可以更具立异，运用别的比方圆形、三角形或许自定义形状的按钮，可是请紧记挑选后者也许会更有风险。

悬浮按钮是运用自定义形状按钮的一个极好的比方

请保证贯穿整个运用程序的控件保持良好的一致性，好让用户可以轻易的识别出你的界面元素并可以分辨出终究哪些是按钮。

三、按钮类型和做法

1、起浮按钮

起浮按钮一般成直角型，经过必定的暗影表明其可点击性。对比与扁平的规划，其增加了全体尺度，在对比拥堵的界面上更明晰可见。

(1)运用。作为内联元素运用，在一个包括多样性内容的规划里边着重动作。

(2)做法。按下后起浮按钮稍微弹起并填充色彩。

(3)实例。起浮按钮要比扁平按钮更为杰出，实例如下：

2、扁平按钮

按下时，扁平按钮并不会弹起，但相同会填充必定色彩。扁平按钮的首要优点简略明晰——它们最小化用户从内容中分神的也许性。

扁平按钮

(1)运用。

① 在对话框中，一致按钮自身跟对话框内容的款式：

Android 对话框中的扁平按钮

② 在工具栏中：

工具栏中的扁平按钮

作为有必定内边距的内联元素，用户可以轻易地留意到它们。

(2)做法。

(3)实例。

3、开关按钮

一个开关按钮答运用户在两个(或多个)状况之间切换。

开关按钮

(1)运用。开关按钮最常用来标示On/Off状况。

开关按钮相同可以用在一组有关的选项上，但此刻你的规划应当向用户传达当时的开关按钮是这一组中的一有些。别的，开关按钮请求：

① 一个开关按钮组最少由三个开关按钮构成;

② 运用纯文本、图标或许两者联系作为按钮;

有一个选项被选中的开关按钮组

运用图标关于开关按钮来说十分适宜，它可以友好的标示出按钮终究是选中仍是未被选中，就像向一个条目中参加或移除一颗星相同，它们首要用在运用程序中的标签栏、工具栏、操作按钮或具有开关含义的选项中。

对你的按钮选用准确的图标是十分首要的，我从前在这篇文章表达了该主题。

(3)实例。iOS在设置有些运用到了开关按钮。

4、虚拟按钮

虚拟按钮是指具有根本的按钮形状(如直角形)的透明按钮，但有细实线的边框，并在边框内部包括纯文本。

(1)运用。运用虚拟按钮作为一个首要的CTA按钮一般不是一个好主意。在 Bootstrap 一例中，你可以看到虚拟按钮“Download Bootstrap”看上去跟它们的logo运用了同一种款式，其成果便是也许造成用户疑问。

虚拟按钮最适合用于相对非必须一些的操作，由于它无法(或许说也不应当)跟首要的 CTA 按钮对比首要性。理想状况，你一般期望用户看到你的首要 CTA 按钮，假如不有关，用户也可以跳至非必须按钮上。

(2)做法。

(3)实例。Airbnb的网站上有“Become a Host”的虚拟按钮。

5、悬浮按钮

悬浮按钮是 Google Material Design 中的一有些，是一种点击后会发生墨水分散效果的圆形按钮 。

(1)运用。悬浮按钮用在一个促进操作(promoted action)上。

(2)做法。悬浮按钮的特性在于，它是一个圆形的漂浮在界面之上的、具有一系列格外动作的按钮，这些动作一般和改换、发动、以及它自身的变换锚点有关。

四、怎么挑选按钮类型

挑选按钮类型应当根据主按钮、屏幕上容器的数量以及屏幕的全体规划来进行挑选。

Google Material Design 建议选用的挑选按钮类型

屏幕Z轴深度

1、审视功用：它是不是十分首要并且运用广泛到需求用上悬浮响应按钮?

2、思考容器和层次：根据放置按钮的容器以及屏幕上层次堆叠的数量来挑选运用何种类型。

3、查看规划：一个容器应当只运用一种类型的按钮。 只在对比格外的状况下(比方需求着重一个浮起的效果)才应当混合运用多种类型的按钮。

五、按钮状况

按钮状况并不太关心用户看到按钮的初始态款式怎么，而是要思考当用户将焦点悬停按钮之上(或别的操作)，未发现任何改动时体系应怎么处理，由于面临这种成果，用户也许就会发生疑问：“它终究是不是一个按钮呢?看样子我如今还必须点一下它，看看这个长得像按钮的元素是不是真的是按钮，哎......”

按钮并是不状况如一的。相反，一个按钮一般是有多种状况的，因此，怎么经过一个视觉反应向用户传达出按钮当时的状况，这是十分首要的一项任务。

1、正常状况

该状况的首要准则——按钮在正常状况下应当看上去确实像一个按钮。Windows8是一个极好的反例——在设置菜单下，用户很难直观地识别出这些元素终究可不可以点击。

Windows8 中正常状况下的按钮

2、取得焦点状况

当用户焦点悬停放置按钮之上时，应当给用户一个好的视觉反应通知其按钮的状况改变，这么用户能马上意识到自个的操作收效，他们也期望这种视觉反应的效果自身可以令人愉悦。

3、按下状况

经过给不相同元素赋予生气(增加立异且有含义的动画效果)，你可以必定程度上愉悦用户。

4、非活泼状况(无效状况)

对于这种状况的按钮，一般有两种处理办法——要么将按钮躲藏起来要么显现为禁用状况。

(1)躲藏按钮的理由：

① 明晰明晰。只需求向用户显现那些需求用到/可用的按钮。

② 节省空间。答运用户在不相同的操作下运用不相同的控件，格外当有很多按钮时格外方便。例如，Gmail这种做法：

Gmail 躲藏掉了用不到的按钮

触发有关动作后再显现出原本躲藏的按钮

(1)禁用按钮的理由：

① 可以显现出也许的动作。即便当时按钮不可用，用户也可以意识到按钮也许有用。你乃至可以有一个工具提示来解说运用的条件。

② 控件方位明晰可见。用户可以搞清楚界面控件和按钮都在哪里(增强用户的可控性)。

禁止状况的按钮

六、结论

按钮是用户运用你的网站/程序的介质之一，你期望用户经过点击相应的按钮从而可以顺着你的主意持续向下走。假如你运用合理的按钮类型、摆放方位并精心规划按钮的状况改变，这自然而然可以发明一个流通的体会进程。而假如你的规划差劲，致使用户乃至不能找到准确的按钮，那最好的成果也许就是用户被打断罢了(需求花时间整理解)，最坏的则也许是的用户发生误操作、满心抱怨乃至是抛弃你的网站/程序。

按钮的用户体会规划一般重视于识别性和明晰度。若将你的网站/运用程序视作是跟一个繁忙的用户进行人机对话的途径，你应当意识到按钮在这个进程中表现着至关首要的效果了吧。

新闻标题：「用户体验设计」按钮使用实例、类型和状态
转载注明：https://www.cdcxhl.com/news/161794.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有用户体验等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联