软件UI设计结构与组件图鉴 完整手册
布局 · 组件 · 视觉样式 · 交互模式 · 响应式 · 设计系统
布局 · 组件 · 视觉样式 · 交互模式 · 响应式 · 设计系统
面向产品经理、独立开发者、UI/UX 设计师与 AI Coding 工作流的结构化参考手册
版本：2026.08 · 结构化图鉴版
使用说明：这不是“风格大全”，而是一套 UI 结构语言
软件 UI 设计可以被拆成六层：应用壳层（Layout）→ 导航（Navigation）→ 内容与数据呈现（Content/Data）→ 组件（Components）→ 视觉样式（Visual Style）→ 交互与状态（Interaction/State）。只有把这些层分开，才能准确地向设计师或 AI 描述“我要什么”。
| 快速原则 不要把“Bento、Glassmorphism、三栏文档、Sidebar、Modal、Tabs”混成同一层概念。它们分别属于视觉风格、页面布局、组件或交互模式。 |
|---|
-
本手册中的“结构”描述信息和操作如何组织；“样式”描述视觉语言；“组件”描述可复用 UI 单元；“模式”描述一类反复出现的交互解决方案。
-
图示为结构示意，不是固定像素规范。实际项目仍应结合业务、终端、内容密度和无障碍要求。
-
“所有”在 UI 领域不存在真正封闭集合；本手册覆盖软件产品中最常见、可复用、工程化价值最高的一组类型。
总目录
01 应用壳层与页面布局
02 导航结构
03 内容与数据布局
04 表单布局
05 按钮组件
06 输入与选择组件
07 反馈、状态与覆盖层
08 组件状态矩阵
09 视觉风格体系
10 交互模式
11 响应式、密度与可访问性
12 设计系统与 Token
13 组合选择矩阵
14 AI / Codex 描述模板
15 视觉基础与 Design Tokens
16 常用展示与辅助组件
17 数据可视化
18 媒体与富内容组件
19 移动端专用模式
20 动效与微交互
01｜应用壳层与页面布局
“应用壳层”决定用户进入软件后长期看到的骨架：导航在哪里、主工作区多大、辅助信息放在哪里、不同页面之间如何保持空间稳定。大型软件通常由 1 个主壳层 + 若干局部布局组合而成。
| 结构 | 典型产品 | 优势 | 主要风险 |
|---|---|---|---|
| 顶部导航型 Top Navigation | 营销后台、轻量工具、内容站；导航层级较浅。 | 顶部承载全局入口，中间给主工作区，适合 4–7 个一级导航。 | 移动端重排、面板过多或信息密度失衡 |
| 侧边栏型 Sidebar App Shell | 后台系统、SaaS、企业应用。 | 左侧固定导航，右侧工作区；扩展性强，是最常见的软件壳层。 | 移动端重排、面板过多或信息密度失衡 |
| 双侧边栏型 Dual Sidebar | 聊天、协作、频道、素材管理。 | 第一栏用于全局域/工作区，第二栏用于当前域内对象。 | 移动端重排、面板过多或信息密度失衡 |
| 三栏型 Three-pane | 邮件、文件管理、IDE、知识库。 | 导航/列表—主内容—详情/属性三层同时可见。 | 移动端重排、面板过多或信息密度失衡 |
| 主从结构 Master–Detail | 订单、联系人、任务、工单。 | 左边选对象，右边看详情，减少页面跳转。 | 移动端重排、面板过多或信息密度失衡 |
| 分屏结构 Split View | 对比、翻译、Diff、预览、编辑器。 | 两个工作区并列，适合直接比较或同步编辑。 | 移动端重排、面板过多或信息密度失衡 |
| 仪表盘 Dashboard | 运营、数据分析、监控。 | 卡片化 KPI + 图表 + 数据表，强调概览与异常发现。 | 移动端重排、面板过多或信息密度失衡 |
| 无限画布 Workspace / Canvas | Figma、白板、流程图、节点编辑。 | 中央画布为核心，工具与属性环绕。 | 移动端重排、面板过多或信息密度失衡 |
| 命令中心 Command Center | 效率工具、DevTools、AI 工作台。 | 搜索/命令入口成为主交互，适合键盘优先用户。 | 移动端重排、面板过多或信息密度失衡 |
| 沉浸全屏 Immersive | 视频、阅读、演示、创作。 | 最大化内容，弱化全局导航，降低视觉干扰。 | 移动端重排、面板过多或信息密度失衡 |
| 向导 Wizard / Stepper | 安装、开户、复杂配置、创建流程。 | 把复杂任务拆成若干有顺序的步骤。 | 移动端重排、面板过多或信息密度失衡 |
| 信息流 Feed | 社区、动态、资讯、通知。 | 围绕连续内容消费设计，常配推荐与辅助栏。 | 移动端重排、面板过多或信息密度失衡 |
| 聊天式 Chat UI | AI 助手、客服、IM。 | 对话流 + 输入框是主要结构，适合时序交互。 | 移动端重排、面板过多或信息密度失衡 |
| 看板 Kanban | 项目管理、销售管道、审批。 | 状态即列，卡片在列间移动，强调流程。 | 移动端重排、面板过多或信息密度失衡 |
| 日历 Calendar | 排期、日程、资源预订。 | 用时间轴或网格表达任务、事件和冲突。 | 移动端重排、面板过多或信息密度失衡 |
| 数据表格 Data Table | 财务、CRM、管理后台。 | 高密度结构化数据，需排序、筛选、批量操作。 | 移动端重排、面板过多或信息密度失衡 |
| IDE / 编辑器型 | 代码、建模、专业创作软件。 | 文件树 + 主编辑器 + 辅助面板，多面板高密度布局。 | 移动端重排、面板过多或信息密度失衡 |
| 三栏技术文档 Docs | 开发者文档、知识库、产品手册。 | 左侧文档树，中间正文，右侧页内目录。 | 移动端重排、面板过多或信息密度失衡 |
1.1 顶部导航型 Top Navigation
顶部承载全局入口，中间给主工作区，适合 4–7 个一级导航。
-
适用：营销后台、轻量工具、内容站；导航层级较浅。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.2 侧边栏型 Sidebar App Shell
左侧固定导航，右侧工作区；扩展性强，是最常见的软件壳层。
-
适用：后台系统、SaaS、企业应用。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.3 双侧边栏型 Dual Sidebar
第一栏用于全局域/工作区，第二栏用于当前域内对象。
-
适用：聊天、协作、频道、素材管理。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.4 三栏型 Three-pane
导航/列表—主内容—详情/属性三层同时可见。
-
适用：邮件、文件管理、IDE、知识库。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.5 主从结构 Master–Detail
左边选对象，右边看详情，减少页面跳转。
-
适用：订单、联系人、任务、工单。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.6 分屏结构 Split View
两个工作区并列，适合直接比较或同步编辑。
-
适用：对比、翻译、Diff、预览、编辑器。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.7 仪表盘 Dashboard
卡片化 KPI + 图表 + 数据表，强调概览与异常发现。
-
适用：运营、数据分析、监控。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.8 无限画布 Workspace / Canvas
中央画布为核心，工具与属性环绕。
-
适用：Figma、白板、流程图、节点编辑。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.9 命令中心 Command Center
搜索/命令入口成为主交互，适合键盘优先用户。
-
适用：效率工具、DevTools、AI 工作台。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.10 沉浸全屏 Immersive
最大化内容，弱化全局导航，降低视觉干扰。
-
适用：视频、阅读、演示、创作。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.11 向导 Wizard / Stepper
把复杂任务拆成若干有顺序的步骤。
-
适用：安装、开户、复杂配置、创建流程。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.12 信息流 Feed
围绕连续内容消费设计，常配推荐与辅助栏。
-
适用：社区、动态、资讯、通知。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.13 聊天式 Chat UI
对话流 + 输入框是主要结构，适合时序交互。
-
适用：AI 助手、客服、IM。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.14 看板 Kanban
状态即列，卡片在列间移动，强调流程。
-
适用：项目管理、销售管道、审批。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.15 日历 Calendar
用时间轴或网格表达任务、事件和冲突。
-
适用：排期、日程、资源预订。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.16 数据表格 Data Table
高密度结构化数据，需排序、筛选、批量操作。
-
适用：财务、CRM、管理后台。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.17 IDE / 编辑器型
文件树 + 主编辑器 + 辅助面板，多面板高密度布局。
-
适用：代码、建模、专业创作软件。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
1.18 三栏技术文档 Docs
左侧文档树，中间正文，右侧页内目录。
-
适用：开发者文档、知识库、产品手册。
-
设计关注：主任务是否始终占据视觉中心；导航层级是否稳定；辅助栏是否可以折叠。
-
移动端策略：通常需要把并列面板改为逐层进入、抽屉、底部 Sheet 或独立详情页。
02｜导航结构
导航解决“我在哪里、还能去哪里、返回路径是什么”。软件产品通常同时存在全局导航、局部导航、层级导航和效率导航。
| 类型 | 中文 | 适合 | 不要用于 |
|---|---|---|---|
| Top Nav | 顶部导航 | 一级入口较少、内容型产品 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Sidebar | 侧边导航 | SaaS/后台/多模块 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Bottom Navigation | 底部导航 | 移动端 3–5 个核心入口 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Navigation Rail | 导航轨 | 平板/桌面窄侧栏 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Tabs | 标签页 | 同一上下文中的平级视图 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Segmented Control | 分段控件 | 2–5 个轻量互斥视图 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Breadcrumb | 面包屑 | 多层级信息架构 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Tree Navigation | 树形导航 | 文件、文档、组织层级 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Drawer | 抽屉导航 | 空间受限或低频入口 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Command Palette | 命令面板 | 效率用户、键盘优先 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Stepper | 步骤导航 | 强顺序流程 | 与任务层级不匹配时会制造迷路/跳转成本 |
| Pagination | 分页 | 可定位、可回访的数据列表 | 与任务层级不匹配时会制造迷路/跳转成本 |
| 导航选择原则 高频入口要近，层级关系要稳定，用户不应为了“看更多”而不断被迫返回上一级。 |
|---|
03｜内容与数据呈现布局
同一批数据可以用列表、表格、卡片、画廊或时间线表达。关键不是审美，而是用户主要任务：扫描、比较、排序、识别图像、理解时间关系，还是查看详情。
• 列表（List）— 线性扫描、移动端
• 卡片网格（Card Grid）— 对象识别、信息摘要
• Bento 网格（Bento）— 模块化首页、产品概览
• 瀑布流（Masonry）— 图片高度不一致
• 画廊（Gallery）— 视觉素材
• 时间线（Timeline）— 事件、版本、进度
• 树（Tree）— 层级数据
• 表格（Table）— 高密度比较/排序
• 手风琴（Accordion）— 折叠长内容
• 轮播（Carousel）— 有限空间中的候选内容
• 指标卡（KPI Cards）— 快速概览
• 详情面板（Detail Panel）— 列表上下文中查看对象
04｜表单布局
表单的目标不是“把字段放进去”，而是降低完成任务的认知负荷、错误率和来回移动。大多数业务表单优先从单列开始，再按信息关系决定是否分组、双列或分步。
| 布局 | 优势 | 主要风险 |
|---|---|---|
| 单列 | 最稳妥，阅读路径清晰 | 字段顺序、验证时机、移动端重排 |
| 双列 | 字段短且逻辑成对时使用 | 字段顺序、验证时机、移动端重排 |
| 行内 | 搜索、筛选、短配置 | 字段顺序、验证时机、移动端重排 |
| 左标签 | 桌面高密度后台 | 字段顺序、验证时机、移动端重排 |
| 上置标签 | 移动端与长标签 | 字段顺序、验证时机、移动端重排 |
| 分组 Section | 长表单按语义分块 | 字段顺序、验证时机、移动端重排 |
| 渐进披露 | 高级选项低频 | 字段顺序、验证时机、移动端重排 |
| Wizard | 复杂流程、跨步骤校验 | 字段顺序、验证时机、移动端重排 |
| Settings | 名称 + 控件的参数设置 | 字段顺序、验证时机、移动端重排 |
| Search + Filter | 搜索与多条件过滤 | 字段顺序、验证时机、移动端重排 |
| Bulk Edit | 多对象统一修改 | 字段顺序、验证时机、移动端重排 |
| Inline Edit | 无需跳详情即可快速修改 | 字段顺序、验证时机、移动端重排 |
05｜按钮组件：类型、层级与组合
按钮代表“立即执行动作”。一个界面不应该同时出现多个视觉强度相同的主按钮。按钮体系必须先定义动作层级，再定义尺寸、圆角、图标和颜色。
| 类型 | 用途 | 关键规则 |
|---|---|---|
| Primary | 页面最重要的单一动作 | 高视觉权重 |
| Secondary | 次级动作 | 较弱底色或描边 |
| Tertiary/Text | 低风险低频动作 | 文字化 |
| Ghost | 工具栏、轻操作 | 透明背景 |
| Destructive | 删除、清空 | 危险色 + 二次确认按场景 |
| Icon Button | 空间紧凑工具栏 | 必须有 tooltip/aria-label |
| FAB | 移动端核心创建动作 | 悬浮圆形 |
| Split Button | 主动作 + 变体菜单 | 避免把多个按钮并排 |
| Toggle Button | 按钮本身有开/关或选中状态 | 需明确 selected |
| Loading Button | 异步提交 | 避免重复提交 |
| Button Group | 相关动作成组 | 视觉边界统一 |
| CTA | 营销/转化主行动 | 通常尺寸更大、文案更明确 |
| 按钮尺寸建议 桌面高频按钮通常至少 32–40px 高；触摸设备应优先保证约 44×44 CSS px 的可点击目标，而不是只看视觉图标大小。 |
|---|
06｜输入与选择组件
输入组件要根据数据类型选择，而不是为了“好看”随意替换。自由文本、有限枚举、布尔值、范围、日期时间和文件都需要不同控件。
• Text Field — 短文本
• Search — 搜索 + 清除 + 建议
• Password — 密码 + 显隐
• Number — 数字 + 边界
• Textarea — 长文本
• Select — 有限单选
• Combobox — 可搜索枚举
• Checkbox — 多个独立布尔选项
• Radio — 少量互斥单选
• Switch — 即时生效的二元设置
• Slider — 连续范围
• Date Picker — 日期
• Time Picker — 时间
• Chips/Tags — 标签与轻量多选
• Stepper Input — 增减数值
• File Upload — 文件选择/拖放
07｜反馈、状态与覆盖层
任何用户动作都需要明确反馈：系统是否收到、正在处理、成功还是失败、是否可撤销。覆盖层组件还必须处理焦点、键盘、关闭方式和层级冲突。
• Toast — 短暂轻反馈，不阻塞
• Snackbar — 反馈 + 轻动作，如撤销
• Inline Alert — 贴近问题位置
• Banner — 页面级重要通知
• Modal — 需要用户决定后才能继续
• Drawer — 保持上下文的侧面详情/编辑
• Popover — 局部扩展信息或轻操作
• Tooltip — 解释图标或概念
• Progress — 确定性进度
• Spinner — 未知时长加载
• Skeleton — 保留布局结构的加载
• Empty State — 无内容时指导下一步
• Error State — 失败原因 + 恢复动作
• Offline — 网络不可用
• Success — 明确完成
• Confirm — 高风险动作确认
08｜组件状态矩阵
按钮、输入框、菜单项、卡片等交互组件都应明确状态。只画 Default 状态是设计系统常见缺陷。
-
Default 默认
-
Hover 悬停
-
Focus 键盘焦点
-
Pressed 按下
-
Selected 选中
-
Disabled 禁用
-
Loading 加载
-
Error 错误
-
Success 成功
-
Read-only 只读
-
Empty 空
-
Skeleton 骨架
| 工程规则 状态必须有唯一来源（state machine / props / store），不要只依赖 CSS 视觉伪状态，否则业务状态与视觉状态容易不同步。 |
|---|
09｜UI 视觉风格体系
“风格”是视觉语言，不决定信息架构。一个 Sidebar 应用可以同时做成 Material、Fluent、Minimal 或 Brutalist。选择视觉风格时优先考虑品牌、内容密度、长期维护与可访问性。
| 英文 | 中文/俗称 | 特征 | 使用提醒 |
|---|---|---|---|
| Flat | 扁平 | 纯色、少装饰，稳定易维护 | 不要让视觉风格压过可用性与层级 |
| Material | 材料化 | 表面层级、阴影、动效体系 | 不要让视觉风格压过可用性与层级 |
| Fluent | 流畅设计 | 光感、亚克力、层次 | 不要让视觉风格压过可用性与层级 |
| Apple-like | 克制精致 | 留白、半透明、细腻排版 | 不要让视觉风格压过可用性与层级 |
| Minimal | 极简 | 低噪声、高留白 | 不要让视觉风格压过可用性与层级 |
| Enterprise | 企业级 | 高密度、功能优先 | 不要让视觉风格压过可用性与层级 |
| Bento | 便当网格 | 模块化组合、首页概览 | 不要让视觉风格压过可用性与层级 |
| Glassmorphism | 玻璃拟态 | 透明、模糊背景，需注意对比度 | 不要让视觉风格压过可用性与层级 |
| Neumorphism | 新拟态 | 软阴影凸凹，对比度风险 | 不要让视觉风格压过可用性与层级 |
| Skeuomorphism | 拟物 | 模拟真实物件，表达性强 | 不要让视觉风格压过可用性与层级 |
| Brutalism | 粗野主义 | 高对比、强边界、反精致 | 不要让视觉风格压过可用性与层级 |
| Editorial | 编辑式 | 杂志排版、强字体层级 | 不要让视觉风格压过可用性与层级 |
| Claymorphism | 黏土3D | 软体积、可爱风 | 不要让视觉风格压过可用性与层级 |
| Retro Pixel | 像素复古 | 游戏/怀旧 | 不要让视觉风格压过可用性与层级 |
| Cyberpunk | 赛博朋克 | 霓虹、高对比、暗色 | 不要让视觉风格压过可用性与层级 |
| Y2K | 千禧风 | 数字感、渐变、金属 | 不要让视觉风格压过可用性与层级 |
| Monochrome | 单色 | 统一、克制 | 不要让视觉风格压过可用性与层级 |
| High Contrast | 高对比 | 无障碍与高可读性 | 不要让视觉风格压过可用性与层级 |
10｜交互模式与行为设计
交互模式定义用户怎样操作系统。它们往往比颜色和圆角更直接地决定效率。尤其在高频工作流中，需要计算点击次数、鼠标移动、滚动、等待和错误恢复成本。
• Hover — 桌面增强，不应成为唯一入口
• Focus — 键盘与无障碍核心状态
• Pressed — 即时动作反馈
• Selected — 持久选择状态
• Drag & Drop — 空间操作；需有非拖拽替代
• Swipe — 移动端快捷手势
• Context Menu — 右键/长按低频操作
• Inline Edit — 原位编辑减少跳转
• Undo/Redo — 降低操作风险
• Autosave — 减少显式保存动作
• Optimistic UI — 先响应、后确认
• Keyboard Shortcut — 专家效率
• Multi-select — 多对象选择
• Bulk Action — 批量操作
• Infinite Scroll — 连续消费，不利于精确回访
• Load More — 用户主动控制加载节奏
11｜响应式、密度与可访问性
跨设备不是把桌面 UI 缩小。需要重新组织导航、信息密度、输入方式、触摸目标与内容优先级。
-
Responsive：连续断点与弹性布局，根据可用空间重新排布。
-
Adaptive：针对手机、平板、桌面等几类形态准备不同布局。
-
Mobile-first：先保证最小屏主任务，再逐步增强。
-
Density：Comfortable / Compact 应根据任务频率和设备调整。
-
Touch Target：触摸目标要足够大并有间距。
-
Focus Ring：键盘用户必须看得见当前焦点。
-
High Contrast：信息不能只靠微弱色差。
-
Reduced Motion：用户要求减少动画时，应提供低动效路径。
-
RTL / 国际化：文字方向、长文本、日期货币与复数规则都会影响布局。
12｜设计系统：从 Token 到产品体验
真正可维护的 UI 不是一堆页面截图，而是一套分层的设计系统。越往下越抽象、越稳定；越往上越接近业务。
| 层级 | 内容 | 稳定性 |
|---|---|---|
| Design Tokens | 颜色、字体、字号、间距、圆角、阴影、动效时长、层级 z-index | 高 |
| Primitives | Stack、Box、Text、Icon、Divider 等基础原语 | 高 |
| Components | Button、Input、Select、Modal、Table 等通用组件 | 高 |
| Patterns | Search、Filter、Empty State、Navigation、Form 等组合模式 | 中 |
| Layouts | Sidebar、Dashboard、Docs、Master-detail 等页面骨架 | 中 |
| Flows | 注册、创建、支付、审批、上传等业务流程 | 业务相关 |
| Product UI | 最终产品页面与领域规则 | 业务相关 |
13｜结构选择矩阵：不同软件该怎么搭
以下不是唯一答案，而是高概率可靠的起点。设计时先选“壳层 + 导航 + 内容结构 + 核心组件”，最后才选视觉风格。
| 产品类型 | 推荐壳层 | 内容结构 | 关键组件 | 视觉方向 |
|---|---|---|---|---|
| 企业后台 | Sidebar | Table / Master-detail | Filter / Bulk Action / Drawer | Enterprise / Minimal |
| AI 助手 | Chat / Three-pane | Conversation / Artifacts | Composer / Tool Result / Sidebar | Minimal / Fluent |
| IDE/开发工具 | IDE / Split | Tree + Editor + Panel | Tabs / Command Palette | Dark / Enterprise |
| 文档站 | Docs Three-column | Article / TOC | Tree / Search / Callout | Minimal / Editorial |
| 项目管理 | Sidebar / Kanban | Board / Table / Calendar | Drag / Filter / Modal | Enterprise / Bento |
| 设计工具 | Canvas | Infinite Canvas | Toolbar / Inspector / Layers | Minimal / Dark |
| 数据分析 | Dashboard | KPI / Chart / Table | Filter / Drilldown | Enterprise / Fluent |
| 移动工具 | Top + Bottom Nav | List / Detail | Sheet / FAB / Search | Platform-native |
| 媒体播放器 | Immersive | Media + Queue | Playback / Slider / Overlay | Dark / Minimal |
| 设置中心 | Sidebar / Master-detail | Settings Sections | Switch / Select / Inline Help | Minimal / Enterprise |
14｜给 AI / Codex 的 UI 描述模板
普通人最容易把“风格、布局、组件、交互”混成一句话。下面模板强制分层，可以显著减少 AI 自行脑补。
| 模板 1：页面级 壳层结构：Sidebar App Shell；导航：左侧一级导航 + 顶部全局搜索；内容：Master–Detail；右侧详情使用 Drawer；视觉：Minimal + Enterprise；密度：Compact；移动端：Sidebar 收为 Drawer，Master–Detail 改为列表→详情。 |
|---|
| 模板 2：组件级 组件：Primary Button；尺寸 40px 高；图标在左；默认/hover/focus/pressed/disabled/loading 六种状态；Focus 必须有 2px 可见焦点环；loading 时禁止重复提交；文案保持不变并显示 spinner。 |
|---|
| 模板 3：交互级 用户目标：连续处理 100 个对象；约束：鼠标尽量不移动、无手动滚动、下一对象自动进入固定操作锚点；验收：完成整个任务期间 Pointer Travel 接近 0，最后一个对象也必须成立。 |
|---|
建议每次让 AI 先输出：①信息架构 ②布局结构 ③组件清单 ④状态矩阵 ⑤交互规则 ⑥响应式方案 ⑦验收条件，再开始写代码。
15｜视觉基础与 Design Tokens
在组件和页面之前，应先定义视觉基础。颜色、字体、间距、圆角、阴影、层级和动效时长如果没有 Token 化，项目越大越容易出现局部风格漂移。
-
Grid：定义页面列、沟槽和最大内容宽度。
-
Spacing：建议使用有限的间距序列，如 4/8/12/16/24/32，而不是随手写任意值。
-
Typography：至少区分 Display、Heading、Body、Label、Caption。
-
Semantic Color：Primary、Success、Warning、Danger、Info、Surface、Border、Text。
-
Radius：不要每个组件不同圆角；定义 2–5 个等级。
-
Elevation：阴影只表达层级，不是装饰。
-
Z-index：应形成规范层级，避免 Modal、Popover、Toast 相互覆盖。
-
Theme：Light/Dark/High Contrast 应共享语义 Token。
16｜常用展示与辅助组件
除按钮与输入外，真正的软件还大量依赖菜单、工具栏、卡片、头像、标签、徽标、评分、分页和状态点。这些组件主要解决“信息组织”和“轻量操作”。
-
Menu / Dropdown：低频动作集合，危险动作应分组或隔离。
-
Toolbar：高频工具集合，避免一次塞入过多图标。
-
Card：用于表达一个对象或模块，不应滥用到所有内容。
-
Badge / Status Dot：短状态，不承载长文案。
-
Avatar / Avatar Group：人物或主体识别。
-
Tag / Chip：分类、过滤、轻量选择。
-
Accordion：控制长内容展开。
-
Rating：评分输入或展示。
17｜数据可视化类型
图表不是“有数据就画图”。选择图表应先判断分析任务：趋势、比较、分布、关系、组成、流程还是地理。
-
趋势：Line / Area。
-
比较：Bar / Grouped Bar。
-
组成：Stacked Bar / Donut / Treemap。
-
分布：Histogram / Box Plot。
-
关系：Scatter / Bubble。
-
强弱矩阵：Heatmap。
-
流程流向：Funnel / Sankey。
-
多维轮廓：Radar（谨慎使用）。
-
单指标进度：Gauge（避免过度仪表盘化）。
-
地理：Map / Choropleth。
| 图表原则 能用表格准确比较的场景，不一定要图表；饼图类别过多、3D 图表、装饰性面积会降低可读性。 |
|---|
18｜媒体与富内容组件
媒体类软件需要独立考虑播放控制、时间轴、字幕、附件、文档浏览和编辑器状态。媒体组件常同时涉及加载、缓存、快捷键、全屏与无障碍。
-
Image / Gallery / Lightbox：缩略图与原图层级清晰。
-
Video Player：播放、音量、进度、字幕、画中画等控制分层。
-
Audio Player / Waveform：时间、波形、循环、标记点。
-
Document/PDF Viewer：页码、缩放、搜索、目录。
-
Rich Text / Code Editor：编辑状态、撤销、自动保存。
-
Diff Viewer：左右分屏或行内差异。
-
Playlist / Queue：当前项、顺序、下一项。
-
Attachment：文件类型、大小、上传状态、失败恢复。
19｜移动端专用布局与组件
移动端与桌面端不仅尺寸不同，交互输入也不同。移动端应优先考虑单手触达、系统返回、键盘弹出、安全区、手势冲突和底部操作区。
-
Top App Bar：标题、返回、关键动作。
-
Bottom Navigation：3–5 个一级入口。
-
Bottom Sheet：局部选择、详情、动作面板。
-
Navigation Drawer：低频全局导航。
-
FAB：单一高频创建动作。
-
Pull to Refresh：明确刷新反馈，不要强依赖。
-
Swipe Action：作为快捷操作，不应是唯一入口。
-
Sticky CTA：长页核心行动保持可达。
-
Full-screen Modal：移动端复杂编辑可使用整屏流程。
20｜动效与微交互
动效应该解释“发生了什么”和“对象从哪里到哪里”，而不是为了看起来高级。高频任务中的动效尤其要短，并支持 prefers-reduced-motion。
-
Fade / Crossfade：内容替换和轻层级变化。
-
Slide：表达空间方向或进入/退出。
-
Scale：强调打开、聚焦、轻反馈。
-
Shared Element：保持对象连续性。
-
Expand/Collapse：展示层级展开。
-
Loading/Progress：解释系统等待。
-
Success Motion：短暂确认完成。
-
Attention Pulse：只用于真正需要注意的状态。
-
Drag Feedback：明确抓取、目标与放置结果。
-
Spring：自然回弹，但不要用于精确高频操作。
-
Progressive Reveal：按需出现下一层内容。
附录｜UI 术语快速索引
| 术语 | 说明 |
|---|---|
| App Shell | 应用长期稳定的外层骨架 |
| Sidebar | 侧边导航/侧栏 |
| Navigation Rail | 窄型侧边导航 |
| Master–Detail | 主列表与详情并存 |
| Drawer | 从边缘滑出的辅助面板 |
| Sheet | 移动端从底部/边缘出现的面板 |
| Popover | 依附触发器的小型浮层 |
| Modal | 阻塞当前流程的对话框 |
| Toast | 短暂非阻塞反馈 |
| Skeleton | 骨架加载 |
| Bento | 大小不等模块组成的网格 |
| Design Token | 可复用的视觉变量 |
| Density | 信息/控件密度 |
| Responsive | 随可用空间连续重排 |
| Adaptive | 为几类设备准备离散布局 |
| Focus Ring | 键盘焦点可视标记 |
| Progressive Disclosure | 渐进披露，按需显示复杂选项 |
| Command Palette | 命令搜索面板 |
| Optimistic UI | 先更新界面，后确认服务端结果 |
| Inline Edit | 原位编辑 |