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

在 B 端界面中，按钮是每张页面都会呈现的最根底的元素，用户的任务流程皆从按钮开端，按钮规划有理有据，可认为界面及产品专业度加分不少。假设一个产品的界面，是如下图那样（按钮的规划规矩无规矩可循，随意为之），不仅产品用户体会会直线下降，产品地点企业及产品本身的口碑也会遭到质疑。一起，按钮作为产品规划规范中的一个部分，假设不加以约束，每种场景都会呈现过多的组合办法，导致界面体会无章可循。

因而，收拾按钮的里里外外相当重要，从纤细之处提高产品的体会。

下面笔者会像剥洋葱相同，层层递进给咱们解说 B 端的按钮。

按钮的作用

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

榜首：触发某一类功用

用户经过操作按钮，能够触发功用从而完结任务。

第二：引导下一步操作

经过在恰当的方位放置按钮，引导用户操作。

第三：聚合信息

当需求展现的内容过多时，能够经过按钮触发跳转概况，无需在当时页展现悉数内容。

第四：构成用户心智

当按钮的方位、形式、案牍都相对固定，且触发的功用共同，用户会对该按钮构成习惯，会构成用户对产品的依靠。

按钮的要素分解

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

1. 按钮类型

在 B 端场景中，按钮首要分为 5 种，包括主按钮、默许按钮、虚线按钮、文本按钮、链接按钮。经过对按钮添加特点后，又能够有风险按钮、鬼魂按钮、禁用按钮、加载中按钮等。留意，不主张在一个按钮组中混合多种按钮运用，这会导致界面紊乱，而每个按钮都是有其本身的运用场景。

2. 按钮形态

依据按钮类型，及按钮不同场景的运用需求，能够将按钮分成图标按钮、图标+文字按钮、组合按钮、下拉按钮、Block 按钮。

3. 按钮状况

每类按钮都有一套根底的状况，包括 Normal 态（默许态）、Hover 态（悬浮态）、Pressed 态（点击态）、Disable 态（禁用态）。按钮的不同状况告知了用户当时能够履行的下一步操作。

• Normal（默许态）：该状况便是按钮正常显示在页面的状况。
• Hover 态（悬浮态）：当鼠标指针停留在按钮上时，按钮展现出的反应。
• Pressed 态（点击态）：当鼠标指针按压按钮时，按钮的作用反应。
• Disable 态（禁用态）：当页面按钮不行用时，可能是信息未填写完结，可能是操作未到达某种条件要求，按钮会展现不行用状况。对于禁用按钮，能够让鼠标浮上去后展现解禁提示，这样会对用户更友爱。

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。

文本：按钮怎么传达意思给用户，文本起到了十分重要的作用，用户见文字了解意图，引导用户进行操作。放置在按钮中的文本需求留意三个问题：榜首，文本色彩要明晰；第二，文本大小要适宜；第三，文本寓意要明晰。

图标：在规划打印、导入、导出、下载等按钮时，咱们会发现图标按钮会比文字按钮更适宜。图标按钮在规划上需求留意与文本共同。

色彩：按钮的色彩首要由容器布景色和边框色（留意：是内描边）、字体色彩和图标色彩组成。不同的按钮色，代表了不同的按钮类型，例如赋予主色的按钮是主按钮。对于一些特别风格的按钮来说，还有暗影的色彩，暗影色彩能够用按钮色值的透明度 50%左右来规划。

间距：按钮内图标与文字的间距、文字与按钮边框的间距等，是构成按钮呼吸感的重要因素。在按钮规矩的规划上，主张简单与漂亮。简单是指规矩简单易拓宽，漂亮是指按钮依据规矩规划出来后，在视觉上要合理。

形状：形状是由按钮的圆角构成的。圆角为 0px，按钮形状挺拔，给人谨慎、尖利的感觉；圆角为 4px，按钮形状稍显柔和，给人专业不失柔和的感觉；圆角为半圆形（圆角的半径=高度的 50%），按钮形状十分柔和，给人亲和感。

风格：B 端按钮的风格首要为轻拟物、凸起按钮、渐变按钮和扁平化，而扁平化现已越来越成为趋势，扁平化按钮的优势在于：

• 榜首：使得界面信息展现更明晰，用户将更聚集于内容及任务操作。
• 第二：在开发上更方便，扁平化扔掉了许多不必要的规划。
• 第三：削减了暗影等细节，提高了产品功能。

6. 交互办法

除了视觉款式，按钮还带有交互办法。按钮只要带上了交互，才真实开端为用户服务，它是用户输入信息的口儿，是体系接收信息的口儿，更是人机友爱交互的口儿。

按钮的交互分为六种：

榜首：点击按钮后出弹窗，例如新增、删去。

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

第三：点击按钮后在当时页反应信息，例如当时页新增表单项。

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

第五：点击按钮后跳转页面，例如过程类操作中的下一步、页面类新增表单。

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

7. 展现数量

按钮的数量展现是指在一个按钮区中，按钮数量的多少。笔者见过 B 端产品三种按钮数量放置的办法，以下只要第三种是引荐的。

• 榜首种，能提供给用户的按钮都展现出来，只怕用户找不到。
• 第二种，恰当做了按钮的收敛，但不清楚所以然，便是把一些按钮象征性的放到了“更多”中。
• 第三种，对事务的目标和用户的界面操作场景十分熟悉，有条有理的将按钮合理展现，既保证用户能顺利操作，又保证产品界面收拾有序。

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

8. 归类聚合

归类聚合是指具有相同含义的按钮需求归类展现，例如新增、删去、修正、检查一般在一起；发动和停止、导入和导出、下载和上传都会在一起，不宜间隔太远。

9. 按钮方位

按钮的方位是指按钮或按钮组位于内容块的哪个部位，在必定程度上，咱们也能够将页面视为内容块，即内容块是包括内容的区块。假设需求结构性的将一个内容块进行有序化切分，一般由 Header、Body、Footer 三部分组成。

Header：放置在 Header 的按钮，一般是一些全局性质的操作，例如修改悉数数据、切换视图展现、批量删去等。可是这些按钮应该放左侧、中心、仍是右侧呢？

Body：放置在 Body 的按钮，一般是对跟随的内容直接操作，例如修改单条表单项、修改某部分表单区块等。可是这些按钮应该放在哪里呢？

Footer：放置在 Footer 的按钮，一般是全局完结类的操作，例如撤销、确认、保存等。可是这些按钮应该放在哪里呢？

Header、Body、Footer 按钮方位依据“F”和“Z”型的视觉阅览规矩给出如下运用主张。图中蓝色为主按钮，白色为次按钮。

10. 按钮次序

按钮次序是指按钮组中，不同按钮的次序应该怎么放置，这儿的次序包括两层：榜首是主按钮与次按钮的次序；第二是同类按钮之间的次序，例如次按钮和次按钮的次序。同个产品中，按钮次序保持共同，不仅利于提高用户的操作功率，一起会削减用户的操作犯错概率。

由“2.9 按钮方位”咱们能够发现，当按钮组位于 Header 和 Footer 区时，主按钮和次按钮次序为主按钮靠右准则规划，契合“Z”型阅览模式+费茨规律。当按钮组位于 Body 区时，若要一起呈现主次按钮，主按钮在次按钮左面准则，契合用户“F”型阅览模式。

除了以上根底的规划主张外，还有以下三个规划准则需求恪守：

方向性准则

回来、前进、上一步、下一步、撤销、重做等按钮都是具有方向性的，假设按钮的放置方位是契合其方向性的，用户的认知本钱就会很低。

相关按钮临近准则

让相关的操作按钮更附近，这样不仅在视觉上增强用户对他们的相关性认知，而且间隔越近越容易操作。例如保存、保存并回来主页；发布、守时发布。

契合对话习惯

用户在操作界面按钮的时分，实际上是和界面在进行对话，因而，按钮规划契合用户天然的对话会比较适宜。例如你想把自己喜爱喝的饮料共享给朋友，你会问“想喝吗”，假设他不想喝，你会再问“很好喝，能够加点糖”，假设他摇头，你会说“那好吧，能够先放一边，想喝了再喝”。而不会一上来便是“喝不喝，不喝扔到垃圾桶”，对吧。

因而，针对弹窗按钮的放置次序为：保存、撤销、删去。即“需求保存吗？”—“不保存，那需求撤销吗？”—“本来文件不需求了，那删去吧。”

这儿笔者有一点自己的心得共享给咱们，也便是在规划按钮组的时分，能够运用以下过程去考虑：

• 榜首：拟定自己所担任的产品规划规范的内容块中按钮组的规划方位，例如 Footer 区按钮组的方位在哪里（能够区别场景也能够不区别，由产品掩盖的事务领域决定）。
• 第二：拟定主次按钮的方位（是否区别场景也看产品情况）。在阿里云渠道规划规范中，主按钮都在左侧；而在 antd 中，主次按钮方位是分场景的。
• 第三：拟定按钮组中每个按钮的次序，主张参阅 2.10 中的三个规划准则。

按钮的规划准则

1. 让它便是它

让它便是它是说按钮在外形上就要看起来是个按钮，从用户的心智模型来说，只要用户榜首眼识别到这是个按钮，我操作它后，它能够让我达到什么好的成果，用户才会去运用。

2. 类型分明

类型分明是指规划者需求合理和正确运用不同类型的按钮，正确表达按钮的交互逻辑，让用户能够提前预判操作该按钮后的成果。例如，不要让用户点击链接后，弹出一个弹窗，正确的应该是点击链接，翻开一个新的页面。

3. 形式单纯

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

4. 反应明晰

每个按钮都承载一个功用，有功用有操作就需求有反应，明晰的反应是用户下一步操作的根底。

5. 规矩明晰

按钮的运用规矩，不同的规划规范有不同的界说，只要能合理界说本身所担任产品的按钮运用规矩，并让用户接受，便是好的规矩。界说明晰的按钮运用规矩，不仅削减产品规划师之间的沟通本钱，提高产品界面操作的共同性，一起降低用户的犯错率。

结语

界说 B 端界面的规划规矩是一项复杂且浩大的工程，但从长远来看，这是一件不得不去做的工作。咱们期望规矩简单、有约束、易拓宽、有包容。关于按钮，还有许多要去处理，欢迎小伙伴们一起沟通。

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