在 B 端界面中,按钮是每张页面都会出现的最基础的元素,用户的任务流程皆从按钮开始,按钮设计有理有据,可以为界面及产品专业度加分不少。如果一个产品的界面,是如下图那样(按钮的设计规则无规律可循,随意为之),不仅产品用户体验会直线下降,产品所在企业及产品本身的口碑也会受到质疑。同时,按钮作为产品设计规范中的一个部分,如果不加以约束,每种场景都会出现过多的组合方式,导致界面体验无章可循。

因此,整理按钮的里里外外相当重要,从细微之处提升产品的体验。

如何设计B端按钮?来看这篇高手总结!

下面笔者会像剥洋葱一样,层层递进给大家讲解 B 端的按钮。

按钮的作用

在了解一个按钮是怎么回事前,我们需要先明白按钮在 B 端界面上的作用。

第一:触发某一类功能

用户通过操作按钮,可以触发功能从而完成任务。

第二:引导下一步操作

通过在适当的位置放置按钮,引导用户操作。

第三:聚合信息

当需要展示的内容过多时,可以通过按钮触发跳转详情,无需在当前页展示全部内容。

第四:形成用户心智

当按钮的位置、形式、文案都相对固定,且触发的功能一致,用户会对该按钮形成习惯,会形成用户对产品的依赖。

按钮的要素分解

别看一个小小的按钮,它可是隐藏着巨大细节的。越深入了解它,你会对它越来越刮目相看。

1. 按钮类型

在 B 端场景中,按钮主要分为 5 种,包括主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。通过对按钮添加属性后,又可以有危险按钮、幽灵按钮、禁用按钮、加载中按钮等。注意,不建议在一个按钮组中混合多种按钮使用,这会导致界面混乱,而每个按钮都是有其自身的使用场景。

如何设计B端按钮?来看这篇高手总结!

2. 按钮形态

根据按钮类型,及按钮不同场景的使用需要,可以将按钮分成图标按钮、图标+文字按钮、组合按钮、下拉按钮、Block 按钮。

如何设计B端按钮?来看这篇高手总结!

3. 按钮状态

每类按钮都有一套基础的状态,包括 Normal 态(默认态)、Hover 态(悬浮态)、Pressed 态(点击态)、Disable 态(禁用态)。按钮的不同状态告知了用户当前可以执行的下一步操作。

  • Normal(默认态):该状态就是按钮正常显示在页面的状态。
  • Hover 态(悬浮态):当鼠标指针停留在按钮上时,按钮展示出的反馈。
  • Pressed 态(点击态):当鼠标指针按压按钮时,按钮的效果反馈。
  • Disable 态(禁用态):当页面按钮不可用时,可能是信息未填写完成,可能是操作未达到某种条件要求,按钮会展示不可用状态。对于禁用按钮,可以让鼠标浮上去后展示解禁提示,这样会对用户更友好。

如何设计B端按钮?来看这篇高手总结!

4. 使用场景

笔者发现,很多同学在按钮的调用中,基本不太知道该如何去选择适合的按钮,而每类按钮都有其具体的使用场景,并不是上帝随意创造的物体,而是设计界专门为提升产品用户体验而创造的物体。

主按钮:主按钮为召唤按钮,在界面上较为醒目,召唤用户去操作,通常一个操作区只有一个主按钮。

默认按钮:按钮组中没有主次之分的按钮,通常按钮组中次按钮数量没有限制。

虚线按钮:虚线按钮通常用于当前页内容的添加操作。

文本按钮:在一些无需主次按钮的场景中,可以使用文本按钮,例如表格行操作项。

链接按钮:顾名思义,用于外链到外部页面的按钮。

危险按钮:一般在需要二次确认的地方,需要使用危险按钮,如删除、修改权限等场景。

幽灵按钮:按钮用在需要放置在不同底色或背景复杂的场景中。

禁用按钮:当前操作不可用,需要禁用按钮。

加载中按钮:在提交内容后,无法及时反馈,还需加载过程的,需要用到加载中按钮。

图标按钮:有些按钮用纯图标不仅节省界面空间,还直观,例如打印、修改文字颜色、内容布局等。

图标+文字按钮:图标按钮会让页面更有活力,更清晰表意,特别是如上传文件、下载文件类按钮,按钮加上图标比单纯文字更直观。

组合按钮:有多个按钮性质相似时,适合使用组合按钮,如视图切换按钮。

下拉按钮:当按钮数量过多,适合将一些低频按钮收纳起来。

Block 按钮:这类按钮在一些页面需要强指引的时候出现,且操作较为全局性,比如登录、注册、付款、表单提交等。这类按钮在使用中要注意数量控制在 2 个以内,通常为一个主要按钮,一个次要按钮,不要出现太多,太多了显现不出该按钮的特点了。

5. 视觉样式

一个小小的按钮,包含了非常丰富的视觉样式,在设计阶段,需要对样式进行细致的拆解和定义。按钮的视觉样式包括尺寸、颜色、文本、按钮、间距、形状、风格,具体如下。

尺寸:在 B 端产品中,按钮通常有 3 种尺寸,分为大中小。大按钮主要使用在全局性操作的界面上;中按钮通常为标准按钮,其基本随时随地出现;小按钮主要使用在下拉面板或一些需要使用到小按钮的地方。备注:计算标准按钮高度的方法(仅供参考),文字字号 2.4 倍或 2.5 倍,计算出来的值取最靠近 4 的倍数的数字。例如 12 号字体在 2.4 倍数值为 28.8,距离 4 的倍数最近的为 28,因此标准按钮高度为 28px;14 号字体在 2.5 倍数值为 35,距离 4 的倍数最近的为 36,因此标准按钮高度为 36px。

如何设计B端按钮?来看这篇高手总结!

文本:按钮如何传达意思给用户,文本起到了非常重要的作用,用户见文字了解用意,引导用户进行操作。放置在按钮中的文本需要注意三个问题:第一,文本颜色要清晰;第二,文本大小要合适;第三,文本寓意要明了。

图标:在设计打印、导入、导出、下载等按钮时,我们会发现图标按钮会比文字按钮更合适。图标按钮在设计上需要注意与文本一致。

颜色:按钮的颜色主要由容器背景色和边框色(注意:是内描边)、字体颜色和图标颜色组成。不同的按钮色,代表了不同的按钮类型,例如赋予主色的按钮是主按钮。对于一些特殊风格的按钮来说,还有阴影的颜色,阴影颜色可以用按钮色值的透明度 50%左右来设计。

如何设计B端按钮?来看这篇高手总结!

间距:按钮内图标与文字的间距、文字与按钮边框的间距等,是形成按钮呼吸感的重要因素。在按钮规则的设计上,建议简单与美观。简单是指规则简单易拓展,美观是指按钮依据规则设计出来后,在视觉上要合理。

如何设计B端按钮?来看这篇高手总结!

形状:形状是由按钮的圆角形成的。圆角为 0px,按钮形状挺拔,给人严谨、尖锐的感觉;圆角为 4px,按钮形状稍显柔和,给人专业不失柔和的感觉;圆角为半圆形(圆角的半径=高度的 50%),按钮形状非常柔和,给人亲和感。

如何设计B端按钮?来看这篇高手总结!

风格:B 端按钮的风格主要为轻拟物、凸起按钮、渐变按钮和扁平化,而扁平化已经越来越成为趋势,扁平化按钮的优势在于:

  • 第一:使得界面信息展现更清晰,用户将更聚焦于内容及任务操作。
  • 第二:在开发上更方便,扁平化抛弃了很多不必要的设计。
  • 第三:减少了阴影等细节,提升了产品性能。

如何设计B端按钮?来看这篇高手总结!

6. 交互方式

除了视觉样式,按钮还带有交互方式。按钮只有带上了交互,才真正开始为用户服务,它是用户输入信息的口子,是系统接收信息的口子,更是人机友好交互的口子。

按钮的交互分为六种:

第一:点击按钮后出弹窗,例如新增、删除。

如何设计B端按钮?来看这篇高手总结!

第二:点击按钮后关闭、退出当前操作,例如保存对表单的操作。

如何设计B端按钮?来看这篇高手总结!

第三:点击按钮后在当前页反馈信息,例如当前页新增表单项。

如何设计B端按钮?来看这篇高手总结!

第四:点击按钮后出现下拉等浮层反馈,例如下拉菜单、表格“更多项”操作、工具栏“更多项”操作。

如何设计B端按钮?来看这篇高手总结!

第五:点击按钮后跳转页面,例如步骤类操作中的下一步、页面类新增表单。

如何设计B端按钮?来看这篇高手总结!

第六:鼠标悬浮在按钮触发面板类反馈,例如用户设置、换肤。

如何设计B端按钮?来看这篇高手总结!

7. 展示数量

按钮的数量展示是指在一个按钮区中,按钮数量的多少。笔者见过 B 端产品三种按钮数量放置的方式,以下只有第三种是推荐的。

  • 第一种,能提供给用户的按钮都展示出来,唯恐用户找不到。
  • 第二种,适当做了按钮的收敛,但不清楚所以然,就是把一些按钮象征性的放到了“更多”中。
  • 第三种,对业务的目标和用户的界面操作场景非常熟悉,有条有理的将按钮合理展示,既保证用户能顺利操作,又保证产品界面整理有序。

总体来说,建议一个按钮区的按钮数量尽量控制在 5 个以内,多余 5 个置入“更多”中。

8. 归类聚合

归类聚合是指具有相同含义的按钮需要归类展示,例如新增、删除、修改、查看通常在一起;启动和停止、导入和导出、下载和上传都会在一起,不宜距离太远。

9. 按钮位置

按钮的位置是指按钮或按钮组位于内容块的哪个部位,在一定程度上,我们也可以将页面视为内容块,即内容块是包含内容的区块。如果需要结构性的将一个内容块进行有序化切分,通常由 Header、Body、Footer 三部分组成。

如何设计B端按钮?来看这篇高手总结!

Header:放置在 Header 的按钮,通常是一些全局性质的操作,例如编辑全部数据、切换视图展示、批量删除等。但是这些按钮应该放左侧、中间、还是右侧呢?

Body:放置在 Body 的按钮,通常是对跟随的内容直接操作,例如编辑单条表单项、编辑某部分表单区块等。但是这些按钮应该放在哪里呢?

Footer:放置在 Footer 的按钮,通常是全局完成类的操作,例如取消、确定、保存等。但是这些按钮应该放在哪里呢?

Header、Body、Footer 按钮位置根据“F”和“Z”型的视觉浏览规律给出如下使用建议。图中蓝色为主按钮,白色为次按钮。

如何设计B端按钮?来看这篇高手总结!

10. 按钮顺序

按钮顺序是指按钮组中,不同按钮的顺序应该如何放置,这里的顺序包含两层:第一是主按钮与次按钮的顺序;第二是同类按钮之间的顺序,例如次按钮和次按钮的顺序。同个产品中,按钮顺序保持一致,不仅利于提升用户的操作效率,同时会减少用户的操作出错概率。

由“2.9 按钮位置”我们可以发现,当按钮组位于 Header 和 Footer 区时,主按钮和次按钮顺序为主按钮靠右原则设计,符合“Z”型阅读模式+费茨定律。当按钮组位于 Body 区时,若要同时出现主次按钮,主按钮在次按钮左边原则,符合用户“F”型浏览模式。

除了以上基础的设计建议外,还有以下三个设计原则需要遵守:

方向性原则

返回、前进、上一步、下一步、撤销、重做等按钮都是具有方向性的,假如按钮的放置位置是符合其方向性的,用户的认知成本就会很低。

相关按钮临近原则

让相关的操作按钮更相近,这样不仅在视觉上增强用户对他们的相关性认知,而且距离越近越容易操作。例如保存、保存并返回首页;发布、定时发布。

符合对话习惯

用户在操作界面按钮的时候,实际上是和界面在进行对话,因此,按钮设计符合用户自然的对话会比较合适。例如你想把自己喜欢喝的饮料分享给朋友,你会问“想喝吗”,如果他不想喝,你会再问“很好喝,可以加点糖”,如果他摇头,你会说“那好吧,可以先放一边,想喝了再喝”。而不会一上来就是“喝不喝,不喝扔到垃圾桶”,对吧。

因此,针对弹窗按钮的放置顺序为:保存、取消、删除。即“需要保存吗?”—“不保存,那需要取消吗?”—“原来文件不需要了,那删除吧。”

如何设计B端按钮?来看这篇高手总结!

这里笔者有一点自己的心得分享给大家,也就是在设计按钮组的时候,可以运用以下步骤去思考:

  • 第一:制定自己所负责的产品设计规范的内容块中按钮组的设计位置,例如 Footer 区按钮组的位置在哪里(可以区分场景也可以不区分,由产品覆盖的业务范畴决定)。
  • 第二:制定主次按钮的位置(是否区分场景也看产品情况)。在阿里云平台设计规范中,主按钮都在左侧;而在 antd 中,主次按钮位置是分场景的。
  • 第三:制定按钮组中每个按钮的顺序,建议参考 2.10 中的三个设计原则。

按钮的设计原则

1. 让它就是它

让它就是它是说按钮在外形上就要看起来是个按钮,从用户的心智模型来说,只有用户第一眼识别到这是个按钮,我操作它后,它可以让我达成什么好的结果,用户才会去使用。

2. 类型分明

类型分明是指设计者需要合理和正确使用不同类型的按钮,正确表达按钮的交互逻辑,让用户可以提前预判操作该按钮后的结果。例如,不要让用户点击链接后,弹出一个弹窗,正确的应该是点击链接,打开一个新的页面。

3. 形式单纯

形式单纯是指在 B 端产品中,按钮不要设计的过于花哨,而是要干净利索,以抱着用户快速完成任务的心态去设计,而不是阻碍用户的操作,过分干扰和分散用户的视线。

4. 反馈明确

每个按钮都承载一个功能,有功能有操作就需要有反馈,明确的反馈是用户下一步操作的基础。

5. 规则清晰

按钮的使用规则,不同的设计规范有不同的定义,只要能合理定义自身所负责产品的按钮使用规则,并让用户接受,就是好的规则。定义清晰的按钮使用规则,不仅减少产品设计师之间的沟通成本,提升产品界面操作的一致性,同时降低用户的出错率。

结语

定义 B 端界面的设计规则是一项复杂且浩大的工程,但从长远来看,这是一件不得不去做的事情。我们希望规则简单、有约束、易拓展、有包容。关于按钮,还有很多要去解决,欢迎小伙伴们一起交流。

欢迎关注作者微信公众号:「知果日记」

如何设计B端按钮?来看这篇高手总结!

收藏 334
点赞 28

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