【ToB Web设计】底部工具栏 Footer Tool Bar——以云产品为例

底部工具栏 Footer Tool Bar

狭义的「底部工具栏」指的是作为浮层固定在页面底部的工具栏。区别于「顶部工具栏」，「底部工具栏」的操作通常是对整个页面进行结束或总结。

常见的操作如：确定、保存、删除、取消、上一步、下一步等。本文所讨论是更加广义的「底部工具栏」，泛指所有用于存放结束或总结操作的工具栏。

---

根据操作不同，在云产品中，关于「底部工具栏」内部位置的讨论会有以下2种类型：

1.具有明显空间次序的操作

在设计类似「上一步」「下一步」「上一页」「下一页」「返回」等具有明显空间次序的操作时，通常按照语义进行排布。

根据语义排列操作按钮

2.不具有明显空间次序的操作

在设计类似「保存」「确定」「取消」等不具有明显空间次序的操作时，通常要考虑用户习惯和用户体验。

从用户习惯的角度，微软的Windows系统让该操作系统的用户习惯于「确定」等主操作在左侧，而「取消」等辅操作在右侧。

windows的确定、取消

从用户体验的交互，苹果的Mac系统则根据「古登堡图表法」（又称对角线平衡法）设计底部工具栏的内部次序，将「确定」等主操作置于「最终视觉着落点」，即右下角，减少用户视线的反复跳动，使得体验更顺畅。

mac的取消、导出

**在特殊情境采用「反设计」，为了达到一定的商业目的或者为了减少用户进行破坏性操作，设计师也可以利用「反设计」将主操作的「删除」置于左侧，辅操作的「取消」置于右侧。

针对云服务领域，使用Windows系统的用户占大部分，所以在云产品的设计中，建议遵循Windows系统的规范，主操作置于左侧，辅操作置于右侧。

---

根据载体不同，在云产品中，关于「底部工具栏」对齐方式的讨论会有以下3种类型：

1居中弹窗

针对「居中弹窗」的底部工具栏，主要有以下3种设计方式：

①相对弹窗居中对齐——腾讯云。消息确认类弹窗一般采用居中对齐，内容弹窗也采用居中对齐，一致性高。但当弹窗内容较多时，易造成头重脚轻的视觉感受，且不符合常规视线流。

腾讯云的居中弹窗

②相对弹窗居右对齐——阿里云。配合居左的标题，符合古登堡图表法的对角线视线流，视觉感受平衡，操作自然。

阿里云的居中弹窗

③相对表单输入框左对齐——青云。当弹窗内容仅有规整的表单时，符合尼尔森F型视觉流，填写速度最好。但当表单的标签与输入框采用左右结构而非上下结构时，常因标签长度各异而导致操作按钮位置各异，一致性稍欠。

青云的居中弹窗

2侧方滑块/侧方弹窗/抽屉

当「居中弹窗」没有足够的空间容纳内容信息时，一般采用「侧方滑块」的设计。腾讯云和阿里云的「侧方滑块」设计中，都将底部工具栏居左处理，这也与「侧方滑块」通常容纳表单相关。「侧方滑块」的形状呈长块状，为了充分利用空间以及保持表单整齐，一般采用标签和输入框上下排布，左对齐符合尼尔森F型视线流，填写表单的效率最高。图示中，如果阿里云的表单能够与底部操作栏左对齐，则体验更佳。

阿里云的侧方滑块

3页面

当「侧方滑块」没有足够的空间容纳内容信息时，一般采用新「页面」的设计。

①相对页面左对齐——腾讯云、Google Cloud Platform

Google Cloud Platform

②相对页面右对齐——阿里云、AWS

阿里云

选择左对齐还是右对齐，其实与页面布局相关。由于页面空间较大，尽可能地利用横向空间，此时，视线流会呈古登堡图表法的对角线型，底部工具栏右对齐置于「最终视觉着落点」，比较容易被用户发现。

但当页面的主体内容居于左侧，右侧留白或只有辅助信息时，视线流会呈尼尔森F型，底部工具栏左对齐比较容易被用户发现。

---

延伸信息：

古登堡图表法的对角线视线流

尼尔森的F型视线流