B端设计：导航菜单的设计5步法

顶部导航早期出现于各类门户网站：比如企业官网，各种咨询类的网站经常会采取这样的导航形式。说回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 端项目，混合导航算是更加合理的选择。

扩展性强：对以后有规划大量功能的产品，用混合导航，能使之后菜单扩展性更强。

缺点：

占用面积大：要切换多个菜单，所以顶部和左侧会占用大量的空间。

菜单交互路径长：一、二级菜单间来回交互成本高，操作繁琐。

线上产品：

各类云产品

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!