在B端界面中，按钮是每张页面都会出现的最基础的元素，用户的任务流程皆从按钮开始，按钮设计的有理有据，可以为界面及产品专业度加分不少。如果一个产品的界面，是如下图那样（按钮的设计规则无规律可循，随意为之），不仅产品用户体验会直线下降，产品所在企业及产品本身的口碑也会受到质疑。同时，按钮作为产品设计规范中的一个部分，如果不加以约束，每种场景都会出现过多的组合方式，导致界面体验无章可循。
因此，整理按钮的里里外外相当重要，从细微之处提升产品的体验。
下面笔者会向剥洋葱一样，层层递进给大家讲解B端的按钮。主要包括：
一、按钮的作用
二、按钮的要素分解
2.1 按钮类型
2.2 按钮形态
2.3 按钮状态
2.4 使用场景
2.5 视觉样式
2.6 交互方式
2.7 展示数量
2.8 归类聚合
2.9 按钮位置
2.10 按钮顺序
三、按钮的设计原则
一、按钮的作用
在了解一个按钮是怎么回事前，我们需要先明白按钮在B端界面上的作用。
第一、触发某一类功能
用户通过操作按钮，可以触发功能从而完成任务。
第二、引导下一步操作
通过在适当的位置放置按钮，引导用户操作。
第三、聚合信息
当需要展示的内容过多时，可以通过按钮触发跳转详情，无需在当前页展示全部内容。
第四、形成用户心智
当按钮的位置、形式、文案都相对固定，且触发的功能一致，用户会对该按钮形成习惯，会形成用户对产品的依赖。
二、按钮的要素分解
别看一个小小的按钮，它可是隐藏着巨大细节的。越深入了解它，你会对它越来越刮目相看。
2.1按钮类型
在B端场景中，按钮主要分为5种，包括主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。通过对按钮添加属性后，又可以有危险按钮、幽灵按钮、禁用按钮、加载中按钮等。注意，不建议在一个按钮组中混合多种按钮使用，这会导致界面混乱，而每个按钮都是有其自身的使用场景。
2.2按钮形态
根据按钮类型，及按钮不同场景的使用需要，可以将按钮分成图标按钮、图标+文字按钮、组合按钮、下拉按钮、Block按钮。
2.3按钮状态
每类按钮都有一套基础的状态，包括Normal态（默认态）、Hover态（悬浮态）、Pressed态（点击态）、Disable态（禁用态）。按钮的不同状态告知了用户当前可以执行的下一步操作。
Normal（默认态）：该状态就是按钮正常显示在页面的状态。
Hover态（悬浮态）：当鼠标指针停留在按钮上时，按钮展示出的反馈。
Pressed态（点击态）：当鼠标指针按压按钮时，按钮的效果反馈。
Disable态（禁用态）：当页面按钮不可用时，可能是信息未填写完成，可能是操作未达到某种条件要求，按钮会展示不可用状态。对于禁用按钮，可以让鼠标浮上去后展示解禁提示，这样会对用户更友好。
2.4使用场景
笔者发现，很多同学在按钮的调用中，基本不太知道该如何去选择适合的按钮，而每类按钮都有其具体的使用场景，并不是上帝随意创造的物体，而是设计界专门为提升产品用户体验而创造的物体。
主按钮：主按钮为召唤按钮，在界面上较为醒目，召唤用户去操作，通常一个操作区只有一个主按钮。
默认按钮：按钮组中没有主次之分的按钮，通常按钮组中次按钮数量没有限制。
虚线按钮：虚线按钮通常用于当前页内容的添加操作。
文本按钮：在一些无需主次按钮的场景中，可以使用文本按钮，例如表格行操作项。
链接按钮：顾名思义，用于外链到外部页面的按钮。
危险按钮：一般在需要二次确认的地方，需要使用危险按钮，如删除、修改权限等场景。
幽灵按钮：按钮用在需要放置在不同底色或背景复杂的场景中。
禁用按钮：当前操作不可用，需要禁用按钮。
加载中按钮：在提交内容后，无法及时反馈，还需加载过程的，需要用到加载中按钮。
图标按钮：有些按钮用纯图标不仅节省界面空间，还直观，例如打印、修改文字颜色、内容布局等。
图标+文字按钮：图标按钮会让页面更有活力，更清晰表意，特别是如上传文件、下载文件类按钮，按钮加上图标比单纯文字更直观。
组合按钮：有多个按钮性质相似时，适合使用组合按钮，如视图切换按钮。
下拉按钮：当按钮数量过多，适合将一些低频按钮收纳起来。
Block按钮：这类按钮在一些页面需要强指引的时候出现，且操作较为全局性，比如登录、注册、付款、表单提交等。这类按钮在使用中要注意数量控制在2个以内，通常为一个主要按钮，一个次要按钮，不要出现太多，太多了显现不出该按钮的特点了。
2.5视觉样式
一个小小的按钮，包含了非常丰富的视觉样式，在设计阶段，需要对样式进行细致的拆解和定义。按钮的视觉样式包括尺寸、颜色、文本、按钮、间距、形状、风格，具体如下。
尺寸：在B端产品中，按钮通常有3种尺寸，分为大中小。大按钮主要使用在全局性操作的界面上；中按钮通常为标准按钮，其基本随时随地出现；小按钮主要使用在下拉面板或一些需要使用到小按钮的地方。
备注：计算标准按钮高度的方法（仅供参考），文字字号2.4倍或2.5倍，计算出来的值取最靠近4的倍数的数字。例如12号字体在2.4倍数值为28.8，距离4的倍数最近的为28，因此标准按钮高度为28px；14号字体在2.5倍数值为35，距离4的倍数最近的为36，因此标准按钮高度为36px。
文本：按钮如何传达意思给用户，文本起到了非常重要的作用，用户见文字了解用意，引导用户进行操作。放置在按钮中的文本需要注意三个问题：第一，文本颜色要清晰；第二，文本大小要合适；第三，文本寓意要明了。
图标：在设计打印、导入、导出、下载等按钮时，我们会发现图标按钮会比文字按钮更合适。图标按钮在设计上需要注意的与文本一致。
颜色：按钮的颜色主要由容器背景色和边框色（注意：是内描边）、字体颜色和图标颜色组成。不同的按钮色，代表了不同的按钮类型，例如赋予主色的按钮是主按钮。对于一些特殊风格的按钮来说，还有阴影的颜色，阴影颜色可以用按钮色值的透明度50%左右来设计。
间距：按钮内图标与文字的间距、文字与按钮边框的间距等，是形成按钮呼吸感的重要因素。在按钮规则的设计上，建议简单与美观。简单是指规则简单易拓展，美观是指按钮依据规则设计出来后，在视觉上要合理。
形状：形状是由按钮的圆角形成的。圆角为0px，按钮形状挺拔，给人严谨、尖锐的感觉；圆角为4px，按钮形状稍显柔和，给人专业不失柔和的感觉；圆角为半圆形（圆角的半径=高度的50%），按钮形状非常柔和，给人亲和感。
风格：B端按钮的风格主要为轻拟物、凸起按钮、渐变按钮和扁平化，而扁平化已经越来越成为趋势，扁平化按钮的优势在于：
第一、使得界面信息展现更清晰，用户将更聚焦于内容及任务操作。
第二、在开发上更方便，扁平化抛弃了很多不必要的设计。
第三、减少了阴影等细节，提升了产品性能。
2.6交互方式
除了视觉样式，按钮还带有交互方式。按钮只有带上了交互，才真正开始为用户服务，它是用户输入信息的口子，是系统接收信息的口子，更是人机友好交互的口子。
按钮的交互分为种：
第一、点击按钮后出弹窗，例如新增、删除。
第二、点击按钮后关闭、退出当前操作，例如保存对表单的操作。
第三、点击按钮后在当前页反馈信息，例如当前页新增表单项。
第四、点击按钮后出现下拉等浮层反馈，例如下拉菜单、表格“更多项”操作、工具栏“更多项”操作。
第五、点击按钮后跳转页面，例如步骤类操作中的下一步、页面类新增表单。
第六、鼠标悬浮在按钮触发面板类反馈，例如用户设置、换肤。
2.7展示数量
按钮的数量展示是指在一个按钮区中，按钮数量的多少。笔者见过B端产品三种按钮数量放置的方式，以下只有第三种是推荐的。
第一种，能提供给用户的按钮都展示出来，唯恐用户找不到。
第二种，适当做了按钮的收敛，但不清楚所以然，就是把一些按钮象征性的放到了“更多”中。
第三种，对业务的目标和用户的界面操作场景非常熟悉，有条有理的将按钮合理展示，既保证用户能顺利操作，又保证产品界面整理有序。
总体来说，建议一个按钮区的按钮数量尽量控制在5个以内，多余5个置入“更多”中。
2.8归类聚合
归类聚合是指具有相同含义的按钮需要归类展示，例如新增、删除、修改、查看通常在一起；启动和停止、导入和导出、下载和上传都会在一起，不宜距离太远。
2.9按钮位置
按钮的位置是指按钮或按钮组位于内容块的哪个部位，在一定程度上，我们也可以将页面视为内容块，即内容块是包含内容的区块。如果需要结构性的将一个内容块进行有序化切分，通常由Header、Body、Footer三部分组成。
Header：放置在Header的按钮，通常是一些全局性质的操作，例如编辑全部数据、切换视图展示、批量删除等。但是这些按钮应该放左侧、中间、还是右侧呢？
Body：放置在Body的按钮，通常是对跟随的内容直接操作，例如编辑单条表单项、编辑某部分表单区块等。但是这些按钮应该放在哪里呢？
Footer：放置在Footer的按钮，通常是全局完成类的操作，例如取消、确定、保存等。但是这些按钮应该放在哪里呢？
Header、Body、Footer按钮位置根据“F”和“Z”型的视觉浏览规律给出如下使用建议。图中蓝色为主按钮，白色为次按钮。
2.10按钮顺序
按钮顺序是指按钮组中，不同按钮的顺序应该如何放置，这里的顺序包含两层：第一是主按钮与次按钮的顺序；第二是同类按钮之间的顺序，例如次按钮和次按钮的顺序。同个产品中，按钮顺序保持一致，不仅利于提升用户的操作效率，同时会减少用户的操作出错概率。
由“2.9按钮位置”我们可以发现，当按钮组位于Header和Footer区时，主按钮和次按钮顺序为主按钮靠右原则设计，符合“Z”型阅读模式+费茨定律。当按钮组位于Body区时，若要同时出现主次按钮，主按钮在次按钮左边原则，符合用户“F”型浏览模式。
除了以上基础的设计建议外，还有以下三个设计原则需要遵守：
1、方向性原则
返回、前进、上一步、下一步、撤销、重做等按钮都是具有方向性的，假如按钮的放置位置是符合其方向性的，用户的认知成本就会很低。
2、相关按钮临近原则
让相关的操作按钮更相近，这样不仅在视觉上增强用户对他们的相关性认知，而且距离越近越容易操作。例如保存、保存并返回首页；发布、定时发布。
3、符合对话习惯
用户在操作界面按钮的时候，实际上是和界面在进行对话，因此，按钮设计符合用户自然的对话会比较合适。例如你想把自己喜欢喝的饮料分享给朋友，你会问“想喝吗”，如果他不想喝，你会再问“很好喝，可以加点糖”，如果他摇头，你会说“那好吧，可以先放一边，想喝了再喝”。而不会一上来就是“喝不喝，不喝扔到垃圾桶”，对吧。
因此，针对弹窗按钮的放置顺序为：保存、取消、删除。即“需要保存吗？”—“不保存，那需要取消吗？”—“原来文件不需要了，那删除吧。”
这里笔者有一点自己的心得分享给大家，也就是在设计按钮组的时候，可以运用以下步骤去思考：
第一、制定自己所负责的产品设计规范的内容块中按钮组的设计位置，例如Footer区按钮组的位置在哪里（可以区分场景也可以不区分，由产品覆盖的业务范畴决定）。
第二、制定主次按钮的位置（是否区分场景也看产品情况）。在阿里云平台设计规范中，主按钮都在左侧；而在antd中，主次按钮位置是分场景的。
第三、制定按钮组中每个按钮的顺序，建议参考2.10中的三个设计原则。
三、按钮的设计原则
1、让它就是它
让它就是它是说按钮在外形上就要看起来是个按钮，从用户的心智模型来说，只有用户第一眼识别到这是个按钮，我操作它后，它可以让我达成什么好的结果，用户才会去使用。
2、类型分明
类型分明是指设计者需要合理和正确使用不同类型的按钮，正确表达按钮的交互逻辑，让用户可以提前预判操作该按钮后的结果。例如，不要让用户点击链接后，弹出一个弹窗，正确的应该是点击链接，打开一个新的页面。
3、形式单纯
形式单纯是指在B端产品中，按钮不要设计的过于花哨，而是要干净利索，以抱着用户快速完成任务的心态去设计，而不是阻碍用户的操作，过分干扰和分散用户的视线。
4、反馈明确
每个按钮都承载一个功能，有功能有操作就需要有反馈，明确的反馈是用户下一步操作的基础。
5、规则清晰
按钮的使用规则，不同的设计规范有不同的定义，只要能合理定义自身所负责产品的按钮使用规则，并让用户接受，就是好的规则。定义清晰的按钮使用规则，不仅减少产品设计师之间的沟通成本，提升产品界面操作的一致性，同时降低用户的出错率。
四、结语
定义B端界面的设计规则是一项复杂且浩大的工程，但从长远来看，这是一件不得不去做的事情。我们希望规则简单、有约束、易拓展、有包容。关于按钮，还有很多要去解决，欢迎小伙伴们一起交流，笔者也会陆续整理和输出B端体验细节的其他部分，欢迎我的关注公众号“知果日记”，这是一个有理想的公众号哟~
