1 / 10
Component Atlas / UI Design System

通用组件清单

跨系统最大公约数：中英文名称、典型使用场景、避免混用规则，以及可直接拿去沟通的组件示例。

原子组件 复合组件 混用边界
Design System
01 / 先定边界

组件不是控件堆叠，而是决策语言

15原子组件：最小可复用交互单元
19复合组件：承载完整任务片段
6高频混用边界：最容易导致体验混乱
4参考体系：Material、Apple、Fluent、WAI-ARIA
A先看用户意图导航、输入、选择、反馈、展示，不同意图对应不同组件族。
B再看信息密度单项动作用按钮；多维数据用表格；对象集合用列表或卡片。
C最后看中断程度轻提示用 Toast；需要决策用 Dialog；需要长流程用 Drawer 或页面。
02 / 组件地图

从最小单元到任务容器

原子组件 Atomic Components

复合组件 Composite Components

03 / 原子组件词典

选择一个组件，看它该用在哪里

04 / 原子组件混用边界

小组件错用，会放大成系统级混乱

Button vs Link
用 Button提交、保存、删除、触发当前页面动作。
别混用跳转页面不要假装成按钮，用户会误判结果。
Checkbox vs Radio
用 Checkbox可多选或独立勾选，例如权限项。
别混用互斥选项不要用多个 Checkbox，让用户以为能多选。
Switch vs Checkbox
用 Switch开关立即生效，例如开启通知。
别混用需要提交表单后才生效的设置，不要用 Switch。
Badge vs Tag
用 Badge数量、状态、未读、风险级别。
别混用可筛选、可删除的属性不要用 Badge。
Tooltip vs Toast
用 Tooltip解释一个控件的含义。
别混用操作结果不要藏在 Tooltip 里。
Spinner vs Progress
用 Progress能估算进度，例如上传 63%。
别混用未知等待时不要伪造进度条。
05 / 复合组件词典

复合组件负责承载完整任务

06 / 复合组件决策矩阵

先判断任务关系，再选容器

少量内容 + 低中断

适合补充信息、局部展开、辅助说明。

AccordionTooltipDropdown

少量内容 + 高中断

适合确认、警告、短决策，不承载复杂流程。

Modal / DialogToastEmpty State

大量内容 + 低中断

适合浏览、比较、筛选、长期停留。

TableListCardPagination

大量内容 + 需要上下文

适合保留背景页面，同时完成编辑、筛选或配置。

DrawerSidebarStepperForm
07 / 复合组件混用边界

容器错用，会让流程变重或变碎

Modal vs Drawer
Dialog确认、警告、短表单，要求用户先处理。
Drawer长编辑、详情查看、需要参考背景内容。
Table vs List
Table多字段比较、排序、批量操作。
List以对象浏览为主，字段比较不重要。
Tabs vs Accordion
Tabs同级视图切换，只显示一个面板。
Accordion同页信息展开，可同时看多个片段。
Dropdown vs Search
Dropdown选项少、可枚举、用户认识选项。
Search选项多、不可完整展示、用户知道关键词。
Toast vs Modal
Toast轻反馈，不打断任务。
Modal需要确认、撤销风险、强决策。
Carousel vs Tabs
Carousel展示推荐、故事、营销内容。
Tabs功能分组和确定性视图，不要自动轮播。
08 / 典型组合示例

组件通常成组出现，而不是孤立出现

01搜索筛选页Search Bar + Dropdown + Tag + Table/List + Pagination。避免把筛选条件做成一排按钮。
02设置页面Form + Switch + Radio + Checkbox + Toast。即时生效用 Switch，保存后生效用 Checkbox。
03详情编辑Drawer + Form + Date Picker + Button + Toast。保留背景上下文，适合后台详情。
04危险操作Button + Dialog + Text + Checkbox。高风险删除要明确对象、影响和确认动作。
05空数据引导Empty State + Text + Button + Link。不给用户只看一块空白。
06多步骤提交Stepper + Form + Progress + Button。让用户知道位置、已完成项和下一步。
09 / 参考资料概览

这份清单的依据

资料类型与使用方式

本页将 Material Design、Apple HIG、Microsoft Fluent 2 与 WAI-ARIA APG 作为跨系统参照。使用方式不是照搬某一家命名，而是提取它们在组件职责、可访问性、反馈层级与导航模式上的共同边界。

时间范围与边界

资料以 2026-05-29 可访问的官方页面为准；不同设计系统的视觉命名会变化，但组件意图、交互语义和避免混用规则相对稳定。

Material Design Components

https://m2.material.io/components
用途：核对按钮、表格、抽屉、Snackbar、日期选择器等常见组件分类。

Apple Human Interface Guidelines

https://developer.apple.com/design/human-interface-guidelines/
用途：核对 Apple 平台上的控件、导航与反馈原则。

Microsoft Fluent 2 Components

https://fluent2.microsoft.design/components/
用途：核对动作按钮、菜单按钮、Split Button、内容文案与可访问性边界。

WAI-ARIA APG Patterns

https://www.w3.org/WAI/ARIA/apg/patterns/
用途：核对 Dialog、Tabs、Tooltip、Accordion、Slider 等可访问交互语义。