B端总结｜web端按钮设计指南

武汉/UX设计师/4年前/5877浏览

版权

B端总结｜web端按钮设计指南

本篇文章主要归纳总结web端按钮设计的相关知识点。7000字干货，看完可以定一套你自己的按钮规范哦～

按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。我们在设计的过程中很容易忽略对按钮设计，它的样式、使用场景、层级与排布等等，都值得我们深入了解、学习，从而合理的利用到我们设计的页面中去。本篇文章主要归纳总结web端按钮设计的相关知识点：

ps.本篇文章着重讲解web端按钮，app端与pc客户端按钮有部分知识点与之相通。后期会持续更新这两个端按钮的相关知识～

一、按钮的定义与作用

1、按钮的起源与定义

在物理世界按钮是这样定义的：是一种常用的控制电器元件，常用来接通或断开‘控制电路’（其中电流很小），从而达到控制电动机或其他电气设备运行目的的一种开关。

在日常生活中，灯的开关、电视遥控器上的按键、汽车上的各种控制键等等都是我们UI按钮在物理世界的实体存在。所以在之前很长一段时间，都很流行拟物风格的按钮，即在触摸屏上展示1:1复制物理世界按钮样式的UI按钮。虽然现在UI按钮的设计风格大多都是采用扁平风格或微写实风格，但其体验感及交互均是对物理世界按钮的一种映射。

所以UI按钮设计，是否直观、易用会直接影响用户完成整个业务流程的感受、意愿及效率。例如：

使用电视遥控器调台，电视却没有任何反应——感到苦恼、无法完成调台；

点击业务流程中的提交按钮，页面却没有任何反应——感到困惑、无法完成操作、不想继续使用了。

在UI设计中，按钮的定义如下：是一个明确指示交互行为动作的组件，标记了一个操作命令，响应用户点击行为，点击后可触发一个即时操作获得相应的反馈&结果。

2、按钮的作用

接下来我们看一下UI按钮的具体作用：

作用一：触发某种功能

通过操作按钮，触发功能获得相应的反馈&结果，例如：

收起、展开按钮——点击收起展开页面信息

作用二：引导用户进行下一步操作

将按钮放在适当的位置，去引导用户进行下一步操作，避免用户不知道后续如何进行，从而提高任务流程完成率。例如：

在分步骤复杂的表单最后放置的“下一步”按钮，用户填写完当前页后，点击“下一步”——进入下一个填写流程中。

作用三：聚合信息

使用按钮，跳转详情页面，例如：

对于一些说明、隐私政策等等，如果需要展示的内容过多，但又不是当前页面的重点，可以设置一个图标按钮或文字链接按钮，通过点击触发，可跳转完整的内容详情页。

作用四：培养用户习惯

通过相对固定的位置、形式、文案，以及触发反馈，可以培养用户操作认知和习惯。例如：对于一些常见图标按钮，收藏、点赞、分享、说明等，用户看到类似的样式，就会知道是什么含义，点击后会获得怎样的反馈。

二、按钮的分类与使用场景

通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。

首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：

命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高

选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低

接下来我们详细看一下这两大类按钮的具体细分和使用场景

1、命令按钮控件

1.1常规按钮

常规按钮，有主次按钮之分。主按钮承载重要核心操作、次按钮承载辅助操作。常规按钮的常见状态主要有以下6种：

正常状态（Normal)——按钮在页面中正常可进行点击操作的状态

聚焦状态(Focus）——为方便键盘用户，展示电脑光标所在位置的一种状态。用户可以通过键盘上的Tab键对页面内的元素进行选择操作。类似于表单填写中输入框的聚焦状态(获取焦点状态），我们可以通过键盘选择和聚焦反馈，知道自己选中的填写项是哪个，从而进行填写操作。该状态，很多产品都去掉了，但是在开发代码中是可以设定的。如果设计师合理利用，可以提高产品易用性。举个例子：表单填写过程中，用户通过键盘完成了所有的填写项目。当我们的按钮设计该状态，就可以通过键盘继续操作，先聚焦按钮，然后点击enter键进行取消或提交操作。

悬停状态(Hover)——鼠标移入停留在按钮上但未点击的状态

点击状态(Pressed)——鼠标点击按钮的时候，按钮给出的效果反馈状态

加载状态（Loading）——点击按钮后，因为系统、网络等等原因，操作需要等待一段时间后才会跳转或生效。这个时候就需要加载状态反馈给用户，避免给用户造成困扰(疑惑有没有点击成功？），避免用户因为困扰重复操作，缓解用户的等待焦虑。

禁用状态(Disabled)——表示该按钮不可点击的状态，用于页面中未达到触发条件的时候，按钮的样式。

以上几种状态，通常通过改变其填充颜色的灰度和亮度来表达不同的状态，具体呈现形式，可以根据自己产品的特性去定义。下面，我们来看下主按钮和次按钮的详细定义和常见状态案例展示。

1.1.1主按钮

主按钮为高权重按钮，与页面上的核心操作强相关，所以在页面上需要醒目显示去引导用户操作，通常使用色块填充引导用户视觉聚焦。

主按钮可以是色块+文字，也可以是色块+图标+文字；通常为主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）

1.1.2次按钮

次按钮也叫标准按钮，为中权重按钮，在页面中使用最多。通常使用边框+文字的形式呈现。

次按钮可以是边框+文字，也可以是边框+图标+文字；通常为灰色、主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）。

此处以灰色为例，展示其变化规则：

1.2图标按钮

图标按钮是一种图形，样式不一，为低权重按钮，在页面中根据业务情况展示，丰富页面效果。

通常以用户已经形成认知的形式去展现，例如：

1.3文字按钮/链接

文字按钮、链接为低权重按钮，视觉感弱。当某个按钮在同一个页面上重复出现，为了不干扰用户视线，可以使用文字按钮，例如表格行的操作项。

文字按钮、链接也可以与图标组合使用，层级略高于纯文本按钮

1.4按钮菜单

菜单按钮是一种合集按钮，将页面中一些低频操作或同类型操作整合收起，以达到精简页面的效果。展现形式可以是色块、文字链接、图标等等，点击后展开具体操作供用户选择。

1.5其他命令类型按钮

1.5.1幽灵按钮

幽灵按钮是网页设计中，以线框简单示意轮廓、文字示意功能的按钮：

·样式通透简约，可以与页面背景很好的融合

·常用于官网设计，与图片结合使用

·与次按钮不同点在于，不受规范约束，可以根据设计场景定制轮廓粗细、字体大小粗细等

·现在很多网页中，线框形式的幽灵按钮不再作为主要按钮单独使用，而是与色块形式按钮搭配使用。（现在很多网页产品，更注重行为召唤、点击率，使用色块形式的按钮能更好的聚焦用户目光）

1.5.2悬浮按钮

悬浮按钮是指悬浮在页面上方的按钮，不会随着页面的滚动变化消失。源自安卓的Material Design。应用到网页上，通常承载一些咨询、客服、置顶等常用功能或者想让用户使用的功能。设计要点：

·悬浮按钮是按钮一种展现形式，既可以承载命令类型按钮，例如分享；也可以承载选择类型按钮，例如收藏；

·可用来承载常用关键操作，例如站酷某个作品页面中的：收藏、评论、推荐、分享的悬浮按钮；

·可作为引导工具，引导用户操作，例如很多官网都会悬浮在线咨询、客服一类的按钮；

·可以根据不同场景，在页面中选择是否放置悬浮按钮；

·不要过度使用悬浮按钮，如果一个页面上悬浮按钮太多，且分散在各个地方，会干扰用户视线，使得整个页面乱糟糟的；

·悬浮按钮只承载正向操作，不应该执行危险破坏性的操作，例如删除。

2、选择按钮控件

选择按钮通常被纳入选择控件中讲解，为了让大家更好的了解它与命令按钮的区别，此处我们来简单讲解一下常用的选择按钮：

2.1开关按钮

开关按钮类似于物理世界中灯的开关，切换「开关」会立即生效，适合用于具有对立意义的选项，无需与命令类按钮搭配使用。

当出现以下情况时，我们应该使用开关：

·无需确认或审核操作，即可生效选择后的结果

·选项是独立、且对立的功能、行为，仅在“开或关”的选项上做选择时

2.2单选框

单选框是只能选中其中一项的按钮，它容许用户在一组选项中选择其中一个。

·选项数量一般为2-5个

·平铺展示，会更快捷提供给用户进行选择

·描述过多的时候，可采取纵向排列的形式，方便用户进行对比判断

2.3复选框

复选框是一种可同时选中多项的基础控件，允许用户从多个选项当中选择多个选项的选择控件。

·选项数量一般为2-5个

·平铺展示，会更快捷提供给用户进行选择

·具有半选中状态(indeterminate)

·可以独立出现，常用于「是否同意用户协议」等场景

2.4其他状态切换按钮

2.4.1胶囊选择按钮

胶囊选择是单选框的一种衍生样式，特点是点击面积更大，同时更强调选项。在element中，胶囊选择既可以作为单选按钮、也可以作为多选按钮。但个人认为，胶囊选择的样式更适合当作单选按钮。

2.4.2标签选择按钮

标签选择按钮样式多样，可以以按钮的形式单独存在，也可以与单、复选框结合构成结合样式使用。

三、常规按钮的视觉组成

上一个章节，我们弄清楚了按钮的分类与使用场景。以上按钮中，使用最多、层级最高的就是常规按钮，接下来我们以常规按钮为例，剖析它的视觉组成、绘制技巧以及各类风格样式。

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、按钮顺序：

确定了按钮的放置位置，还需要确定按钮放置的顺序。放置顺序分为两步确定：

第一步：确定主按钮、次按钮的顺序

第二步：确定同级别按钮之间的顺序

3.1确定主、次按钮的顺序

首先，我们看一下页面中按钮的阅读顺序：

左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式

右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则

然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：

上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。

常见问题讨论：确定和取消该怎么放？

这个问题，是在设计的过程中，经常被抛出来讨论的问题，有没有固定确切的答案呢。首先说明，没有。各个平台、软件都有不同的规范。最具代表的就是：win的用户都习惯确定在左、取消在右；mac的用户都习惯确定在右、取消在左。

个人更倾向确定在右、取消在左的放置规则，原因如下：

1、根据“Z”型阅读模式，确定在右时，用户的视觉流更加流畅；

2、根据费茨定律，确定在右时，用户到达我们想要引导他进行操作的按钮，更快，操作效率高；

3、根据古腾堡法则，确定在右时，刚好处于最终视觉落点区，便于用户快速获得目标操作；

4、根据方向性原则，取消和确定，一定意义上带有“上一步”和“下一步”的意义，正如前文展示的，确定在右会更合理；

5、根据用户心智，如今移动端产品，大部分都是确定在右，一定程度上培养了很多用户的使用习惯，那么转到web端，保持和移动端同样的交互，用户使用起来会更顺手。（为什么移动端的产品采用这样的排布方式，个人认为大概是苹果设计规范的影响，而且据统计：全世界右利手的人占比约90%，左利手的人仅约10%，确定按钮在右，更利于绝大多数用户的操作）