2023年B端体验细节（一）：按钮的里里外外

B端体验细节（一）：按钮的里里外外在B端界面中，按钮是每张页面都会消失的最基础的元素，用户的任务流程皆从按钮开头，按钮设计的有理有据，可以为界面及产品专业度加分不少。

假如一个产品的界面，是如下图那样（按钮的设计规章无规律可循，随便为之），不仅产品用户体验会直线下降，产品所在企业及产品本身的口碑也会受到质疑。同时，按钮作为产品设计规范中的一个部分，假如不加以约束，每种场景都会消失过多的组合方式，导致界面体验无章可循。

因此，整理按钮的里里外外相当重要，从微小之处提升产品的体验。

2）文本

按钮如何传达意思给用户，文本起到了特别重要的作用，用户见文字了解用意，引导用户进行操作。放置在按钮中的文本需要留意三个问题：第一，文本颜色要清楚；其次，文本大小要合适；第三，文本寓意要明白。

3）图标

在设计打印、导入、导出、下载等按钮时，我们会发觉图标按钮会比文字按钮更合适。图标按钮在设计上需要留意的与文本全都。

4）颜色

按钮的颜色主要由容器背景色和边框色（留意：是内描边）、字体颜色和图标颜色组成。不同的按钮色，代表了不同的按钮类型，例如给予主色的按钮是主按钮。对于一些特别风格的按钮来说，还有阴影的颜色，阴影颜色可以用按钮色值的透亮     度50%左右来设计。

5）间距

按钮内图标与文字的间距、文字与按钮边框的间距等，是形成按钮呼吸感的重要因素。在按钮规章的设计上，建议简洁与美观。简洁是指规章简洁易拓展，美观是指按钮依据规章设计出来后，在视觉上要合理。

6）外形

外形是由按钮的圆角形成的。圆角为0px，按钮外形挺立，给人严谨、尖锐的感觉；圆角为4px，按钮外形稍显严厉，给人专业不失严厉的感觉；圆角为半圆形（圆角的半径=高度的50%），按钮外形特别严厉，给人亲和感。

7）风格

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

使得界面信息呈现更清楚，用户将更聚焦于内容及任务操作。在开发上更便利，扁平化抛弃了许多不必要的设计。削减了阴影等细节，提升了产品性能。

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

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

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

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

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

Header：放置在Header的按钮，通常是一些全局性质的操作，例如编辑全部数据、切换视图展现、批量删除等。但是这些按钮应当放左侧、中间、还是右侧呢？Body：放置在Body的按钮，通常是对跟随的内容直接操作，例如编辑单条表单项、编辑某部分表单区块等。但是这些按钮应当放在哪里呢？Footer：放置在Footer的按钮，通常是全局完成类的操作，例如取消、确定、保存等。但是这些按钮应当放在哪里呢？Header、Body、Footer按钮位置依据“F”和“Z”型的视觉扫瞄规律给出如下使用建议。图中蓝色为主按钮，白色为次按钮。

这里笔者有一点自己的心得共享给大家，也就是在设计按钮组的时候，可以运用以下步骤去思索：

第一、制定自己所负责的产品设计规范的内容块中按钮组的设计位置，例如Footer区按钮组的位置在哪里（可以区分场景也可以不区分，由产品掩盖的业务范畴打算）。

其次、制定主次按钮的位置（是否区分场景也看产品状况）。在阿里云平台设计规范中，主按钮都在左侧；而在antd中，主次按钮位置是分场景的。

第三、制定按钮组中每个按钮的挨次，建议参考2.10中的三个设计原则。

三、按钮的设计原则

1.让它就是它

让它就是它是说按钮在形状上就要看起来是个按钮，从用户的心智模型来说，只有用户第一眼识别到这是个按钮，我操作它后，它可以让我达成什么好的结果，用户才会去使用。

2.类型分明

类型分明是指设计者需要合理和正确使用不同类型的按钮，正确表达按钮的交互规律，让用户可以提前预判操作该按钮后的结果。例如，不要让用户点击链接后，弹出一个弹窗，正确的应当是点击链接，打开一个新的页面。

3.形式单纯

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

4.反馈明确

每个按钮都承载一个功能，有功能有操作就需要有反馈，明确的反馈是用户下一步操作的基础。

5.规章清楚

按钮的使用规章，不同的设计规范有不同的定义，只要能合理定义自身所负责产品的按钮使用规章，并让用户接受，就是好的规章。定义清楚的按钮使用规章，不仅削减产品设计师之间的沟通成本，提升产品界面操作的全都性，同时降低用户的出错率。

四、结语

定义B端界面的设计规章是一项简单且浩大的工程，但从长远来看，这是一件