如何把按钮设计做到最好？

按钮交互的设计由来

为了设计合适的交互方式，我们需要回顾实体按钮的发展历史，作为UI组件之一的按钮来源于实体按钮，现在广泛用于互联网产品中。按钮非常神奇，只需手指触摸，就可以打开一个APP、启动汽车或者一个系统，即使用户不懂背后的原理。在《Power Button》这本书里，Rachel Plotnick研究了今天按钮操作的文化起源，描述了按钮成为互联网产品的命令方式，可以实现毫不费力控制。

“你只需按快门，其余的我们来做。”—柯达相机用抓人眼球的口号来吸引潜在的顾客。

这正是迄今为止，按钮吸引用户的地方，只需简单的触摸，就能获得处理事件的满足感。即使很多新家电和其他设备都进化为了触屏操作，实体按钮却并没有完全消失，其塑造的行为习惯仍然影响按钮设计的直观性和易用性。

按钮与链接的区别

按钮传达了用户可以执行的操作，它们通常在UI界面中，比如：对话框、表单、工具栏等。区分按钮和链接特别重要：

链接：用于导航到另一个位置，比如：“查看全部”页面、跳转另一个位置等。
按钮：用于实现一个操作，比如：提交、合并、新建和上传等。

按钮的多种状态

设计正确的交互和样式，对按钮设计十分重要。按钮每个状态必须可识别，要显著区别于其他状态和周围的布局，但是也不能完全改变组件或者制造视觉混乱。

普通状态：可交互和可用的状态。
焦点状态：用户使用键盘或其他输入方法来突出显示一个元素。
悬停状态：用户把光标置于可交互元素上的状态。
触发状态：用户已点击按钮后的状态。
加载状态：当操作没有立即实现时，表示正在进行的状态。
禁用状态：按钮目前不可交互，但以后可以使用。

按钮的多种样式

最常见的是圆角按钮，可以轻易识别，并且在输入字段旁边看起来不错。为按钮选择正确的样式，取决于目的、平台和规范。以下是一些最流行的样式：

不同样式的优先级

样式最初是用来区分操作的优秀级。明确操作的优先级，可以在众多的选择前，引导用户。通常，要有一个突出的按钮（主按钮），几个二级按钮，还有三级按钮。

有时不需要默认按钮

通常，把最常用的按钮设置为“默认”（使用主样式）和选中的状态。这样可以帮助大多数用户，更快完成他们的任务，引导正确的方向。

此外，当选择同等重要时，或者操作存在危险，在这些情况中，需要用户明确按钮的选择而不是意外选择。

别让用户思考

Don’t make me think（别让用户思考）是可用性工程师Steve Krug所著的书的名字（中文《点石成金：访客至上的网页设计秘笈》）。其中指出，触屏是为了让界面更明显，而不是让用户产生困惑。基于多年使用不同的设备和其他产品，用户养成了对按钮外观和功能的特定期待。如果和“标准”按钮的样式差别太大，就会让用户迟疑和困惑。