谈谈平台类产品的导航设计

我们在超市购物时，基本是依靠超市的导航系统（导示/包装/产品特点）以及我们扫描商品的能力来找我们想要的东西。然而网络上找东西和真实世界的不同之处是我们感觉不到物理方位和大小，只能通过一个个链接触达。为了让用户“不迷路” ，清晰、一致的导航设计尤为重要。下面本文作者结合实际工作经验来谈谈B端导航设计。

一、导航作用

中后台产品设计中导航设计尤为重要，基本上是以导航架构为基础，布局内容信息。

导航的主要作用为：

确定用户的位置：B端产品由于业务的复杂性和角色的多样性，页面层级结构较多。清晰的导航设计会告诉用户“自己在哪里” ，避免用户迷路；
告诉用户如何使用网站：晰一致的导航能够帮助用户规划行程，就像一封详尽的说明书，起到指示说明作用，能明确地提示用户从哪里开始，能进行哪些操作；
告诉用户这里有什么：B端产品中，系统架构通常通过导航结构划分，通过层次分级，导航文案引导可以快速呈现网站层级和内容。

二、几种常见的导航形态

“导航”往往承载平台的主要栏目，根据位置划分为顶部导航、侧边导航和混合导航。

顶部导航：自上而下的顶部布局结构符合用户的浏览习惯，其排版稳定，不受显示器的影响，在网页设计中较受欢迎。不足之处是横向布局的拓展性较弱，能够放置的条目也是有限的。
侧边导航：侧边导航因其可拓展的布局结构在后台类产品中比较受欢迎，它虽占据页面主视觉区，但竖向的布局能够展示更多条目，当每个分类模块的数量较多（条目信息一般遵循5±2原则）可通过收起折叠信息。
混合导航：B端系统设计中，往往根据不同任务功能，选用合适的导航布局。混合导航有极强的包容性，可以承载更多复杂的逻辑关系，更受系统设计者喜爱。如 teambition中，选用上下混合导航，顶部导航包括站点ID、搜索、实用工具等全局功能。把与用户常用的功能如任务/消息/日期/设置放在顶部导航中，方便查阅和管理。侧边导航根据我的项目和任务权重分组展示。

三、确定导航菜单的深度和广度

B端导航设计时，面对复杂多样的任务，当遇到导航的广度过多（平级功能太多）或层级过深时怎么办？

导航菜单广度：导航菜单每一层级包含的菜单数目为广度，数目越多，广度越大；
导航菜单深度：导航菜单层级的数目为深度，层级越多，深度越大。

1. 广度

这里用到了《简约至上：交互式设计四策略》- 合理删除、分层组织、适时隐藏和巧妙转移的四种方法。

1）“删除”

删功能：平庸的产品设计往往堆砌更多功能而忽视用户主要目标。当发现功能与用户目标相背时，可以主动和产品沟通，删除冗余功能，寻求满足用户目标的精简方案。
简化样式：删除多余的文字，精简按钮样式，去掉分散注意力的元素减少用户认知负担。

2）“分组”

在视觉层面，信息分层是确保页面清晰的常用策略。这种策略同样适用于功能层面，如下图，阿里云产品导航设计中，把不同的产品根据服务内容分组，方便查阅和检索。

3）“隐藏”

阿里云和腾讯云的服务众多，涉及几百个产品。这时隐藏是一种很好的方式，当用户鼠标悬停时会拓展出临时模态选项区域，可以充分利用屏幕空间。

如下图：

4）“转移”

当一个功能既不能删除、分组、也不能隐藏，就可以用转移的方法。包括：设备转移、软件转移、向用户转移。

设备转移：因屏幕大小影响一些产品的高级功能在手机端往往进行简化隐藏，高级的功能只在电脑端呈现；
软件之间转移：tableau数据分析软件把数据准备阶段的功能进行简化，抽离出制作数据清洗的软件—Tableau Prep，既满足了用户数据准备阶段的需求，用户又可单独购买产品的服务，提高公司收益；
向用户转移：这里的向用户转移可以理解为“用户自定义”，产品提供的功能众多，但常用的功能往往就几个，如下图，腾讯云产品列表提供自定义常用软件快捷入口功能，体验感更佳。