提到按钮，大家的认知都是文字加个背景框，但是真正落地执行起来却又不那么得心应手。由于不同行业下业务场景的复杂性，很多时候很难直接参照其他产品的按钮进行复用，因此我们需要掌握其基本规范和逻辑。作者结合自身的工作经验，对按钮进行了系统性的整理和总结，希望对你有所帮助。

提到按钮，大部分人印象就是文字加个背景框，并没有太多需要设计的空间。但是作为B端设计师，相信很多同学在工作过程中都产生过以下问题：

本文结合自身的工作经验，对按钮进行了系统性的整理和总结，希望对各位B端设计师同学的日常工作和学习有所帮助。

在详细介绍按钮前，我们先简单了解下按钮的发展历史。按钮的概念起初是源自现实物理世界的实体按钮，在日常生活中如电源开关、计算器、电话等都是通过实体按钮进行控制，由于其简单直观易操作的特性，即使如今各种电子产品都逐渐发展为触控屏操作，实体按钮依旧被保留了下来。

2.1 按钮的定义

在B端设计中什么样的组件可以定义为按钮？我们先来看看国内外设计系统中对按钮组件的定义：

按钮相较于输入框、选择器、单选框等控件无法进行数据输入，相较于标签、文字提示等控件也无法进行信息浏览，其关键在于【即时性】和【承载操作】，既可单独完成操作，也可与其他控件联动，作为触发操作的行动点。

2.2 容易与按钮混淆的控件

1）标签 Tag

虽然同样翻译为标签，但是此处指的是 Tag 标签，而非 Tabs 标签页。标签在样式上与按钮几乎相同，且同样可以添加图标标识和触发操作。两者的区别在于，标签侧重于信息的选择、筛选和分类，而按钮则只是单纯用于触发即时操作，因此很多时候标签会设置不同颜色样式以便信息区分。

和其他录入控件相比，开关Switch最显著的特点便是和按钮一样触发后立即生效，因此很多初级设计师很容易将其与按钮归为一类。

其区别是，开关承载的是两种互斥状态的切换，如打开/关闭、显示/隐藏、启用/禁用等，此外由于在视觉上符合用户对现实世界中开关的认知，所以可以直接展示当前项的状态。

单选框和多选框一般用于状态标记，但是无法直接触发操作，所以通常会和按钮配合进行使用。最常见的搭配场景便是在登录页，用户勾选【记住密码】或【自动登录】后标记其状态，再点击按钮进行登录。

相较于其他组件，按钮的元素构成较为简单，分为内容层和容器层，通过将不同元素进行搭配组合，即可设计出不同类型的按钮类型和按钮状态。

内容层：图标和文字自由组合。内容层作为操作引导的核心必须存在。

容器层：控制颜色、圆角、描边、投影等样式，有些设计系统下还会加上交互动效，提升用户体验感。

为什么要划分如此多的按钮类型？

这些按钮间的区别是什么？

为什么各家设计系统下按钮分类都不相同，我应该选择哪种作为参考？

为了区分好按钮类型，关键要先明确类目划分的边界。这里为了方便大家学习，我从按钮的强调程度和使用场景2个维度将按钮进行划分，基本涵盖了常见的按钮类型：

在同一个页面中往往会存在多个行动点，因此需要将按钮依据强调程度进行划分，确保用户可以依据设计的按钮层级快速找到最需要操作的按钮。常见的按钮强调程度可以分为3个层级：