（一） 按钮的基础概念

1. 按钮是什么

按钮是图形界面中用来进行功能交互的组件，是指为用户提供触发事件的简单方式的任何图形化的控制元素。用户通过“按钮”向界面传达某个行为（action）或命令，界面通过模拟真实世界的按钮的效果，向用户传达反馈。按钮控件被广泛用于表单、对话框等场景中的操作，并有多种大小、颜色、质感、状态等一系列变量。

2. 什么不是按钮

了解了按钮控件是什么，那么在丰富的控件类型中又有那些控件容易被混淆成按钮呢？

（1）仅改变局部状态的控件，不是按钮

按钮是单次动作指令并且会得到系统反馈。系统反馈通常指页面整体状态的改变，这往往意味着某个完整流程的结束。例如新用户注册流程中，点击“注册”后，系统给予的“注册成功”的反馈，表明注册流程的结束。

按钮被点击后，获得了系统的反馈

如下图所示，用户进行了【选择】，改变了控件的【状态】和【内容】。但页面整体的状态没有改变，同时流程自身并没有在指令结束后进入为另一个流程。类似的，开关（Switch）控件的操作也是改变了控件的状态

控件的改变 并不是流程的变化

（2）超链接是导航控件，不是次级按钮

按钮代表着动作。交互状态常有normal、hover等等。

而超链接则代表着导览，不会打断或结束当前的流程，更不会改变系统的状态。就像是任意门，容许使用者在众多的文件或网页之间来回穿梭。蓝色的超链接在访问过后变成紫色。

3. 按钮的变化与发展

（1）按钮起源于实体人机界面

18世纪初，欧美流行的打字机的按键，可以说是最早按钮的一种实体形式。随着时代发展，电视机，录音机，冰箱，洗衣机等电器的按钮也从简单的“开关功能”发展出上下移动精确的调节，旋转调整等相对复杂的设计。

打字机的按键，是早期应用比较广泛的实体按钮

（2）键盘+鼠标的组合交互促使按钮控件的诞生

随着个人PC的普及，图形化用户界面和键盘鼠标一起逐渐被用户熟知。视觉风格也从像素化向我们当前熟知的风格靠近。

为了更准确、更直观的向用户传达系统的反馈，逐渐发展出按钮的各种交互状态：normal状态、hover状态、active状态，visited状态等。

第一套用于电脑系统的UI界面 

2007年，随着移动互联网的爆发，按钮的外观与交互方式发生翻天覆地的变化。UI视觉风格先后经历3D效果、拟物化、扁平化。而随着触控屏幕的普及，交互方式逐渐扩展为单击、长按、3Dtouch、拖拽等

样式与交互方式的变化与近些年的技术趋势有很大关系，例如屏幕技术在色阶数量和细节还原度相比前十年有飞跃的发展。用户级的指数增长，也促使越来越多的视觉风格得到实际应用和发展的机会。同时用户习惯与认知水平也推动着更简洁的风格和更复杂的交互形式被大多数接受。

按钮控件的视觉风格变迁

（3）按钮的发展趋势与未来

近些年，按钮的不同状态的样式、丰富有趣的动效，使得如何更贴近实际的应用场景成为了热门主题，例如下图中的下载场景中的loading状态。

下载场景中的loading状态

随着诸如VR、5G等能够改变整体媒介的技术逐渐成熟，按钮的应用载体将不再局限于电脑、手机屏幕，可能会有更多的呈现形式以及更多的交互形式。

VR场景中的用户操作界面

（二） 按钮的设计规范

 设计规范

（1）必要的说明与引导

因为资源是稀缺的。硬件方面，智能设备的屏幕尺寸、可采用的交互方式是有限的。将内容和操作“塞”进有限的空间，并以有限的方式操作。另一方面，用户的认知负荷是有上限的，包括理解能力、记忆能力、注意力等。同一时间段中处理的信息是有限的。从商业角度，开发、运营和市场的资源是稀缺的，计划要做的事情永远多于现有的资源。

基于上述原因，按钮控件应用在实际的用户页面时必须有明确的优先级的区分。页面中有多个按钮时，根据功能目标划分优先级。每个界面中只能有一个优先级最高的按钮。设计师可利用颜色、样式、尺寸进行区分。

不同优先级的按钮

（2）必要的反馈

如前文提到的，按钮控件源于现实生活的实体按钮，是现实世界的映射。那么状态的映射关系也需要符合用户的认知。用户需要了解操作已被接受、结果如何、接下来可以做什么。

常规反馈包括：normal, disabled, hover, focused, pressed。而在移动端的UI界面中，常见Normal、Disable、Pressed三种基本状态。

Normal：可被操作时

Disable：不可被操作时

Hover：鼠标操作时，光标悬停

Focused：键盘操作时，控件被选中

Pressed：按钮被按下时

AntDesign的UI Kit中按钮的不同状态

（3）示能——明确的展现与人的交互关系

示能（Affordance）是一个常应用与工业设计领域的概念，来源于唐纳德·诺曼的《设计心理学》。从狭义概念上可被理解为，从可视性的角度明确了一个物理对象与人之间的关系，是人知觉到事物提供的行为可能。例如有一扇带把手的玻璃门和一个人，“人打开玻璃门”就是示能。而反示能是指人和物理对象之间不可能的互动，比如有一块普通的玻璃和一个人，“人不可以穿过玻璃”就是反示能。

首先应当从按钮的摆放位置上，通过整体版式的空间布局，使按钮是可被用户发现的。另一方面，当复数按钮并列排列时，注意主按钮和次级按钮的位置保持统一。其次样式上，可以通过颜色、形状等方面的调整，使按钮像一个按钮。