组件定义

导航菜单属于导航中最常规的一种导航模式，它有2个显而易见的用途：帮助我们找到想要的任何东西和告诉我们现在身在何处。帮助用户在不同页面之间跳转找到目标功能。

组件构成

导航主要由文本标签和图标构成。文本标签是功能模块，图标是帮助用户方便和快捷的理解功能模块，图标是可有也可没有，图形的表现形式提高了用户找目标的辨识效率。

组件分类

在物理空间里，比如城市，街道，建筑物都会有自己的导航系统，我们希望在街道转角处找到街头指示牌，希望在往上看的角度看见它们。有他们自己随着时间发展起来的习惯用法。这些习惯用法让我们对导航元素的外观和位置也有了一个清晰的印象。因此我们知道该寻找什么，以及在需要的时候如何找到。

所以，在web页面，尽管它们的外观可能不一样，但是延续的一些基本的习惯用法：

• 顶部导航
• 侧边导航
• 混合导航
• 浮标导航

顶部导航

顶部导航常规用于企业官网中，常见样式有超级菜单（也叫胖菜单），它能一次性展示超级多的子集菜单。相当于所有导航的菜单集合。还有工具菜单，主要用于菜单栏的切换。

构成：

• 网站ID

网站的名称，让用户知道知道我在哪里，基本在每个页面都可以见到网站的名称。它到表整个网站，在站点结构上层次最高。

• 栏目

栏目，也叫主导航栏，是整个网站的所有栏目的集合。除了站点以外扽最顶层。一级导航之下也会包含二级导航。

• 实用工具

实用工具，是到达网站中不属于内容层次的重要元素的入口。比如注册/登录，帮助，个人中心等。在顶部导航上只能放置3～4个实用工具，用户使用最频繁的那几个。还有一部分使用工具会放在页面的底部。包含帮助，站点地图，关于我们等。

优点：节省空间，超大容纳度。能承载更多菜单。提升“检索”效率。
场景：企业/产品官网/信息流网站(内容为主)
样式：网站ID+栏目+实用工具
交互：悬停展开菜单面板。（用户在这些栏目中切换的频率不高）

样式1一超级菜单

常用样式之一的超级菜单，信息密度很高。能容纳多个二级菜单。拓展性的二级菜单样式也可以多样设计。加入一些运营需求。

• 一级+二级菜单

• 二级+三级菜单

• 一级+二级+三级菜单+广告位

样式2-工具菜单

常用于侧重信息流的内容网站，顶部导航可放置搜索，用户管理等工具类入口。只用于菜单栏的切换和跳转，减少对内容浏览的干扰。

侧边导航

侧边导航多用于b端产品中且多用于和顶部导航结合使用。比如b端后台管理系统，工具型操作系统。

构成
网站站点+分类栏目+导航功能


优点

• 易于浏览。用户习惯于使用 F 式的浏览路径，这使得内容更具可读性。
• 灵活度高，可搜索和展开。
• 样式和桌面端系统一致，一样的操作逻辑可以提高易用度。

场景

• b端后台管理系统。
• 工具类产品等。

交互
点击展开二级菜单/默认展开点击触达二级页面。包含的数量不多，但是满足用户在不同栏目中的跳转需求。提高用户完成任务的效率。

常规侧边导航

可收缩侧边导航

混合导航

顶部导航在B端页面一般结合侧边导航一起使用。并且侧边导航可根据产品页面需求来进行调整是否展示。

浮标导航

浮标导航一般由按钮来承载不同菜单入口，一般位于页面右下角，用于辅助功能。

使用原则

场景

原则

效率

1. 控制菜单数量。根据米勒定律，用户平均能记忆 5-9 个项目。过多的选项也会增加用户的选择负担。所以需要控制菜单的数量。
2. 逃生舱设计模式。点击logo可回到网站的首页。

清晰
信息架构层级清晰明了，建议1-2个层级，文案清晰，入口明确。