导航常见形式有：水平导航、垂直导航以及组合导航，主要针对这三种导航讨论。

在选择时，作为设计师我们需要了解产品的范围层（内容和功能）和结构层（信息框架和交互），初步把握菜单的广度和深度，充分了解各种导航的优缺点外；还可以再进一步考虑到用户体验的，了解用户的认知、操作、视觉负荷。以及后台管理的主要内容及表现形式、中英文切换差异、产品是否有根据角色划分功能权限等细节。

一、各类导航的基本表现形式及优缺点：

水平导航：

水平导航的优点：

1.位于顶部，为内容腾出了更多的空间。（一些类目多的大型表格页，垂直导航占用更多屏幕宽度，水平导航很大程度能够减少用户因表单展示不全而鼠标来回横划拖动的不便。）

2对于阅读的视觉干扰小。符合上而下浏览的习惯，相对于纵向导航不会打断用户对于内容的沉浸感。

3.现代人对于横向阅读快于纵向阅读，对于菜单的获取速度更快。

4.排版稳定，不受用户终端显示器的影响。

水平导航的缺点：

1.扩展性有限，面积较小菜单的广度和深度受限制。导航标题必须很短，不适合一级导航很多的信息结构。

2.水平导航悬浮展开更深层菜单点击操作后一般会收起，视觉定位没有纵向菜单二三级菜单外漏那么明显。

3.在纵向空间上有些牺牲，占用界面高度。

---

水平导航适用于：内容较为简单，或追求沉浸式阅读操作的后台。一般固定在顶部导航，方便页面切换。

尺寸（大部分系统类）：64px;

计算公式：48+8n

---

垂直导航：

(垂直导航展开）

(垂直导航收起）

垂直导航的优点：

1.一般位于左侧不会占用屏高，而且内容横向空间有限时，可以折叠收起，空间扩展更强。

2.在国内操作后台更流行常见，对于菜单栏文本长度容载量更大。

3.操作效率高，在菜单切换时鼠标移动上下距离更短，用户在操作和浏览中可以快速的定位和切换。

4.扩展性强，可以通纳大量、多级菜单。一、二、三级菜单可以更流畅且根据关联性的展示。

垂直导航的缺点：

1.操作菜单栏，展开收起二级菜单需要手动多次点击。

2.视觉层次上不如横向导航一二级导航视觉区分明显。

3.受使用者设备影响，整个页面排版不稳定。

---

垂直导航适用于：专注于功能，快速切换操作，有一定复杂度的后台。

侧边导航宽度计算公式：200+8n

---

混合型导航：

混合的导航综合了水平导航、垂直导航。层级可以扩展到二、三级菜单，且能够更加清晰的区分常用业务功能操作和辅助操作（如站点名称、栏目、搜索、信息、用户ID等。

混合型导航的优缺点也综合了水平和垂直导航的优缺点。

混合导航适用于：功能模块较多、复杂度较大的后台。

---

二、进一步的深入考虑

---

1.功能较多的B端后台，是否考虑了根据用户角色配置权限功能，保持每级的菜单项在7+-2左右，为了避免菜单项过多用户难以记忆。

2.对于一般系统来说，菜但层级最多到三级就可以了，层级不易过深。

3.导航的设计在范围层要考虑：产品功能的数量及嵌套关系。在用户层要考虑：用户的认知负荷（思考和记忆）；视觉负荷（浏览习惯与辨识度）；行动负荷（点击、操作鼠标左右拖动进度条、页面是否需要经常切换等）；内容层：以何种内容为主，内容在横向上还是纵向上需要更大的展示区域。

4.认知负荷小于行动负荷时，对于用户更友好。用户必须经过十几次点击才能完成任务，结果他们完成时还是会抬头笑道：“好轻松啊！”这是因为每个步骤都很合理，都提供了用户所预期的信息。他们不必动脑思考，思考的负荷比点击更沉重。——《设计师要懂心理学》  Susan Weinschenk  第四章 人如何思考。

5.导航菜单语言清晰易理解，信息归类属性界限清晰，信息记忆学习成本较低的适合菜单递进式展开；如果信息分类属性模糊，学习成本较高需要用户记忆的则推荐平铺式导航。

6.如果有中英文切换功能的话，考虑中英文的语言差异，中文字符较为紧凑。相同功能英文表述可能会更长。

---

三、思考题

1.当三级导航无法满足需求，子导航内出现更多的导航还有那些表现形式解决办法？

2.导航背景色是与内容页面明显区别好or弱化导航视觉层次背景色与内容页视觉层次相近好？

---

文章参考：

---

1.作者：maye 《ToB web后台产品设计：导航设计》

链接：https://www.jianshu.com/p/19d36bb29d62  来源：简书

2.Antdesign 组件-layout-布局介绍