← 返回多端学习对照表

Material Design

Material Design 组件库，按分类组织，共 0 个组件档案。

一、 导航类 (Navigation)

承载页面层级与目的地切换的骨架组件。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
1
顶部应用栏
Top App Bar
/tɒp æp bɑːr/
 页面顶部的应用级容器，承载标题、导航图标与主要操作；包括小型 (Small)、居中 (Center-aligned)、中型 (Medium) 和大型 (Large) 等多种变体。
  • 不要在同一 App 内混用多种变体(视觉不一致)。
  • 不要在栏内堆超过 3 个操作图标。
  • 不要用大号变体承载需常驻可见的操作(滚动后标题会收起)。
  • 一级页顶部标题与操作。
  • 长页面滚动时大标题折叠为小标题。
  • 核心构成：前导导航图标(菜单/返回)、标题、尾部操作区(≤3)、可选副标题/搜索；Large 变体滚动时折叠。
间距：Small 64dp / Medium 112dp / Large 152dp；标题 22sp；图标 24dp；左右内边距 4–16dp。红线拆解图待补。
 Default、Scrolled(阴影/收起)、Expanded(Large 展开)、Collapsed。
  • Small(64dp)
  • Center-aligned(标题居中)
  • Medium(112dp)
  • Large(152dp)
  • 高度：64 / 112 / 152dp。
  • 标题：22sp。
  • 图标：24dp。
  • Elevation：0–3。
  • 触发：点击前导图标(抽屉/返回)、尾部操作。
  • 反馈：滚动时 elevation 提升或大标题折叠；点击有水波纹。
  • 热区 ≥48dp。
  • <header> + <h1>；Material TopAppBar。
  • 需避让状态栏；对比度 AA。
2
底部导航栏
Navigation Bar
/ˌnævɪˈɡeɪʃən bɑːr/
 应用最顶层的核心导航，通常包含 3–5 个导航项 (NavigationBarItem)。
  • 不要少于 3 项或超过 5 项。
  • 不要用它承载非顶级页面。
  • 不要只留图标隐藏文字标签。
  • 3–5 个平级一级页面的 App(首页/搜索/消息/我的)。
  • 移动端主骨架导航。
  • 核心构成：等分导航项(图标 + 文字标签)、选中指示胶囊(pill)、顶部可选分隔/elevation、底部系统手势区避让。
间距：高 80dp；图标 24dp；标签 12sp；指示胶囊 64×32dp；各项等分。红线拆解图待补。
 Default、Selected(胶囊 + 图标填充)、Pressed、Badge(角标)。
  • 3 项
  • 4 项
  • 5 项
  • 带徽标
  • 带中间 FAB(不推荐)
  • 高度：80dp。
  • 图标：24dp；标签：12sp。
  • 指示胶囊：64×32dp。
  • Elevation：2。
  • 触发：点击导航项。
  • 反馈：指示胶囊滑动 + 图标填充动画；页面切换不产生深层层级。
  • 热区 ≥48dp(整项可点)。
  • <nav> + 当前项 aria-current。
  • Material NavigationBar；底部 safe-area 避让。
3
导航抽屉
Navigation Drawer
/ˌnævɪˈɡeɪʃən ˈdrɔːər/
 侧滑菜单，包括模态 (Modal)、永久 (Permanent) 和可关闭 (Dismissible) 等类型。
  • 不要与底部导航栏同时承担同一层级导航。
  • 不要层级过深(>3 级)。
  • Modal 抽屉不要在无返回路径时打开。
  • 5 个以上目的地、账号切换、设置入口。
  • 平板/桌面端常驻侧栏。
  • 核心构成：容器、头部(标题/账号)、目的地列表(图标+文字)、可选分组标签、选中项胶囊；Modal 附遮罩。
间距：宽 360dp(标准)；列表项高 56dp；Modal 右侧圆角 16dp；内边距 12dp。红线拆解图待补。
 Default、Selected(胶囊背景)、Pressed、Open/Closed(Modal)、Scrim 遮罩。
  • Modal(浮于内容+遮罩)
  • Permanent(常驻)
  • Dismissible(可关闭)
  • Standard(与内容并排)
  • 宽度：360dp。
  • 项高：56dp。
  • Modal 圆角：16dp。
  • Elevation：1–2。
  • 触发：点击菜单图标滑出；Modal 侧滑或点遮罩关闭。
  • 反馈：抽屉滑入(200–300ms)；选中项高亮胶囊。
  • 热区 ≥48dp。
  • <nav> + 触发按钮 aria-expanded。
  • Material NavigationDrawer；Modal 需焦点陷阱。
4
导航轨道
Navigation Rail
/ˌnævɪˈɡeɪʃən reɪl/
 主要用于平板等大屏设备，位于侧边的垂直导航。
  • 不要在手机窄屏使用(挤压内容)。
  • 不要与底部导航同时出现。
  • 目的地不要超过 7 项。
  • 平板、折叠屏展开态、桌面端等中大屏布局。
  • 手机竖屏时可退化为底部导航。
  • 核心构成：垂直容器、顶部可选 FAB / 菜单图标、3–7 个目的地项(图标+标签)、选中指示胶囊、底部可选项。
间距：宽 80dp；项高 56dp；图标 24dp；标签 12sp；指示胶囊 56×32dp。红线拆解图待补。
 Default、Selected(胶囊指示)、Pressed、Expanded(带标签)。
  • 仅图标
  • 图标+标签
  • 带顶部 FAB
  • 带底部入口
  • 宽度：80dp。
  • 项高：56dp。
  • 图标：24dp；标签：12sp。
  • 断点：≥600dp 启用。
  • 触发：点击目的地项。
  • 反馈：指示胶囊滑动；右侧内容区同步切换。
  • 热区 ≥48dp。
  • <nav> + aria-current。
  • Material NavigationRail；响应式按宽度断点切换。
5
标签页
Tabs
/tæbz/
 用于同级内容的切换，包括固定和可滚动的标签行 (TabRow / ScrollableTabRow)。
  • 不要用于跨层级导航(那是导航栏职责)。
  • 不要标签过多仍用固定样式(应改滚动)。
  • 不要标签文字过长导致截断。
  • 同层级内容的分类切换(全部/图片/视频)。
  • 设置页分组切换。
  • 核心构成：标签行容器、标签项(文字±图标)、选中下划线指示器、可选徽标、可滚动时的左右渐变。
间距：高 48dp(纯文字)/64dp(图标+文字)；指示器 3dp；标签间距 16–24dp。红线拆解图待补。
 Default、Selected(指示器 + 文字加粗)、Pressed、Disabled、Scrolled。
  • Primary(主标签)
  • Secondary(次级标签)
  • Fixed(固定等分)
  • Scrollable(可滚动)
  • 高度：48 / 64dp。
  • 指示器：3dp。
  • 文字：14sp。
  • 可滚动标签最小宽：90dp。
  • 触发：点击标签，或左右滑动内容(可选)。
  • 反馈：指示器滑动过渡(300ms)；内容区切换。
  • 热区 ≥48dp。
  • role="tablist" + role="tab" + aria-selected。
  • Material TabRow / ScrollableTabRow。
6
底部应用栏
Bottom App Bar
/ˈbɒtəm æp bɑːr/
 位于屏幕底部，常用于放置主要操作。
  • 不要与底部导航栏混用承担导航。
  • 不要放超过 4 个操作图标。
  • 不要遮挡内容(需给内容留白)。
  • 内容页底部的上下文操作(编辑/分享/删除)。
  • 与 FAB 组合承载主操作。
  • 核心构成：水平容器、前导区(菜单/导航)、操作图标组(≤4)、可选内嵌 FAB(缺口/贴合)。
间距：高 80dp；图标 24dp；FAB 直径 56dp；左右内边距 16dp。红线拆解图待补。
 Default、Pressed、Disabled、With-FAB(内嵌/贴合)。
  • 仅操作图标
  • 内嵌 FAB(notched)
  • 贴合 FAB(attached)
  • 带文字按钮
  • 高度：80dp。
  • 图标：24dp。
  • FAB：56dp。
  • Elevation：3。
  • 触发：点击操作图标或 FAB。
  • 反馈：点击水波纹；滚动时可隐藏(可选)。
  • 热区 ≥48dp。
  • role="toolbar"。
  • Material BottomAppBar；底部 safe-area 避让。

二、 操作与输入类 (Actions & Input)

触发动作、接收用户输入与状态调节的组件。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
7
按钮
Buttons
/ˈbʌtənz/
 触发即时动作的基础组件，包括实心 (Filled)、抬高 (Elevated)、色调填充 (FilledTonal)、描边 (Outlined) 和文本 (Text) 按钮。
  • 不要一屏出现多个实心主按钮(层级失焦)。
  • 不要用 Elevated 表达主操作(应为 Filled)。
  • 不要用文本按钮承载破坏性操作(强调不足)。
  • 表单提交、对话框确认。
  • 页面主次操作分层。
  • 核心构成：全圆角容器、标签文字、可选前/后图标、内边距；五形态靠填充/描边/阴影区分。
间距：高 40dp；圆角 20dp；水平内边距 24dp(带图标 16dp)；图标 18dp；文字 14sp；最小宽 58dp。红线拆解图待补。
 Enabled、Hovered、Focused、Pressed、Disabled。
  • Filled(实心)
  • Elevated(抬高)
  • FilledTonal(色调填充)
  • Outlined(描边)
  • Text(文本)
  • 高度：40dp。
  • 圆角：20dp。
  • 标签：14sp。
  • 图标：18dp；最小宽 58dp。
  • 触发：轻点。
  • 反馈：状态层叠加(8%/12%)；涟漪从触点扩散。
  • 热区 ≥48dp。
  • <button> + aria-label。
  • Material Button；禁用用 disabled。
8
图标按钮
Icon Button
/ˈaɪkɒn ˈbʌtən/
 仅包含图标的按钮，同样有实心、色调、描边等多种样式。
  • 不要用无 aria-label 的纯图标(不可读)。
  • 不要用语义含糊的图标。
  • 不要一行堆 >5 个图标按钮。
  • 顶部应用栏操作。
  • 工具栏、紧凑区域的次级操作。
  • 核心构成：圆形/圆角容器、24dp 图标、可选选中态填充；标准/填充/色调/描边四形态。
间距：容器 40dp；图标 24dp；小号容器 32dp/图标 20dp；圆角全圆。红线拆解图待补。
 Enabled、Pressed、Selected(填充)、Disabled、Toggled。
  • Standard
  • Filled(实心)
  • FilledTonal(色调)
  • Outlined(描边)
  • 尺寸 32/40/48/56dp
  • 容器：40dp。
  • 图标：24dp。
  • 圆角：全圆。
  • Elevation：0–1。
  • 触发：轻点。
  • 反馈：选中态填充色变化；涟漪；切换型有状态记忆。
  • 热区 ≥48dp。
  • aria-label 必填；切换型加 aria-pressed。
  • Material IconButton。
9
悬浮操作按钮
FAB
/fæb/
 承载页面最高频单一操作，包括标准、小型、大型以及扩展型 (Extended FAB)。
  • 不要放次要操作。
  • 不要一屏出现多个 FAB。
  • 不要在无明确主操作时强行添加。
  • 新建/发布/写邮件等主操作。
  • 贴合底部应用栏承载主入口。
  • 核心构成：圆角容器、24dp 图标、Extended 变体附加文字标签；可贴合底部应用栏缺口。
间距：标准 56dp / 小型 40dp / 大型 96dp；Extended 高 56dp、圆角 16dp；图标 24dp；文字 14sp。红线拆解图待补。
 Enabled、Hovered、Pressed、Focused、Disabled。
  • 标准 56dp
  • 小型 40dp
  • 大型 96dp
  • Extended(带文字)
  • 贴合 Bottom App Bar
  • 尺寸：56 / 40 / 96dp。
  • Extended：高 56dp、圆角 16dp。
  • Elevation：6。
  • 触发：轻点执行或展开。
  • 反馈：水波纹；滚动时可缩放隐藏；Extended 可展开/收起文字。
  • 热区 ≥48dp。
  • aria-label；Material FloatingActionButton。
  • 避免遮挡内容，需内容留白。
10
复选框
Checkbox
/ˈtʃɛkbɒks/
 支持双态和不确定态 (TriStateCheckbox)。
  • 不要用于互斥单选(应用 Radio)。
  • 不要无标签只留方框。
  • 不要把不确定态当选中态使用。
  • 多选列表。
  • 全选/半选(父项聚合)。
  • 条款同意。
  • 核心构成：18dp 方框、勾/横线标记、可选标签文字、48dp 触控热区。
间距：方框 18dp；圆角 2dp；热区 48dp；标签 16sp；方框与文字间距 8dp。红线拆解图待补。
 Unchecked、Checked、Indeterminate、Disabled、Error、Hovered/Focused/Pressed。
  • 双态
  • 三态(不确定)
  • 带标签
  • 错误态
  • 仅方框
  • 方框：18dp；圆角 2dp。
  • 热区：48dp。
  • 标签：16sp。
  • 触发：点击方框或标签切换。
  • 反馈：勾线绘制动画(150–200ms)；不确定态显示横线。
  • 热区 ≥48dp。
  • <input type="checkbox">；三态用 aria-checked="mixed"。
  • 与 <label> 关联。
11
单选框
Radio Button
/ˈreɪdioʊ ˈbʌtən/
 用于一组互斥选项中的单选。
  • 不要孤立使用(一组至少 2 项)。
  • 不要与复选框混用语义。
  • 不要在无合理默认时预选某项。
  • 互斥设置项(性别/配送方式/支付方式)。
  • 少量选项的必选一处。
  • 核心构成：20dp 外圆、选中内圆点、可选标签、热区；按组纵向排列。
间距：外圆 20dp；内点 10dp；热区 48dp；标签间距 8dp；组内项间距 8–16dp。红线拆解图待补。
 Unselected、Selected、Disabled、Error、Hovered/Focused/Pressed。
  • 标准
  • 带标签
  • 错误态
  • 无标签(紧凑)
  • 外圆：20dp。
  • 内点：10dp。
  • 热区：48dp。
  • 标签：16sp。
  • 触发：点击选中，互斥且不可反选。
  • 反馈：内圆缩放出现；涟漪。
  • 热区 ≥48dp。
  • <input type="radio"> 同 name；容器 role="radiogroup"。
  • 方向键在组内切换。
12
开关
Switch
/swɪtʃ/
 用于开启/关闭某个设置的二元状态。
  • 不要用于需"提交"才生效的场景(它即时生效)。
  • 不要与复选框混用语义。
  • 不要缺少关闭态的视觉对比。
  • 设置页开关(通知/深色模式/自动更新)。
  • 即时生效的二元偏好。
  • 核心构成：轨道、滑块(thumb)、可选轨内图标、标签文字。
间距：轨道 52×32dp；滑块 16dp(关)/24dp(开)；热区 48dp；标签 16sp。红线拆解图待补。
 Off、On、Disabled、Hovered/Focused/Pressed、Error。
  • 标准
  • 带图标
  • 仅轨道(无标签)
  • 轨道：52×32dp。
  • 滑块：16 / 24dp。
  • 圆角：全圆。
  • 选中色：primary。
  • 触发：点击或拖动切换。
  • 反馈：滑块滑动 + 轨内图标切换动画；即时生效无需确认。
  • 热区 ≥48dp。
  • role="switch" + aria-checked。
  • 整行可点；键盘空格切换。
13
滑块
Slider
/ˈslaɪdər/
 用于调节数值区间。
  • 不要用于需要精确输入的场景(应配合输入框)。
  • 不要不显示当前值。
  • 不要在离散少选项时使用(应用分段控件)。
  • 音量/亮度/价格区间/评分。
  • 筛选范围调节。
  • 核心构成：轨道(已选/未选段)、滑块手柄、可选刻度与数值气泡；MD3 手柄为竖条状。
间距：轨道高 4dp；手柄 4×44dp(视觉 20dp)；热区 48dp；刻度均分。红线拆解图待补。
 Enabled、Hovered、Focused、Pressed、Disabled。
  • 连续
  • 离散(带刻度)
  • 区间(双滑块)
  • 带数值气泡
  • 带图标端点
  • 轨道：4dp。
  • 手柄：宽 4dp × 高 44dp。
  • 热区：48dp。
  • 圆角：全圆。
  • 触发：拖动手柄或点击轨道跳转。
  • 反馈：跟手位移 + 数值气泡；键盘方向键微调。
  • 热区 ≥48dp。
  • role="slider" + aria-valuenow/min/max。
  • 键盘可操作；值变化实时播报。
14
文本输入框
Text Field
/tɛkst fiːld/
 包括填充式 (Filled) 和描边式 (Outlined) 两种主要变体。
  • 不要用占位符替代标签(失焦后丢失上下文)。
  • 不要等到提交才提示错误。
  • 不要在同一表单混用两种变体。
  • 表单录入、登录注册。
  • 搜索与筛选输入。
  • 核心构成：容器(Filled 有底色 / Outlined 有边框)、浮动标签、输入文本、前后缀图标、辅助/错误文字、计数器。
间距：高 56dp；标签 16sp(浮动后 12sp)；辅助文字 12sp；内边距 16dp；圆角 4dp。红线拆解图待补。
 Enabled、Hovered、Focused、Error、Disabled、Read-only。
  • Filled(填充式)
  • Outlined(描边式)
  • 多行(Textarea)
  • 带前后缀图标
  • 带字符计数
  • 高度：56dp。
  • 标签：16sp / 12sp。
  • 辅助文字：12sp。
  • 边框：1dp(聚焦 2dp)。
  • 触发：点击聚焦。
  • 反馈：标签浮动上移；聚焦边框变色；实时校验错误。
  • 热区 ≥48dp。
  • <input> + <label> 关联；aria-invalid + aria-describedby。
  • Material TextField。
15
日期选择器
Date Picker
/deɪt ˈpɪkər/
 包括单日选择 (DatePicker) 和日期范围选择 (DateRangePicker)。
  • 不要无快捷选项(今天/本周/最近 7 天)。
  • 不要禁用日期却不说明原因。
  • 不要在小屏弹出超出屏幕的日历。
  • 预约、筛选日期范围。
  • 生日/有效期等日期录入。
  • 核心构成：日历网格(星期头 + 日期单元)、月份切换箭头、模式切换(日历/输入)、确认/取消、范围选择双端高亮。
间距：模态容器宽 328dp；日期单元 40dp；容器圆角 20dp；表头 12sp。红线拆解图待补。
 Default、Selected(圆底)、Range(区间高亮)、Today(描边)、Disabled、Error。
  • Docked 模态
  • 日历/输入双模式
  • 日期范围
  • 月份/年份选择
  • 容器宽：328dp。
  • 日期单元：40dp。
  • 圆角：20dp。
  • 文字：14sp。
  • 触发：点击日期选中；范围选择依次选起止。
  • 反馈：月份切换滑动；选中圆底高亮；确认后关闭。
  • 热区 ≥48dp。
  • role="grid" + gridcell；键盘方向键导航。
  • 日期格式本地化。
16
步进器
Stepper
/ˈstɛpər/
 用于分步完成复杂任务。
  • 不要用于简单单页表单(过度拆分)。
  • 不要让已完成步骤无法返回修改。
  • 不要隐藏总步数。
  • 注册流程、下单结算。
  • 向导式配置。
  • 核心构成：步骤条(圆点/数字/图标 + 连接线)、当前步高亮、步骤标题与可选说明、上下步按钮。
间距：圆点 24dp；连接线 1dp；标题 14sp；步骤间距 8–16dp；支持水平/垂直布局。红线拆解图待补。
 Completed(勾选)、Active(高亮)、Upcoming(灰)、Error(错误步)、Disabled。
  • 水平步进器
  • 垂直步进器
  • 可编辑
  • 可跳过
  • 圆点：24dp。
  • 连接线：1dp。
  • 标题：14sp。
  • 步骤数：建议 ≤5。
  • 触发：点击步骤(可编辑时)跳转。
  • 反馈：完成步变勾；步骤切换过渡动画。
  • 热区 ≥48dp。
  • 当前步 aria-current="step"。
  • 可读步骤序号；Material Stepper。

三、 内容展示与容器类 (Display & Containment)

承载内容、分组信息与承载次级界面的容器类组件。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
17
卡片
Card
/kɑːrd/
 包括实心 (Filled)、抬高 (Elevated) 和描边 (Outlined) 卡片。
  • 不要在卡片内堆叠过多操作(主操作 ≤1 个)。
  • 不要卡片嵌套卡片。
  • 不要用卡片承载同构长列表(应用列表)。
  • 不要无点击反馈。
  • 内容分组、文章/商品摘要卡。
  • 仪表盘信息块、个人主页概览。
  • 核心构成：容器(实心/抬高/描边)、媒体区(可选)、标题、正文、操作区(可选)。
间距：圆角 12dp；内边距 16dp；标题 16sp；正文 14sp；媒体与文字间距 12dp。红线拆解图待补。
 Enabled、Hovered、Focused、Pressed、Dragged、Disabled。
  • Filled(实心)
  • Elevated(抬高)
  • Outlined(描边)
  • 带媒体图
  • 横向布局
  • 圆角：12dp。
  • 内边距：16dp。
  • 阴影：elevation 1(仅 Elevated)。
  • 描边：1dp outlineVariant。
  • 触发：整卡可点击(若承载导航)。
  • 反馈：点击 ripple + 轻微上抬；拖拽时提升阴影。
  • 可点击卡用 <a> 或 <button> 包裹。
  • 内容卡用 role="article"。
  • 焦点环可见，键盘可进入。
18
列表
List
/lɪst/
 基础的信息展示列表，使用 ListItem 组件。
  • 不要在同一行放多个同等权重操作。
  • 不要长文本不截断导致行高抖动。
  • 不要混用不同行高破坏节奏。
  • 不要无分组地堆几十项。
  • 设置项、消息/通知列表。
  • 通讯录、搜索结果。
  • 核心构成：ListItem = 前导(头像/图标/复选框) + 主体(单/双/三行文本) + 尾随(元信息/开关/箭头)。
间距：行高 56/72/88dp；左右内边距 16dp；前导图标 24dp；文本 16sp/14sp/12sp。红线拆解图待补。
 Enabled、Hovered、Focused、Pressed、Selected、Disabled。
  • 单行 / 双行 / 三行
  • 带头像
  • 带开关 / 复选框
  • 带分组标题
  • 行高：56 / 72 / 88dp。
  • 内边距：左右 16dp。
  • 图标：24dp。
  • 文本：16sp / 14sp / 12sp。
  • 触发：点击整行；长按进入多选。
  • 反馈：按下整行底色变化；选中态高亮；左滑露出操作。
  • 用 <ul>/<li> 语义结构。
  • 可点击项用 <button>，避免 div + onclick。
  • 列表项内控件需独立可聚焦。
19
对话框
Dialogs
/ˈdaɪəlɒɡz/
 包括基础警告对话框 (AlertDialog) 和全屏对话框等。
  • 不要嵌套对话框。
  • 不要用于非必要打断(能用 Snackbar 就不用)。
  • 不要缺关闭途径。
  • 不要长内容不滚动导致按钮被挤出屏幕。
  • 删除/退出等破坏性操作确认。
  • 权限申请、重要变更告知。
  • 全屏表单类次级任务。
  • 核心构成：遮罩 + 容器 + 可选图标 + 标题 + 正文 + 操作按钮（横向为主、堆叠为辅）。
间距：容器宽 280–560dp；圆角 28dp；内边距 24dp；标题 24sp；正文 14sp；按钮间距 8dp。红线拆解图待补。
 Opening、Open、Closing、Disabled(按钮)、Loading(提交中)。
  • AlertDialog(基础)
  • 全屏对话框
  • 确认型 / 输入型
  • 带图标
  • 容器宽：280–560dp。
  • 圆角：28dp。
  • 内边距：24dp。
  • 按钮：高 40dp，间距 8dp。
  • 出现：遮罩淡入 + 容器缩放(0.9→1) 与淡入，约 200ms。
  • 关闭：Esc / 点遮罩(可配置) / 取消按钮。
  • role="dialog" + aria-modal="true"。
  • 焦点陷阱；关闭后焦点回到触发元素。
  • aria-labelledby / aria-describedby。
20
底部弹窗
Bottom Sheet
/ˈbɒtəm ʃiːt/
 从底部滑出的面板，包括标准 (Standard) 和模态 (Modal) 两种。
  • 不要遮挡关键操作且不可关闭。
  • 不要省掉抓手条，用户不知道可拖。
  • 不要多层弹窗叠加。
  • 不要用全屏高度承载轻量内容。
  • 分享面板、操作菜单。
  • 筛选条件、快捷设置。
  • 次级表单（新建/编辑）。
  • 核心构成：容器（顶部圆角）+ 抓手条(可选) + 标题 + 内容区 + 操作区。
间距：顶部圆角 28dp；抓手条 32×4dp；内边距 16dp；最大高 = 屏幕高 − 56dp。红线拆解图待补。
 Collapsed、Expanded、Dragging、Dismissing。
  • Standard(与主内容共存)
  • Modal(带遮罩)
  • 可多档高度
  • 可下滑关闭
  • 顶部圆角：28dp。
  • 抓手条：32×4dp。
  • 内边距：16dp。
  • 最大高：屏幕高 − 56dp。
  • 展开：自底部滑入(约 250ms 减速曲线)。
  • 拖动：跟手；超过阈值或快速下滑则关闭。
  • 遮罩：Modal 型点遮罩关闭。
  • Modal 型用 role="dialog" + aria-modal="true"。
  • 打开时锁定背景滚动、焦点进入面板。
  • 支持 Esc 关闭与可见关闭按钮。
21
轮播图
Carousel
/ˌkærəˈsɛl/
 用于横向滑动展示多项内容。
  • 不要自动播放且不可暂停。
  • 不要隐藏当前位置(无指示器)。
  • 不要一屏塞过多焦点导致无法扫读。
  • 不要与页面纵向滚动抢手势。
  • 首页 Banner、运营位。
  • 商品/内容推荐横滑。
  • 图片浏览与相册。
  • 核心构成：视窗 + 轨道(多项并列) + 分页指示器 + 前后按钮(桌面/大屏)。
间距：卡片间距 8–16dp；两侧留白 16dp；指示器点 8dp(激活为 24dp 胶囊)。红线拆解图待补。
 Default、Dragging、Snapping、Auto-playing、Paused。
  • 多横幅(Multi-browse)
  • 单页整屏(Hero)
  • 居中吸附(Center-aligned)
  • 带分页点
  • 项间距：8–16dp。
  • 侧留白：16dp。
  • 指示器：点 8dp / 激活 24dp。
  • 吸附阈值：滑动超 50% 即翻页。
  • 拖拽：横向跟手 + 惯性；松手吸附对齐。
  • 自动播放：建议 4–6s，触摸即暂停。
  • 无障碍：尊重 prefers-reduced-motion。
  • CSS scroll-snap-type: x mandatory 实现吸附。
  • aria-roledescription="carousel"，每项 role="group" + “第 n 项，共 m 项”。
  • 键盘左右方向键切换。
22
分隔线
Divider
/dɪˈvaɪdər/
 包括水平 (HorizontalDivider) 和垂直 (VerticalDivider) 分隔线。
  • 不要用分隔线替代间距。
  • 不要线条过粗过深，抢视觉焦点。
  • 不要已用卡片/底色分组后再叠线。
  • 不要把分隔线当成可点击元素。
  • 列表分组之间。
  • 区块内容分隔。
  • 工具栏内按钮组之间（垂直）。
  • 核心构成：单条 1dp 线；水平型撑满或内缩(与文本对齐)，垂直型定高。
间距：厚度 1dp；颜色 outlineVariant；水平内缩 0 / 16dp。红线拆解图待补。
 无交互状态（纯装饰/结构元素）。
  • Horizontal / Vertical
  • 全宽 / 内缩(Inset)
  • 带文字标签
  • 厚度：1dp。
  • 颜色：outlineVariant。
  • 内缩：0 或 16dp。
  • 垂直高：随容器。
  • 无动效，不参与交互。
  • 不获得焦点、不可点击。
  • 语义分隔用 <hr>；装饰性可 aria-hidden="true"。
  • 其他元素用 role="separator"。
  • 垂直型加 aria-orientation="vertical"。
23 3
徽章
Badge
/bædʒ/
 附着在图标等元素上的小型状态标记。
  • 不要让数字无限增长（应显示 99+）。
  • 不要遮挡宿主图标主体。
  • 不要用于非状态的纯装饰。
  • 不要同一点位叠加多枚徽章。
  • 未读消息数、待办数量。
  • 新功能/更新提示。
  • 在线/离线等状态点。
  • 核心构成：锚点宿主(图标/头像/标签页) + 徽章体（圆点 / 数字 / 文字），定位于右上角并向外偏移。
间距：小圆点 6–8dp；数字徽章高 16dp、最小宽 16dp；字号 11sp；右上偏移 −4dp。红线拆解图待补。
 Hidden、Dot(仅圆点)、Number、Max-overflow(99+)。
  • 小圆点(Dot)
  • 数字徽章
  • 文字徽章
  • 带描边(置于图上)
  • 圆点：6–8dp。
  • 数字徽章：高 16dp、最小宽 16dp。
  • 字号：11sp。
  • 偏移：右上 −4dp。
  • 无独立交互，随宿主元素响应。
  • 更新反馈：数量变化时轻微缩放弹跳(约 150ms)。
  • 纯视觉时 aria-hidden="true"，避免重复播报。
  • 有语义时随宿主播报，如「消息，3 条未读」。
  • 颜色非唯一信息载体（需配文字/数字）。

四、 反馈与状态类 (Feedback & Status)

告知任务进度、操作结果与补充说明的轻量反馈组件。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
24
进度指示器
Progress Indicator
/ˈproʊɡrɛs ˈɪndɪkeɪtər/
 包括线性 (Linear) 和环形 (Circular) 两种。
  • 不要在确定进度时用不确定型（转圈）敷衍。
  • 不要让进度长时间停在 99% 不动。
  • 不要无文字说明的纯动画长时间阻塞页面。
  • 不要用于纯装饰性动效。
  • 页面/区块首次加载。
  • 文件上传下载、安装进度。
  • 表单提交等待、数据同步。
  • 核心构成：线性 = 轨道 + 进度段（可选缓冲段）；环形 = 底环 + 进度弧（可选中心数值/图标）。
间距：线性轨道高 4dp、圆角全圆；环形直径 48dp、描边 4dp；带间隙时留 4dp 缺口。红线拆解图待补。
 Determinate(确定)、Indeterminate(不确定)、Buffering、Complete、Error。
  • Linear(线性)
  • Circular(环形)
  • 带数值百分比
  • 带缓冲段
  • 带停止按钮
  • 线性轨道：高 4dp，全圆角。
  • 环形：直径 48dp，描边 4dp。
  • 间隙：环形缺口 4dp。
  • 动效时长：不确定型单圈约 1.4s。
  • 确定型：进度段平滑推进，数值同步更新。
  • 不确定型：无限循环（线性往复 / 环形旋转），完成后淡出。
  • 尊重 prefers-reduced-motion，降级为静态或低动效。
  • role="progressbar" + aria-valuenow / min / max；不确定型省略 valuenow。
  • 无可见文字时须有 aria-label（如「加载中」）。
  • Material LinearProgressIndicator / CircularProgressIndicator。
25 撤销
Snackbar
/ˈsnækbɑːr/
 屏幕底部出现的简短轻提示，可带操作按钮。
  • 不要用 Snackbar 承载关键决策（应用对话框）。
  • 不要文字过长需要折行（≤2 行）。
  • 不要同时叠多条，应排队显示。
  • 不要操作按钮与消息含义冲突。
  • 操作结果反馈（已保存/已删除）。
  • 提供「撤销 / 重试」类即时补救。
  • 离线提示、网络恢复提示。
  • 核心构成：容器 + 文本消息 + 可选操作按钮（单个，如「撤销」）。
间距：容器最小高 48dp；圆角 4dp；左右内边距 16dp；正文 14sp；距屏幕底部 16dp（含安全区）。红线拆解图待补。
 Entering、Visible、Exiting、Action-hovered、Action-disabled。
  • 纯文本
  • 带操作按钮
  • 带前导图标
  • 长时停留(危险操作)
  • 高度：最小 48dp。
  • 圆角：4dp。
  • 内边距：左右 16dp。
  • 停留时长：4–10s（带操作时可延长）。
  • 出现：自底部滑入 + 淡入（约 150ms）。
  • 消失：超时或点击操作后滑出。
  • 悬停/聚焦时暂停计时。
  • role="status" + aria-live="polite"（无需打断用户）。
  • 操作按钮须可键盘聚焦，<button> 语义。
  • Material Snackbar + SnackbarHost 排队管理。
26
提示
Tooltip
/ˈtuːltɪp/
 长按或悬停时出现的简短说明。
  • 不要把关键信息只放在 Tooltip 里（移动端难发现）。
  • 不要承载交互内容或按钮。
  • 不要文字过长（应 ≤1–2 行）。
  • 不要遮挡其指向的元素。
  • 图标按钮的语义补充说明。
  • 截断文本的完整内容预览。
  • 新手引导中的功能解释。
  • 核心构成：气泡容器 + 可选指向箭头 + 说明文本（可含快捷键）。
间距：内边距 8×4dp；圆角 4dp；字号 12sp；与锚点间距 4–8dp；最大宽约 200dp。红线拆解图待补。
 Hidden、Showing、Visible、Hiding。
  • 纯文本
  • 带箭头
  • 带快捷键
  • 富内容(仅桌面)
  • 内边距：8×4dp。
  • 圆角：4dp。
  • 字号：12sp。
  • 停留：桌面悬停后 500ms 出现；触屏长按约 500ms。
  • 桌面：悬停出现、移出消失，延迟约 500ms 防误触。
  • 移动：长按触发（不用 hover），再次点击空白处消失。
  • 淡入 + 轻微位移（约 100ms）。
  • 用 aria-describedby 关联锚点，不用 title 作为唯一来源。
  • role="tooltip"；不可聚焦内部元素。
  • Esc 可关闭；触屏设备须提供非 hover 的等价路径。

五、 标签类 (Chips)

紧凑的轻量交互单元，用于触发操作、筛选、输入与建议。

序号 组件缩略图 中英文名称 简要说明 反模式 (Anti-pattern) 使用场景 结构解剖 (Anatomy) 状态 (States) 变体 (Variants) 规范参数 (Specs) 交互与动效 (Interaction & Motion) 开发与无障碍 (Dev & A11y)
27
辅助标签
Assist Chip
/əˈsɪst tʃɪp/
 用于辅助当前任务的操作。
  • 不要用它承载导航（应用按钮或链接）。
  • 不要在一条标签内塞多个动作。
  • 不要把它当作主要操作入口堆在页面顶部。
  • 不要只放图标无文字导致语义不明。
  • 智能回复、快捷指令。
  • 添加日程、拨号等辅助动作。
  • 常见问题的快捷提问。
  • 核心构成：容器 + 可选前导图标 + 标签文字。
间距：高 32dp；圆角 8dp；左右内边距 12dp(带图标时左 8dp)；字号 14sp；图标 18dp；标签间距 8dp。红线拆解图待补。
 Enabled、Hovered、Focused、Pressed、Disabled。
  • Elevated(抬高)
  • Outlined(描边)
  • 带前导图标
  • 带尾随图标
  • 高度：32dp。
  • 圆角：8dp。
  • 内边距：左右 12dp。
  • 字号 / 图标：14sp / 18dp。
  • 触发：点击即执行辅助动作。
  • 反馈：按下态底色变化 + ripple；不改变选中状态。
  • 用 <button> 承载；热区建议扩展至 48dp。
  • 用 aria-label 补充纯图标场景语义。
  • Material AssistChip。
28
筛选标签
Filter Chip
/ˈfɪltər tʃɪp/
 用于从一组选项中筛选内容。
  • 不要筛选后不反馈结果条数变化。
  • 不要选项多到需要横向滚动三屏（应改用筛选面板）。
  • 不要默认选中大量筛选项。
  • 不要同一组内允许互斥项多选。
  • 列表/搜索结果快速筛选。
  • 商品分类、内容标签过滤。
  • 多条件组合筛选。
  • 核心构成：容器 + 可选前导勾选图标 + 标签文字；选中态有实底与勾。
间距：高 32dp；圆角 8dp；内边距 12dp；字号 14sp；勾选图标 18dp；标签间距 8dp。红线拆解图待补。
 Unselected、Selected、Hovered、Focused、Pressed、Disabled。
  • Elevated / Outlined
  • 单选 / 多选
  • 带前导勾选图标
  • 可横向滚动一组
  • 高度：32dp。
  • 圆角：8dp。
  • 内边距：12dp。
  • 间距：8dp。
  • 触发：点击切换选中/未选中，即时过滤结果。
  • 反馈：选中态实底 + 勾选图标淡入；结果区域平滑刷新。
  • 用 aria-pressed 或 role="checkbox" + aria-checked。
  • 组容器用 role="group" + aria-label。
  • Material FilterChip。
29
输入标签
Input Chip
/ˈɪnpʊt tʃɪp/
 用于表示用户输入的信息。
  • 不要省略删除途径（应带 ×）。
  • 不要无数量上限导致输入区无限长。
  • 不要用超长文本不截断。
  • 不要用它表示系统状态（应用徽章或文字）。
  • 邮件收件人、@提及的成员。
  • 标签/关键词录入。
  • 多选后的已选项回显。
  • 核心构成：容器 + 可选头像/图标 + 内容文本 + 尾随移除按钮(×)。
间距：高 32dp；圆角 8dp；内边距左 12dp 右 8dp；字号 14sp；移除图标 18dp；标签间距 8dp。红线拆解图待补。
 Enabled、Hovered、Focused、Pressed、Disabled、Removing。
  • Elevated / Outlined
  • 带头像
  • 可移除(带 ×)
  • 只读回显
  • 高度：32dp。
  • 圆角：8dp。
  • 内边距：左 12dp / 右 8dp。
  • 移除图标：18dp，热区 ≥32dp。
  • 触发：点击 × 移除；点击主体可聚焦编辑。
  • 反馈：移除时缩小 + 淡出；输入框自动收缩。
  • 移除按钮须独立可聚焦，aria-label="移除 xxx"。
  • 整体可用 role="listitem" 组织在 role="list" 容器内。
  • Material InputChip。
30
建议标签
Suggestion Chip
/səɡˈdʒɛstʃən tʃɪp/
 用于向用户提供动态建议。
  • 不要给出与当前上下文无关的建议。
  • 不要一次给过多建议（建议 2–6 个）。
  • 不要选中后仍保留（应转为输入内容或消失）。
  • 不要让建议长期固定不变，失去「动态」意义。
  • 搜索框的联想词与热搜。
  • 聊天中的快捷回复。
  • 表单中的推荐选项。
  • 核心构成：容器 + 可选前导图标 + 建议文字；常成组横排或横滑排列。
间距：高 32dp；圆角 8dp；内边距 12dp；字号 14sp；标签间距 8dp；组上下留白 8dp。红线拆解图待补。
 Enabled、Hovered、Focused、Pressed、Disabled、Loading(生成中)。
  • Elevated / Outlined
  • 带前导图标
  • 成组横滑
  • 加载骨架占位
  • 高度：32dp。
  • 圆角：8dp。
  • 内边距：12dp。
  • 数量：建议 2–6 个。
  • 触发：点击后把建议填入输入框并触发检索/发送。
  • 反馈：选中后高亮并承接进下一步；组内其余项淡出。
  • 作为列表时 role="list" + role="listitem"，每项为 <button>。
  • 动态更新时用 aria-live="polite" 提示有新建议。
  • Material SuggestionChip。

补充说明

Material Design 3 在设计语言上有几处值得留意的变化。