【转帖】导航菜单设计五步法（三）

回复

本帖最后由爱学习的小同学于 2021-3-29 15:15 编辑

前文传送门：

导航菜单设计五步法（一）
导航菜单设计五步法（二）

五、四种常见导航菜单

5.1 侧边导航

侧边导航在国内的 B 端产品当中最为常见的
将菜单栏放置在左侧，页面布局上基本为左右结构，将导航菜单放置左侧固定

因为侧边导航在国内产品中最为常见，因此把他是优先提出来讲，国内厂商对于侧边栏导航的尤为偏爱，在很多人心目中，感觉就只有侧边导航和其他导航两种导航形式，也就造成了在 B 端产品的发展也逐渐趋同。不过现阶段大家对于 B 端产品的重视，在设计上也开始多元化，话不多说，我们先来看看侧边导航的优点有哪些~

优点：

【转帖】导航菜单设计五步法（三）

扩展性较强：多级导航可以流畅展示，可以涵盖很多大而全的产品
展示灵活：侧边导航可收折，收折过后用户的横向核心空间将会增大大，页面展示效率也会大大提高
快速定位：视觉启始线统一，用户可以根据首字进行查找，方便查找

缺点：

【转帖】导航菜单设计五步法（三）

不易阅读：侧边导航文字垂直排列，有悖于眼动的正常视觉方向
阅读沉浸感低：侧边导航容易打断用户的正常阅读顺序，使阅读感降低

线上产品：

我们拿有赞零售进行举例，他就是一个典型例子。

【转帖】导航菜单设计五步法（三）

菜单栏+功能菜单共有 15 个，然后通过导航的间隔将菜单进行分组，最多一个导航菜单共 9 个，满足7+-2原则

同时可以看到，有赞在使用三级导航时，通过右侧面积统一展示二、三级导航，方便了用户导航展示的同时优化了用户的使用体验

5.2 顶部导航

顶部导航在国外的产品当中，算是较为常见的。

将菜单栏放置在顶部，页面布局上基本为上下结构，将导航菜单放置上方固定

顶部导航早期出现于各类门户网站：比如企业官网，各种咨询类的网站经常会采取这样的导航形式。说回B端产品中，顶部导航通常在B端产品中也是十分常见的，其中以国外产品最为集中，比如国外CRM三剑客：salesforces、hubspot、zoho都是采取的顶部导航的形式。

【转帖】导航菜单设计五步法（三）

优点：

满足阅读习惯：导航为水平布局，阅读方式更贴近眼动的正常阅读顺序
沉浸感强：顶部导航通常不会打断用户的阅读行为，对用户的干扰少

设备影响小：导航顶部，整体页面稳定，页面对于用户显示器分辨率影响较小

缺点：

【转帖】导航菜单设计五步法（三）

通用性差：同时受导航栏标题文字限制，对于每一个菜单的字数限制严格
横向 Tab 数量少：承载不了太多菜单数量，超过 7 个后菜单排布会十分困难，横向空间利用率差

扩展性差：水平导航最好不要超过二级菜单，超过二级菜单，用户使用成本高

线上产品：

【转帖】导航菜单设计五步法（三）

salesforce

销售 CRM 传奇人物，千亿美元估值，每年营收百亿美元，无疑是 B 端产品当中的一个标杆。

如果你是做 CRM，或者是 B 端产品，必看的一个竞品。
salesforce 采取的就是一个顶部导航，只是不同的是，salesforce 的顶部导航更多是将页头的功能进行合并叠加，虽然 salesforce 的交互方式不算优秀，但是因为其业务线不断庞大，这样才能支撑其整条业务线。就因为这样的问题，需要设计师在设计时，要考虑到整个系统的一个扩展性问题。做 B 端产品的交互设计有点类似我对面后端同学写代码，我们现在设计的这个交互最少要满足未来一到两年公司的已规划好的产品的扩展问题。

【转帖】导航菜单设计五步法（三）

Hubspot

Hubspot 采取就是顶部菜单，同时二级菜单下拉展示，同时 Hubspot 是按照角色去划分顶部菜单，能够给用户减轻认知负担，更好的被用户所使用。同时在一些设计小细节上，比如顶部的主题色，既可以提升品牌感，同时在是适当时可以作为进度进行一个展示，使用户能够更加深入的感知到其设计

5.3 混合导航

在 B 端产品中，感觉混合导航就是一个后期之秀。

它在页面布局为顶部和侧边，简单来讲，就是将顶部导航于侧边导航进行结合。通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。在一些产品拥有复杂的逻辑关系，菜单之间关系分明的产品中，混合导航也越来越被大众所接受。在很多复杂的系统当中，混合导航真的是很不错的一个选择，我们来看看他的优缺点：

优点：

【转帖】导航菜单设计五步法（三）

承载大型业务：在导航上，他能够展示 3 级甚至 4 级菜单，对于很多大型 B 端项目，混合导航算是更加合理的选择
扩展性强：对以后有规划大量功能的产品，用混合导航，能使之后菜单扩展性更强

缺点：

【转帖】导航菜单设计五步法（三）

占用面积大：要切换多个菜单，所以顶部和左侧会占用大量的空间
菜单交互路径长：一、二级菜单间来回交互成本高，操作繁琐

线上产品：

各类云产品
云产品其实就是一个很好的例子，比如阿里云，他们因为自身产品线众多，对于导航的设计也是以复杂著称，多数情况下，面对这种复杂的导航时都会采取混合导航。他们能够通过混合导航，使用户对于导航每一个功能模块有一个深刻的认识。

金蝶
金蝶-星空定位就以 Paas 进行定制销售，分析过他的产品你就了解到，他一共有 100+个菜单，同时算是金蝶的王牌产品，因此对于此类产品，应该着重去了解，也因此，对于每一个模块，都是通过大标题+小标题的形式进行设计，使用户在使用时能够明确知道自己想要什么

现在各大复杂的产品都会采取混合导航，这样对于产品的架构以及各类菜单层级的分析也会起到很大的帮助～

5.4平台类导航的新趋势：

平台类导航是我们团队内部自己的取名，给他的定义通常是拥有很多模块比如Teambition、明道云、拥有很多个模块，通过一个统一的平台进行内容的分发，比如移动端的钉钉、企业微信、纷享销客都采用同样的方式，但在WEB端当中，平台导航通常伴随着其他导航同时出现，

比如最近很火明道云、就是使用了在我们看来的平台导航，他们将自己的产品分别陈列在页面的核心区域，通过对于工作台的设计，形成对于页面的展示，同时形成一个平台类的导航，于此相对应的还有钉钉后台管理页面以及企业微信后台管理页面，他们都是通过一个个平台类的模块对导航进行分发的～

最后的絮叨叨

我相信，看到这里的同学都是勇士，给大家聊聊自己的心得吧～
其实这篇文章的原型，来自对于公司新产品的导航设计分享，我希望自己把最近几年接触到的内容整理一下，用一个系列的文章来去阐述B端产品的整个架构，如果大家想看什么文章，欢迎私信～
希望大家喜欢

对了，如果你觉得文章对你来说有所帮助，欢迎点赞，同时也欢迎将文章分享给你身边的人～
谢谢 : )

南枕 · 发表于 2021-3-29 18:12:05

还是比较有用的

[分享] 【转帖】导航菜单设计五步法（三）

【转帖】导航菜单设计五步法（三）

相关帖子