一、概览（Overview）
1. 设计原则
- 使用菜单（menu）来展示一组临时性的操作（actions）。如果需要始终在屏幕上显示操作，请改用工具栏（toolbar）。
- 菜单（menus）可以从多种组件打开，包括图标按钮（icon buttons）、拆分按钮（split buttons）和文本字段（text fields）。
- 上下文菜单（context menus）为某个特定元素提供操作，例如图片或被高亮的文本，并且通常通过辅助点击（secondary click）打开。
垂直菜单（vertical menus）可以通过醒目的颜色（vibrant colors）、间隔（gaps）、分隔线（dividers）与子菜单（submenus）来组织一组选项列表。
2. M3 Expressive 更新
2025 年 11 月
垂直菜单（vertical menus）引入了新的形状（shapes）、色彩样式（color styles）、选择状态（selection states），以及更精细的子菜单动效（submenu motion）。
在 Android 上可以使用间隔（gaps），以获得更灵活的布局。
变体（Variants）：
- 新增垂直菜单（vertical menus），推荐用于新的设计
- 基线菜单（baseline menu）仍然可用
色彩样式（Color styles）：
- 标准（Standard）
- 鲜明（Vibrant）
鲜明的颜色（vibrant colors）能让被选中的菜单项（selected menu items）更突出
3. 与 M2 的差异
颜色（Color）：新的颜色映射（color mappings），并与动态颜色（dynamic color）兼容
变体（Variants）：下拉菜单（dropdown menu）与外露下拉菜单（exposed dropdown menu）现在都统一称为菜单（menu），因为它们的差异仅在于用于打开菜单表面（menu surface）的元素不同
M2（左图）：旧版菜单颜色与背景对比不足（Former menu colors don’t contrast with the background）
M3（右图）：菜单采用新的颜色映射（color mappings）并支持动态颜色（dynamic color）
二、规格（Specs）
1. 变体
1.1 垂直菜单（Vertical menus）
使用垂直菜单（vertical menus）以获得更具表现力的外观与体验，包括圆角（rounded corners）、标准与鲜明两种色彩样式（standard and vibrant color styles）、更多的选择状态（selection states），以及子菜单动效（submenu motion）。
① 带间隔（gap）的垂直菜单（Vertical menu）
② 带分隔线（divider）的垂直菜单（Vertical menu）
1.2 基线变体（Baseline variant）
在 M3 Expressive 中，基线菜单（baseline menu）仍然可用，但不包含最新的形状（shapes）、色彩样式（color styles）、选择状态（selection states）与动效（motion）。查看基线菜单规格（baseline menu specs）。
与垂直菜单（vertical menu）的圆角与更具表现力的样式相比，基线菜单（baseline menu）采用直角（square corners）
| 变体（Variant） | M3 | M3 Expressive |
|---|---|---|
| 垂直菜单（Vertical menus） | -- | 可用（Available） |
| 菜单（基线）（Menu ( baseline)） | 可用（Available） | 可用（Available） |
2. 配置
垂直菜单布局（Vertical menus layout）
① 标准（Standard） ② 分组（Grouped）
| 类别（Category） | 配置（Configuration） | M3 | M3 Expressive |
|---|---|---|---|
| 颜色（Color） | 标准（Standard） | 可用（Available） | 可用（Available） |
| 颜色（Color） | 鲜明（Vibrant） | -- | 可用（Available） |
| 布局（Layout） | 标准（Standard） | 可用（Available） | 可用（Available） |
| 布局（Layout） | 分组（Grouped） | -- | 可用（Available） |
3. 结构
垂直菜单（Vertical menus）
① 菜单项（Menu item）
② 前置图标（Leading icon，可选）
③ 菜单项文本（Menu item text）
④ 后置图标（Trailing icon，可选）
⑤ 徽标（Badge，可选）
⑥ 后置文本（Trailing text，可选）
⑦ 容器（Container）
⑧ 辅助文本（Supporting text，可选）
⑨ 标签文本（Label text，可选）
⑩ 间隔（Gap，可选）
⑪ 分隔线（Divider，可选）
4. 颜色
颜色值通过设计令牌（design tokens）来实现。对设计师而言，这意味着你要使用与令牌相对应的颜色值进行工作。对实现而言，一个颜色值会是一个令牌，用来引用某个具体的值。
菜单（Menus）有两种颜色映射（color mappings）：
- 标准（Standard）：基于表面（Surface-based）
- 鲜明（Vibrant）：基于第三级（Tertiary-based）
这些映射提供了低或高视觉强调度的选择。鲜明菜单（Vibrant menus）更突出，因此应谨慎使用。
① 标准配色方案（Standard color scheme） ② 鲜明配色方案（Vibrant color scheme）
4.1 标准颜色（Standard colors）
用于浅色与深色主题的垂直菜单（Vertical menus）颜色角色如下：
① 表面变体上的颜色（On surface variant）
② 表面上的颜色（On surface）
③ 表面上的颜色（状态层）（On surface (state layer)）
④ 低表面容器（Surface container low）
⑤ 表面变体上的颜色（On surface variant）
⑥ 表面变体上的颜色（On surface variant）
⑦ 第三级容器（已选中）（Tertiary container (selected)）
⑧ 第三级容器上的颜色（已选中）（On tertiary container (selected)）
⑨ 表面变体上的颜色（On surface variant）
⑩ 表面变体上的颜色（On surface variant）
