大厂干货！5个章节全方位解析B端导航设计

导航菜单对于用户的使用来说尤为重要，本文是我从实际工作出发，结合自身产品和过去经验对于 B 端产品导航进行的一次全面总结。

前言

在 B 端后台系统中，导航菜单是至关重要的交互元素，每个菜单项通常都固定在特定位置，难以更改。对于用户而言，导航菜单的使用目的明确，可以帮助用户快速找到并执行特定功能。因此，导航的核心作用在于分发和引导功能，帮助用户在复杂的后台界面中高效定位并进行操作。

一、认识导航

在现实生活中，我们经常依赖不同形式的“导航”来寻找目标物品。

1. 图书馆的书架分类：通过清晰的书架标签和分类指引，让我们快速找到所需的书籍。
2. 商场的洗手间指示牌：明确的指引帮助顾客迅速找到洗手间，避免迷路或浪费时间。
3. 医院的科室牌：通过科室导向标识，患者可以高效地找到对应的诊疗科室。

这些现实中的导航方式和 B 端设计中的导航原理相似，都是通过简洁明确的指引帮助用户快速、准确地达到目标。

数字屏幕环境中，用户对于导航的需求同样显著，因此，可以将导航界定为“承担页面信息引导功能的组件”，统称之为导航组件。

1. 导航的作用及角色究竟是什么？

导航的核心功能在于对产品的各项功能进行有序分发与引导，确保用户能够高效且准确地穿梭于各个模块之间。为实现这一作用，我们需要深入考虑“用户来源何处？欲往何方？当前身处何地？”这三个关键问题，并将其与具体的组件设计相结合，从而详细阐述这些组件在导航体系中所发挥的作用。

① 目前在哪？

在 B 端导航中，明确当前位置至关重要。由于系统中常涉及页面跳转和关联，标明当前位置能帮助用户清楚了解自己的位置，便于操作。常见的组件包括页头、分页、步骤条、锚点和导航菜单。

对于复杂系统，页头设计尤为重要，它能帮助用户快速理解当前系统位置，避免迷失方向。像阿里云和腾讯云等云产品，因业务广泛，页头的使用频率很高，以确保用户能清楚知道自己所在的位置

② 去向哪？

在导航设计中，页面流向需要清晰指示。常用的组件如锚点、分页、下拉菜单和导航菜单，帮助用户了解页面的流向，确保导航功能的有效分发。

二、四种常见导航

三、导航设计原则

1. 遵循 7±2 原则

导航菜单的设计应遵循“7±2 原则”，即建议最多不超过 9 个选项，最少不低于 5 个选项。

这一原则源自 1956 年乔治·米勒对短时记忆能力的定量研究发现：人类头脑在最佳状态下能记忆的信息块数量为 7 个左右，浮动范围为±2。当记忆的信息项超过 5-9 项时，人类的记忆力开始下降，容易出错。

在实际生活中，我们常将一长串数字分成大约 7 个一组来记忆，以降低记忆难度。米勒将这种分组记忆的单位称为“组块”。因此，在设计导航菜单时，合理控制选项数量，遵循“7±2 原则”，有助于提升用户体验和记忆效率。

根据 7±2 原则，导航菜单的选项数量应控制在 9 个以内，以免增加用户查找难度；若少于 5 个，则可能效率不高。当选项超过 9 个时，分组尤为关键。

通过对菜单进行分类，可以简化查找过程，提高效率，从而提升用户体验。

说的太干，我们看看实际案例

① 小鹅通

小鹅通的导航包含 14 个菜单，并且各菜单之间的形式和表现方式存在较大差异，这导致用户在使用时容易产生混乱和困惑。导航设计的统一性和一致性缺乏，影响了用户的导航体验。

② 微盟

微盟有 11 个一级菜单，这明显超出了“7±2”的设计原则，即一个用户在短时间内能够有效处理的信息量。超出这一数量会增加用户的认知负担。此外，微盟的导航菜单缺乏有效分组，导致视觉上没有明显的层次感，使得用户难以快速找到所需功能，影响了信息的查找和记忆。

③ 有赞

有赞的导航菜单数量虽然也超过 9 个，但它采用了合理的分组设计，将相似的功能进行归类，从而有效提升了用户查找信息的效率。通过分组，用户能够更快速地定位所需功能，整体设计相对更符合用户需求和体验。

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

当导航菜单超过两级层级时，通常表明产品在用户体验设计上缺乏深入思考。

导航菜单的层级越多，用户体验通常会受到影响。对于那些具有三级导航的菜单，往往会通过设计优化将部分导航合并或隐藏，以简化用户操作，减轻他们的认知负担，从而提升整体体验。

举个例子

① 有赞-商品管理

在有赞零售的导航菜单中，虽然有三个层级，但通过交互优化，二级和三级菜单被直接展示，形成了一个统一的视图。这种设计有效减少了用户的层层寻找，提高了操作效率。

3. 鼠标悬停还是鼠标点击

在导航设计中，点击与悬停（hover）操作看似简单，但它们的适用场景和设计属性差异却很大。虽然这两种操作方式本身并没有绝对的对与错，但不同的场景需要不同的设计策略。

① 鼠标悬停操作

鼠标悬停触发的操作通常持续时间较短，这可能会让用户感到操作不够稳定，容易产生挫败感。尤其在选择下一级菜单时，鼠标的移动也可能导致菜单消失或不响应，进一步加剧用户的不适。因此，设计时需要特别注意悬停操作的流畅性和时长。

适用场景： 悬停操作通常适合用于只有一级菜单的场景，能够快速显示子菜单，不会让用户感到迷失或困扰。

② 鼠标点击操作

鼠标点击操作多用于多级导航。点击后，用户能够获得明确的反馈，知道菜单不会因为鼠标移开而突然消失。这种形式更加稳定，适用于需要多层级导航的场景。点击操作提供了更清晰的互动路径，能够有效减少操作上的不确定性。

适用场景： 点击操作适合用于复杂的导航结构，尤其是多级菜单，需要明确的指示和反馈来确保用户操作顺畅。

总结

在选择悬停还是点击操作时，设计师应根据具体的导航层级和用户需求进行思考。
悬停操作适合简单、直观的菜单，而点击操作则更适合复杂的、多层级的菜单结构。两者之间的选择和设计差异，直接影响用户体验的流畅度和直观性。

四、导航层级

1. 颜色区分

颜色区分作为一种直接且有效的视觉表达方式，广泛应用于后台页面中，帮助用户快速识别不同状态和功能。

举个例子

① 微信颜色变革

微信在 2018 年 12 月发布的 7.0 版本中，将顶部导航栏的颜色从黑色改为白色，引起了用户的广泛讨论和争议。然而，随着时间的推移，用户逐渐适应了这一改变，甚至开始忘记了最初的争议。这一过程反映了颜色变化在设计中的重要性，也体现了用户对于设计演变的逐步接受和适应。

这一变化说明，设计中的颜色变动虽然可能在初期引发不适，但在时间的推移和用户习惯的培养下，最终能够被接受并成为常态。因此，颜色作为区分和表达状态的工具，其影响力和接受度在不同阶段是不断变化的。

② 网页颜色变革

2019 年，YouTube、Twitch、Twitter 等平台的 WEB 端进行了大规模改版，普遍去除了多余的块面和灰色背景，通过增加留白和空间，简化页面布局。这种设计趋势强调简洁性，减少视觉负担，使页面更加清晰、舒适，提升了用户体验。

总结

如果 WEB 端开始趋向简洁，那么 B 端产品的设计也很可能会朝这个方向发展。
在 B 端设计中，颜色的区分常用于导航层和内容层之间，以明确区分不同的业务模块。这种方式简洁直观，尤其适用于复杂系统

举个例子

① 飞书

左侧导航深色，能够让用户更加沉浸式体验，因为屏幕边缘为深色，用户在适应能够做到区分

2. 投影区分

移动端投影效果的广泛应用正影响 WEB 端设计，特别是在导航中，Z 轴空间的运用通过弥散投影和分层设计提升页面层次感，使功能层级更清晰，有助于用户快速理解导航结构，提升易用性和体验。

举个例子

在交互设计中，Z 轴的作用尤为关键。它通过分隔不同层级、实现层级间的自然过渡，显著增强页面的层次感和结构清晰度。

① Teambition（阿里巴巴在线协作工具）

页面设计通过投影效果突显层级关系，帮助用户直观理解页面结构和功能。这种设计不仅提升了页面的可用性，也优化了用户的导航体验。

3. 分割线区分

分割线在设计中往往用于区分不同区域，但其功能性并不强，更多的是为了提升设计感。对于产品来说，分割线需要在视觉上做到适度平衡：如果分割线过深，页面会显得割裂；如果分割线过浅，区域划分又不够明确。因此，设计师在使用分割线时需要精准把控。

举个例子

① Dribbble 案例

很多设计通过简单的线条与空间的结合，将导航区和内容区分开，营造了良好的视觉效果。这种设计形式非常美观，但如果你是刚开始尝试做导航，建议不要轻易采用，因为它要求对页面空间的把控非常严格，稍有不慎可能影响整体的设计效果和用户体验。

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

当菜单广度过大，我们也能够通过设计的方法来优化导航菜单。

举个例子

① 腾讯云（菜单数量多）

腾讯云采用了一种新的导航模式：

1. 全部菜单导航： 展示所有 100+个云产品，用户可以查看完整列表。
2. 搜索菜单： 通过搜索框，用户能够快速筛选出自己需要的产品，提升查找效率。

这种设计在保证业务需求的同时，通过个性化的方式，使得大量菜单能够被有效地整合进一个导航栏。这样不仅满足了不同用户的需求，还提升了用户的操作便捷性。

5. 菜单深度：导航菜单层级的数目为深度

当面对菜单深度过深的情况时，设计师可以从以下几个方面进行优化考虑：

① 与产品经理沟通是否到位

与产品经理的沟通至关重要，首先需明确菜单架构设计的初衷，判断是否有重新梳理的空间，并探讨现有菜单层级是否过于复杂及优化的可能性。为提高沟通效率，设计师可提前使用思维导图工具梳理菜单目录，既能理清结构，又能为后续讨论节省时间并提升效率。

② 用户体验地图的绘制

在 B 端产品中，虽然用户的需求多样且复杂，但通过研究用户的操作步骤，常常能够找到一些规律。设计师可以基于这些规律，对菜单进行优化。

例如，在医疗系统中，根据不同角色（如前台、咨询师、医生和老板）的需求，设计师可以明确每个角色所关注的核心信息。老板可能最关心门店数据、营业额、医生的治疗量等，而医生可能更多关注患者的治疗记录。根据这些角色需求绘制用户体验地图，明确每个角色的操作流程和频繁使用的功能，从而设计出合理的菜单层级和结构。

通过这种方式，设计师可以确保每个角色的需求都被准确地映射到菜单结构上，避免不必要的层级和复杂操作，提升整个系统的可用性和效率。

通过这种方式，设计师可以确保每个角色的需求都被准确地映射到菜单结构上，避免不必要的层级和复杂操作，提升整个系统的可用性和效率。

五、提升易用性

1. 我的菜单

对于面向多角色用户的 B 端产品，可以考虑增加一个“我的菜单”选项。这一功能通过标签化和自定义菜单，让用户能够将常用的菜单项进行快捷添加。用户可以根据自己的需求，快速选择和跳转到常用功能。

举个例子

① 印象笔记

用户可以将常用的笔记本或模块添加到快捷方式栏中，方便快速访问。这种方式大大提高了用户在使用过程中的效率，避免了每次都要从繁杂的菜单中找到特定功能的困扰。

通过这种定制化的菜单设计，用户能够根据自己的工作习惯和需求，灵活配置导航，使得 B 端产品的使用体验更加个性化、便捷。

2. 角色配置

如果 B 端产品服务于不同的用户角色，那么在导航设计时，可以根据用户的角色差异，提供个性化的导航展示。这种方式通过角色筛选，能够简化复杂的导航结构，提高导航的针对性和效率。

举个例子

管理员可以根据公司的业务需求，为不同角色配置专属的导航权限。

例如，管理员可以为前台、经理、技术人员等不同角色，定制不同的菜单选项和功能权限。这样一来，每个角色只会看到与自己工作相关的功能，避免了菜单的冗余展示，提高了整体的使用效率。

这种设计方法不仅减少了用户操作时的认知负担，还使得导航结构更加清晰，避免了多余的功能展示。通过精细化的角色配置，满足了不同用户的需求，同时也降低了设计和维护的复杂度。

总结

导航是 B 端产品的骨骼和地图，串联起复杂业务与高效操作的桥梁。设计师需深刻理解导航的核心作用，从结构布局到层级规划、从原则定义到体验优化，全方位把控，才能打造简洁高效、用户友好的导航体系，为业务赋能、为用户减负。