在设计B端产品时，首先要做的就是决定界面的结构布局，导航放在哪里成为了当务之急。通常，有水平导航和垂直导航。以antdesign为例，如下两张图所示。两个好像都行，但是选哪个，你心里会有第一直觉，但是光有直觉是不够的，你要列出123，这样在展示方案的时候，才能说服自己，说服别人。△横向导航横向导航的优点：通常使用的菜单较少，简单易记。它位于页面顶部，不占用水平空间。由于在顶部，它在视觉上更加突出并且更容易识别。菜单选项之间视觉重量的区别更为明显，左侧最强，右侧最弱。缺点：扩展性有限，不能很好地承载大量多级菜单。占据屏幕的高度，尤其是固定在屏幕顶部时。来回切换菜单选项时，横向移动鼠标的时间更长且效率更低。△垂直导航垂直导航的优点：可以承载的菜单项数量和层级更多，扩展性强。不占屏幕高度，可以收起以提供更多内容空间。在菜单之间切换时鼠标移动距离短。更适合屏幕宽度较小的设备。缺点：当菜单数量多级复杂时，不易记忆。菜单选项文本不应太长，可能会被截断。菜单选项之间的视觉重量几乎没有差异。都可以沿现有方向展开，如下图：△横向导航扩展但一般情况下，单个横向导航方式的层级不能超过3层，超过3层不利于用户阅读和选择。△相对于水平和垂直导航，垂直导航扩展更具可扩展性，无论是多少级，都可以一路往下添加，但如果层级高于3级，用户对导航的分辨率和记忆会显着减少。当然，有时仅靠水平或垂直导航并不能完全满足我们的需求。根据以上特点，我们还可以有以下组合形式。△组合导航明显。这种组合导航适合一级导航不多（最好少于5个）且内容权重差异明显的情况。一级导航之后，导航内容和层级都比较大，内容复杂。另外，如果觉得垂直导航占用空间，可以考虑将垂直导航做成可折叠的模式，适合浏览器附带的垂直导航。△可折叠垂直导航总结水平导航易记易看，各导航权重区分清晰。越左越重要，但切换效率慢。垂直导航具有高度可扩展性，可以折叠。各个导航的权重没有明确区分，切换效率更高。如果两者都不够，请尝试组合使用。
