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

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

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

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

共享内容：

一、合适规划

二、确认菜单广度和深度

三、菜单层级有区分

四、导航可配置

五、四种常见导航菜单

一合适规划

1.1服从 7±2 原则

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

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

在生活中人类总是会把一长串的数字分成 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+个菜单，同一时间算是金蝶的王牌业务，因此对于此类业务，大概着重去知道，也因此，对于每一个模块，都是通过大标题+小标题的形式进行设计，使玩家在使用时能够明确知道自己想要什么

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