导航菜单设计B端设计指南导航菜单设计方法( 四 ) _经验知识

将菜单栏放置在顶部。页面布局上基本为上下结构。将导航菜单放置上方固定
顶部导航早年出现于各类门户网址：比如企业官方网站。各种询问类的网址总是会采取这样的导航形式。说回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+个菜单。同一时间算是金蝶的王牌业务。因此对于此类业务。大概着重去知道。也因此。对于每一个模块。都是通过大标题+小标题的形式进行设计。使玩家在使用时能够明确知道自己想要什么
现在各大杂乱的业务都会采取混合导航。这样对于业务的架构以及各类菜单层级的解析也会起到蛮大的帮助～