离往机械模板 ！B端侧边导航栏筹划思路拆解
1、机械解全文速览图
后面分享了 B 端全局框架不合化筹划的端导航思路B端界面的起手式 —— 全局框架搭建，往日就进一步分享个中最中心的侧边组件 —— 侧边导航栏的不合化筹划思路 。
2 、划思B 端导航中的离往栏筹路拆产品分化
B 端导航筹划离不开对产品需求的分化 ，因为不合的机械解导航产品筹算就会独霸到无缺不合的筹划思路和筹划编制 。
分化导航次要分化的模板点有两个 ，“导航的端导航层级” 和 “节点圭表类型” 。
导航层级斗劲好邃晓 ，侧边因为从产品层面解缆 ，划思导航节点是离往栏筹路拆以树状筹划举办联络相干的，在这个筹划中包含了不合的机械解层级与分支 ，不合产品会有不合的模板层级请求，但凡不会超出4级 。
导航的节点层级会直接影响幻想下场的筹划，且层级越多、上级节点数量越多 ，那么导航的框架筹划经常也管帐划得越宏壮 。
除此以外 ，此外一个关头的要素 ，就是对树桩图里节点的熟谙 ，在产品筹划过程中 ，真实不是每个节点都是 —— 可跳转的 。
比如1级节点里有个“课程治理” ，它的上级包含了悍然课、直播课 、录播课 、琐细课四个节点 ，上级的四个节点都指向了对应的页面，而上级节点并没有对应的页面 ，只是在逻辑上作为一个分类 ，往来交往纳下方节点的逻辑节点 。
并且逻辑节点有时光真实不是自力存在的 ，而是全数层级都是逻辑节点 ，这对筹划编制的影响就会很除夜 。所以假定没有延迟做好分化 ，就很难完成有效的筹划 。
总结起来，导航分化最复杂的幻想编制 ，就是用思惟导图把全数节点本身拾掇一遍，然后把可跳转节点和逻辑节点在格式上做出分辨便可。
末尾在导航分化中另有个经验之谈 ，那就是评价后续导航的 “扩容” ，因为良多项目会跟着迭代不竭添加新的下场和页面进往 ，假定后期筹划的导航局限性太除夜 ，就会对后续的扩大年夜大年夜大年夜大年夜产生发火影响 。
所以分化不要只局限在往后的版本中，也可以和产品经理参议将来的蓝图 ，把往后能想到的节点全数补全加添进往 。
3 、B 端导航的框架筹划分享
B 端导航的框架筹划由导航的层级筹划决意 ，在这里我们只思虑1-4级导航的框架筹划。
1级导航，因为没有上级节点 ，所以空间占用的需求最小 ，可以用斗劲复杂的编制筹划 ，包含窄宽的条形筹划 ，和常例的导航圭表类型筹划，可以连络上篇的分享完成不合的筹划终局 。
要寄看的是 ，假定节点数量太少 ，那么独霸常例的导航编制是很难做出彩的，窄宽的圭表类型经常因为图标和文字纵向列举
2级导航，包含两种气候 ，一种是一级节点都是逻辑节点不成点击 ，且节点数量集团不多 ，那我们在筹划的时辰便可以直接把1级节点弱化 ，把二级节点直接平坦出来不必决计湮没它们 。
此外一种气候就是1级节点包含可跳转节点 ，且节点集团数量都多 ，我们就需求把节点举办折叠 ，可独霸最传统的导航折叠编制，也可以筹划成双列的编制 。
3级导航 ，层级就最早变多了，要阻拦独霸常例导航的3级折叠编制，假定1级节点是逻辑节点可独霸单列的筹划 ，也可独霸双列式筹划将2 、3级节点放在右边 。
4级导航或更多 ，那么就要直接消弭常例导航的筹划编制了 。除独霸双列筹划外 ，还可以在顶部添加一个导航栏放1级导航 ，下方再独霸双列的同化导航编制 。
消弭损掉落踪落一些极端宏壮的 B 端项目（如云处事） ，常例 B 端项方针导航筹划框架就上面提到的这几种编制 ，先断定好筹划，然后我们才调进进下一步的细化环节 。
4 、B 端导航的格式丰富
导航是全数 B 端项目中影响力最除夜的组件（没有之一） ，它的筹划太差 、太大年夜大年夜约会直接拖累全数项方针视觉终局。
导航筹划中最除夜的艰苦 ，不是参数理应若何定 、排版理应若何做 、色采理应若何填 ，而是导航里只需问题和节点 ，内容太少了若何办……
比以上面这些案例 ，导航内只需几个选项和除夜量留白 ，那它必定没法支撑页面掉落踪掉落踪更好的视觉终局和体验 。
假定在真实项目中 ，空了也就空了 ，对理论的独霸不会有任何影响 ，斥地起来还随便。但在作品集项目展示中 ，终局切实其实不足好 ，所以我们需求出格给它“加点料”，也就是添加更多的字段信息来丰富它的视觉终局 。
在导航中我们可以添加视觉终局的独霸包含以下的编制：
独霸1 ：丰富导航节点的选中格式 ，包含选中图形 、布景物的独霸 ，和对图标举办格式圭表类型的切换，比如本来是线性的 ，选中变成黑色渐变 、玻璃拟态或三维的 。
独霸2：添加选项的赐顾帮衬外形 ，可所以红点也可所以包含赐顾帮衬数方针徽标，这可让宽导航栏放置重心贯穿连接均衡 。
独霸3 ：豆割线的独霸 ，对不合圭表类型选项构成更好的空距离离 ，不单能辅佐用户更快的检索选项 ，也可以丰富视觉的终局 。
独霸4 ：添加搜刮栏 ，将搜刮栏放进导航的上方 ，Figma 等产品就已这么做了 ，所以也非经罕有 。
独霸5 ：添加用户信息 ，将账户相干信息和设置选项放到导航底部 。这独霸于需求俭仆顶栏空间和需求放的字段信息较多的气候 。
独霸6：添加此外设置选项 ，比如琐细设置 、言语设置、编制切换 、导航折叠等琐细级独霸 ，也可以选择放幻想下场部往 。
以上就是在真实项目中都很罕有的字段和视觉内容 ，公允添加它们真实不会让筹划看起来太像“飞机稿” ，也足以让导航的格式掉落踪掉落踪充分的完竣 ，所以此外更小众的元素我就不一一例举了 。
末尾
导航的幻想下场筹划终局必定要连络集团的筹划框架和右边内容区域的筹划密度 ，既不克不及太鳞集也不克不及太空旷 。
下一篇我们就旋绕顶部栏的筹划展开了 。
作者：超人的德律风亭
1、机械解全文速览图
后面分享了 B 端全局框架不合化筹划的端导航思路B端界面的起手式 —— 全局框架搭建，往日就进一步分享个中最中心的侧边组件 —— 侧边导航栏的不合化筹划思路 。
2 、划思B 端导航中的离往栏筹路拆产品分化
B 端导航筹划离不开对产品需求的分化 ，因为不合的机械解导航产品筹算就会独霸到无缺不合的筹划思路和筹划编制 。
分化导航次要分化的模板点有两个 ，“导航的端导航层级” 和 “节点圭表类型” 。
导航层级斗劲好邃晓 ，侧边因为从产品层面解缆 ，划思导航节点是离往栏筹路拆以树状筹划举办联络相干的，在这个筹划中包含了不合的机械解层级与分支 ，不合产品会有不合的模板层级请求，但凡不会超出4级 。
导航的节点层级会直接影响幻想下场的筹划，且层级越多、上级节点数量越多 ，那么导航的框架筹划经常也管帐划得越宏壮 。
除此以外 ，此外一个关头的要素 ，就是对树桩图里节点的熟谙 ，在产品筹划过程中 ，真实不是每个节点都是 —— 可跳转的 。
比如1级节点里有个“课程治理” ，它的上级包含了悍然课、直播课 、录播课 、琐细课四个节点 ，上级的四个节点都指向了对应的页面，而上级节点并没有对应的页面 ，只是在逻辑上作为一个分类 ，往来交往纳下方节点的逻辑节点 。
并且逻辑节点有时光真实不是自力存在的 ，而是全数层级都是逻辑节点 ，这对筹划编制的影响就会很除夜 。所以假定没有延迟做好分化 ，就很难完成有效的筹划 。
总结起来，导航分化最复杂的幻想编制 ，就是用思惟导图把全数节点本身拾掇一遍，然后把可跳转节点和逻辑节点在格式上做出分辨便可。
末尾在导航分化中另有个经验之谈 ，那就是评价后续导航的 “扩容” ，因为良多项目会跟着迭代不竭添加新的下场和页面进往 ，假定后期筹划的导航局限性太除夜 ，就会对后续的扩大年夜大年夜大年夜大年夜产生发火影响 。
所以分化不要只局限在往后的版本中，也可以和产品经理参议将来的蓝图 ，把往后能想到的节点全数补全加添进往 。
3 、B 端导航的框架筹划分享
B 端导航的框架筹划由导航的层级筹划决意 ，在这里我们只思虑1-4级导航的框架筹划。
1级导航，因为没有上级节点 ，所以空间占用的需求最小 ，可以用斗劲复杂的编制筹划 ，包含窄宽的条形筹划 ，和常例的导航圭表类型筹划，可以连络上篇的分享完成不合的筹划终局 。
要寄看的是 ，假定节点数量太少 ，那么独霸常例的导航编制是很难做出彩的，窄宽的圭表类型经常因为图标和文字纵向列举
2级导航，包含两种气候 ，一种是一级节点都是逻辑节点不成点击 ，且节点数量集团不多 ，那我们在筹划的时辰便可以直接把1级节点弱化 ，把二级节点直接平坦出来不必决计湮没它们 。
此外一种气候就是1级节点包含可跳转节点 ，且节点集团数量都多 ，我们就需求把节点举办折叠 ，可独霸最传统的导航折叠编制，也可以筹划成双列的编制 。
3级导航 ，层级就最早变多了，要阻拦独霸常例导航的3级折叠编制，假定1级节点是逻辑节点可独霸单列的筹划 ，也可独霸双列式筹划将2 、3级节点放在右边 。
4级导航或更多 ，那么就要直接消弭常例导航的筹划编制了 。除独霸双列筹划外 ，还可以在顶部添加一个导航栏放1级导航 ，下方再独霸双列的同化导航编制 。
消弭损掉落踪落一些极端宏壮的 B 端项目（如云处事） ，常例 B 端项方针导航筹划框架就上面提到的这几种编制 ，先断定好筹划，然后我们才调进进下一步的细化环节 。
4 、B 端导航的格式丰富
导航是全数 B 端项目中影响力最除夜的组件（没有之一） ，它的筹划太差 、太大年夜大年夜约会直接拖累全数项方针视觉终局。
导航筹划中最除夜的艰苦 ，不是参数理应若何定 、排版理应若何做 、色采理应若何填 ，而是导航里只需问题和节点 ，内容太少了若何办……
比以上面这些案例 ，导航内只需几个选项和除夜量留白 ，那它必定没法支撑页面掉落踪掉落踪更好的视觉终局和体验 。
假定在真实项目中 ，空了也就空了 ，对理论的独霸不会有任何影响 ，斥地起来还随便。但在作品集项目展示中 ，终局切实其实不足好 ，所以我们需求出格给它“加点料”，也就是添加更多的字段信息来丰富它的视觉终局 。
在导航中我们可以添加视觉终局的独霸包含以下的编制：
独霸1 ：丰富导航节点的选中格式 ，包含选中图形 、布景物的独霸 ，和对图标举办格式圭表类型的切换，比如本来是线性的 ，选中变成黑色渐变 、玻璃拟态或三维的 。
独霸2：添加选项的赐顾帮衬外形 ，可所以红点也可所以包含赐顾帮衬数方针徽标，这可让宽导航栏放置重心贯穿连接均衡 。
独霸3 ：豆割线的独霸 ，对不合圭表类型选项构成更好的空距离离 ，不单能辅佐用户更快的检索选项 ，也可以丰富视觉的终局 。
独霸4 ：添加搜刮栏 ，将搜刮栏放进导航的上方 ，Figma 等产品就已这么做了 ，所以也非经罕有 。
独霸5 ：添加用户信息 ，将账户相干信息和设置选项放到导航底部 。这独霸于需求俭仆顶栏空间和需求放的字段信息较多的气候 。
独霸6：添加此外设置选项 ，比如琐细设置 、言语设置、编制切换 、导航折叠等琐细级独霸 ，也可以选择放幻想下场部往 。
以上就是在真实项目中都很罕有的字段和视觉内容 ，公允添加它们真实不会让筹划看起来太像“飞机稿” ，也足以让导航的格式掉落踪掉落踪充分的完竣 ，所以此外更小众的元素我就不一一例举了 。
末尾
导航的幻想下场筹划终局必定要连络集团的筹划框架和右边内容区域的筹划密度 ，既不克不及太鳞集也不克不及太空旷 。
下一篇我们就旋绕顶部栏的筹划展开了 。
作者：超人的德律风亭
