---
title: 下拉菜单
slug: 下拉菜单
category: 组件
figma_node_id: 1:11
figma_page_name: ＞下拉菜单
aliases: [Dropdown, Menu, Cascader, 下拉, 级联菜单]
last_extracted: 2026-05-19
status: ok
---

# 下拉菜单

> 用于加号、点等图标点击后弹出的功能菜单或下拉选择器。桌面端覆盖类型一（纯文本）/ 类型二（图标+文本）/ 类型三（图标+标题+辅助信息）三种内容形态、三种对齐方式（左/右/居中）与大小两档尺寸；移动端覆盖选择器入口与列表入口两类，状态枚举默认 / 未选 / 选中 / 按下四态。

## 类型与号型

### 桌面端：按内容形态分

| 类型 | 内容 | 适用场景 |
|---|---|---|
| 类型一：纯文本 | 单行文字 | 无图标用于轻量化的功能菜单的展示 |
| 类型二：图标 + 文本 | 图标 + 单行文字 | 中等信息密度的功能菜单 |
| 类型三：图标 + 标题 + 辅助信息 | 图标 + 标题 + 辅助说明 | 必要有辅助信息加以解释说明或者补充的场景使用 |

### 桌面端：按弹出位置 / 对齐分

| 对齐方式 | 用途 |
|---|---|
| 左对齐 | 入口图标在左侧时使用 |
| 右对齐 | 入口图标在右侧时使用 |
| 居中对齐 | 入口图标居中或视觉关系需要居中时使用 |

> 根据实际使用场景的视觉关系，提供与图标左对齐、右对齐、居中对齐三种位置关系。

### 桌面端：按尺寸分

| 尺寸 | 应用场景 |
|---|---|
| 大尺寸 | 用于框架等功能菜单入口 |
| 小尺寸 | 用于页面中功能菜单 |

> 提供两种尺寸：大尺寸用于框架等功能菜单入口；小尺寸用于页面中功能菜单。

### 移动端：按入口类型分

| 类型 | 视觉 | 适用 |
|---|---|---|
| 选择器入口 | 文字 + 下拉图标 | 单个 / 多个出现的下拉选择器 |
| 列表入口 | 列表项 | 详细状态类型可参考列表规范 |

- **图标入口**：图标承担触发角色
- **文字入口**：文字承担触发角色

## 尺寸规格

- 桌面端画板：1280 × 2340 px
- 移动端画板：1280 × 2340 px（同尺寸 FRAME，沿用统一 `layout_ZB6DC7`）

### 桌面端尺寸要点

- 最小宽度：**110px**（以最长文本的宽度自适应，但不小于此最小值）
- 类型一 / 二的容器：常用 110×120 / 110×128 px
- 居中对齐变体容器：120×120 px
- 类型三（图标 + 标题 + 辅助信息）容器：190×232 px
- 小尺寸功能菜单容器：约 138×208 / 112×120 px

### 移动端尺寸要点

- 浮层宽度**随文字最大字数自适应**
- 字数限制：**文字最多 6 个**
- 最小宽度：**140px**
- 下拉选项行高：18px（字号 13px，行高 18px）
- 选项区域容器：160×184 / 140×184 px（视字数）

## 状态

| 状态 | 含义 | 移动端文字标识 |
|---|---|---|
| 默认（default） | 未交互的常态 | 默认 |
| 未选（unselected） | 列表项未选中的常态 | 未选 |
| 选中（selected） | 列表项处于选中态 | 选中 |
| 按下（pressed/down） | 触摸 / 鼠标按下瞬时态 | 按下 |

桌面端状态分类相对简化，主要靠尺寸 + 对齐 + 内容形态的多维交叉组合表达层级，状态枚举可参考列表规范。

## 颜色与 token

| 用途 | hex | token 名 |
|---|---|---|
| 浮层背景 | `#FFFFFF` | `color-bg-1 / White` |
| 浮层装饰渐变 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 与按钮 / 步骤条同款主色光晕 |
| 主标题文字 | `#11141A` | 24px Medium 大标题 |
| 标签 / 入口文字 | `#17181A` | 12px Medium 入口文字 |
| 辅助说明文字 | `#878D99` | `C-Coolgray60` 12px 辅助文案 |
| 下拉选项文字（移动端） | `#5C6473` | 13px Regular 下拉选项 |
| 飘新提示色（强调） | `#E8178A` | 高饱和粉红，用于标注新功能 / 提示「默认 / 未选 / 选中 / 按下」标签 |
| overlay 占位灰 | `#F2F4F7` | `C-Coolgray30` 演示用占位矩形 |

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

## 间距与排布

- 桌面端典型容器尺寸（width × height）：
  - 小型功能菜单：110 × 120 / 110 × 128 px
  - 居中对齐变体：120 × 120 px
  - 图标+标题+辅助信息型：190 × 232 px
- 移动端典型容器：
  - 选项弹层：160 × 184 / 140 × 184 px
  - 下拉选项行：约 66 × 18 / 52 × 18 px
- 字体规范：
  - 大标题：PingFang SC Medium 24px / 行高 24px
  - 入口标题：PingFang SC Medium 12px / 行高 12px
  - 辅助说明：PingFang SC Regular 12px
  - 移动端下拉选项：PingFang SC Regular 13px / 行高 18px

## 文案规则

> 以最长文本的宽度自适应，有最小宽度限制 110px；文案不建议过长，整体文案尽量和谐。
>
> 浮层宽度随文字最大字数自适应；文字最多 6 个，宽度最小 140px。

- 单选项文字优先 2–4 字（如 "全部"、"已完成"）
- 移动端下拉选项**不超过 6 字**
- 类型三（带辅助信息）的标题尽量精炼；辅助信息控制在一行内
- 多个选项的文字字数力求接近，避免视觉宽度跳变

## 交互行为

### 弹出与定位

- 加号、点等图标点击后弹出菜单
- 桌面端按视觉关系选择左对齐 / 右对齐 / 居中对齐三种弹出位置
- 移动端选择器入口的下拉浮层**一般右对齐**

### 触发图标视觉差异

- **线性下拉图标**：与文字组合，**一般用于单个出现的下拉选择器**
- **面性下拉图标**：与文字组合，**一般用于多个出现的下拉选择器**

### 选项交互

- 点击选项触发对应动作 / 选中态切换
- 按下态用于触摸反馈，时长应短促
- 详细状态类型可参考列表规范

## 示例

![桌面端下拉菜单总览](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端类型一-纯文本](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端类型二-图标加文本](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端类型三-图标加标题加辅助信息](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端对齐-左对齐](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端对齐-右对齐](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端对齐-居中对齐](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端尺寸-大尺寸](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![桌面端尺寸-小尺寸](../图片/组件/下拉菜单/desktopdropdowncai-danoverview.png)
![移动端下拉菜单总览](../图片/组件/下拉菜单/mobiledropdowncai-danoverview.png)
![移动端选择器入口](../图片/组件/下拉菜单/mobiledropdowncai-danoverview.png)
![移动端列表入口](../图片/组件/下拉菜单/mobiledropdowncai-danoverview.png)
![移动端线性下拉图标](../图片/组件/下拉菜单/mobiledropdowncai-danoverview.png)
![移动端面性下拉图标](../图片/组件/下拉菜单/mobiledropdowncai-danoverview.png)

## 设计考量 / 原文摘录

> 用于加号、点等 icon 点击后的弹出菜单。
>
> 以最长文本的宽度自适应，有最小宽度限制 110px；文案不建议过长，整体文案尽量和谐。
>
> 无图标用于轻量化的功能菜单的展示。
>
> 提供两种尺寸：大尺寸用于框架等功能菜单入口；小尺寸用于页面中功能菜单。
>
> 必要有辅助信息加以解释说明或者补充的场景使用。
>
> 根据实际使用场景的视觉关系，提供与图标左对齐、右对齐、居中对齐三种位置关系。
>
> 浮层宽度随文字最大字数自适应；文字最多 6 个，宽度最小 140px。
>
> 文字与线性下拉图标组合，一般用于单个出现的下拉选择器。
>
> 文字与面性下拉图标组合，一般用于多个出现的下拉选择器。
>
> 详细状态类型可参考列表规范。

- **桌面端三种内容形态对应三档信息密度**：纯文本 → 图标 + 文本 → 图标 + 标题 + 辅助信息
- **入口图标的线性 / 面性切换暗示数量**：单个出现用线性、批量出现用面性，提示用户视觉分组
- **居中对齐属于"视觉关系决定"，不是默认值**：仅在入口图标居中时启用

## 不推荐用法

- 移动端下拉选项文字超过 6 字
- 桌面端浮层宽度小于 110px、移动端小于 140px
- 类型一（纯文本）用于需要辅助信息说明的复杂场景
- 在同一页面混用线性与面性下拉图标且语义不区分
- 弹出位置不遵循图标对齐关系（如图标在左却使用居中对齐）

## 关联

- 触发下拉的"加号、点等图标"见 [图标](../基础/图标.md)
- 下拉项状态详细规范见 [列表](列表.md)
- 选择器入口的相关控件见 [下拉选择](下拉选择.md)
- 浮层 / 弹出层基础规范见 [浮层](浮层.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
