编辑导语：B端产物的按钮应该如何设计？本文作者从按钮的位置、对齐 *** 、顺序、视觉强度尚有巨细这几个方面，通过实际操纵为我们举办了阐明，但愿这篇文章能对你的按钮设计有所开导。

一、界说 1. 内容块

可以将整个页面视为一个内容块，也将一张卡片视为一个内容块，可能仅仅是界面中的一个小小的内容单位也可以视为一个内容块。

界面中，一个内容块的根基组成有三部门：Header、Body、Footer。

通例来说，一个内容块凡是叙述一个主题：Header 申明主题，Body 安排该主题的详细内容，Footer 主题的延伸信息和操纵。

二、按钮的位置

按钮的位置有三种：Header、Body、Footer

1. Header

安排影响全局改观的操纵，好比复选后的操纵，新建、编辑……

2. Body

安排跟从内容生效的操纵，好比表单中的上传图片，添加条目……

3. Footer

安排完结类寄义的操纵，好比确定和打消。

三、按钮对齐 ***

按钮的对齐 *** 取决于用户的欣赏 *** ，对付用户欣赏 *** 的研究常见的要领为眼动测试，根基结论有：

对付大量同质信息均衡漫衍的环境（表单即属于这种环境），视觉都趋向于从上到下，从左到右的眼动纪律；

左上角是视觉的之一落点区，而右下角是视觉最终落点区；

设计的元素的会影响视线的变换，好比颜色、图片。

Header区域：左上角作为之一视觉落点，一般用来安排标题，其次是按钮。

Body区域：做主任务流程，整体机关需要指明一条清晰的路径。将输入和操纵强制垂直对齐，可以清楚地转达如何完成表单填写。

Footer区域：右下角作为视觉最终落点，主按钮回收右对齐。

1. 左对齐

左对齐意味着越重要的按钮越靠左，顺序为：一级按钮——二级按钮——三级按钮。

Header区域，假如没有标题，就回收按钮做对齐；body区域与表单对齐，也就意味着左对齐。

对付控住单行输入的表单的按钮，一般将按钮放在输入组件旁边，有时候会为了机关的雅观放在输入组件的下方。

2. 右对齐

左对齐意味着越重要的按钮越靠左，顺序为：三级按钮——二级按钮——一级按钮。

一般环境下，弹窗内的按钮区域默认右对齐。

对付整个网页场景，Header区域，假如有标题，标题左对齐，按钮右对齐；Footer区域，右下角作为视觉最终落点，主按钮回收右对齐。

四、按钮顺序

主按钮放左边照旧右边？

各头部的互联网公司的处理惩罚都不尽沟通，可见放左边照旧右边都是可以被接管的，只要在系统中保持交互的一致。

一般上认为大部门人作为右撇子，主按钮放在右边更容易被点击，但在差异场景中照旧有差此外，见按钮的对齐 *** 。

1. 风险操纵

大概造成损失的操纵，出格是粉碎性操纵，假如不是用户期望点击的按钮，应该只管远离常用按钮。

假如此时主按钮放在左对齐，风险按钮就放右边，反之亦然。

2. 偏向性寄义

一般认为，具有返回意义的按钮，应该放在左侧，体现其偏向是回到之前。

3. 对话习惯

凭据对话习惯分列按钮。

界面中的按钮阅读顺序雷同于一个用户和电脑的对话进程，凭据日常对话的顺序设计按钮阅读顺序更自然。

当用户修改了一项配置，用户最有大概的行为是生存这项改观，我们会有优先问是否生存，然后才是是否要分开——这个思路常用于确认按钮的主次（正面性的问题优先）。

4. 易操纵性

对付一组按钮来说（常见于东西栏），一般最左边和最右边放主按钮/高频操纵，较低频操纵放中间。原因在于用户的欣赏模式从左到右，会更容易留意到视觉的起点和终点，其次对付操纵鼠标来说对边角的按钮更容易被定位到。

拿导航栏右侧的菜单来说：有四个东西，个中宣布作为主，按钮放在最左侧，并利用实心icon+主题色高亮；小我私家书息属于信息层级更高，接近边沿可以或许辅佐用户举办快速选择。

五、按钮的视觉强度

视觉层面

1. 一级按钮

一级按钮凡是是主按钮，突出“完成”、“推荐”的操纵，一个按钮区最多一个主按钮，也可以没有主按钮。

2. 二级按钮