B端按钮设计要点

B端按钮通常是指面向企业的网站或应用系统中的按钮，用于触发某些业务操作。这些按钮通常包含一些重要的功能，如下单、确认、提交、审核、交付等。B端按钮通常是为了帮助企业用户快速完成各种业务流程，提高工作效率和准确性而设计的。

一、B端主按钮

B端主按钮是指面向企业网站或应用系统中，用于引导用户完成核心业务操作的主要按钮。通常，这些按钮会放在页面中比较显眼的位置，与业务流程紧密相关，如提交订单、确认支付、审核通过等。这些操作可能需要多个步骤才能完成，B端主按钮可以引导用户完成复杂的业务流程，提高工作效率和准确性。

1、在页面当中，主按钮最好只有一个，可以引导用户更集中地完成主要流程。比如在下面这个数据同步的页面中我们可以很清楚地看到主按钮就是右下角的保存按钮，那么用户就会更快速而准确地完成任务。

2、主按钮hover时，一般是做0.7的透明度变化 。同样点击时一定要有及时的反馈机制，如弹出窗口或消息提醒，让用户知道他们的操作被成功执行，以提高用户体验。

二、B端次按钮

B端次要按钮是指在应用系统中用于辅助完成次要业务操作的按钮，这些按钮通常会放置在页面或应用系统的次要位置，次要按钮的设计应该能在不影响用户完成核心业务操作的前提下提供额外的帮助和便利。这些按钮的设计需要注意与B端主按钮的视觉和交互相协调。

B端次按钮常用字线型形式，即按钮整体以文字+边框的形式

如图所示可以用主题色文字+主要色边框的形式表示次要按钮，也可以用中性色文字+中性色边框的形式表示更次要按钮。

三、文字按钮

文字按钮是指在用户界面中以文本形式呈现的可点击按钮，与图形按钮相比，文字按钮不含图像或图标，而是用文本表示按钮的功能或操作。与图形按钮相比，文字按钮通常更适合在特定情境下使用，例如需要高度可读性情况下使用到。比如在表格场景与表单详情等场景中会使用到。

四、图标按钮

图标按钮是一种在用户界面中以图标形式呈现可点击的按钮，与文字按钮相比，图标按钮通常使用图标来表示按钮的功能或操作，通常更直观以及占据更少空间。图标按钮的设计中应该注意易用性和可识别性，按钮的图标应该简单明了，并且可以快速传达其功能或操作，颜色形状大小等应该考虑到品牌形象和用户便利性。假如图标按钮可能出现理解上的障碍，需要根据实际情况进行选择。

如果图标按钮没法很直观表示业务含义可以悬浮或点击时加个tip提示

五、按钮菜单

按钮菜单在用户界面中通常以按钮形式呈现，并在单击时显示一个下拉菜单，通常用于显示一组相关选项或命令，用户可以通过鼠标点击来选择子菜单中所需的选项或命令。既可以节省界面空间，又可以提高用户效率。在设计中应注意提供一致的外观和行为，以便提高效率和准确性。

B端设计师最常用到的按钮菜单就是新建。

如图新建指标的按钮菜单就是统一的外观样式和相同的指标业务需求。

六、按钮中加图标

按钮中加图标会比没加图标的按钮更加强调，既可以加深对用户对按钮的记忆和理解，又可减少业务上比较冗杂的文案。

如图切换指标广场的按钮将切换用图标来替代，就极大地方便了用户的识别性和提高了业务上的可读性。

七、按钮圆角

按钮圆角的设计应该与品牌形象相符，例如品牌形象是现代和简约的，那么按钮圆角应该是较小的，而且不要使用过于复杂的形状。

按钮使用直角会使按钮排列上更加统一，常用于工业领域。相比于直角，圆角视觉上会给人一种柔和亲近的感觉，但圆角不是越大越好，圆角越大，可操作的区域会随之减少，小圆角按钮会相对大圆角按钮更容易点击。在B端系统中圆角2px与4px用得比较多。

以上是2px圆角的视觉效果

八、按钮摆放顺序

按钮的摆放顺序需要引申到人眼的视觉路径，其中有F型与Z型视觉路径。

F型视觉路径最初是由Nielson在2006年提出的。是基于人们的阅读和扫描习惯而提出的概念，因为人们的视觉习惯是先扫描左上角和上部区域，然后再向下和向右浏览，因此在设计网页中会将重要的信息和元素放置在页面的上部和左侧，以便用户可以更容易找到和使用，例如网页标题、重要的导航菜单等都放在页面的上部和左侧，可以更好地吸引用户的注意力和提高用户的满意度。

利用人眼F型视觉路径在表格中的文字按钮我们可以至上而下的依次排列。

但有时人眼的视觉也跟内容的对齐方式有关，如果是左对齐的，人眼会从左往右阅读，如果是右对齐的，人眼会从右往左阅读。

最先看到的按钮权重最重，左对齐则左边第一个按钮优先级最重，右对齐则右边第一个按钮优先级最重。

以上八个方面是按钮设计要点，按钮是用户界面设计中非常重要的元素之一，在B端界面设计中都需要深入思考一下才能发挥按钮的最大价值。