8000字干货 ！超全面的 Web 端按钮设计指南
按钮是字干设计界面中常用且重要的组件之一 ，它在页面中占据的货超位置不大 ，却承载着重要的全面交互操作 。我们在设计的端按过程中很容易忽略对按钮设计 ，它的钮设南样式 、使用场景、字干层级与排布等等 ，货超都值得我们深入了解 、全面学习 ，端按从而合理的钮设南利用到我们设计的页面中去 。本篇文章主要归纳总结 web 端按钮设计的字干相关知识点 ：
本篇文章着重讲解 web 端按钮 ，app 端与 pc 客户端按钮有部分知识点与之相通 。全面后期会持续更新这两个端按钮的端按相关知识～
按钮的定义与作用
1. 按钮的起源与定义
在物理世界按钮是这样定义的 ：是一种常用的控制电器元件 ，常用来接通或断开"控制电路"（其中电流很小） ，钮设南从而达到控制电动机或其他电气设备运行目的的一种开关 。
在日常生活中，灯的开关 、电视遥控器上的按键 、汽车上的各种控制键等等都是我们 UI 按钮在物理世界的实体存在 。所以在之前很长一段时间 ，都很流行拟物风格的按钮 ，即在触摸屏上展示 1:1 复制物理世界按钮样式的 UI 按钮 。虽然现在 UI 按钮的设计风格大多都是采用扁平风格或微写实风格，但其体验感及交互均是对物理世界按钮的一种映射 。
所以 UI 按钮设计 ，是否直观 、易用会直接影响用户完成整个业务流程的感受 、意愿及效率 。例如 ：
使用电视遥控器调台 ，电视却没有任何反应——感到苦恼 、无法完成调台；点击业务流程中的提交按钮 ，页面却没有任何反应——感到困惑 、无法完成操作 、不想继续使用了 。
在 UI 设计中 ，按钮的定义如下 ：是一个明确指示交互行为动作的组件 ，标记了一个操作命令 ，响应用户点击行为 ，点击后可触发一个即时操作获得相应的反馈&结果。
2. 按钮的作用
接下来我们看一下 UI 按钮的具体作用 ：
作用一 ：触发某种功能
通过操作按钮 ，触发功能获得相应的反馈&结果 ，例如：
收起、展开按钮——点击收起展开页面信息
作用二 ：引导用户进行下一步操作
将按钮放在适当的位置 ，去引导用户进行下一步操作 ，避免用户不知道后续如何进行 ，从而提高任务流程完成率 。例如：
在分步骤复杂的表单最后放置的"下一步"按钮 ，用户填写完当前页后 ，点击"下一步"——进入下一个填写流程中 。
作用三：聚合信息
使用按钮，跳转详情页面 ，例如 ：
对于一些说明 、隐私政策等等 ，如果需要展示的内容过多 ，但又不是当前页面的重点 ，可以设置一个图标按钮或文字链接按钮 ，通过点击触发 ，可跳转完整的内容详情页 。
作用四 ：培养用户习惯
通过相对固定的位置、形式 、文案 ，以及触发反馈 ，可以培养用户操作认知和习惯。例如 ：对于一些常见图标按钮 ，收藏 、点赞 、分享 、说明等 ，用户看到类似的样式 ，就会知道是什么含义 ，点击后会获得怎样的反馈 。
按钮的分类与使用场景
通过以上的一些配图 ，我们会发现页面中的按钮展现形式多样，有色块的 、描边的、文字的、图标的等等 。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景 。
首先 ，根据我们页面中控件的使用交互形式 ，我们可以将按钮分为两大类 ：
命令按钮 ：常规按钮、图标按钮 、文字按钮 、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互 ，视觉优先级高
选择按钮 ：开关按钮 、单选框 、复选框 、胶囊选择 、标签选择按钮——通常是一种状态即时改变的交互 ，视觉优先级低
接下来我们详细看一下这两大类按钮的具体细分和使用场景
1. 命令按钮控件
常规按钮
常规按钮，有主次按钮之分。主按钮承载重要核心操作 、次按钮承载辅助操作。常规按钮的常见状态主要有以下 6 种 ：
正常状态（Normal)——按钮在页面中正常可进行点击操作的状态
聚焦状态(Focus）——为方便键盘用户 ，展示电脑光标所在位置的一种状态 。用户可以通过键盘上的Tab键对页面内的元素进行选择操作 。类似于表单填写中输入框的聚焦状态(获取焦点状态） ，我们可以通过键盘选择和聚焦反馈，知道自己选中的填写项是哪个 ，从而进行填写操作 。该状态，很多产品都去掉了 ，但是在开发代码中是可以设定的 。如果设计师合理利用 ，可以提高产品易用性 。举个例子 ：表单填写过程中 ，用户通过键盘完成了所有的填写项目 。当我们的按钮设计该状态 ，就可以通过键盘继续操作，先聚焦按钮 ，然后点击enter键进行取消或提交操作 。
悬停状态(Hover)——鼠标移入停留在按钮上但未点击的状态
点击状态(Pressed)——鼠标点击按钮的时候 ，按钮给出的效果反馈状态
加载状态（Loading）——点击按钮后 ，因为系统 、网络等等原因 ，操作需要等待一段时间后才会跳转或生效 。这个时候就需要加载状态反馈给用户 ，避免给用户造成困扰(疑惑有没有点击成功 ？） ，避免用户因为困扰重复操作 ，缓解用户的等待焦虑 。
禁用状态(Disabled)——表示该按钮不可点击的状态 ，用于页面中未达到触发条件的时候 ，按钮的样式 。
以上几种状态 ，通常通过改变其填充颜色的灰度和亮度来表达不同的状态 ，具体呈现形式 ，可以根据自己产品的特性去定义 。下面 ，我们来看下主按钮和次按钮的详细定义和常见状态案例展示 。
主按钮
主按钮为高权重按钮 ，与页面上的核心操作强相关 ，所以在页面上需要醒目显示去引导用户操作，通常使用色块填充引导用户视觉聚焦 。
主按钮可以是色块+文字 ，也可以是色块+图标+文字；通常为主色 ，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）
次按钮
次按钮也叫标准按钮 ，为中权重按钮 ，在页面中使用最多 。通常使用边框+文字的形式呈现。
次按钮可以是边框+文字 ，也可以是边框+图标+文字；通常为灰色、主色 ，也可以根据页面情况赋予不同颜色（详见章节三 、不同颜色赋予按钮的情感 ，与层级关系）。
此处以灰色为例 ，展示其变化规则 ：
图标按钮
图标按钮是一种图形 ，样式不一 ，为低权重按钮 ，在页面中根据业务情况展示 ，丰富页面效果 。
通常以用户已经形成认知的形式去展现 ，例如：
文字按钮/链接
文字按钮 、链接为低权重按钮 ，视觉感弱 。当某个按钮在同一个页面上重复出现，为了不干扰用户视线 ，可以使用文字按钮 ，例如表格行的操作项 。
文字按钮 、链接也可以与图标组合使用，层级略高于纯文本按钮
按钮菜单
菜单按钮是一种合集按钮 ，将页面中一些低频操作或同类型操作整合收起 ，以达到精简页面的效果 。展现形式可以是色块 、文字链接 、图标等等 ，点击后展开具体操作供用户选择 。
其他命令类型按钮
幽灵按钮
幽灵按钮是网页设计中，以线框简单示意轮廓 、文字示意功能的按钮 ：
- 样式通透简约 ，可以与页面背景很好的融合
- 常用于官网设计，与图片结合使用
- 与次按钮不同点在于 ，不受规范约束 ，可以根据设计场景定制轮廓粗细 、字体大小粗细等
- 现在很多网页中 ，线框形式的幽灵按钮不再作为主要按钮单独使用，而是与色块形式按钮搭配使用 。（现在很多网页产品，更注重行为召唤 、点击率 ，使用色块形式的按钮能更好的聚焦用户目光）
悬浮按钮
悬浮按钮是指悬浮在页面上方的按钮 ，不会随着页面的滚动变化消失 。源自安卓的 Material Design 。应用到网页上 ，通常承载一些咨询 、客服 、置顶等常用功能或者想让用户使用的功能。设计要点 ：
- 悬浮按钮是按钮一种展现形式 ，既可以承载命令类型按钮，例如分享；也可以承载选择类型按钮 ，例如收藏；
- 可用来承载常用关键操作 ，例如网站某个作品页面中的：收藏 、评论 、推荐、分享的悬浮按钮；
- 可作为引导工具 ，引导用户操作 ，例如很多官网都会悬浮在线咨询 、客服一类的按钮；
- 可以根据不同场景 ，在页面中选择是否放置悬浮按钮；
- 不要过度使用悬浮按钮 ，如果一个页面上悬浮按钮太多 ，且分散在各个地方 ，会干扰用户视线 ，使得整个页面乱糟糟的；
- 悬浮按钮只承载正向操作，不应该执行危险破坏性的操作 ，例如删除 。
2. 选择按钮控件
选择按钮通常被纳入选择控件中讲解 ，为了让大家更好的了解它与命令按钮的区别 ，此处我们来简单讲解一下常用的选择按钮 ：
开关按钮
开关按钮类似于物理世界中灯的开关，切换「开关」会立即生效 ，适合用于具有对立意义的选项 ，无需与命令类按钮搭配使用 。
当出现以下情况时 ，我们应该使用开关 ：
- 无需确认或审核操作 ，即可生效选择后的结果
- 选项是独立 、且对立的功能、行为 ，仅在"开或关"的选项上做选择时
单选框
单选框是只能选中其中一项的按钮 ，它容许用户在一组选项中选择其中一个 。
- 选项数量一般为 2-5 个
- 平铺展示，会更快捷提供给用户进行选择
- 描述过多的时候，可采取纵向排列的形式 ，方便用户进行对比判断
复选框
复选框是一种可同时选中多项的基础控件 ，允许用户从多个选项当中选择多个选项的选择控件 。
- 选项数量一般为 2-5 个
- 平铺展示 ，会更快捷提供给用户进行选择
- 具有半选中状态(indeterminate)
- 可以独立出现 ，常用于「是否同意用户协议」等场景
其他状态切换按钮
胶囊选择按钮
胶囊选择是单选框的一种衍生样式，特点是点击面积更大 ，同时更强调选项 。在 element 中，胶囊选择既可以作为单选按钮、也可以作为多选按钮 。但个人认为 ，胶囊选择的样式更适合当作单选按钮 。
标签选择按钮
标签选择按钮样式多样，可以以按钮的形式单独存在 ，也可以与单 、复选框结合构成结合样式使用 。
常规按钮的视觉组成
上一个章节 ，我们弄清楚了按钮的分类与使用场景 。以上按钮中 ，使用最多 、层级最高的就是常规按钮 ，接下来我们以常规按钮为例 ，剖析它的视觉组成、绘制技巧以及各类风格样式 。
1. 常规按钮的组成元素
常规按钮由容器、背景 、描边、圆角 、图标 、文案、投影组成 ，这些元素不是必须出现的 ，而是根据具体使用场景去呈现 。不同的元素搭配 ，构成的按钮样式也不同 ，以传达给用户各类信息。
容器 ：整个按钮的承载体 ，容纳其他组成元素 。容器的形状一般为规则图形 ，尺寸根据页面要求制定 。
背景 ：为按钮的底色，不同颜色的底色可以表达出按钮不同的功能特性，例如红色代表危险操作；同时也是不同按钮状态的展示形式 。
描边 ：为按钮最外层的边框线条 ，常用于次按钮的描边 。不同颜色描边可以表达出按钮不同的功能特性 ，例如主色描边二级按钮 、灰色描边三级按钮 、红色描边危险按钮；同时也是不同次按钮状态的展示形式 。
圆角 ：传达按钮气质的一种元素 ，可影响界面视觉风格 。
图标 ：对按钮文案的一种图形化表达 ，目的是为了加强按钮层级 、吸引用户注意力 、丰富美化页面 。
文案 ：使用合适的字号表现样式，使用精简的文字表达按钮的含义 。
投影 ：一种丰富按钮样式的设计手法 ，让按钮突出 ，更具质感 、层次感 。可提升按钮的视觉呈现 。特殊风格才会有，一般没有 。
根据以上组成元素 ，接下来我们来详细看一下 ，如何设计定义这些属性 ，不同属性对按钮的呈现有何影响 。
2. 按钮的容器与尺寸制定
容器的形状 ，需要遵循无障碍设计
- 在一套系统中需要保持样式的统一性
- 符合用户认知 ，使用用户已经形成心智模型的样式
根据不同场景大部分产品可以将按钮分成超大、大 、中 、小三种 。这一点大家根据自己产品的复杂度可以调整新增按钮尺寸 。此处做一个通用展示 。
超大按钮 ：用于登录等具有重要意义的场景下
大按钮 ：用于全局性操作的界面上
中按钮 ：标准按钮 ，可用于各类操作场景
小按钮 ：用于局部控件类操作界面 ，例如下拉面板、选择器弹窗 、表格等
按钮的高度如何定义 ？
通常以 4 的倍数去制定
按钮的宽度如何定义 ？
为了保证同一个组件内 ，不同字数文案按钮的样式统一，可以固定 4 个字以内的按钮为一个固定宽度（min-width) ，超出 4 个字设定 padding 值自适应适配 。
3. 按钮的背景与描边
按钮的背景色与描边色 ，可以表达出按钮的状态 ，也可以表达出按钮不同的功能特性 。按钮的状态在前文我们已经详细展示过了 ，接下来我们来看看不同颜色的按钮表达出的功能特性 。通常使用的颜色有以下几类 ：
品牌色——主题色 ，常用于普通信息按钮
功能色——成功色 、危险色（出错 、失败） 、警告色（提醒）
其他——灰度色 ，用于层级较低的二级 、三级按钮
4. 按钮的圆角
按钮的圆角 ，主要分为三大类直角 、圆角 、全圆角 。圆角通常使用的是小圆角，应尽量避免大圆角 。
直角——圆角为0px ，形状尖锐 ，给人严谨的感觉，常用于性质较为严谨的产品 。
圆角——通常控制在按钮高度的1/6及以下 ，以2的倍数设定 ，例如2px 、4px、6px等。通常根据产品的定位去设定 。例如钉钉 、企业微信的受众比较广泛 ，主要按钮的圆角值为4px；飞书的受众偏年轻，主要按钮的圆角值为6px 。
全圆角——全圆角按钮的圆角值固定为高度的50% ，按钮形状柔和 。web端全圆角的使用相对以上两种比较少，因为需要考虑到鼠标的操作热区与其他控件的组合使用 。
另外 ，同一套系统中 ，不同大小按钮的圆角值，应当根据按钮的尺寸 ，按统一比例设定 ，而非使用固定圆角 。以达到视觉比例平衡 ，圆角"看起来"一致。
5. 按钮的文案
对于按钮中的文案 ，需要遵循以下原则；
- 使用合适比例的字号
- 精简文案 ，避免折行
- 使用合理 、无歧义的文案
6. 按钮的投影
按钮的风格除了扁平风 ，还有渐变 、轻拟物等风格 。通过颜色渐变 、添加投影样式 ，可以塑造其他风格的按钮 。对于按钮的投影需要注意以下几点 ：
- 基于按钮本身的色值，去设置投影样式，会让投影更干净舒适 。
- 浅色按钮应避免使用投影 ，否则会影响按钮的识别度 ，页面显脏。
- 根据页面慎重使用投影样式 ，一般层级较高的主要按钮才使用 。（B 端扁平风格按钮使用居多）
按钮的层级与排布
分析完了表层样式规范，这个章节 ，我们来看看按钮在界面中的具体使用 。
1. 按钮的层级
对于页面中常用组合搭配的按钮层级如下 ：01～12 层级由高到低排列（具体是否有这些样式 ，根据产品情况确定）
高权重按钮——色块按钮
中权重按钮——描边按钮
低权重按钮——文字按钮、图标按钮
（此处我们暂不考虑独立场景 、层级的按钮）
2. 按钮位置
web 端页面 ，除去顶部和侧边导航栏 ，主要内容页面里的按钮该如何放置排布呢 ？我们可以将内容页面分为以下三个部分 ：
标题栏(Header)——主要是全局性操作按钮 ，例如编辑 、新建等；
主体内容(Body)——有两种操作按钮
第一种 ，是局部操作按钮，例如表格内部的操作项目；
第二种 ，是全局性完成按钮 ，跟随在内容后的 ，例如取消 、确定、上一步 、下一步等；
底栏(Footer)——主要是全局性页面完成按钮，需要贴底固定性质的 。例如取消 、确定 、保存等 。
对于弹窗页面 ，内容相对比较少，按钮排布方式可以如下 ：
对于内容页和弹窗页底部按钮的对齐方式 ，根据具体业务场景和视觉协调度选择即可（内容页居中比较多 ，因为页面太大了；弹窗右对齐比较多） 。注意保持 ，同一类场景下对齐方式一致 。
3. 按钮顺序 ：
确定了按钮的放置位置 ，还需要确定按钮放置的顺序 。放置顺序分为两步确定 ：
第一步 ：确定主按钮 、次按钮的顺序
第二步：确定同级别按钮之间的顺序
确定主、次按钮的顺序
首先 ，我们看一下页面中按钮的阅读顺序 ：
左对齐排布按钮——从左往右阅读——符合用户"F"型浏览模式
右对齐排布按钮——从右往左阅读——符合"Z"型阅读模式 、费茨定律 、古腾堡法则
然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序 ：
上图的按钮层级顺序 ，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型 。例如 ，主体内容区的底部跟随按钮 ，若带有明确方向 、具有下一步性质的按钮 ，应当为主按钮 ，放在最右边 。
常见问题讨论：确定和取消该怎么放？
这个问题 ，是在设计的过程中 ，经常被抛出来讨论的问题 ，有没有固定确切的答案呢 。首先说明 ，没有 。各个平台 、软件都有不同的规范 。最具代表的就是 ：win 的用户都习惯确定在左 、取消在右；mac 的用户都习惯确定在右 、取消在左 。
个人更倾向确定在右 、取消在左的放置规则 ，原因如下：
1. 根据"Z"型阅读模式 ，确定在右时 ，用户的视觉流更加流畅；
2. 根据费茨定律 ，确定在右时 ，用户到达我们想要引导他进行操作的按钮 ，更快 ，操作效率高；
3. 根据古腾堡法则 ，确定在右时 ，刚好处于最终视觉落点区 ，便于用户快速获得目标操作；
4. 根据方向性原则 ，取消和确定 ，一定意义上带有"上一步"和"下一步"的意义 ，正如前文展示的 ，确定在右会更合理；
5. 根据用户心智，如今移动端产品，大部分都是确定在右 ，一定程度上培养了很多用户的使用习惯 ，那么转到 web 端 ，保持和移动端同样的交互，用户使用起来会更顺手 。（为什么移动端的产品采用这样的排布方式 ，个人认为大概是苹果设计规范的影响 ，而且据统计 ：全世界右利手的人占比约 90% ，左利手的人仅约 10% ，确定按钮在右 ，更利于绝大多数用户的操作）
对于确定和取消到底该怎么放，大家可以结合自身产品的情况定位，需要注意的是，要保证同一个产品内规范一致 。
确定同级别按钮的顺序
对于同级别按钮 ，我们需要遵循以下原则去确定顺序 ：
- 相关按钮临近原则 ，将与主按钮相关的次按钮优先放在主按钮旁边。
- 根据业务场景 ，按照前文的阅读顺序规律 ，衡量按钮权重再进行位置分配 。
除了以上案例分析的组合样式，B 端页面中按钮组合多样 ，以下罗列了一些常见场景供大家参考：
按钮设计的原则总结&注意事项
最后根据以上内容我们来总结下 ，按钮在设计应当遵循的原则及注意事项
1. 设计原则
按钮样式符合用户心智模型
按钮类型、层级分明 ，规则统一
按钮状态清晰，操作反馈明确
根据业务场景使用合适的按钮
2. 设计注意事项
一个操作区域至多一个主按钮
主次按钮样式统一 、与其他控件样式区分处理
按钮样式慎用大圆角
按钮中的文字，字号适中 ，文案精简 、无歧义
合理使用投影样式
根据场景合理使用禁用按钮 ：需要应引导用户操作时 ，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动 。
参考文章推荐
1. 「按钮的学问 ：确定在左 ，取消在右 ？」
推荐指数 ：五颗星
推荐理由 ：使用不同的理论说明佐证确定和取消按钮的排版方式
2. 「交互细节 ！确定按钮到底该放在左边还是右边 ？」
推荐指数 ：四颗星
推荐理由：用实验论证确定按钮的放置位置 ，结论是 ：确定按钮放在右边比较好
3. 「大厂高手出品 ！中台组件设计指南 ：按钮篇 」
推荐指数 ：五颗星
推荐理由 ：使用完整的规范去写的文章 ，实打实的案例 。
4. 「按钮规范系列 ！从四个方面详解「按钮位置」的设计方法」
推荐指数：四颗星
推荐理由 ：用古腾堡原则详解按钮位置的摆放规律 ，为什么这么放置 。主要案例是 APP 端的 。
5. 「5000 字干货 ！写给新人的按钮设计指南」
推荐指数：五颗星
推荐理由 ：主要讲的是 APP 端的 ，层级清晰 、案例完整。
6. 「从 6 个层面 ，系统分析按钮设计的知识点」
推荐指数 ：五颗星
推荐理由 ：主要讲的是 APP 端的 ，命令按钮和选择按钮做了区分说明 。案例丰富 ，常见按钮组成拆解和最后的按钮样式小结表都超级棒
7. 「推荐 ！禁用状态二三事 」
推荐指数 ：三颗星
推荐理由 ：讲述了什么时候 、什么场景使用禁用状态以及使用禁用状态的注意事项
结尾
整篇文章内容是基于日常学习与工作经验的总结 ，部分规范内容 ，大家可以根据自己的产品业务做适配调整 ，以上仅供参考 。部分案例配图源自网络，仅供交流学习 ，侵删 。
作者：youki_ren
