BootstrapUX设计的——按钮使用实例、类型和状态

按钮是一个平凡的、日常交互中都可能遇见的核心因素。但针对创建一个通的互体验过程来讲,按钮则是一个重点的素,因此,投入一定精力到该因素的计划及是那个有含义的。另外,我们为为大家梳理出元素的主导项目跟状态——都是为创建有快速之按钮进而升级用户体验而所要询问及之骨干信息。

同、使用按钮的超级实例

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://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6\#.tzz6rcmju

相关文章