Web导航设计在平时的网页或者系统设计中是最基本的设计，它关乎着整个网站或者系统最基础的用户体验。
写在前面
McGovern曾说过“相比于直接搜索，用户更喜欢用导航，因为导航是让用户做选择题，而搜索是填空题”，由此可见导航在产品中的重要性。
目前苏宁物流研发中心所负责的产品多数都是面向自身业务人员或者商家使用，因此平时参与设计的B端系统较多。
而通常情况下，由于B端产品本身的业务就比较复杂，所以当重新设计或者改版一个系统时，在了解当前业务背景的情况后，需要构建整个系统的框架时，选择一个合适的导航设计形式就显得尤为重要。
所以，在此结合实际工作中接触到的各类系统产品，总结了一些有关于导航设计的原则以及规范，方便沿用在日常的实际工作中。
◆本文大纲
01导航设计原则1.保持导航结构的连贯性和一致性
这里的连贯性主要表现在通过某些设计形式让用户清楚的知道每个菜单中是否有子层级，不要出现如果不展示或者设计不够明显，导致用户误认为没有更多内容的导航菜单。
阿里云的侧边栏逐层渐进的导航形式，能够支撑庞大的业务内容，同时带给用户清晰明了的导航体验。
◆阿里云侧边栏导航
一致性主要表现在保持子页面在网站系统各个版块导航结构中层次的一致性，不要在这个版块处于一级导航，而在另一个版块却是二级导航。
此外，所有的导航菜单，其交互形式都要保持一致，如果都是作为下一层级展开的触发点，那就都是这样，如果点击后有承载页去实现页面跳转，那就全部都要有承载页。
苏宁易购首页的商品分类导航，每个一级品类既可点击跳转至该品类的承载页面，也可鼠标hover展示出二级品类，主要通过鼠标获取的焦点状态来区分，在这里所有的一级导航其交互形式都是一致的。
◆苏宁易购品类导航
此外面包屑导航也可以很好的保持网站层级的连贯性和一致性，可以很好的引导用户，让用户明白当前浏览页面在整个网站结构中的位置。并能通过面包屑导航快速切换至另一个页面，这种引导对那些从外部链接跳转至深层级页面的用户尤为重要。
◆苏宁易购面包屑导航
2.设计清晰易懂的交互方式
2.1交互的可视化
◆导航交互的可视化
用户通过导航菜单中的箭头方向的切换来预知操作的结果，既是一种功能的可视化引导，也是一种操作反馈。
2.2视觉的差异化
◆美团官网图标视觉差异化
通过视觉，将不同的入口进行差异化设计，比如美团网把那些功能性图标和信息类图标做视觉上的差异化。
3.设计扁平的导航结构
3.1限制导航层级
导航结构的层级数量最终是由网站的信息层级决定的，理想状态下，用户需要点击的导航层级越少，那么用户到达他们的目标页面也就越快越清晰，信息层级越深，则用户越容易被误导。
在这里要注意的是：网站导航的目标是为了让用户快速找到自己所需的内容，不能一味的追求扁平的导航结构，使得整个网站的信息分类混乱。所以，要根据情况综合考虑信息分类的广度与深度，对于信息的分类，常见的可以通过卡片分类法来进行划分。
◆扁平化导航和深层级导航
3.2为每一层级设计独特的视觉
利用视觉设计上的统一性来划分每一个层级，这样用户能够快速浏览理解导航信息，知道哪些链接是属于哪个层级的导航项目。
通常可以通过以下方式来区分信息层级：字体样式、字体大小、字体权重、背景色、对齐等等。下面拉勾网的导航信息层级通过字体大小、颜色、间距来区分。
◆拉勾网职位类别导航
4.考虑设备的特征和兼容性
4.1移动端没有hover态*
PC端用户可以hover主导航项目时显示次导航链接，而移动端没有hover态，直接触发点击效果，如果想将两种交互形式用在一个内容链接上，可以通过设计成点击不同的位置产生不同的点击效果。
◆Hover态与点击态
*注：hover态指鼠标未点击时的悬停状态。
4.2响应式设计
根据平台的特性自适应页面，比如：华为云官网的响应式设计，PC端采用了顶部导航的形式，移动端采用了侧边栏导航。
◆华为云官网响应式设计
5.考虑信息的渐进显示
用户进入网站或者系统后，大致流程如下：
◆用户进入网站的大致流程
其实在这个过程中包含有三种负荷，由大到小分别是：认知负荷>视觉负荷>行动负荷。
研究同时表明：当认知负担小（用户可以不需要怎么思考就知道怎么点击），行动上的操作负荷可以忽略不计。
是否需要渐进显示，根据情况而定：
◆阿里云的渐进式导航
阿里云的官网的侧边栏导航采用了渐进式与平铺式两者结合的方式，一级与二级菜单的业务分类界限相对比较明确。同时阿里云官网本身涉及的业务范围很多，所以把很多业务进行整合分类，同时对于细分业务领域，又通过平铺形式进行展示，这样用户方便用户迅速找到自身所要浏览的业务板块。
02导航设计形式对于Web端的导航，可以分为六种形式，分别为：
◆导航分类
1.导航菜单／NavMenu
将网站信息进行分组分类并以某种形式展现给用户，以便用户快速获取信息，主要用于网站的流量分拨和功能聚合。
常见的可分为：顶部导航、侧边栏导航、混合式导航三种形式。
1.1顶部导航
最常见的导航形式，一般包含logo、菜单、个人中心三个部分，二级菜单一般聚合在下拉菜单里，鼠标hover出现二级或者更多级菜单。
优点：
缺点：
◆顶部导航
1.2侧边栏导航
多用于二级导航，将功能分组，默认展开，为节省区域空间，有的侧边栏会提供点击收起左侧栏功能。根据一级标题是否有承载的页面，没有的话通常置灰，点击无交互事件。
优点：导航标题字数放宽，菜单的广度上有所提升（菜单导航数量放宽，局部可以自定义）
◆侧边栏导航
1.3混合式导航
一般用于复杂的多类目的网站结构，鼠标hover一级分类，出现对应的下一级分类。具有代表性的网页比如淘宝、美团等业务或者品类较多的网站。
2.面包屑／Breadcrumb
面包屑一般用于显示当前页面在信息架构中的路径和位置，并提供能够快速跳转其他页面入口。
主要在以下场景中使用：
◆面包屑
3.标签页／Tabs
标签页在网站和后台系统中主要是一个用于并列层级切换的导航组件。
◆标签页
◆美团标签导航
4.分页／Pagination
基本的分页形式仅提供分页，在数据量很大的情况下，还提供跳转和自定义功能。
◆分页
5.步骤条／Steps
步骤条可以算作一种引导用户按照流程完成任务的导航形式，一般用于需要用户完成较为复杂的任务，将一个任务拆开分步完成，减少用户记忆负担，且通过步骤条来显示任务完成进度，为用户提供心理预期。
◆步骤条
6.下拉菜单／Dropdown
下拉菜单是一个将功能菜单或者动作入口聚合并隐藏的导航形式，一般在网页或者系统中将操作聚合，鼠标点击或者hover状态下展开。
◆下拉菜单
◆苏宁易购顶部下拉菜单
03实例应用
天眼系统目前一方面是整合所有的苏宁物流数据，并参与社会数据置换；另一方面涵盖全流程监控、风险预警、产能调节、管理报表，经营及运营指标等职能，实现数据化管理、数据化运营，同时构建内部运营和外部服务的数据管理体系，提高服务透明度，提升服务水平。
天眼系统由于是整合所有的苏宁物流数据，所以总体来说业务板块较多，同时层级也较深，信息架构上横向和纵向都较为复杂。
老版系统在导航设计上，采用的是F型导航的形式，用户需要在横向和纵向上来回切换，容易引发视觉错乱。此外，导航板块占用整个界面太多面积，使得数据看板的界面占比仅有56.3%，这在一般的笔记本界面，很难能够看全整个数据表格。
◆天眼老版系统界面
本次的对于天眼的设计改版，设计目标主要有两方面：
◆天眼改版后系统界面布局
◆天眼改版后系统界面导航
改版设计中，我们将导航菜单归纳整理成一个版块，考虑到使用天眼的多数为业务人员，监测数据都是对应到自己负责的版块，各个版块之间的独立性较强。因此，在进入相应页面后很少会来回的切换页面，所以采用渐进式侧边栏导航形式，同时还可以将其隐藏至左上角菜单导航按钮。
这种导航的设计形式，不仅能够满足后续业务版块的扩展需求，同时导航收起的形式也能够使得数据展示的界面占比高达90%以上，这样用户进入某个版块页面查看对应数据时，能够最大程度的在屏幕上看到整体数据情况，提升数据运营管理的体验和效率。
04总结
对于用户而言，是否好用易用，是否能够快速的找到自己想要浏览的内容和页面，是否能够明白自己从哪里来又去向哪里？对于产品本身而言，是否能够支持业务内容，是否具有后期的可扩展性？
以上诸多问题都是需要在导航设计中着重考虑的，所以分析和总结各种导航形式，思考它们的适用场景，是很有必要的，仅以本文与同行们共同探讨。
参考文献：
作者：王康，苏宁物流研发中心交互设计师
本文由@王康原创发布于人人都是产品经理，未经许可，禁止转载