底部工具栏 Footer Tool Bar
狭义的「底部工具栏」指的是作为浮层固定在页面底部的工具栏。区别于「顶部工具栏」,「底部工具栏」的操作通常是对整个页面进行结束或总结。
常见的操作如:确定、保存、删除、取消、上一步、下一步等。本文所讨论是更加广义的「底部工具栏」,泛指所有用于存放结束或总结操作的工具栏。
根据操作不同,在云产品中,关于「底部工具栏」内部位置的讨论会有以下2种类型:
1.具有明显空间次序的操作
在设计类似「上一步」「下一步」「上一页」「下一页」「返回」等具有明显空间次序的操作时,通常按照语义进行排布。
2.不具有明显空间次序的操作
在设计类似「保存」「确定」「取消」等不具有明显空间次序的操作时,通常要考虑用户习惯和用户体验。
从用户习惯的角度,微软的Windows系统让该操作系统的用户习惯于「确定」等主操作在左侧,而「取消」等辅操作在右侧。
从用户体验的交互,苹果的Mac系统则根据「古登堡图表法」(又称对角线平衡法)设计底部工具栏的内部次序,将「确定」等主操作置于「最终视觉着落点」,即右下角,减少用户视线的反复跳动,使得体验更顺畅。
**在特殊情境采用「反设计」,为了达到一定的商业目的或者为了减少用户进行破坏性操作,设计师也可以利用「反设计」将主操作的「删除」置于左侧,辅操作的「取消」置于右侧。
针对云服务领域,使用Windows系统的用户占大部分,所以在云产品的设计中,建议遵循Windows系统的规范,主操作置于左侧,辅操作置于右侧。
根据载体不同,在云产品中,关于「底部工具栏」对齐方式的讨论会有以下3种类型:
1居中弹窗
针对「居中弹窗」的底部工具栏,主要有以下3种设计方式:
①相对弹窗居中对齐——腾讯云。消息确认类弹窗一般采用居中对齐,内容弹窗也采用居中对齐,一致性高。但当弹窗内容较多时,易造成头重脚轻的视觉感受,且不符合常规视线流。
②相对弹窗居右对齐——阿里云。配合居左的标题,符合古登堡图表法的对角线视线流,视觉感受平衡,操作自然。
③相对表单输入框左对齐——青云。当弹窗内容仅有规整的表单时,符合尼尔森F型视觉流,填写速度最好。但当表单的标签与输入框采用左右结构而非上下结构时,常因标签长度各异而导致操作按钮位置各异,一致性稍欠。
2侧方滑块/侧方弹窗/抽屉
当「居中弹窗」没有足够的空间容纳内容信息时,一般采用「侧方滑块」的设计。腾讯云和阿里云的「侧方滑块」设计中,都将底部工具栏居左处理,这也与「侧方滑块」通常容纳表单相关。「侧方滑块」的形状呈长块状,为了充分利用空间以及保持表单整齐,一般采用标签和输入框上下排布,左对齐符合尼尔森F型视线流,填写表单的效率最高。图示中,如果阿里云的表单能够与底部操作栏左对齐,则体验更佳。
3页面
当「侧方滑块」没有足够的空间容纳内容信息时,一般采用新「页面」的设计。
①相对页面左对齐——腾讯云、Google Cloud Platform
②相对页面右对齐——阿里云、AWS
选择左对齐还是右对齐,其实与页面布局相关。由于页面空间较大,尽可能地利用横向空间,此时,视线流会呈古登堡图表法的对角线型,底部工具栏右对齐置于「最终视觉着落点」,比较容易被用户发现。
但当页面的主体内容居于左侧,右侧留白或只有辅助信息时,视线流会呈尼尔森F型,底部工具栏左对齐比较容易被用户发现。
延伸信息: