B端导航体系 - 全局导航设计思考

B端的页面结构

背景层、内容层、全局控制层、临时层

背景层

背景层，顾名思义就是最底部的背景颜色

内容层

随着导航切换不断变换内容

全局控制层

由侧边栏跟顶部栏共同构成

临时层

只在特定的交互下出现，停留时间短（气泡、轻提示、弹窗、抽屉等）

B端导航分类

1.全局导航：顶部栏、侧边栏

2.局部导航：内容层

3.逆向导航：顶部栏、背景层（常说的就是面包屑跟返回，聚焦如何回退）

4.快捷导航

全局导航

分为3类：侧边导航、顶部导航、混合导航

侧边导航优点

扩展性强：功能大而全、导航层级多的B端产品后台也可流畅展示

快速定位：视觉起始线统一，用户可根据首字母快速查找功能

灵活收展：侧边栏可以收折，增大横向内容空间提升展示效率

侧边导航缺点

阅读沉浸感低：侧边导航动线高频折回，打断了用户的正常阅读顺序

不推荐：不推荐应用在官网、门户型、内容型网站

侧边导航设计要点

1.满足拓展性

二级导航数量少，用折叠面板

二级导航数量多，一行两个排列，或双列递进

一行两个的交互模式

一级分组少，可以二级导航全部展开，这样功能一览无遗，降低用户查找和使用成本

一级分组多，我们就可以自定义到底展开那些二级导航

3级导航

双列递进+标题分组

双列递进+折叠面板

不推荐：单列折叠面板，用户点击次数太多，增加用户使用成本

2.减少屏占比

支持收起，收起后只展示icon

不推荐：侧边有3级的时候，不建议收起，功能查找切换成本高

对于复杂的页面，直接精简全局导航，只保留返回，为给用户提供更专注沉浸的操作体验，提高任务完全效率

3.弱化割裂感

弱化全局导航与内容区的颜色对比

一、用户认知培养已成熟，无需借助颜色来强调导航位置

二、聚焦内容区域、便于处理信息

三、减少割裂感、提升全局一致性

四、B端C化的体现

4.提升易读性

如何让功能更易查找？

一、席克定律

人面临的选择越多，所要消耗的时间成本越高

二、米勒定律 (7+2定律)

普通人短时记忆，只能记住7+2的信息，再多就很容易出错，影响记忆的精准度

信息分类：把导航按照业务逻辑进行组块处理让信息从无序变有序

信息分类注意要遵循两个原理：格式塔原理-接近性原则、格式塔原理-相似性原则

格式塔原理-接近性原则：接近的元素，更容易被看成一个整体

格式塔原理-相似性原则：用户倾向于将彼此相似的元素（形状、尺寸、方向、颜色等）分为一组

顶部导航优点

大量的运用于企业官网、门户型/内容型网站，偶尔也用在功能简单的B端产品后台

更符合用户阅读习惯：阅读方式更贴近人眼视觉动效 (F型、Z型)

适合沉浸式浏览内容：没有侧边栏干扰，内容区空间更大，阅读更专注

顶部导航缺点

导航字数限制：由于横向空间有限，对每个导航的字数限制严格

导航拓展性差：一级导航数量受页面宽度限制不超过7个

无法利用滚轮交互：Web端尽量减少横向滑动交互

顶部导航设计要点

1.满足拓展性

一级导航数量增加，用“更多”来收纳

2.支持自定义

自定义导航排序：排序靠前会优先展示在导航中

二级导航数量增加，在下拉菜单里标题分组

子导航数量进一步庞杂，通过tab切换+标题分组+搜索

运营位+产品动态，帮助用户更快选择，全部产品可前往落地页

混合导航优点

能够承载超大型B端项目：功能拓展性更强，能承载功能更庞杂的产品

混合导航缺点

屏占比大：所有导航模式中，留给内容区空间最小

交互成呢高：一二级导航来回切换，交互成本高，操作动线不流畅

混合导航设计要点

可用性要大于好用性，适用于超大型复杂的后台

顶部栏应为一级导航更符合用户的阅读动线

全局导航设计原则

1.稳定性（高频的操作容易养成肌肉记忆，不要轻易改变用户的习惯）

选定了导航模式，就不要轻易更改

导航的位置、排序尽量固定，不要轻易更改

2.拓展性

一级导航要有足够的包容性，应该是功能组，而非具体的操作

无论业务如何扩张，用户都有清晰稳定的路径

3.灵活性

多入口设置，满足不同场景的需求