在B端界面中，按钮是每个页面出现的最基本的元素。用户的任务流程从按钮开始。按键设计得当，可以为界面和产品的专业度加分不少。如果一个产品的界面如下图所示（按钮的设计规则是不规则的，可以随意做），不仅产品的用户体验会直线下降，而且产品所在公司的声誉也会下降位于，产品本身也会受到质疑。同时，按钮也是产品设计规范的一部分。如果不加以限制，每个场景的组合就会过多，导致界面体验没有规则。因此，将按钮内外组织起来，从细微处提升产品体验就显得尤为重要。接下来笔者将像剥洋葱一样逐层讲解B面的按键。按钮的作用在了解什么是按钮之前，我们需要先了解按钮在B端界面的作用。第一：触发某类函数。用户可以通过操作按钮来触发功能来完成任务。第二：通过将按钮放置在合适的位置来引导下一步，引导用户操作。第三：聚合信息当需要显示的内容过多时，可以通过按钮触发跳转详情，而不显示当前页面的所有内容。第四：形成用户心智。当按钮的位置、形式、文案相对固定，触发的功能一致时，用户就会对按钮形成习惯，形成用户对产品的依赖。按钮的元素分解别看一个小按钮，它隐藏着巨大的细节。你越了解它，你就越会为之惊叹。1.按钮类型在B端场景中，按钮主要有五种类型，分别是主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。为按钮添加属性后，可以有危险按钮、幽灵按钮、禁用按钮、加载按钮等。注意不建议在一个按钮组中混用多个按钮，这样会造成界面混乱，每个按钮有自己的使用场景。2.按钮形状根据按钮类型和按钮在不同场景下的使用需求，按钮可以分为图标按钮、图标+文字按钮、组合按钮、下拉按钮、块状按钮。3.按钮状态每类按钮都有一组基本状态，包括Normalstate（默认状态）、Hoverstate（悬浮状态）、Pressedstate（点击状态）和Disablestate（禁用状态）。按钮的不同状态通知用户当前可用的下一个操作。Normal（默认状态）：该状态是按钮在页面上正常显示的状态。悬停状态（悬浮状态）：当鼠标指针停留在按钮上时，按钮显示反馈。按下状态（点击状态）：当鼠标指针按下按钮时，反馈按钮的效果。禁用状态（disabledstate）：当页面按钮不可用时，可能是信息没有填写，或者操作不符合某些要求，按钮会显示不可用状态。对于禁用的按钮，可以让鼠标悬浮起来显示解禁提示，这样会更加人性化。4.使用场景笔者发现很多同学在调用按钮的时候基本不知道如何选择合适的按钮，而每一种按钮都有其特定的使用场景。它不是上帝随意创造的对象，而是世界专门为提升产品的用户体验而创造的设计对象。主按钮：主按钮是调用按钮，在界面上比较醒目，调用用户操作。通常，一个操作区只有一个主按钮。默认按钮：按钮组中没有主要或次要按钮。通常，按钮组中的二级按钮的数量没有限制。虚线按钮：虚线按钮通常用于添加当前页面的内容。文本按钮：在一些不需要主次按钮的场景下，可以使用文本按钮，比如表格行操作项。链接按钮：顾名思义，就是用来链接到外部页面的按钮。危险按钮：一般需要在需要二次确认的地方使用危险按钮，比如删除、修改权限等场景。幽灵按钮：按钮用于需要放置不同背景颜色或背景复杂的场景。禁用按钮：当前操作不可用，需要禁用该按钮。加载按钮：提交内容后，如果没有及时反馈，仍然需要加载过程，则需要加载按钮。图标按钮：部分按钮使用纯图标不仅节省界面空间，而且直观，如打印、修改文字颜色、内容排版等。上传文件和下载文件。带有图标的按钮比简单的文本更直观。组合按钮：当有多个属性相似的按钮时，适合使用组合按钮，比如视图切换按钮。下拉按钮：当按钮过多时，适合存放一些低频按钮。块状按钮：这种类型的按钮出现在一些页面需要很强的引导性，操作比较全局，比如登录，注册，支付，表单提交等，使用这种类型的按钮时要注意数量控制在2个以内，一般是1个主键和1个副键，不要出现太多，太多会暴露按键的特性。5.视觉风格一个小小的按钮包含了非常丰富的视觉风格。在设计阶段，风格需要仔细拆解和定义。按钮的视觉样式包括大小、颜色、文字、按钮、间距、形状、样式，如下。尺寸：在B端产品中，按钮通常有3种尺寸，分为大、中、小。大按钮主要用在全局操作界面上；中号按钮通常是标准按钮，基本上随时随地都会出现；小按钮主要用在下拉面板或者一些需要用到小按钮的地方。备注：标准按钮高度的计算方法（仅供参考），文字大小为2.4倍或2.5倍，计算的值为最接近4的倍数的数。例如字体大小12的值为28.8是2.4的倍数，最接近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.9ButtonPosition”我们可以发现，当按钮组位于Header和Footer区域时，主按钮和副按钮的顺序是按照主按钮在右的原则设计的，符合到“Z”型阅读模式+菲茨定律。当按钮组位于Body区域时，如果要同时出现主次按钮，则主按钮在次按钮的左侧，符合用户的“F”型浏览模式。除了上面的基本设计建议外，还需要遵循三个设计原则：方向性原则后退、前进、上一个、下一个、撤销、重做等按钮都是有方向性的。如果把按钮放在与其方向一致的位置，用户的认知成本会很低。相关按钮的就近原则使得相关的操作按钮距离更近，不仅在视觉上增强了用户对其相关性的感知，而且距离越近也越容易操作。例如保存、保存并返回首页；释放，定时释放。符合对话习惯当用户操作界面按钮时，实际上是在与界面进行对话。因此，按钮设计更符合用户的自然对话。比如你想和朋友分享你最喜欢的饮料，你会问“Doyouwanttodrinkit?”嗯，你先放一边，想喝的时候喝。”而不是一上来就“喝不喝，扔进垃圾桶”，对吧？因此，弹窗按钮的放置顺序是：save,cancel,delete即“是否需要保存？”-“如果不保存，是否需要取消？”-“原来的文件已经不需要了，删掉吧。》这里我有一点自己的经验分享给大家，就是在设计按钮组的时候，可以按照以下步骤来思考：第一：制定按钮组在内容块中的设计位置自己负责的产品设计规范，比如Footer区的按钮组在哪里（场景可以区分也可以不分，产品覆盖）。第二：确定主次按钮的位置（是否区分场景还要看产品情况）。在阿里云平台设计规范中，主要按钮在左侧；在antd中，主次按钮的位置是按场景划分的。第三：制定按钮组中各个按钮的排列顺序，建议参考2.10中的三个设计原则。按钮设计原则1.Letitbewhatit意思是按钮在外观上应该像一个按钮。从用户的心智模型来看，只有用户第一眼才能认出它是一个按钮。在我操作它之后，它看起来像一个按钮，它能让我达到什么好的效果，用户就会用它。2、清晰的类型清晰的类型是指设计者需要合理、正确地使用不同类型的按钮，正确表达按钮的交互逻辑，使用户能够提前预知操作按钮的结果。例如，不要让用户单击链接并弹出弹出窗口。正确的方法是点击链接打开新页面。3.简洁的形式简单的形式是指在B端产品中，按钮不能设计的过于花哨，而是要干净利落，以用户快速完成任务的心态来设计，而不是阻碍用户的操作，过度的干扰和分散用户的注意力视线。4.反馈明确。每个按钮都有一个功能。如果有功能和操作，就需要反馈。清晰的反馈是用户下一步操作的基础。5.明确的规则。不同的设计规范对按钮的使用规则有不同的定义。只要能为自己负责的产品合理定义按钮使用规则，让用户接受，就是一个好的规则。明确定义的按键使用规则，不仅可以降低产品设计者之间的沟通成本，提高产品界面操作的一致性，还可以降低用户出错率。结束语定义B端界面的设计规则是一项复杂而庞大的工程，但从长远来看，这是必须要做的事情。我们希望规则是简单的、约束的、易于扩展的、包容的。关于按钮，还有很多需要解决的地方，欢迎小伙伴们相互交流。
