【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型视线流
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • part1:指引用户 ch1 令人心动的第一印象 首先讨论用户第一次访问某个站点的头30秒钟内将会发生的事情。 ·...
    orli阅读 1,710评论 0 4
  • 有粮千担 不过是早中晚餐 家产万贯 不过是身外之财 文 | 佚名 来源 | 网络 洋房十座 不过是住所一间 豪车百...
    心灵666阅读 184评论 0 1
  • “姐,看你现在的状态,感觉很心疼又很感动。” 跟小伙伴久别重聚时,她这样说。 那时初夏,我背个大大的双肩包,包里是...
    一米的树洞阅读 589评论 0 0
  • 在上一期节目中,我给大家讲了一些来自中国古籍记载的经典时间管理方法,有一些到现在我们还在沿用,而我国古代先贤的时间...
    全然_50bb阅读 783评论 0 2
  • 我,一个生理年龄45岁,心理年龄25岁,外貌35岁的中年妇女。依然粉鹿晗,粉黄子韬,粉张艺兴……突然有一天发现自己...
    7_ZJ阅读 237评论 0 0