自己从事B类产品web端交互设计3年来，设计过各式各样的导航。导航是用户从A移动到B完成任务的重要指引，体验良好的界面设计往往是从导航开始的，所以在整个设计流程中，导航设计应该占据一定的优先级。
为了方便后续B类产品设计过程中可以更加高效且高质量的进行导航交互设计，结合自己在实际项目工作中遇到的导航类型总结了导航设计模式，以供大家参考。
按照导航移动方向可以分为：
横向导航：在同一级别的屏幕之间移动
向前导航：连续的层级级别、流程中的步骤或跨应用的程序屏幕之间移动
反向导航：按照时间顺序或分层向后翻屏幕
横向导航
菜单
核心导航元素之一，可以加速目标实现和满足需求的过程，一般用于系统框架级导航，菜单层级最多3级。
交互原则
1. 主菜单导航系统，建议一级菜单遵循 7±2 法则，≤7 最佳；
2. 菜单项按照逻辑顺序排列，如果逻辑不明显，则按照菜单常用度排列；
3. 下拉平铺式菜单较多时，子菜单数量 <9 时，1列显示；当 9<子菜单数量 <18时，2列显示；下拉画布右侧可以放些广告；
4. 对于复杂菜单，可以采用汉堡式菜单，可以释放空间，使界面简约，但是汉堡式菜单也有缺点，隐藏的导航元素让新手迷惑，不知道如何下手。
手风琴
一般用于系统内?？槔嗟牡己?，易于扩展，可以完美展示其中的层级关系，垂直菜单建议最多2级。
交互原则
1. 默认激活第一个菜单或者首个菜单的第一个子菜单，选中某个子菜单，子菜单所属的菜单为展开形式；
2. 垂直菜单建议最多3级，并具有展开收起选择等交互功能；
3. 手风琴一般至于页面左侧。
标签
提供平级的区域将大块内容进行聚合，标准页签常常用于容器内部主功能切换。
交互原则
1. tabs标签建议遵循 7±2 规则，理想情况是≤5
结构树
一般用于系统内?？槔嗟牡己?，易于扩展，可以完美展示其中的层级关系，垂直菜单建议最多3级。
交互原则
1. 默认选中第一个菜单，内容区显示第一个菜单对应的内容；
2. 垂直菜单建议最多3级，根据场景功能结构树要具备编辑添加删除等交互功能；
3. 结构树一般至于页面左侧。
按钮集合
快捷入口集合，简化界面信息，提升效率。
向前导航
导向
依次按照一个流或者有序顺序来完成任务，引导性强。
交互原则
1. 向导步骤数遵循 7±2 法则；
2. 需要标识出已完成，未完成和当前步骤；
3. 各个步骤对应的容器提供数据暂存的能力，方便快速查看已完成的信息。
层级
在屏幕界面的层级结构中向下访问更深的内容，从父层级到子层级的路径，可以引导帮助用户操作。
交互原则
1. 层级建议最多3级，跳转后提供面包屑导航，提示用户所在当前位置，以及返回路线；
2. 整个容器提供数据暂存能力。
反向导航
后退导航
用户按照时间顺序的反向导航，可以帮助用户快速返回到原始位置。
交互原则
1. 要有清晰的入口帮用户返回到原始屏幕位置；
2.如果屏幕的先前状态不可用，需要给出清晰的提示
参考：MaterialDesign
如果大家喜欢可以关注西西的微信公众号或者知乎专栏：西西设计客栈
