按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。
按钮的类型
按钮根据表现形式有如下类型：
| 按钮 |
描述 |
|
指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。 |
|
页面上的普通按钮，例如取消表单、重置输入等。 |
|
链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。 |
|
|
按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。 |
按钮的大小
| 实例 |
描述 |
|
|
较大的按钮，通常用在英雄页面或者大屏幕中。 |
|
|
默认大小 |
|
|
较小的按钮 |
|
|
|
|
|
块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。 |
按钮的不同状态
| 实例 |
描述 |
|
|
在按钮上使用图标有时能起到点睛之笔的效果。 |
|
|
状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。
|
|
|
当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。 |
|
|
当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。 |
|
|
在互斥的状态切换组中使用图标更加简洁明了。 |
|
|
当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。 |
|
已禁用的操作
禁用的操作
|
当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。 |
按钮的颜色
按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。
| 实例 |
描述 |
|
带渐变的标准灰色按钮 |
|
提供额外的视觉感, 可在一系列的按钮中指出主要操作 |
|
默认样式的替代样式 |
|
表示成功或积极的动作 |
|
提醒应该谨慎采取这个动作 |
|
表示这个动作危险或存在危险 |