B端导航栏设计思路

导语

导航作为网站或者平台的骨架，决定了用户在进入页面的第一时间对整个页面的初印象和认知，而且B端产品通常功能性较强，所以导航设计关乎着整个网站或者系统最基础的用户体验。

最近工作中有接触到导航栏的调整设计，所以在网络查询学习了一些关于导航设计的知识，这里将我的读书笔记整理分享给大家。

认识导航

我们先来圈定一下导航的范围，我们研究的是B端的导航设计，那到底什么是导航？

朋友约我们到一个陌生的大型商场吃饭，当我们到商场后，一般情况，我们都会通过商场楼层索引找到餐厅所在楼层和区域。如果索引指示清晰的话，我们就能快速找到约定的地点。

我们习以为常的大型商超、写字楼宇、十字路口，或是地铁出入口、公交站台，都充斥着各式各样的路标、导览、路线示意图。它们通过清晰简洁的指示，快速告诉我们，这里有什么、我可以做什么、我在什么位置？

1. 导航的定义

导航是一种对信息的分类，帮助用户找到想要的信息，完成预期的任务。大白话讲就是，告诉用户从哪里来？用户在哪里？用户可以去哪儿？

导航栏设计的难点在于：我们需要在有限的屏幕空间，选择合理的导航形式，表达业务内容。

2. 导航的作用

导航的作用，这里就不赘述。它能够告诉用户这里有些什么？如何使用网站/系统？确定用户的位置？

导航的设计形式

从设计形式讲，导航设计一般可以分为六种形式，分别为：导航菜单、面包屑、标签页、分页、步骤条、下拉菜单。

1. 导航菜单

通常讲，导航菜单有以下三类：顶部导航、侧边导航、混合导航。

• 顶部导航

最常见的导航形式，一般包含logo、菜单、个人中心三个部分。鼠标悬停hover出现二级或者更多级菜单。

整体页面为上下结构：顶部是导航，下面是主体内容区域，有的系统尾部带有版权信息。

优点：更沉浸、符合视觉动线

1、人的浏览习惯是自上而下，从左到右的，水平方式符合人眼浏览网页的视觉动线；

2、无左侧垂直导航干扰，给用户提供更沉浸式的浏览体验。

缺点：拓展性、通用性差

1、受浏览器宽度限制，顶部空间有限，无法承载太多的菜单项。栏目命名中文字数2~5个，栏目数目不超过7个比较合适

2、同样受空间的限制，菜单项字数被严格限制。如果是有中英文切换功能的话，英文栏目长度很可能比中文的长，而屏幕宽度有限，容易出现内容密集或排不下的情况。

适用产品：适用于整体结构较简单，不会扩展很多功能，追求沉浸式，轻操作的系统。多见于公司官网。

• 侧边导航

流行的后台导航方式，多用于二级导航。

优点：拓展性好、方便查找

1、侧边导航是以树形控件的方式来表示的，相对于顶部导航，无论是数量和层级，扩展性均较好；

2、方便寻找：由于纵向浏览无需把每个单个菜单完整浏览，相对水平菜单，定位更快；

3、左侧导航可处理成可收缩样式，可扩大页面宽度。

缺点：沉浸感低

由于用户在浏览内容的过程中，不可避免会被左侧常驻的导航栏打断视线流，阅读沉浸感较低。

适用产品：适用于功能较为专注的、又有一定复杂度的后台。如团购后台、知识库等。

下面是微信公众平台的导航设计，采用的是扩展形式3，其导航中有一个“添加功能插件”的自定义版块，可以对二级菜单进行自定义扩展。

• 混合导航

顾名思义，既有顶部又有侧边的导航菜单。一般用于复杂的多类目的网站结构。

优点：扩展性好

由于增加了一个顶部的一级菜单，层级与栏目扩展性强，最深可支持4级结构。

缺点：

1、交互路径长：除了和侧边导航一样存在沉浸感低的问题，由于每个菜单项都需要点击顶部和侧边两次，操作效率低；

2、占用空间大：在B端产品中，界面空间寸土寸金，混合导航常驻的两个导航占用了较多的空间。

适用产品：适合功能模块较多、复杂度较大的后台。

2. 其他导航形式

• 面包屑：一般用于显示当前页面在信息架构中的路径和位置，并提供能够快速灵活跳转其他页面的入口。

• 标签页：用于并列层级切换的导航组件。用于某个模块二级并列内容的视图切换。

• 分页：用于列表、feed流分步加载的组件。信息量过大，加载时间过长，同时方便切换已加载部分，从而采用分页形式。 

• 步骤条：引导用户按照流程完成任务的导航形式。一般用于需要用户完成较为复杂的任务，将一个任务拆开分步完成，减少用户记忆负担，且通过步骤条来显示任务完成进度，为用户提供心理预期。

• 下拉菜单：功能菜单或者动作入口聚合/隐藏的导航形式，一般在网页或者系统中将操作聚合，通过鼠标点击或者悬停展开/收起。

导航的设计原则

1. 保持导航结构的连贯性和一致性

这里的连贯性主要表现在，通过某些设计形式让用户清楚的知道每个菜单中是否有子层级，不要出现如果不展示或者设计不够明显，导致用户误认为没有更多内容的导航菜单。

阿里云的侧边栏逐层渐进的导航形式，能够支撑庞大的业务内容，清晰明了的层级结构和一致的交互操作，带给用户良好的导航体验。

2. 设计清晰易懂的交互方式

• 交互的可视化：用户通过导航菜单中的箭头方向的切换来预知操作的结果，既是一种功能的可视化引导，也是一种操作反馈。

• 视觉的差异化：通过视觉，将不同的入口进行差异化设计，比如美团网把那些功能性图标和信息类图标做视觉上的差异化。

3. 设计扁平的导航结构

• 7±2原则

导航菜单建议最多不要超过 9 个，最少不要低于5个。

原则解释：1956 年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有 7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆，这样会使难度降低很多，米勒称这种单位为“组块”。

• 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时，代表着产品在用户的使用规划中，没有深入思考整个用户体验。

导航菜单层级越多，用户体验就会越差，你会发现一些拥有三级导航的菜单，都会通过设计优化来实现隐藏导航的合并，从而减少用户操作负担。

有赞零售的导航菜单中其实是有三个层级，但是通过交互层面的优化，将二、三级菜单直接展示出来，形成一个整体，提升了用户体验避免用户层层寻找。

• 综合考虑信息分类的广度与深度

导航结构的层级数量最终是由网站的信息层级决定的，理想状态下，用户需要点击的导航层级越少，那么用户到达他们的目标页面也就越快越清晰，信息层级越深，则用户越容易被误导。

网站导航的目标是为了让用户快速找到自己所需的内容，不能一味的追求扁平的导航结构，使得整个网站的信息分类混乱。所以，要根据情况综合考虑信息分类的广度与深度，对于信息的分类。

导航的设计落地

导航栏设计，必然要满足 “导航” 这个核心目标。组件的样式、交互必须为功能服务。重点放在，给出合理的信息展示和交互方法。

通常情况下，导航是反映项目功能模块的入口，产品中包含多少模块、子模块，就会有序的布置到导航里面。那么问题来了，项目到底包含了多少模块和子模块？哪些是要放进导航里的？

我们可以借助“功能结构地图”，解释了不同功能层级的结构和从属关系，以及项目中总共包含了哪些页面。

总结

对于用户而言，是否好用易用？是否能够快速的找到自己想要浏览的内容和页面，是否能够明白自己从哪里来又去向哪里？对于产品本身而言，是否能够支持业务内容，是否具有后期的可扩展性？

以上诸多问题都是需要在导航设计中着重考虑的，所以分析和总结各种导航形式，思考它们的适用场景，是很有必要的。