B 端产品设计：导航系统构建指南

两年前写的一篇关于导航菜单的文章帮助许多学生进入 B 端设计领域。然而，两年过去了，行业在不断发展，文章中的许多观点并不适用于当前的 B 端设计环境。如今的 B 端设计越来越受到重视，所以最近打算深入挖掘之前不太过时的文章内容。就像游戏行业的翻拍版一样，我们可以翻拍导航、筛选、表格等文章。这一次，拥有一个强大的 B 端设计工具也是很重要的。如果你准备好了，我们就一起来看看吧~

1、导航的定义：什么是导航？

现实世界中，我们在寻找东西时会有很多“导航”的指导。例如，如果你想在购物中心找到一个浴室，你会在购物中心查看道路指南。如果你想在超市找到一瓶旺仔牛奶，你会先找到饮料分区，然后根据内容分类再找。如果你想在图书馆找书，也可以根据楼层、类别、书架号一步一步找到。这其实是生活中的“导航”。

判断一个内容是否为导航，会有以下依据。

是否起到功能链接的作用：

导航主要是帮助用户快速访问不同页面的系统。产品是在实施项目中的筛选操作，也就是我在项目中参与的、我管理的、所有项目都归档了。它只是提高了重要的数据筛选水平，所以不是导航。

而一个产品的知识库管理下的三个内容模块，分别是概览、页面组、与我共享、配置中心。显然，功能链接起到了作用，所以可以概括为导航。

这里需要补充一下，导航和筛选其实本质上是因为标签页面。

是否有导航结构组织页面：

为了使导航具有明确的结构，以终端系统为例，主要包括主导航、子导航、全局导航和一些辅助功能。在核心内容上，主次差异主要存在，可以明确引导用户进行导航。

操作需要改变页面：

在许多情况下，导航很容易与菜单、操作混淆，在设计时，我们需要把这两种情况单独拿出来，例如 Keynote、Sketch 在里面，我们经常把工具栏和导航混为一谈。工具栏显示当前视图相关操作的常用命令和控件。本质上是操作的集合。而且导航是指导页面结构，本质上需要跳转到其它页面，因此存在明显的差异。

2、了解各大设计系统的“导航”

不同的团队对导航组件的定义有不同的要求。首先，我们来看看大家都很熟悉的。 Ant Design，在 Ant Design中，我们会在导航目录下对锚点、面包屑、下拉菜单、导航菜单、分页、步骤进行分类，整体规划相对全面。

而 Arco Design 相对简单，将面包屑、下拉菜单、菜单、页头、分页、步骤条分类到导航中，显然他们目前使用的内容已经总结到导航中。

SAP 的 Frori 那就更特别了，将 Action Sheet、Breadcrumb、Button、Icon Tab bar、Link、Smart Link 在导航中统一归纳。但是这里需要注意，SAP 把操作和导航放在一起，这样就会存在 Button 它们存在于导航中。

B端图标设计-B端图标素材-B端图标-即时设计

3、导航的作用到底起到了什么作用？

导航本身的作用是分发和引导产品的功能，让用户在每个模块之间高效准确地穿梭。但是如果我们想做到这一点，我们需要弄清：您从哪里来？去哪儿？现在在哪里？

你来自哪？

使用者需要迅速了解你来自哪里？面包屑导航就会发挥这种作用。对页面而言，我们在设计时常常需要暴露页面中的面包屑导航。例如，在页面设计中，通常会在导航部分和内容区之间预留一些空白来呈现面包屑。通过这种设计，用户可以快速了解自己的位置。

目前在哪？

目前的位置在哪里？是 B 端导航设计非常重要的问题。因为页面跳转和页面关联经常涉及到一个系统，所以我们需要清楚地标记页面的位置，这样用户就可以知道他目前的具体情况。与此同时，在组件的使用中，将采用页头、分页、步骤条、锚点、导航菜单等组件来实现这一目标。页头的设计对于一些复杂的系统非常重要。它能给用户思维惯性，让他快速了解当前的系统位置，方便我们操作。在像阿里巴巴云和腾讯云这样的产品中，你会发现“页头”这个词出现的频率非常高。这是因为云产品的系统产品线很多，业务范围也很广。用户很容易在页面上迷失方向，所以需要提供一个组件位置，让用户知道自己目前的位置。

去向哪？

因为在任何导航中，我们最终都需要流动。因此，需要明确说明页面中的具体流向。我们经常使用锚点、分页、下拉菜单和导航菜单来指示流向。这些组件都是为了让我们知道产品的具体流向，这样页面才能起到导航和分发的作用。

4、对不同导航组件下的分类进行说明。

这么多组件，它们的功能是一样的吗？事实上，它不是。在整个导航中，有两种不同的使用场景，所以我们将其区分为两种类型。

总体导航：

主要针对整个网站、系统的导航设计，它是粒度最大的导航，通常被称为导航菜单。

而在每一个终端系统中会有一个整体导航，整个产品的大概框架可以通过整体导航来构建。

区域导航:

主要针对某个模块下的页面，对页面进行分类指南。如面包屑、下拉菜单、步骤、分页、页头、锚点等...

由于每个整体导航都不能完全覆盖所有的导航菜单，所以区域导航主要用于优化导航细节。所以，我们可以通过区域导航来优化整个导航的层次和细节。

至于整体导航和区域导航，它们是相辅相成的。在许多情况下，整个导航菜单不能满足所有模块的实际情况。这时，我们可以使用区域导航进行优化。

5、导航的重要性

导航就像人体内的毛细血管，与每一个器官进行交流。尽管人们在日常使用中可能没有意识到它的存在，但是它的设计对于导航模块本身来说是非常重要的。

设计者的首要需求

很多学生成功加入公司后的第一个需求其实是导航，因为大部分产品都在寻找设计师，这意味着产品本身会有很多问题，导航是所有矛盾的开始。因此，导航往往是大多数设计师的第一部作品，导航需求是否成功将决定您的试用期。因此，我们必须了解导航的整体设计，才能使您顺利入职。

第一次体验新用户

导航是新用户进入系统时需要接触的第一个功能。所以对于很多企业来说，导航设计的质量会直接影响用户对这款产品的理解。比如你的导航比较晦涩，查完导航的新用户很有可能会退缩。

首先了解同事

导航对于 B 端产品的资深用户也很重要。一个资深用户在使用产品时，肯定会在多个产品模块之间随意切换，对于一个资深用户来说，切换是否顺畅是非常重要的。如果需要反复切换，对用户来说是非常痛苦的。

所以设计好导航，有利于我们在企业中提高自己的设计话语权，所以这一点尤为重要。