导航菜单设计B端设计指南（导航菜单设计方法）

导航菜单对于玩家 的使用来说尤为严重 ，本文是我是做 实 事情 出发，混合 本身 业务 和过去经验对于导航进行的一次全面总结

前言在任意一个B端后台系统中，导航菜单都是不可或缺的一部分，每一个 导航菜单都有其固定 位置 ，一般 这个 位置 是不可撼动的。所以说：导航菜单是B端业务 层级严重 的交互控件

对于B端业务 的玩家 而言，他们使用导航菜单目的性非常强 到后台一般是 对仔细 功能进行操作，导航菜单在功能的引导中发挥了巨大作用。因此，其主要的功能就是对B端业务 进行分发、引导；帮助玩家 在杂乱 的后台管理者用户页面 中，找到 出自己真正想要的功能

共享 内容：

一、合适 规划

二、确认 菜单广度和深度

三、菜单层级有区分

四、导航可配置

五、四种常见导航菜单

一合适 规划

1.1服从 7±2 原则

导航菜单反馈 最多不要超过 9 个，最少不要低于5个

原则解答 ：1956 年乔治米勒对短时记忆力量 进行了定量集中 ，他发现人类 头脑最好的情况 能记忆含有 7（±2）项信息 块，在记忆了 5-9 项信息 后人类 的头a型血和b型血生的孩子是什么血型脑就开始出错。

在生活中人类 总是 会把一长串的数字分成 7 个差不多 的数组来记忆，这样会使难度跌破 很多，米勒称这个 单位为“组块”

是不是通过分组记忆之后 ，自己能记住的再多 ？这其实就是 7±2 原则的分组

通过上面7+-2原则描述人类 明确到：在导航菜单当中，超过 9 个会给玩家 查找时弄来 困难，低于 5 个说明导航菜单的分发效率不够高效

有人会说，在事实 业务中，不会有那么理想，如果需要超过 9 个时，大概 怎么办？

超过9个时，一定要对菜单进行分组，因为导航过多，玩家 找到 会十分迷茫，通过分组的方法 ，能够对菜单进行再一次 分类，提升 查找效率

说的太干不如举个栗子：

比如 在微盟、有赞、小鹅通的导航设计当中，微盟、小鹅通有很大不足，人类 来一一拆解

小鹅通：共有14个导航菜单， 且菜单之间形式不一样 ，表现也会有所差异， 也因此对于玩家 而言使用起来会发生 非常强 的疑惑感

微盟：总共 有11个一级菜单，不符合7+-2原则，同一时间 也能够感受到在视觉层面上，微盟的导航菜单没有分组，非常难 找到 和记忆

有赞：即便 在导航的数量上也是有9个以上，但是它对菜单进行分组，有效提升 了玩家 查找时的效率，因此在设计上更加合适

如果菜单栏数量过多怎么办？下方2.1小节会有讲到～

1.2 导航菜单不可以 掩藏 超过两级

导航菜单掩藏 超过两级时，代表着业务 在玩家 的使用规划中，没有深入思考整个玩家 体验

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

比如 有赞就是一个典型举例 ，在有赞零售的导航菜单中其实是有三个层级，但是通过交互层面的优化，将二、三级菜单直接展示出去 ，形成一个全体 ，提升 了玩家 体验避免玩家 层层找到

同一时间花月痕 在交互上，选用 悬停+点一下 混合 的形式，玩家 就可以 以通过悬停鼠标进行方便 操作。同一时间 又可以通过点一下 ，确认 跳转查就这样看 该一级导航下的菜单，能够提升 玩家 的操作效率

1.3 鼠标悬停还是湖北医药学院药护学院鼠标点一下

作为导航来说，其操作本身并不多，但是设计上，点一下 与悬停(hover)之间，还是存在很大距离

这里想要说明这两个操作本身而言，并没有对与错，但是适合用 场景的不一样 ，导致在设计属性上存在着较大差异

鼠标悬停操作

鼠标在悬停时触发的操作时光 太短暂，会给玩家 弄来 很激烈 的挫败感，同一时间 在悬停选择下一级菜单时，鼠标移动悬停也同要会造成这样的结果，因此在设计时，对鼠标悬停时的操作要格外留意。一般 在悬停操作当中，只适合用 来 只有一个菜单层级的菜单选项，这样玩家 在操作时更加方便

鼠标点一下 操作

鼠标点一下 操作多发生于多级导航进行操作，同一时间 鼠标点一下 的形式，会给玩家 正向的反馈 ，玩家 点一下 后明确知道 菜单栏不会掩藏 ，因此在两个操作之间进行选择操作时一定要多加思考

二确认 菜单广度和深度

导航菜单广度和深度的区别

菜单广度：导航菜单中每一个层级包含的菜单项数目为广度

菜单深度：导航菜单层级的数目为深度深广度均衡 帮助玩家 进行迅速 选择，通过能够对整个业务 架构具有 第一眼的知道

2.1当菜单广度过大时，怎么办？

当菜单广度过大，人类 也能够通过设计的途径 来优化导航菜单

我举一个比较具有 代表性的举例 ：腾讯云

腾讯云目前坐拥 大约那么 100+个云业务 ，他们都分布在导航菜单上，因此在导航设计上，它采取一种新的模式：1.全部菜单导航+2.查询搜查 菜单+3.自己定义设置 导航

在全部菜单中，展示了腾讯云100+个云业务 项目，通过查询搜查 进行筛选获得 玩家 想要的菜单。同一时间 在导航目录栏 上，接受 玩家 去自己定义设置 5个菜单选项，也因此玩家 将常用的菜单添加至此，也更方便玩家 去找到 。这样在满足业务的前提下，通过有些 特别 的设计，使100+个菜单也能够塞得进整个导航中

2.2菜单深度过深时，怎么办？

当受到 菜单深度过深时，一般 需要从几个方面去思考 ：

与业务 经理沟通交流 是否到位这里一般是 想通过与业务 经理的沟通交流 ，知道 到菜单的架构设计的原因，以及能否为你的设计进行一次从头开始 的梳理，找到 有些 值得优化的点

反馈 在找到 业务 经理之间，自己能够通过有些 思维导图的应用 将自己业务 的菜单目录全部罗列出去 ，能够先多思考，为下面的沟通交流 节约时光 、提升 效率

玩家 体验地图的绘制在一个B端业务 中，玩家 的目的即便 杂乱 ，但是集中 玩家 每一步操作，还是会查找出有些 规律，人类 可以从这些规律中，做些文章

比如 人类 之前 在一个医疗系统中，根据角色的不一样 ，将医疗角色分为：前台、询问 师、医生、商家 这四种角色，每一个 角色所在意 的点都会有所不一样 。比如

商家 ：最在意 每一个 门店目前的的情况 资料 ，比如 门店营业额、门店待客数、每一个 医生的疗伤 量以及疗伤 最少的医生。这些都代表着他不一样 场景下使用的习惯。

将这些情况 解析 之后 ，提炼出核心的要求 点。

之后跟着 绘制完成他们的玩家 地图后，根据角色，明确每一个角色的日常操作有哪些，从而确认 人类 任何 菜单所展示的位置 以及整个菜单的层级关系

三菜单层级有区分

我将常见的导航区分进行总结，分为以下三种形式：

3.1颜色区分

颜色区分作为最直接最有效的一种形式，这个 形式也是后台管理者用户页面 最开始 的情况 ，我一般 会用颜色区分和移动wap端 顶部情况 栏的演变史做比较 ，就其功能而言他们都有很多差不多 的点：

微信在2018年12月份时，发布微信7.0，将顶部导航由黑色转变为白色，引得各位 争论不休，而经过 时光 不停 洗礼，各位 也逐渐接受 这个 了事情 ，渐渐忘去

2019年也有类似的事情 发生，有几个业务 的WEB端进行了一系列的大改，YouTube、Twitch、Twitter都进行了从头开始 设计，他们也不约而同的将块面去除，去掉多余的的灰色，通过留白和空间将页面拉开

这是否是下一个WEB端所要追寻的趋势，我还不得而知～

如果WEB端都有此变化 ，那么B端业务 还会远吗？

说回B端设计，颜色上的区分和移动wap端 类似，再多 体现在导航层和内容层之间的区别，因为从本质上讲，这两个本身就属于不一样 的业务模块，通过颜色的区分，是最为直接，最简单的一种方法 。

这个 形式常见于很多杂乱 系统，比如 ：飞书

小唠一句：飞书的文档功能以及协同事情 比钉钉好用太多，如果各位 现在还在找到 协同应用 ，可以试试飞书～

左侧导航为深，能够让玩家 更沉浸的体验，因为屏幕边缘都为深色，玩家 在使用时能够真正做到有区分

3.2 投影区分

在现如今的移动wap端 业务 ，投影大行其道，弥散投影，超级 投影随处可见，也逐渐波及 再多 WEB端的业务 使用投影。增加本身 邹越让世界充满爱业务 Z轴空间

Z轴空间给导航弄来 了的纵深感，同一时间 能够在功能层级上，通过分层设计，使页面层级关系十分明确，引导玩家 使用导航。

Material Design设计的出现，正是Z轴空间的鼻祖，在人类 的屏幕中开辟了第三个设计纬度，在Z轴上展示增加了再多 的交互形式。在几何体系中，Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴，人类 通过引入 Z 轴在交互设计中呈现三维的物理空间感，使页面内容能够获得 有效区分

比如 Teambiton在页面中使用 投影，强化了页面层级的关系

3.3 分割线区分

分割线针对导航功能性不高，同一时间 要满足较高 设计感的业务

分割线太深，页面十分割裂，分割线太浅，页面划分又不明确，因此需要设计师对分割线的把控十分合适

分割线在Dribbble上见到过很多，通过简单的线条加上空间的分割，将导航区与内容区分开，形成很好 的视觉感受。如果你是刚开始尝试做导航，不太反馈 尝试这个 形式，因为对于页面空间的把控要十分苛刻

四导航可配置

B端业务 易操作性中，导航可配置操作算得上是一个严重 的点。其中 最一般是 通过配置操作实现导航易用性的提升 而怎么样 让菜单可配置，一般 的做法有两种。

4.1 我的菜单

如果你的业务 是针对多数角色不一样 的玩家 进行设计，那么在导航设计时，可以思考 增加一个菜单选项：我的菜单，对于菜单进行标签处理

设置一个我的菜单，将玩家 常用的菜单进行添加，能够满足每一位玩家 的菜单迅速 选择的要求 ，通过这样的自己定义设置 ，玩家 在常用的菜单下，能够通过我的菜单进行迅速 跳转

举个栗子：

在印象笔记当中，其方便 方法 就是可以将玩家 想要的模块放置在此，可以迅速 跳转

4.2 角色配置

如果你的业务 是为固定 几类角色进行服务，那么在导航设计时，可以思考 根据玩家 角色的不一样 ，给玩家 不一样 的导航展示

通过角色的筛选，使用对于杂乱 导航进行简化，同一时间 管理员可以根据本身 公司 的业务不一样 ，给玩家 配置出不一样 的角色权限予以满足玩家 的导航要求 ，这样在设计层面上能够减少很多不一定 的麻烦～

五四种常见导航菜单

5.1 侧边导航

侧边导航在中国 的 B 端业务 当中最为常见的

将菜单栏放置在左侧，页面布局上基本 为差不多 结构，将导航菜单放置左侧固定

因为侧边导航在中国 业务 中最为常见，因此把他是第一时间 提出去 讲，中国 厂商对于侧边栏导航的尤为偏爱，在无数人 心目中，感觉就只有侧边导航和很多 导航两种导航形式，也就造成了在 B 端业务 的提升 也逐渐趋同。不过现阶段各位 对于 B 端业务 的重视，在设计上也开始多元化，话不多说，人类 先来就这样看 就这样看 侧边导航的优点有哪些~

优点：

扩展性较强：多级导航可以流畅展示，可以涵盖很多大而全的业务

展示灵巧 ：侧边导 航可收折，收折过后玩家 的横向核心空间将会增大大，页面展示效率也会大大提升

迅速 定位：视觉启始线统一，玩家 可以根据首字进行查找，方便查找

缺点：

不易浏览 ：侧边导航文字垂直排列，有悖于眼动的正常视觉方向

浏览 沉浸感低：侧边导航容易打断玩家 的正常浏览 顺序，使浏览 感跌破

线上业务 ：

人类 拿有赞零售进行举例，他就是一个典型举例 。

菜单栏+功能菜单共有 15 个，之后跟着 通过导航的间隔将菜单进行分组，最多一个导航菜单共 9 个，满足7+-2原则

同一时间 可以就这样看 到，有赞在使用三级导航时，通过右边 面积统一展示二、三级导航，方便了玩家 导航展示的同一时间 优化了玩家 的使用体验

为什么中国 B端业务 一般情况 是侧边导航？

我在我的设计剪贴板中有回应 过这一个问题，就直接共享 给各位 ～

5.2 顶部导航

顶部导航在国外的业务 当中，算是较为常见的。

将菜单栏放置在顶部，页面布局上基本 为上下结构，将导航菜单放置上方固定

顶部导航早年 出现于各类门户网址 ：比如 企业官方网站 ，各种询问 类的网址 总是 会采取这样的导航形式。说回B端业务 中，顶部导航一般 在B端业务 中也是十分常见的，其中 以国外业务 最为集中 ，比如 国外CRM三剑客：salesforces、hubspot、zoho都是采取的顶部导航的形式。

优点：

满足浏览 习惯：导航为水平布局，浏览 方法 更贴近眼动的正常浏览 顺序

沉浸感强：顶部导航一般 不会打断玩家 的浏览 行为，对玩家 的干涉 少

设备波及 小：导航顶部，全体 页面稳固 ，页面对于玩家 展现 器分辨率波及 较小

缺点：

都可以用 性差：同一时间 受导航目录栏 标题文字限制 ，对于每一个菜单的字数限制 严格

横向 Tab 数量少：承载不了太多菜单数量，超过 7 个后菜单排布会十分困难，横向空间使用 率差

扩展性差：水平导航最好不要超过二级菜单，超过二级菜单，玩家 使用成本价 高

线上业务 ：

salesforce

销售 CRM 传奇人物，千亿美金 估值，每年营收百亿美金 ，无疑是 B 端业务 当中的一个标杆。

如果你是做 CRM，或者是 B 端业务 ，必就这样看 的一个竞品。

salesforce采取的就是一个顶部导航，只是不一样 的是，salesforce 的顶部导航再多 是将页头的功能进行合并叠加，即便 salesforce 的交互方法 不算优秀 ，但是因为其业务线不停 超大 ，这样才能支撑其整条业务线。就因为这样的问题，需要设计师在设计时，要思考 到整个系统的一个扩展性问题。做 B 端业务 的交互设计有那么一丢丢 类似我对面后端朋友 编辑 代码，人类 现在设计的这个 交互最少要满足未来一到两年公司 的已规划好的业务 的扩展问题。

hubspot

Hubspot 采取就是顶部菜单，同一时间 二级菜单下拉展示，同一时间 Hubspot 是根据 角色去划分顶部菜单，能够给玩家 减少 认知负担，更加好的 被玩家 所使用。同一时间 在有些 设计小细节上，比如 顶部的主题色，既可以提升 品牌感，同一时间 在是适当时可以作为进度进行一个展示，使玩家 能够更加深入的感知到其设计

5.3 混合导航

在 B 端业务 中，感觉混合导航就是一个后期之秀

它在页面布局为顶部和侧边，简单来讲，就是将顶部导航与侧边导航进行混合 。一般 将一级导航菜单放置顶部，通过一级菜单的点一下 后，展示侧边的二、三级菜单。在有些 业务 坐拥 杂乱 的逻辑关系，菜单之间关系分明的业务 中，混合导航也越来越被大众所接受 。在很白百合花多杂乱 的系统当中，混合导航真的是很不错的一个选择，人类 来就这样看 就这样看 他的优点和缺点 ：

优点：

承载大型业务：在导航上，他能够展示 3 级甚至 4 级菜单，对于很多大型 B 端项目，混合导航算是更加合适 的选择

扩展性强：对之后 有规划大量 功能的业务 ，用混合导航，能使之后菜单扩展性更强

缺点：

占用面积大：要更换 多个菜单，所以顶部和左侧会占用大量 的空间

菜单交互路径长：一、二级菜单间来回交互成本价 高，操作繁琐

线上业务 ：

各类云业务

云业务 其实就是一个很好 的举例 ，比如 阿里云，他们因为本身 业务 线众多，对于导航的设计也是以杂乱 著称，多数情况 下，面对这个 杂乱 的导航时都会采取混合导航。他们能够通过混合导航，使玩家 对于导航每一个功能模块有一个深刻的知道 。

金蝶

金蝶-星空定位就以 Paas 进行专门定做 销售，解析 过他的业务 你就知道 到，他总共 有 100+个菜单，同一时间 算是金蝶的王牌业务 ，因此对于此类业务 ，大概 着重去知道 ，也因此，对于每一个模块，都是通过大标题+小标题的形式进行设计，使玩家 在使用时能够明确知道 自己想要什么

现在各大杂乱 的业务 都会采取混合导航，这样对于业务 的架构以及各类菜单层级的解析 也会起到蛮大的 帮助～

5.4 平台类导航的新趋势：

平台类导航是人类 团队内部自己的取名，给他的定义一般 是坐拥 很多模块比如 Teambition、明道云、坐拥 很多个模块，通过一个统一的平台进行内容的分发，比如 移动wap端 的钉钉、企业微信、纷享销客都选用 一样 的方法 ，但在WEB端当中，平台导航一般 伴随着很多 导航同一时间 出现，

比如 最近很火明道云、就是使用了在人类 就这样看 来的平台导航，他们将自己的业务 分别陈列在页面的核心地区 ，通过对于事情 台的设计，形成对于页面的展示，同一时间 形成一个平台类的导航，于此相对应的还有钉钉后台管理页面以及企业微信后台管理页面，他们都是通过一个个平台类的模块对导航进行分发的～