【转帖】导航菜单设计五步法（一）

回复

前言：

在任意一个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 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时，代表着产品在用户的使用规划中，没有深入思考整个用户体验
【转帖】导航菜单设计五步法（一）

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

【转帖】导航菜单设计五步法（一）

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

同时在交互上，采用悬停+点击结合的形式，用户即可以通过悬停鼠标进行快捷操作。同时又可以通过点击，确定跳转查看该一级导航下的菜单，能够提高用户的操作效率

鼠标悬停还是鼠标点击

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

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

鼠标悬停操作

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

鼠标点击操作

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

二、确定菜单广度和深度

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

菜单广度：导航菜单中每一个层级包含的菜单项数目为广度
菜单深度：导航菜单层级的数目为深度；
深广度平衡帮助用户进行快速选择，通过能够对整个产品架构有着第一眼的认识

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

当菜单广度过大，我们也能够通过设计的方法来优化导航菜单
我举一个比较具有代表性的例子：腾讯云

【转帖】导航菜单设计五步法（一）

腾讯云目前拥有大概100+个云产品，他们都分布在导航菜单上，因此在导航设计上，它采取一种新的模式：1.全部菜单导航+2.搜索菜单+3.自定义导航

在全部菜单中，展示了腾讯云100+个云产品项目，通过搜索进行筛选得到用户想要的菜单。同时在导航栏上，支持用户去自定义5个菜单选项，也因此用户将常用的菜单添加至此，也更方便用户去寻找。这样在满足业务的前提下，通过一些个性的设计，使100+个菜单也能够塞得进整个导航中

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

当面临菜单深度过深时，通常需要从几个方面去考虑：

与产品经理沟通是否到位

这里主要是想通过与产品经理的沟通，了解到菜单的架构设计的原因，以及能否为你的设计进行一次重新的梳理，寻找一些值得优化的点
建议在寻找产品经理之间，自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来，能够先多思考，为下面的沟通节约时间、提高效率

用户体验地图的绘制

在一个B端产品中，用户的目的虽然复杂，但是研究用户每一步操作，还是会查找出一些规律，我们可以从这些规律中，做些文章

比如我们之前在一个医疗系统中，根据角色的不同，将医疗角色分为：前台、咨询师、医生、老板这四种角色，每个角色所关心的点都会有所不同。比如
老板：最关心每个门店目前的的情况数据，比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。
将这些情况分析以后，提炼出核心的需求点

然后绘制完成他们的用户地图后，根据角色，明确每一个角色的日常操作有哪些，从而确定我们所有菜单所展示的位置以及整个菜单的层级关系

【转帖】导航菜单设计五步法（一）

嗨，狗子 · 发表于 2021-3-29 18:11:05

[分享] 【转帖】导航菜单设计五步法（一）

【转帖】导航菜单设计五步法（一）

相关帖子