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

8000字干货!超全面的 Web 端按钮设计指南

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

按钮的定义与作用

1. 按钮的起源与定义

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

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

8000字干货!超全面的 Web 端按钮设计指南

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

使用电视遥控器调台,电视却没有任何反应——感到苦恼、无法完成调台;点击业务流程中的提交按钮,页面却没有任何反应——感到困惑、无法完成操作、不想继续使用了。

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

2. 按钮的作用

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

8000字干货!超全面的 Web 端按钮设计指南

作用一:触发某种功能

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

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

8000字干货!超全面的 Web 端按钮设计指南

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

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

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

8000字干货!超全面的 Web 端按钮设计指南

作用三:聚合信息

使用按钮,跳转详情页面,例如:

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

8000字干货!超全面的 Web 端按钮设计指南

作用四:培养用户习惯

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

8000字干货!超全面的 Web 端按钮设计指南

按钮的分类与使用场景

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

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

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

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

8000字干货!超全面的 Web 端按钮设计指南

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

1. 命令按钮控件

常规按钮

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

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

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

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

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

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

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

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

主按钮

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

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

8000字干货!超全面的 Web 端按钮设计指南

次按钮

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

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

此处以灰色为例,展示其变化规则:

8000字干货!超全面的 Web 端按钮设计指南

图标按钮

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

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

8000字干货!超全面的 Web 端按钮设计指南

文字按钮/链接

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

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

8000字干货!超全面的 Web 端按钮设计指南

按钮菜单

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

8000字干货!超全面的 Web 端按钮设计指南

其他命令类型按钮

幽灵按钮

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

  • 样式通透简约,可以与页面背景很好的融合
  • 常用于官网设计,与图片结合使用
  • 与次按钮不同点在于,不受规范约束,可以根据设计场景定制轮廓粗细、字体大小粗细等
  • 现在很多网页中,线框形式的幽灵按钮不再作为主要按钮单独使用,而是与色块形式按钮搭配使用。(现在很多网页产品,更注重行为召唤、点击率,使用色块形式的按钮能更好的聚焦用户目光)

8000字干货!超全面的 Web 端按钮设计指南

悬浮按钮

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

  • 悬浮按钮是按钮一种展现形式,既可以承载命令类型按钮,例如分享;也可以承载选择类型按钮,例如收藏;
  • 可用来承载常用关键操作,例如网站某个作品页面中的:收藏、评论、推荐、分享的悬浮按钮;
  • 可作为引导工具,引导用户操作,例如很多官网都会悬浮在线咨询、客服一类的按钮;
  • 可以根据不同场景,在页面中选择是否放置悬浮按钮;
  • 不要过度使用悬浮按钮,如果一个页面上悬浮按钮太多,且分散在各个地方,会干扰用户视线,使得整个页面乱糟糟的;
  • 悬浮按钮只承载正向操作,不应该执行危险破坏性的操作,例如删除。
2. 选择按钮控件

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

开关按钮

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

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

  • 无需确认或审核操作,即可生效选择后的结果
  • 选项是独立、且对立的功能、行为,仅在“开或关”的选项上做选择时

8000字干货!超全面的 Web 端按钮设计指南

单选框

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

  • 选项数量一般为 2-5 个
  • 平铺展示,会更快捷提供给用户进行选择
  • 描述过多的时候,可采取纵向排列的形式,方便用户进行对比判断

8000字干货!超全面的 Web 端按钮设计指南

复选框

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

  • 选项数量一般为 2-5 个
  • 平铺展示,会更快捷提供给用户进行选择
  • 具有半选中状态(indeterminate)
  • 可以独立出现,常用于「是否同意用户协议」等场景

8000字干货!超全面的 Web 端按钮设计指南

其他状态切换按钮

胶囊选择按钮

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

8000字干货!超全面的 Web 端按钮设计指南

标签选择按钮

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

8000字干货!超全面的 Web 端按钮设计指南

常规按钮的视觉组成

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

1. 常规按钮的组成元素

常规按钮由容器、背景、描边、圆角、图标、文案、投影组成,这些元素不是必须出现的,而是根据具体使用场景去呈现。不同的元素搭配,构成的按钮样式也不同,以传达给用户各类信息。

8000字干货!超全面的 Web 端按钮设计指南

容器:整个按钮的承载体,容纳其他组成元素。容器的形状一般为规则图形,尺寸根据页面要求制定。

背景:为按钮的底色,不同颜色的底色可以表达出按钮不同的功能特性,例如红色代表危险操作;同时也是不同按钮状态的展示形式。

描边:为按钮最外层的边框线条,常用于次按钮的描边。不同颜色描边可以表达出按钮不同的功能特性,例如主色描边二级按钮、灰色描边三级按钮、红色描边危险按钮;同时也是不同次按钮状态的展示形式。

圆角:传达按钮气质的一种元素,可影响界面视觉风格。

图标:对按钮文案的一种图形化表达,目的是为了加强按钮层级、吸引用户注意力、丰富美化页面。

文案:使用合适的字号表现样式,使用精简的文字表达按钮的含义。

投影:一种丰富按钮样式的设计手法,让按钮突出,更具质感、层次感。可提升按钮的视觉呈现。特殊风格才会有,一般没有。

根据以上组成元素,接下来我们来详细看一下,如何设计定义这些属性,不同属性对按钮的呈现有何影响。

2. 按钮的容器与尺寸制定

容器的形状,需要遵循无障碍设计

  • 在一套系统中需要保持样式的统一性
  • 符合用户认知,使用用户已经形成心智模型的样式

8000字干货!超全面的 Web 端按钮设计指南

根据不同场景大部分产品可以将按钮分成超大、大、中、小三种。这一点大家根据自己产品的复杂度可以调整新增按钮尺寸。此处做一个通用展示。

超大按钮:用于登录等具有重要意义的场景下

大按钮:用于全局性操作的界面上

中按钮:标准按钮,可用于各类操作场景

小按钮:用于局部控件类操作界面,例如下拉面板、选择器弹窗、表格等

按钮的高度如何定义?

通常以 4 的倍数去制定

8000字干货!超全面的 Web 端按钮设计指南

按钮的宽度如何定义?

为了保证同一个组件内,不同字数文案按钮的样式统一,可以固定 4 个字以内的按钮为一个固定宽度(min-width),超出 4 个字设定 padding 值自适应适配。

8000字干货!超全面的 Web 端按钮设计指南

3. 按钮的背景与描边

按钮的背景色与描边色,可以表达出按钮的状态,也可以表达出按钮不同的功能特性。按钮的状态在前文我们已经详细展示过了,接下来我们来看看不同颜色的按钮表达出的功能特性。通常使用的颜色有以下几类:

品牌色——主题色,常用于普通信息按钮

功能色——成功色、危险色(出错、失败)、警告色(提醒)

其他——灰度色,用于层级较低的二级、三级按钮

8000字干货!超全面的 Web 端按钮设计指南

4. 按钮的圆角

按钮的圆角,主要分为三大类直角、圆角、全圆角。圆角通常使用的是小圆角,应尽量避免大圆角。

直角——圆角为0px,形状尖锐,给人严谨的感觉,常用于性质较为严谨的产品。

圆角——通常控制在按钮高度的1/6及以下,以2的倍数设定,例如2px、4px、6px等。通常根据产品的定位去设定。例如钉钉、企业微信的受众比较广泛,主要按钮的圆角值为4px;飞书的受众偏年轻,主要按钮的圆角值为6px。

全圆角——全圆角按钮的圆角值固定为高度的50%,按钮形状柔和。web端全圆角的使用相对以上两种比较少,因为需要考虑到鼠标的操作热区与其他控件的组合使用。

8000字干货!超全面的 Web 端按钮设计指南

另外,同一套系统中,不同大小按钮的圆角值,应当根据按钮的尺寸,按统一比例设定,而非使用固定圆角。以达到视觉比例平衡,圆角“看起来”一致。

8000字干货!超全面的 Web 端按钮设计指南

5. 按钮的文案

对于按钮中的文案,需要遵循以下原则;

  • 使用合适比例的字号
  • 精简文案,避免折行
  • 使用合理、无歧义的文案

8000字干货!超全面的 Web 端按钮设计指南

6. 按钮的投影

按钮的风格除了扁平风,还有渐变、轻拟物等风格。通过颜色渐变、添加投影样式,可以塑造其他风格的按钮。对于按钮的投影需要注意以下几点:

  • 基于按钮本身的色值,去设置投影样式,会让投影更干净舒适。
  • 浅色按钮应避免使用投影,否则会影响按钮的识别度,页面显脏。
  • 根据页面慎重使用投影样式,一般层级较高的主要按钮才使用。(B 端扁平风格按钮使用居多)

8000字干货!超全面的 Web 端按钮设计指南

按钮的层级与排布

分析完了表层样式规范,这个章节,我们来看看按钮在界面中的具体使用。

1. 按钮的层级

对于页面中常用组合搭配的按钮层级如下:01~12 层级由高到低排列(具体是否有这些样式,根据产品情况确定)

高权重按钮——色块按钮

中权重按钮——描边按钮

低权重按钮——文字按钮、图标按钮

(此处我们暂不考虑独立场景、层级的按钮)

8000字干货!超全面的 Web 端按钮设计指南

2. 按钮位置

web 端页面,除去顶部和侧边导航栏,主要内容页面里的按钮该如何放置排布呢?我们可以将内容页面分为以下三个部分:

标题栏(Header)——主要是全局性操作按钮,例如编辑、新建等;

主体内容(Body)——有两种操作按钮

第一种,是局部操作按钮,例如表格内部的操作项目;

第二种,是全局性完成按钮,跟随在内容后的,例如取消、确定、上一步、下一步等;

底栏(Footer)——主要是全局性页面完成按钮,需要贴底固定性质的。例如取消、确定、保存等。

8000字干货!超全面的 Web 端按钮设计指南

对于弹窗页面,内容相对比较少,按钮排布方式可以如下:

8000字干货!超全面的 Web 端按钮设计指南

对于内容页和弹窗页底部按钮的对齐方式,根据具体业务场景和视觉协调度选择即可(内容页居中比较多,因为页面太大了;弹窗右对齐比较多)。注意保持,同一类场景下对齐方式一致。

3. 按钮顺序:

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

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

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

确定主、次按钮的顺序

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

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

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

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

8000字干货!超全面的 Web 端按钮设计指南

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

8000字干货!超全面的 Web 端按钮设计指南

常见问题讨论:确定和取消该怎么放?

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

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

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

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

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

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

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

8000字干货!超全面的 Web 端按钮设计指南

对于确定和取消到底该怎么放,大家可以结合自身产品的情况定位,需要注意的是,要保证同一个产品内规范一致。

确定同级别按钮的顺序

对于同级别按钮,我们需要遵循以下原则去确定顺序:

  • 相关按钮临近原则,将与主按钮相关的次按钮优先放在主按钮旁边。
  • 根据业务场景,按照前文的阅读顺序规律,衡量按钮权重再进行位置分配。

8000字干货!超全面的 Web 端按钮设计指南

除了以上案例分析的组合样式,B 端页面中按钮组合多样,以下罗列了一些常见场景供大家参考:

8000字干货!超全面的 Web 端按钮设计指南

按钮设计的原则总结&注意事项

最后根据以上内容我们来总结下,按钮在设计应当遵循的原则及注意事项

1. 设计原则

按钮样式符合用户心智模型

按钮类型、层级分明,规则统一

按钮状态清晰,操作反馈明确

根据业务场景使用合适的按钮

2. 设计注意事项

一个操作区域至多一个主按钮

主次按钮样式统一、与其他控件样式区分处理

按钮样式慎用大圆角

按钮中的文字,字号适中,文案精简、无歧义

合理使用投影样式

根据场景合理使用禁用按钮:需要应引导用户操作时,扔掉禁用;明确区分禁用和可用样式;在恰当的时候对禁用按钮给出解释;结合 loading 状态让禁用按钮更生动。

参考文章推荐

1. 「按钮的学问:确定在左,取消在右?」

推荐指数:五颗星

推荐理由:使用不同的理论说明佐证确定和取消按钮的排版方式

2. 「交互细节!确定按钮到底该放在左边还是右边?」

推荐指数:四颗星

推荐理由:用实验论证确定按钮的放置位置,结论是:确定按钮放在右边比较好

3. 「大厂高手出品!中台组件设计指南:按钮篇 」

推荐指数:五颗星

推荐理由:使用完整的规范去写的文章,实打实的案例。

4. 「按钮规范系列!从四个方面详解「按钮位置」的设计方法」

推荐指数:四颗星

推荐理由:用古腾堡原则详解按钮位置的摆放规律,为什么这么放置。主要案例是 APP 端的。

5. 「5000 字干货!写给新人的按钮设计指南」

推荐指数:五颗星

推荐理由:主要讲的是 APP 端的,层级清晰、案例完整。

6. 「从 6 个层面,系统分析按钮设计的知识点」

推荐指数:五颗星

推荐理由:主要讲的是 APP 端的,命令按钮和选择按钮做了区分说明。案例丰富,常见按钮组成拆解和最后的按钮样式小结表都超级棒

7. 「推荐!禁用状态二三事 」

推荐指数:三颗星

推荐理由:讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项

结尾

整篇文章内容是基于日常学习与工作经验的总结,部分规范内容,大家可以根据自己的产品业务做适配调整,以上仅供参考。部分案例配图源自网络,仅供交流学习,侵删。

欢迎点赞、分享,期待你的关注小红点~欢迎留言交流~

点赞 59
收藏 329

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。