告别枯燥模板！B端侧边导航栏设计思路拆解

一、全文速览图

前面分享了 B 端全局框架差异化设计的思路B端界面的起手式 —— 全局框架搭建，今天就进一步分享其中最核心的组件 —— 侧边导航栏的差异化设计思路。

二、B 端导航中的产品分析

B 端导航设计离不开对产品需求的分析，因为不同的导航产品规划就会应用到完全不同的设计思路和布局形式。

分析导航主要分析的点有两个，“导航的层级” 和 “节点类型”。

导航层级比较好理解，因为从产品层面出发，导航节点是以树状结构进行关联的，在这个结构中包含了不同的层级与分支，不同产品会有不同的层级要求，通常不会超过4级。

导航的节点层级会直接影响最终的设计，且层级越多、下级节点数量越多，那么导航的框架结构往往也会设计得越复杂。

除此之外，另一个关键的要素，就是对树桩图里节点的认识，在产品设计过程中，并不是每个节点都是 —— 可跳转的。

比如1级节点里有个“课程管理”，它的下级包含了公开课、直播课、录播课、系统课四个节点，下级的四个节点都指向了对应的页面，而上级节点并没有对应的页面，只是在逻辑上作为一个分类，来归纳下方节点的逻辑节点。

并且逻辑节点有时候并不是独立存在的，而是整个层级都是逻辑节点，这对布局形式的影响就会很大。所以如果没有提前做好分析，就很难实现有效的设计。

总结起来，导航分析最简单的实践方法，就是用思维导图把所有节点自己整理一遍，然后把可跳转节点和逻辑节点在样式上做出区分即可。

最后在导航分析中还有个经验之谈，那就是评估后续导航的 “扩容”，因为很多项目会随着迭代不断增加新的功能和页面进去，如果前期设计的导航局限性太大，就会对后续的扩展产生影响。

所以分析不要只局限在当前的版本中，也可以和产品经理探讨未来的蓝图，把当前能想到的节点全部补全填充进去。

三、B 端导航的框架布局分享

B 端导航的框架布局由导航的层级结构决定，在这里我们只考虑1-4级导航的框架布局。

1级导航，因为没有下级节点，所以空间占用的需求最小，可以用比较简单的方式设计，包括窄宽的条形设计，和常规的导航类型设计，可以结合上篇的分享实现不同的布局效果。

要注意的是，如果节点数量太少，那么使用常规的导航形式是很难做出彩的，窄宽的类型往往因为图标和文字纵向排列

2级导航，包含两种情况，一种是一级节点都是逻辑节点不可点击，且节点数量整体不多，那我们在设计的时候就可以直接把1级节点弱化，把二级节点直接平铺出来不用刻意隐藏它们。

另一种情况就是1级节点包含可跳转节点，且节点整体数量都多，我们就需要把节点进行折叠，可以使用最传统的导航折叠模式，也可以设计成双列的模式。

3级导航，层级就开始变多了，要避免使用常规导航的3级折叠模式，如果1级节点是逻辑节点可以使用单列的设计，也可以使用双列式设计将2、3级节点放在右侧。

4级导航或更多，那么就要直接排除常规导航的设计形式了。除了使用双列设计外，还可以在顶部添加一个导航栏放1级导航，下方再使用双列的混合导航形式。

排除掉一些极端复杂的 B 端项目（如云服务），常规 B 端项目的导航布局框架就上面提到的这几种模式，先确定好布局，然后我们才能进入下一步的细化环节。

四、B 端导航的样式丰富

导航是整个 B 端项目中影响力最大的组件（没有之一），它的设计太差、太简陋会直接拖累整个项目的视觉效果。

导航设计中最大的难题，不是参数应该怎么定、排版应该怎么做、色彩应该怎么填，而是导航里只有标题和节点，内容太少了怎么办……

比如下面这些案例，导航内只有几个选项和大量留白，那它肯定无法支撑页面获得更好的视觉效果和体验。

如果在真实项目中，空了也就空了，对实际的操作不会有任何影响，开发起来还容易。但在作品集项目展示中，效果确实不够好，所以我们需要额外给它“加点料”，也就是添加更多的字段信息来丰富它的视觉效果。

在导航中我们可以增加视觉效果的操作包含以下的方法：

操作1：丰富导航节点的选中样式，包括选中图形、背景色的应用，以及对图标进行样式类型的切换，比如原先是线性的，选中变成彩色渐变、玻璃拟态或三维的。

操作2：添加选项的通知状态，可以是红点也可以是包含通知数量的徽标，这可以让宽导航栏左右重心保持均衡。

操作3：分割线的运用，对不同类型选项形成更好的空间隔离，不仅能帮助用户更快的检索选项，也可以丰富视觉的效果。

操作4：增加搜索栏，将搜索栏放进导航的上方，Figma 等产品就已经这么做了，所以也非常常见。

操作5：添加用户信息，将账户相关信息和设置选项放到导航底部。这应用于需要节省顶栏空间和需要放的字段信息较多的情况。

操作6：添加其它设置选项，例如系统设置、语言设置、模式切换、导航折叠等系统级操作，也可以选择放到底部去。

以上就是在真实项目中都很常见的字段和视觉内容，合理添加它们并不会让设计看起来太像“飞机稿”，也足以让导航的样式得到充分的完善，所以其它更小众的元素我就不一一例举了。

结尾

导航的最终设计效果一定要结合整体的布局框架和右侧内容区域的设计密度，既不能太密集也不能太空旷。

下一篇我们就围绕顶部栏的设计展开了。

我们下篇再贱~