---
title: 搜索导航
slug: 搜索导航
category: 组件
figma_node_id: 1:48
figma_page_name: ＞导航
aliases: [SearchNav, 搜索导航, 搜索 tab, tab 切换, 搜索分类, 综合-人-消息记录]
last_extracted: 2026-05-20
status: ok
---

# 搜索导航

> 全局搜索内承载结果分类切换的二级 tab 导航条。位于搜索框下方、结果列表上方，提供"综合 / 人 / 消息记录"等多个分类入口的横向切换。区别于上层框架级的导航菜单（一级导航）。覆盖基础布局、交互状态、tab 渐变宽度三档号型。

## 类型与号型

| 类型 | 适用场景 |
|---|---|
| 综合 tab | 跨类型混合搜索结果 |
| 人 tab | 联系人 / 群成员等"人"类结果 |
| 消息记录 tab | 聊天历史搜索结果 |
| 其他垂类 tab | 文档、会议、应用等可扩展分类 |

> 搜索导航是搜索结果页的二级导航；上层框架级一级导航见 [导航菜单](导航菜单.md)。

### tab 宽度号型（基础布局）

| 名称字数 | tab 渐变宽度 |
|---|---|
| 1 个字 | 16px |
| 2 个字 + 时 | 26px |
| 大于两个字 | tab 宽度不变（按文本撑开，渐变宽度同 2 字号型） |

## 尺寸规格

数值来自 Figma `globalVars.styles`：

| 元素 | 宽 × 高 | 来源 token |
|---|---|---|
| 主体画板 | 1280 × 2400 | `layout_3KLZPN` |
| 综合 tab 容器（基础布局） | 696 × 38 | `layout_UT74S9` |
| 选中态指示条 | 26 × 4，圆角 9 / 100 / 100 / 0 | `layout_69OW9J` |
| 下划线 / 分割 | 696 × 0.5，色 `#E1E6F0` | `layout_12XUTO` + `fill_MQGPHO` |
| 选中态投影 | `0px 3px 5px rgba(0,51,255,0.2)` | `effect_AX24BU` |
| tab 名称 - 红色标注字号 | 12px Medium，字距 6.48% | `style_YJDP79` |
| 主标题（基础布局 / 交互状态 / 示例） | 24px Medium | `style_59BEJ8` |

### 圆角形态

| 形态 | 应用 |
|---|---|
| 直角 | 默认 tab |
| 圆角 | 局部 tab 装饰 |
| 全圆角 | 强调态 tab 或筛选标签 |

## 状态

| 状态 | 含义 |
|---|---|
| 默认态 | tab 文字 `#11141A`，下方分割线 `#E1E6F0` |
| 选中态 | 出现蓝色渐变指示条（26×4）+ 投影 |
| hover 态 | 文字 / 背景颜色变化，提示可点击 |
| 红色标注（设计稿） | Redlines 用 `#E8178A` 标尺寸，非视觉态 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 背景 | `#FFFFFF` = `White` | `fill_QKWE8B` |
| 主标题 / tab 文字 | `#11141A` | `fill_V0DLWV` |
| 分割线 | `#E1E6F0` = `C-Coolgray20` | `fill_MQGPHO` |
| 蓝色装饰条 | `#3377FF` = `Brandblue60` | `fill_RW3YO3`（10% 透明度堆叠） |
| 选中指示渐变 | `rgba(89,173,255,1) → rgba(51,119,255,1)` 135° | `fill_TTEC5T` |
| 红色标注 | `#E8178A` | `fill_U9WZJ2`（Redlines 用，非组件视觉） |
| 装饰渐变背景（页头 Union） | `linear-gradient(-64deg, rgba(51,119,255,0)→rgba(51,119,255,0.06))` | `fill_2Z6FVH` |
| 灰色说明文字 | `#878D99` = `C-Coolgray60` | `fill_3QUSFB` |
| 边框红色虚线（标注） | `#FA4B5A` | `fill_I0Z34T`（设计辅助） |

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

## 间距与排布

- 整页画板宽度 1280px
- 三块主区域纵向排列：基础布局（y=332）→ 交互状态（y=1070）→ 示例（y=1563）
- tab 与分割线之间间距固定，分割线宽 0.5px、色 `#E1E6F0`
- 选中态指示条位于 tab 文字正下方，宽 26、高 4，渐变 + 投影
- "下划线 #E1E6F0" 是 Figma 内的色值注解（指代分割线 token）

## 交互行为

- **默认 → 选中**：点击 tab，下方出现蓝色渐变指示条，伴随轻微投影
- **选中切换**：指示条横向滑动到目标 tab 下方，旧 tab 指示条消失
- **tab 宽度策略**：tab 宽度按文字撑开；选中指示条的"渐变宽度"按字数选号型（1 字 16px / 2 字 26px / 多字保持 26px）
- **超出可视区**：长 tab 列表可横向滚动（图内未直接演示，参照 1280 宽度内"综合 / 人 / 消息记录" 等若干 tab 均可见）
- **hover 提示**：hover 时颜色变蓝，提示可点击（同导航菜单的 hover 规则）

## 示例

![搜索导航-基础布局](../图片/组件/搜索导航/baselayout.png)
![搜索导航-1字tab](../图片/组件/搜索导航/baselayout.png)
![搜索导航-2字tab](../图片/组件/搜索导航/baselayout.png)
![搜索导航-多字tab](../图片/组件/搜索导航/baselayout.png)
![搜索导航-直角形态](../图片/组件/搜索导航/baselayout.png)
![搜索导航-圆角形态](../图片/组件/搜索导航/baselayout.png)
![搜索导航-全圆角形态](../图片/组件/搜索导航/baselayout.png)
![搜索导航-交互状态](../图片/组件/搜索导航/baselayout.png)
![搜索导航-示例-人tab](../图片/组件/搜索导航/baselayout.png)
![搜索导航-示例-消息记录tab](../图片/组件/搜索导航/baselayout.png)

## 设计考量 / 原文摘录

> 大于两个字 tab 宽度不变。
> 名称：1 个字（tab 渐变宽度 16px）。
> 名称：2 个字 + 时（tab 渐变宽度 26px）。
> 下划线 #E1E6F0。

- **字数选号型**：避免短字 tab 指示条过长 / 长字 tab 指示条过短，按字数枚举三档
- **指示条独立**：tab 宽度跟文字走，指示条宽度跟字数走，二者解耦
- **保留多形态圆角**：直角 / 圆角 / 全圆角并存，便于在不同场景（结果列表 tab vs 筛选标签）选用
- **与一级导航分离**：搜索导航服务于结果分类切换，不承担框架级导航职能

## 不推荐用法

- 在搜索导航位置使用全圆角 tab + 选中投影，与框架级导航视觉冲突
- 把 1 字 tab 的指示条做成 26px，视觉过宽
- 改变 tab 间距让长 tab 截断 ……（应让 tab 跟文字宽度走，必要时横向滚动）
- 用搜索导航替代一级框架导航 [导航菜单](导航菜单.md)

## 关联

- 搜索入口见 [搜索框](搜索框.md)
- 结果展示见 [结果列表](结果列表.md)
- 联想词见 [suglist](suglist.md)
- 筛选条件见 [筛选器](筛选器.md)
- 框架级一级导航见 [导航菜单](导航菜单.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
