该用哪类B端设计导航？来看这份对比！

 B 端产品设的时候，第一件事决界面的结构布局，导航哪一件急需考虑的事。典型的，横向导航与纵向导航之分，拿 ant design 举例，如下面 2 张图所示。

两者看起来都，选择哪个，心里会有第眼觉，有觉不，罗列个 123 出来，这样展示案时候，才能服己服。

△ 导航

横向导航

优：

1. 通常使用比较少的单，简单，易记忆。
2. 位于页顶部，不占用空。
3. 由于位于顶部，在视觉上更突出，更容易识别。
4. 菜单选项之间视权重的区分更明显，左边最强右边最弱。

缺点：

1. 扩展性有限，不能很好地承载大量和多层级菜单。
2. 占用屏幕高度，别是当固定于屏幕顶部。
3. 来回切换菜单选项时，横向移动鼠标的距离更长，操效率更低。

△ 纵导航

纵向导航

优：

1. 能够承载的单项数层级多，扩展性强。
2. 不占用屏幕高度可以收起，为内容提供更多空。
3. 在菜间切换鼠标移动距离短。
4. 能够更地适应屏幕宽度小的设备。

缺点：

1. 菜单数量多层级复杂时，不容易记忆。
2. 菜选项文字不宜过长，可能会截断。
3. 各菜单选项之间的视权重差别不明显。

都可以在已有的方向上进行扩展，如下图：

△ 横向导航扩展

但总来说，单独的横向导航方式级不能超 3 ， 3 级就不用户的阅读和选择。

△ 纵向导航扩展

相对于横向，纵向的拓展性强，管多级都可一直往，但层级过于 3 层，户对导航的分辨和记忆会明显降。

当然，时候单独只横向或者纵向一种导航不能完全满足我们的需求，根据以特点，我们也可以如下组合的形式。

△ 组合导航

很明显，这样组合导航，适用于级导航不太多（最好少于 5 个）内容权很明显，级导航后导航内容和层级比较多内容复杂。

另外，如果嫌纵向导航占空间，则可以考虑将纵向导航做成可折叠收起的模式，适用于贴着浏览器的纵向导航。

△ 可折叠的纵向导航

总结

• 横向导航易记忆、易看，各导航权重区分明显，越靠左越重，但切换效率慢。
• 纵导航扩展性强，可折叠，各导航权区分不明显，切换效率更高。
• 如果者都不能独足，可尝组的形式。

欢迎关注作者微信公众号：「Sophia玲珑阁」