B端设计：导航菜单的设计5步法
副标题[/!--empirenews.page--]
在任意一个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)之间，还是存在很大差距。 这里想要说明这两个操作本身而言，并没有对与错，但是适用场景的不同，导致在设计属性上存在着较大差异。 （1）鼠标悬停操作 鼠标在悬停时触发的操作时间太短暂，会给用户带来很强烈的挫败感，同时在悬停选择下一级菜单时，鼠标移动悬停也同要会造成这样的结果。因此在设计时，对鼠标悬停时的操作要格外留意。通常在悬停操作当中，只适用于只有一个菜单层级的菜单选项，这样用户在操作时更加方便。 （2）鼠标点击操作 鼠标点击操作多发生于多级导航进行操作，同时鼠标点击的形式，会给用户正向的反馈，用户点击后明确知道菜单栏不会隐藏，因此在两个操作之间进行选择操作时一定要多加思考. 二、确定菜单广度和深度导航菜单广度和深度的区别：
深广度平衡帮助用户进行快速选择，通过能够对整个产品架构有着第一眼的认识。 2.1 当菜单广度过大时，怎么办？当菜单广度过大，我们也能够通过设计的方法来优化导航菜单 我举一个比较具有代表性的例子：腾讯云。
腾讯云目前拥有大概100+个云产品，他们都分布在导航菜单上，因此在导航设计上，它采取一种新的模式：1.全部菜单导航+2.搜索菜单+3.自定义导航。 在全部菜单中，展示了腾讯云100+个云产品项目，通过搜索进行筛选得到用户想要的菜单。同时在导航栏上，支持用户去自定义5个菜单选项。也因此用户将常用的菜单添加至此，也更方便用户去寻找。 这样在满足业务的前提下，通过一些个性的设计，使100+个菜单也能够塞得进整个导航中。 2.2 菜单深度过深时，怎么办？当面临菜单深度过深时，通常需要从几个方面去考虑： （1）与产品经理沟通是否到位 这里主要是想通过与产品经理的沟通，了解到菜单的架构设计的原因，以及能否为你的设计进行一次重新的梳理，寻找一些值得优化的点。 建议在寻找产品经理之间，自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来，能够先多思考，为下面的沟通节约时间、提高效率。 （2）用户体验地图的绘制 在一个B端产品中，用户的目的虽然复杂，但是研究用户每一步操作，还是会查找出一些规律，我们可以从这些规律中，做些文章. 比如我们之前在一个医疗系统中，根据角色的不同，将医疗角色分为：前台、咨询师、医生、老板这四种角色，每个角色所关心的点都会有所不同。 比如： 老板：最关心每个门店目前的的情况数据，比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。 将这些情况分析以后，提炼出核心的需求点。 然后绘制完成他们的用户地图后，根据角色，明确每一个角色的日常操作有哪些，从而确定我们所有菜单所展示的位置以及整个菜单的层级关系。
三、菜单层级有区分我将常见的导航区分进行总结，分为以下三种形式： 3.1 颜色区分颜色区分作为最直接最有效的一种形式，这种形式也是后台页面最初的状态，我通常会用颜色区分和移动端顶部状态栏的演变史做对比，就其功能而言他们都有很多相似的点： 微信在2018年12月份时，发布微信7.0，将顶部导航由黑色转变为白色，引得大家争论不休，而经过时间不断洗礼，大家也逐渐接受这个了事情，渐渐忘去。
2019年也有类似的事情发生，有几个产品的WEB端进行了一系列的大改，YouTube、Twitch、Twitter都进行了重新设计，他们也不约而同的将块面去除，去掉多余的的灰色，通过留白和空间将页面拉开。
这否是是下一个WEB端所要追寻的趋势，我还不得而知～ 如果WEB端都有此改变，那么B端产品还会远吗？ 说回B端设计，颜色上的区分和移动端类似，更多体现在导航层和内容层之间的区别，因为从本质上讲，这两个本身就属于不同的业务模块，通过颜色的区分，是最为直接，最简单的一种方式。 这种形式常见于很多复杂系统，例如：飞书。 小唠一句：飞书的文档功能以及协同工作比钉钉好用太多，如果大家现在还在寻找协同软件，可以试试飞书～
左侧导航为深，能够让用户更沉浸的体验，因为屏幕边缘都为深色，用户在使用时能够真正做到有区分。 3.2 投影区分在现如今的移动端产品，投影大行其道，弥散投影，高级投影随处可见，也逐渐影响更多WEB端的产品使用投影。增加自身产品Z轴空间。 Z轴空间给导航带来了的纵深感，同时能够在功能层级上，通过分层设计，使页面层级关系十分明确，引导用户使用导航。 （编辑：PHP编程网 - 襄阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
