什么是B端产品？

B端产品主要面向的是企业客户以及内部员工使用，比如OA、ERP、CRM、SRM等，一般除了目标用户，其他用户很难接触到。B端产品的设计通常需要结合具体的业务场景，功能和逻辑往往比较复杂，且用户通常需要长时间沉浸使用，因此要求界面设计层级清晰，布局简洁高效。

B端按钮设计通常存在三方面的复杂性：

按钮数量多：B端产品几乎所有页面都会有按钮，甚至同时有多个按钮。对层级感和美观度的要求都很高；

应用场景多：按钮需要适应B端产品的多种业务场景，包括登录界面、表单、弹窗、信息提示框等；且每个场景出现的形式都不尽相同，需要对每种场景严格规范才不至于使用混乱；

出现形式多：按钮通常具有正常、聚焦、悬停等多种状态，需要保证用户能够及时发现并获得准确的反馈效果。

要想解决这些问题，我们需要了解按钮的主要类型和设计细节，以便在各类情况下灵活运用。

按钮类型

按钮主要包括主按钮、次按钮、文字按钮、图标按钮、菜单按钮、图标+文字按钮6大类。

主按钮（Primary Button）

主按钮顾名思义承载当前页面的核心功能，通常为新建、保存、确定这一类的正向操作。由于重要性高，要让用户一眼就能看见，往往设计的比较醒目。另外主按钮在页面中不宜安排的过多，否则容易相互干扰；而且只有最重要的功能才适合设计为主按钮，因此并非所有页面都需要有主按钮。

次按钮/标准按钮（Default Button）

次按钮也叫标准按钮，是页面中出现频率最高的按钮类型。一般来说，只要不是需要被强调的核心功能，都可以作为次按钮的形式出现。由于出现的次数较多，次按钮往往不宜设计的过于抢眼，通常采用文字+边框或者文字+浅色背景的形式。

文字按钮/链接（Text Button/Link)

文字按钮类似次按钮，也是页面中大量出现的按钮类型。由于只以文字形式出现，视觉上层级较弱，可以和次按钮区分一定的层级关系，通常在列表设计中被大量使用。

图标按钮（Icon Button）

图标按钮相较其他按钮体积较小，因此布局的灵活性很高。且图标形式给了设计师更多表现的空间，是B端设计中最容易出彩的部分，许多B端产品都通过精心设计的图标按钮传递产品调性和品牌感。

由于没有文字元素，图标按钮容易出现用户理解上的偏差。为避免这一情况，需要在设计时做好用户测试，测试该图标是否符合用户视觉预期。或者当用户Hover时显示Tooltips提示按钮含义，帮助用户理解。

菜单按钮（Menu Button）

菜单按钮可以理解为一般按钮的集合，即将多个相关功能合并在一起，通过点击按钮以下拉菜单的形式出现。菜单按钮可以有效减少界面按钮冗杂的问题，提高界面使用效率。

图标+文字按钮（Icon add Button）

一般指主按钮中加入图标，为了进一步突出主按钮的视觉层级，也有增加美观度提高用户点击欲望的作用。

除了以上介绍的6种主要按钮类型外，还可以依据功能类型将按钮分为行为召唤按钮、悬浮按钮、标签按钮、危险按钮和开关按钮。

行为召唤（Call To action，CTA）按钮的目的是通过设计诱导或激励用户点击，从而实现产品的诉求。此类按钮的设计在颜色、形状、样式上都需要突出，让人拥有点击的欲望。行为召唤按钮一般不会出现在B端产品的内部，但在官网或活动页面被广泛运用。

危险按钮可以是主按钮之外的任意按钮类型，用来警告用户审慎考虑，且点击后通常需要二次确认，避免误操作。

开关（Switch）按钮是两种相互对立状态间的切换，多用于功能的开启和关闭，一般操作后会即刻生效，多用于设置界面中。

设计细节

除了上面总结的6种主要按钮类型，要设计出一个好用的按钮，还需要重视一些细节，例如颜色、形状、状态、位置等。

颜色

颜色是最容易感知到的对比方式，不同的颜色会给用户不一样的心理预期。B端产品的用色一般以理性、严肃的基调为主，其中蓝色最为常见。如选用其他色彩可适当调低饱和度，以降低长时间使用造成的视觉疲劳感。

在设计时，还要将颜色分为主题色、强调色和辅助色，以适应不同按钮层级。主题色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。主题色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。主题色的应用场景包括操作状态、按钮色、可操作图标等；强调色多用于需要拉开主次关系的次按钮中，一般采用主题色的对比色彩或者邻近色；辅助色用于提示其他场景，比如成功、失败、警告、无效等。

形状

在设计按钮时，需要根据整个界面风格设计适合的形状，主要有直角、小圆角、全圆角、异形四种样式。

直角的含义：严谨、力量、高端。属于B端产品最常用的类型，给人严谨、安全、高端的感觉。

小圆角的含义：稳定、中性。在B端产品中也经常出现。

全圆角的含义：活泼、年轻、安全。适用于儿童类、年轻类、娱乐类、购物类产品中，提升亲和力，拉近用户的距离。

异形按钮的含义：不稳定、活泼、另类。适用于需要用户做出选择的场景中。

状态

在部分界面设计中需要考虑按钮的状态设计，从而让用户获得清晰流畅的操作反馈。B端完整的系统按钮可以分为：正常状态（Normal）、聚焦状态（Focus）、悬停状态（Hover）、点击状态（Active）、加载状态（Loading）、禁用状态（Disabled）。

一般来说，正常状态（包括加载状态）展示的是产品的主色；聚焦状态仅限桌面端，代表系统光标所在位置，一般用背景色或添加醒目的描边表示；悬停状态通常叠加20%左右的白色或添加阴影，表现按钮向用户方向靠近的效果；点击状态在正常状态的基础上叠加15%的黑色，产生被按下的感觉；禁用状态则一般用灰色或者将正常状态的透明度降低至30%左右。

位置

位置的选择一般对主按钮较为重要，在设计时要以引导用户、方便用户点击为目的。

根据尼尔森团队眼动追踪研究结果发现，用户通常以F型和Z型模式浏览页面，其中Z型浏览模式较为普遍，F型浏览模式通常为新闻平台、博客等以文字为主的页面。

由此可知页面的左上方通常为用户视觉的起点，右上方次之。我们可以将主功能按钮放置于用户最容易注意到的位置，相反较为低频的按钮则可以安排在其他位置，符合用户的阅读习惯。

需要注意的点

在了解了按钮的常见类型和设计细节后，已经可以设计出符合规范的按钮了。除此之外，还有以下几点需要注意：

尽量使用常见的按钮设计

B端产品的功能较多，意味着会有大量按钮同时出现在页面中，用户在使用时需要立即知道什么是可点击的。如果按钮因样式特殊而无法被用户第一时间看到，就是失败的按钮设计。

不要忘记间距

不仅按钮本身的样式很重要，其附近的间距大小也会影响用户发现和理解按钮的成本。所以留足间距才是明智的选择。

使用合理的文案

按钮文案需要清楚的说明其功能，减少用户操作时的困惑。有时还能通过对用户行为的预测，为其提供意想不到的惊喜效果。

避免太多按钮

正如前文提到的，按钮太多是B端产品常见的问题。满屏的按钮会让用户感到困惑，使用效率低下。我们可以尝试将同类型功能折叠为菜单按钮，或者根据重要程度以不同形式的按钮展示，尽量降低视觉的疲劳感。

提供互动的视觉或听觉反馈

当用户点击按钮时，给予适当的视觉或听觉反馈会极大地提升用户的使用体验，提升产品的品质感。

做好按钮设计的9个基本原则

1、按钮的类型

按钮包括很多种，本文主要分享的是我们在设计中经常运用到的一些按钮类型。比如普通按钮、图标按钮、文字按钮、下拉按钮等等

2、按钮的状态

按钮的状态一般分为三种：正常态、不可点击状态、点击状态。

正常状态就不必多讲了。按压状态：我常用的一种方式是将按钮的不透明度改为80%- 85%:

不可点击状态，也推荐两种实现方式，一种是降低为30%的透明度，另一种是直接置灰:

3、按钮的主次关系

页面的内容信息可以通过文字的大小、颜色形成层级关系。同样按钮设计，我们可以在风格上进行区分，让主要按钮与次要按钮形成差异，达到层级结构的视觉提升，更好引导用户根据设定的轨迹进行操作。

4、按钮的设计尺寸

4.1合适的大小

按钮需要方便用户进行点击操作，如果用户点击失败或者误点到周边元素，就会带给用户不友好的体验。若是带有文本的按钮，只要文字大小不要小于极限值即 移动设备上 44 * 44 ，通常实现出来的按钮交互热区都会满足点击需求。

4.2 按钮的高度

每个平台都会有多种型号的按钮，我见过最多的可以分为5种：超大按钮、大按钮、中按钮、小按钮，超小按钮，这个可以根据自己平台的需要来制定多少种。每一种按钮都需要有一个特定高度，那么这个高度如何制定才比较科学呢？这里可以推荐一种方式，就是按钮的高度是文字的三倍左右，这样看起来会比较舒服：

4.2 按钮的宽度

在不同的页面中按钮的宽度是随机的，所以按钮的具体宽度我们需要具体的功能来设置。

5、按钮的圆角

对于按钮边框来说，我们通常采用全圆角和小圆角居多，这样显得稳重大气。 一般我采用全圆角的圆角值等于按钮高度值的一半，而小圆角的圆角值通常控制在 1/4H（高度值的四分之一）以内。

同时要注意的一点是，在同一款产品中要保证所有按钮的圆角比例是一致的，而不是圆角一致。如果不同大小按钮的圆角都是一致的，那会显得非常别扭。

6、按钮的文字

按钮文字和边框的设计要预留一定的留白，不要做“舍不得”的设计，使得按钮给人感觉很拥挤。如果你把控不好可以分析一些按钮的负空间获取经验，看看文字大小和负空间之间是否存在某种比例关系。找到这个比例关系运用到按钮设计中，也许会让你的设计显得更加成熟稳重。

建议按钮的文字一般不要超过6个汉字。

7、按钮的样式一致

在同一页面中按钮的样式要形成一致，不要给用户造成理解上的成本。

8、按钮的色彩

颜色部分比较简单，一般会选用规范体系的颜色即可。但像红色或者橙色多为行动刺激作用，不适合在非品牌色的时候滥用。浅灰色或者低饱和度的色系会带有不可用、禁用、失效等属性，需要酌情选择。

9、按钮的摆放位置

按钮的摆放位置通常要结合用户的视觉感受、与用户操作习惯进行摆放。