---
title: 导航菜单
slug: 导航菜单
category: 组件
figma_node_id: 1:10
figma_page_name: ＞导航菜单-需要更新
aliases: [Nav, Navigation, 主导航, side nav, top nav, 侧边栏]
last_extracted: 2026-05-19
status: needs_update
---

# 导航菜单

> 如流应用的主导航控件。桌面端采用左侧侧边导航 + 标签页（消息 / 工作台 / 知识 / 会议 / 文档 / 内部应用），移动端按顶部导航 + 底部 tab 双层布局。两套形态都覆盖默认态与选中态，并支持系统标题栏（mac @1x/@2x 切图）。

> ⚠️ 本页在 Figma 中被标注"需要更新"，内容可能不是最新版本。

## 类型与号型

### 桌面端：侧边导航（Side Nav）

桌面端导航位于应用左侧，自上而下排列以下一级 tab：

| Tab | 英文标识 | 功能 |
|---|---|---|
| 消息 | `tab_message_zh` | 即时通讯、消息中心 |
| 工作台 | `tab_workbench_zh` | 应用入口、工具集合 |
| 知识 | `tab_knowledge_zh` | 知识库、文档中心 |
| 会议 | `tab_meeting_zh` | 会议入口与日程 |
| 文档 | `tab_document_zh` | 文档列表与编辑 |
| 内部应用 | `tab_innerapp_zh` | 内部业务应用聚合入口 |
| 通话记录 | `tab_callRecords` | 通话历史 |
| 收藏 | `tab_collects` | 收藏夹 |
| 通讯录 | `tab_contacts` | 联系人 |
| 更多 | `tab_more` | 其他入口 |

每个 tab 同时提供「默认态」（如 `tab_message_zh`）与「按下 / 选中态」（同名加 `_down` 后缀，如 `tab_message_zh_down`）两套切图。

### 移动端：顶部导航 + 底部导航

移动端导航分两层：

| 形态 | 用途 | 关键内容 |
|---|---|---|
| 顶部导航 | 当前页面标题栏 | 标题区域 / 返回按钮 / 功能入口 / 搜索吸顶 |
| 底部导航 | 一级 Tab 切换 | 通话、通讯录、加号 等核心入口 |

底部导航的图标走「移动端工具栏」系列，例如：
- `移动端工具栏/通话`
- `移动端工具栏/加号`
- `图标/移动端/工具栏/通讯录`

顶部导航的图标走「移动端/顶部导航栏」系列：
- `图标/移动端/顶部导航栏/通话`（`22:677`）
- `图标/移动端/顶部导航栏/加号`（`22:684`）
- `图标/移动端/顶部导航栏/通讯录`（`22:688`）

## 尺寸规格

- 桌面端导航整体高度为页面满高，宽度由设计稿固定
- mac 系统标题栏切图按 `@1x` / `@2x` 提供两档分辨率
- 移动端导航分顶部、底部两条，由「内部版」与「商业版」共用同一规格
- 具体宽 / 高 dp 值未在本页 globalVars 中以独立 token 形式给出（参考 Figma 各 FRAME 实例的 dimensions）

## 状态

| 状态 | 视觉 | 应用 |
|---|---|---|
| 默认态（default） | 灰度图标 + 灰度文字 | 非选中 tab |
| 选中态（selected / down） | 主色高亮图标 + 强调文字 | 当前所在 tab |

桌面端切图通过 `_down` 后缀区分；移动端通过文字「默认态」「选中态」标签直接区分。

## 颜色与 token

| 用途 | hex | token 名 |
|---|---|---|
| 导航底色（白底） | `#FFFFFF` | `color-bg-1 / White` |
| 导航容器底（浅灰） | `#F7F8FA` | `C-Coolgray20`（通用可点击区域底色） |
| 装饰渐变（顶部光晕） | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 与按钮 / 步骤条同款的蓝色渐变装饰 |
| 群聊卡片底（轻渐变） | `linear-gradient(180deg, rgba(249,250,255,1) 0%, rgba(241,243,254,1) 100%)` | 群聊入口的浅紫蓝双段渐变 |
| 主文字 | `#11141A` | 顶部「侧边导航」标题文字 |
| 正文文字 | `#17181A` | 副标题、规则说明文字 |
| 强调描边 | `#D8D8D8` | 容器边线 / 占位灰 |
| 高饱和描边（粉红） | `rgba(232,23,138,0.24)` | Redlines 标注辅助色 |

> 关联 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

- 侧边导航的标题文字（"侧边导航"）位于导航容器顶部居中位置
- 移动端顶部导航的标题区域居中布局，最长标题截断后显示 `…`
- 移动端顶部导航右侧图标**最多 3 个**，超出的功能项需折叠
- 二级页顶部导航：热区为蓝色区域，**右侧图标最多 2 个**

### 顶部导航基础规则（移动端，原文摘录）

> - 标题栏右侧图标最多 3 个
> - 上滑搜索吸顶
> - 标题区域（居中）
> - 最长标题截断位置
> - 返回（必要）
> - 功能入口或操作
> - 可不展示
> - 超出后 …
> - 热区为蓝色区域

## 文案规则

- 一级 Tab 文案优先用 2–3 字（"消息" / "工作台" / "知识" / "会议" / "文档"）
- 二级页顶部标题超长时截断，行末加 `…`
- 内部版与商业版可共用同一套 Tab 文案

## 交互行为

### 桌面端侧边导航

- 点击 tab 切换主区域内容，当前选中 tab 切换到 `_down` 高亮态
- mac 切图按 `@1x / @2x` 在不同分辨率屏幕下自动切换
- 多语言版本通过 `_zh` 等后缀承载

### 移动端顶部导航

- 返回按钮（必要）位于顶部最左侧
- 功能入口或操作位于右侧，最多展示 3 个
- 上滑时搜索框吸顶，固定在顶部导航下方
- 标题居中，超出宽度后截断为 `…`

### 移动端底部导航

- 一级 Tab 间互斥，点击切换全屏内容
- 中央"加号"按钮承担创建 / 发起入口（如发起会议、新建文件）

## 示例

![桌面端导航菜单总览](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![移动端导航菜单总览](../图片/组件/导航菜单/mobilenav-menuoverview.png)
![桌面端tab-消息](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![桌面端tab-消息-选中态](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![桌面端tab-工作台](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![桌面端tab-知识](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![桌面端tab-会议](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![桌面端tab-文档](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![桌面端tab-内部应用](../图片/组件/导航菜单/desktopnav-menuoverview.png)
![移动端顶部导航-默认态](../图片/组件/导航菜单/mobilenav-menuoverview.png)
![移动端顶部导航-选中态](../图片/组件/导航菜单/mobilenav-menuoverview.png)
![移动端二级页顶部导航](../图片/组件/导航菜单/mobilenav-menuoverview.png)
![移动端底部导航](../图片/组件/导航菜单/mobilenav-menuoverview.png)

## 设计考量 / 原文摘录

> 标题栏右侧图标最多 3 个。
> 上滑搜索吸顶。
> 返回（必要）。
> 功能入口或操作 — 可不展示。
> 超出后 …。
> 热区为蓝色区域，最多 2 个（二级页）。

- **桌面端 / 移动端两条形态体系**：桌面端用侧边导航强调多 Tab 平铺，移动端用顶部 + 底部双层导航适配单手操作
- **图标分级管理**：所有导航图标按「顶部导航栏」「工具栏」分目录维护，与其他场景图标解耦
- **多语言通过 tab 标识符尾缀承载**：`_zh` 表示中文版本，便于扩展英文等其他语种

## 不推荐用法

- 移动端顶部右侧放置超过 3 个图标
- 二级页顶部右侧放置超过 2 个图标
- 桌面端侧边导航 tab 数超过 10 个（建议合并到"更多"）
- 顶部标题不截断、不加 `…` 直接溢出
- 自定义未在 Tab 体系中的导航 ID（应优先复用 `tab_*` 命名）

## 关联

- 导航中的图标资产见 [图标](../基础/图标.md)
- 顶部 / 底部导航的整体框架布局见 [框架功能布局](../主体框架/框架功能布局.md)
- 侧边/顶部框架的拉伸策略见 [框架拉伸策略](../主体框架/框架拉伸策略.md)
- 子菜单 / 下拉部分见 [下拉菜单](下拉菜单.md)
- 当前位置指示见 [面包屑](面包屑.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
