B端设计基础：按钮Button

在B端产品的用户体验设计中，按钮不仅是用户界面的基础元素，更是用户与系统交互的重要媒介。一个设计精良的按钮可以显著提升用户的工作效率，增强产品的操作直观性，甚至影响用户对整个产品的印象。然而，按钮设计看似简单，却蕴含着丰富的设计细节和用户体验原则。本文将深入探讨B端产品设计中按钮设计的要点，帮助设计师们打造既美观又实用的按钮。

相较于其他组件，按钮的元素构成较为简单，分为内容层和容器层，通过将不同元素进行搭配组合，即可设计出不同类型的按钮类型和按钮状态。

通过对按钮元素的不同组合，得出以下8种常用按钮类型。

在同一个页面中往往会存在多个行动点，因此需要将按钮依据强调程度进行划分，确保用户可以依据设计的按钮层级快速找到最需要操作的按钮。常见的按钮强调程度可以分为3个层级：

主按钮代表着页面中的核心操作项，是视觉权重最高的按钮，常用于突出提交、完成、确定等操作。为吸引用户注意，常使用品牌色填充背景引导用户视觉焦点。关于主按钮的使用需要遵循以下2个原则：

次按钮是使用最频繁的按钮，当在页面中不确定选择哪种按钮时，使用它往往是最安全的。次按钮分为描边型和填充型。填充按钮的优先级低于主按钮，高于描边按钮。

文字按钮适合承载如取消、还原等无需特意强调的操作，通常使用在表格操作栏、表单页等场景。为了和普通文本做区分，提示当前内容可交互，需要加上链接色（一般是蓝色）提醒用户。

图标按钮的视觉层级最弱，但是由于占据空间小，常用于同时展示多个操作项时使用。由于缺少文字解释，单纯的图标可能会造成用户的理解偏差，需要在悬停时加上Tooltip的文字提示进行辅助说明，对于特定操作还可加上快捷键指引。

严格来说 下拉菜单Dropdown 并不属于按钮类型，但因为其使用场景较为频繁且时常用来承载多个按钮操作，故在此处作为单独类型进行讲解。下拉菜单作为操作命令集合使用时，可以简单理解成按钮组：将多个操作按钮收纳到同一菜单下。在使用时有两点需要额外注意：

当下拉菜单用来承载操作项时，各操作项关联性也会引起下拉菜单样式上的区别

按钮正常有6种交互状态，其中有4种最为关键：正常态、悬停态、点击态和禁用态

按钮的初始状态，即默认情况下的基础样式

当鼠标指针移入按钮时的状态。为了暗示用户鼠标指针已进入按钮的可交互区域，按钮相较于正常状态在背景色彩等样式上会有明显的区别

鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化，提示用户已触发点击操作。

按钮无法操作被锁定时的状态。该状态是为避免用户误操作而设立，如在登录页未完成信息填写时将提交按钮禁用，提示用户无法点击，只有填写完必填字段后才可以点击提交。在鼠标悬停时指针变化为禁用状态

该状态用于指示电脑光标的位置。在有些场景下不操控鼠标，只通过键盘方向或Tab切换选择页面元素进行操作，反而是更高效的操作方式。

表明用户操作后系统正在处理的状态。由于服务器响应或网络延迟等问题，有时候用户操作完需要间隔一段时间才能响应，加载态可缓解用户的焦虑情绪，避免用户由于未收到反馈而反复操作的情况。

按钮设计的目标是引导用户采取我们希望用户采取的行动。这就需要尽量帮助用户快速找到需要操作的按钮并了解执行该操作的结果，同时尽可能避免误操作。基于以上目标，我们从用户实际操作路径的视角来梳理按钮设计时应考虑的问题：

当用户进入页面时，除了浏览当前页的信息内容还需要寻找接下来可执行操作的可交互区域，即按钮区。除了单纯通过视觉差异区分按钮和页面其他元素外，还需考虑到用户在信息浏览过程中的视觉动线。结合古腾堡法则和格式塔原理，给出以下设计建议：

在没有其他视觉效果引导时，F型和Z型网页浏览模式可以作为用户视觉动线的基础指导，关于以上2种浏览模式网上有太多相关介绍，此处就不再赘述。

将关联性强的信息放在一起，可以降低阅读成本，提高用户的感知效率。

对于新用户而言，确定按钮的位置对操作时间和错误率影响并没有太大差别。因此不要轻易改变当前产品中用户已经习惯的按钮位置。

典型的使用场景就是列表页操作栏、详情页顶部操作栏、子表右肩操作区。

此处的阅读顺序并非特指从左往右、从上往下，而是依据用户当前视觉动线，优先满足用户预期或操作可能性最大的按钮需要最先被用户发现。

流程属性的按钮如上一步、返回、后退等操作用户习惯在左边，而下一步、前进、更多等操作在右边。

如删除或清空按钮，尽可能放置在远离主按钮的位置，甚至可以下钻至更多按钮中，避免误触。

页面中越是需要强调的按钮其视觉权重越高。分类维度除了通过色彩划分外，还可以通过描边、内容量、文本划分。

按钮的尺寸优先体现在其高度上，而宽度一般根据内容区大小自动适配。通常会将按钮分为大、中、小三个规格，以满足不同场景下的使用需求。

好的按钮文字甚至可以做到即使不去阅读上下文，单凭按钮文案即可做出正确的判断。

按钮区域寸土寸金，每一个字都要有其存在的意义，如果删除也不影响信息表达即没必要存在。

文字表达清晰，避免使用用户难以理解的专业术语。

常见的“登陆&登录”、“确认&确定”、“发送&发布”都是容易打错的词。

如统一采用动宾结构：修改价格、提交工单、查看更多等。

圆角矩形相较于直角更具安全感和亲和力、在相似内容中识别度更高，且圆角对信息的聚焦性更强。同样B端设计中通常也会在按钮中加入圆角，方便用户更高效的辨别和获取信息，但是需要注意的是圆角并非越大越好，过大的圆角会导致按钮操作热区的缩窄，更不易被点击触发。移动端产品上都是采用手指按压，而桌面端采用鼠标指针单击，相较之下后者对点击按钮的触发精度要求更高，也因此全圆角按钮（也被称为胶囊按钮）更适合在移动端产品上使用。

此外按钮的圆角设置还需考虑到产品整体的视觉一致性，在不同场景下都要保证统一的感官体验，如在大尺寸的按钮上圆角的曲率也应设置更大。

B端产品设计中的按钮设计不仅仅是一个简单的点击动作，它背后蕴含着对用户行为的深刻理解和对设计细节的精细打磨。作为体验设计专家，我们有责任通过不断学习和实践，提升按钮设计的质量，为用户带来更加流畅和愉悦的使用体验。