ui-design-patterns

UI 设计模式

全面介绍常见的用户界面设计模式、组件模式、交互模式，以及构建现代 Web 和移动应用的无障碍最佳实践。

何时使用此技能

在以下情况下使用此技能：

• 设计用户界面：创建直观且易用的界面设计
• 实现 UI 组件：遵循成熟模式构建可复用的界面组件
• 解决 UX 问题：运用经过验证的解决方案应对常见的用户体验挑战
• 确保无障碍：让所有用户（包括残障人士）都能访问界面
• 构建设计系统：创建一致的组件库和设计系统
• 评审界面：根据易用性和最佳实践评估现有界面
• 制作交互原型：设计并实现交互式 UI 行为
• 优化导航：规划信息架构和导航流程
• 处理表单设计：创建验证和反馈机制完善的有效表单
• 展示数据：以清晰、易于浏览的格式呈现复杂数据
• 提供反馈：有效传达系统状态和用户操作
• 响应式设计：让界面适配不同的屏幕尺寸和设备

核心概念

UI 模式

UI 模式是针对常见设计问题的可复用解决方案，具有以下优势：

• 一致性：用户能在不同应用中识别熟悉的模式
• 高效性：经过验证的解决方案可节省设计和开发时间
• 易用性：模式经过广泛使用、测试和改进
• 沟通：为设计师和开发者提供共同的术语
• 无障碍：成熟的模式通常会考虑无障碍需求

设计系统

设计系统由可复用的组件、模式和指南组成：

• 组件库：可复用的 UI 构建模块
• 设计令牌：用于颜色、间距和排版的变量
• 使用指南：说明每个组件的使用时机和方法
• 无障碍标准：符合 WCAG 的要求
• 代码示例：实现参考
• 文档：全面的指南和原则

原子设计方法

将界面拆分为原子单元：

• 原子：基本构建模块（按钮、输入框、标签）
• 分子：原子的简单组合（带按钮的搜索框）
• 有机体：复杂组件（页眉、表单、卡片）
• 模板：页面级布局
• 页面：包含实际内容的具体实例

导航模式

1. 标签页模式

将内容组织到多个面板中，每次显示一个面板。

适用场景：

• 同一层级的相关内容类别
• 区块数量有限（理想情况下为 3–7 个标签页）
• 用户需要频繁切换视图
• 屏幕空间有限

结构：

[Tab 1] [Tab 2] [Tab 3]
─────────────────────────
Content for active tab

最佳实践：

• 清晰突出显示当前标签页
• 标签文字简短且具有描述性
• 切换标签页时保留状态
• 使用图标和文字提升清晰度
• 确保键盘导航正常工作
• 考虑移动设备上的替代方案（下拉菜单、分段控件）

无障碍：

• 使用 ARIA role="tablist"、role="tab"、role="tabpanel"
• 实现方向键导航
• 设置 aria-selected 和 aria-controls
• 确保标签页面板可获得焦点

HTML 示例：

<div role="tablist" aria-label="Content sections">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Overview
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Details
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">
    Settings
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Overview content...
</div>

2. 手风琴模式

垂直堆叠的分区，支持展开和折叠。

适用场景：

• 包含多个不同分区的长页面
• 渐进式展示信息
• FAQ 分区
• 设置面板
• 屏幕空间有限

类型：

• 单项展开：一次只能展开一个面板
• 多项展开：可以同时展开多个面板
• 嵌套式：手风琴中嵌套手风琴

最佳实践：

• 使用清晰、描述性强的标题
• 提供视觉提示（箭头、+/-）
• 考虑默认状态（折叠或默认展开第一项）
• 平滑地播放过渡动画（200-300ms）
• 折叠时保留内容
• 支持键盘操作

无障碍访问：

• 使用 <button> 作为标题
• 设置 aria-expanded 属性
• 使用 aria-controls 关联标题和面板
• 确保支持键盘导航（Enter、Space、方向键）
• 提供恰当的标题层级

结构示例：

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section-1">
      Section Title
      <span class="icon" aria-hidden="true">▼</span>
    </button>
  </h3>
  <div id="section-1" hidden>
    <p>Section content...</p>
  </div>
</div>

3. 面包屑模式

显示用户在网站层级结构中的位置。

适用场景：

• 层级较深的网站（3 层以上）
• 电商网站的分类导航
• 文档网站
• 多步骤流程

最佳实践：

• 清晰显示当前位置
• 让上级层级可点击
• 使用合适的分隔符（>、/、→）
• 保持标签简洁
• 考虑在移动端截断内容
• 放置在页面顶部

无障碍访问：

• 使用带有 aria-label="Breadcrumb" 的 <nav>
• 使用 aria-current="page" 标记当前页面
• 确保颜色对比度充足
• 确保支持键盘导航

示例：

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/electronics">Electronics</a></li>
    <li aria-current="page">Laptops</li>
  </ol>
</nav>

4. 分页模式

浏览拆分为多个页面的大量内容。

类型：

• 编号分页：显示页码（1、2、3……）
• 加载更多：通过按钮加载更多内容
• 无限滚动：用户滚动时自动加载内容
• 上一页/下一页：在页面间进行简单导航

适用场景：

• 搜索结果
• 商品列表
• 博客归档
• 数据表格

最佳实践：

• 清晰显示当前页
• 提供“上一页”/“下一页”控件
• 包含“首页”/“末页”链接
• 显示总页数或结果数
• 对省略的页码使用省略号（1 ... 5 6 7 ... 20）
• 妥善保持滚动位置
• 考虑加载时间和性能

无障碍访问：

• 使用带有 aria-label="Pagination" 的 <nav>
• 使用 aria-current="page" 标记当前页面
• 正确禁用无效链接
• 为仅图标控件提供文本替代

5. 菜单模式

下拉菜单

点击或悬停时显示更多选项。

最佳实践：

• 优先使用点击而非悬停，以兼容移动设备
• 悬停时，延迟一小段时间再关闭
• 使用箭头图标标示子菜单
• 保持菜单层级较浅（最多 2-3 层）
• 智能定位，避免超出视口范围

巨型菜单

显示多个列和类别的大型下拉菜单。

适用场景：

• 类别众多的电商网站
• 信息架构复杂的网站
• 标准下拉菜单显得拥挤时

最佳实践：

• 使用网格布局进行组织
• 添加视觉元素（图标、图片）
• 将相关项目分组
• 提供清晰的视觉层级
• 点击菜单外部或按 Esc 键时关闭

汉堡菜单

用于移动端导航的可折叠菜单。

最佳实践：

• 使用易于识别的图标（三条水平线）
• 添加标签以提高清晰度（“菜单”）
• 为展开和关闭添加动画
• 菜单展开时禁用页面主体滚动
• 在菜单中添加关闭按钮
• 考虑采用更易发现的替代方案

无障碍访问：

• 使用正确的 ARIA 角色和状态
• 支持键盘导航
• 向屏幕阅读器播报菜单状态
• 确保妥善管理焦点

表单模式

1. 输入验证模式

提供有关用户输入是否正确的反馈。

验证类型：

• 必填字段：必须填写
• 格式验证：电子邮件、电话、URL 格式
• 长度验证：最小/最大字符数
• 范围验证：数值范围
• 自定义规则：业务逻辑验证

验证时机：

• 提交时：传统方式，一次性显示所有错误
• 失焦时：离开字段时进行验证
• 输入时：输入过程中实时验证
• 混合方式：结合多种方式，获得最佳用户体验

最佳实践：

• 清楚标记必填字段（星号、“必填”标签）
• 在字段附近显示内联错误消息
• 使用清晰、有帮助的错误消息
• 适时显示成功状态
• 将相关错误归类
• 表单有效前禁用提交（可选）
• 显示错误时保留用户输入
• 支持浏览器自动填充

错误消息指南：

• 明确指出问题
• 说明如何修正
• 使用友好、非技术性的语言
• 避免归咎于用户（“你输入了……” → “电子邮件格式无效”）

视觉指示：

• 错误时使用红色边框/背景
• 成功/有效时使用绿色
• 使用图标强化状态提示
• 确保足够的颜色对比度

无障碍性：

• 对无效字段使用 aria-invalid="true"
• 使用 aria-describedby 关联错误消息
• 向屏幕阅读器播报错误
• 确保错误消息在程序上与对应字段相关联

示例：

<div class="form-field">
  <label for="email">
    Email Address <span aria-label="required">*</span>
  </label>
  <input
    type="email"
    id="email"
    aria-invalid="true"
    aria-describedby="email-error"
    required
  />
  <div id="email-error" class="error-message" role="alert">
    Please enter a valid email address
  </div>
</div>

2. 多步骤表单模式

将较长的表单拆分为多个步骤或页面。

适用场景：

• 包含许多字段的复杂表单
• 需要对相关信息进行逻辑分组
• 引导流程
• 结账流程
• 用户注册

组成部分：

• 进度指示器：显示当前步骤和总步骤数
• 步骤导航：在步骤之间切换
• 确认步骤：提交前查看摘要
• 保存草稿：允许稍后继续

最佳实践：

• 每个步骤专注于一个主题
• 清楚显示进度
• 允许向前和向后导航
• 继续之前验证每个步骤
• 自动保存进度
• 提供跳过可选步骤的方式
• 尽可能显示预计耗时
• 使用描述性步骤标题

进度指示器：

• 线性步骤（1 → 2 → 3 → 4）
• 带编号的步骤标签
• 完成百分比
• 可视化时间线

无障碍性：

• 为步骤指示器使用 aria-label
• 播报步骤变化
• 确保键盘导航正常工作
• 标记已完成/当前/即将进行的步骤

3. 内联编辑模式

无需单独打开表单，直接在原位置编辑内容。

适用场景：

• 类似电子表格的界面
• 快速编辑现有内容
• 数据表
• 用户个人资料
• 设置页面

交互模式：

• 单击编辑：单击字段即可进行编辑
• 始终可编辑：字段始终处于编辑模式
• 编辑按钮：通过明确的按钮进入编辑模式
• 行/项目编辑：一次编辑整行或整个项目

最佳实践：

• 为可编辑区域提供清晰的视觉反馈
• 清楚显示编辑模式（边框、背景变化）
• 提供保存/取消操作
• 失焦时自动保存（可选）
• 保存前进行验证
• 保存期间显示加载状态
• 妥善处理错误
• 提供键盘快捷键（按 Enter 保存，按 Esc 取消）

视觉状态：

• 默认：显示内容，并暗示其可编辑
• 悬停：提示可交互
• 编辑：清晰显示输入/编辑界面
• 保存中：显示加载指示器
• 已保存：短暂显示成功确认

无障碍性：

• 使用语义化 HTML 元素
• 提供清晰的标签
• 播报状态变化
• 支持仅使用键盘进行交互

4. 搜索模式

自动补全/输入提示

在用户输入时显示建议。

最佳实践：

• 对输入进行防抖处理（延迟 300ms）
• 高亮匹配的字符
• 同时显示最近结果和相关结果
• 限制建议数量（5-10 条）
• 支持键盘导航（方向键、Enter）
• 按 Esc 清除建议
• 显示“无结果”状态
• 提供搜索按钮作为备用方式

无障碍：

• 使用 role="combobox" 和 aria-autocomplete
• 播报建议数量
• 使用 aria-activedescendant 标记高亮选项
• 确保支持屏幕阅读器

筛选

根据条件缩小结果范围。

类型：

• 分面搜索：多个筛选类别
• 标签筛选：选择/取消选择标签
• 范围筛选：用于数值范围的滑块
• 日期筛选：日期选择器或预设选项

最佳实践：

• 清晰显示已启用的筛选条件
• 显示结果数量
• 支持清除单个或所有筛选条件
• 实时更新结果，或通过“应用”按钮更新
• 在 URL 中保留筛选状态
• 为常见查询提供筛选预设

5. 表单布局模式

单列

最适合移动设备，且布局简单。

优点：

• 更便于纵向浏览
• 移动设备体验更好
• 降低认知负担
• 提高完成率

多列

适用于相关字段或需要节省空间的情况。

最佳实践：

• 将相关字段放在一起
• 标签左对齐
• 仅用于较短的表单
• 在移动设备上改为堆叠布局

标签位置

• 顶部标签：完成速度最快，最适合移动设备
• 左侧标签：节省空间，适合数据录入
• 行内标签：占位符样式（谨慎使用）

数据展示模式

1. 表格模式

以行和列的形式展示结构化数据。

适用场景：

• 比较多个维度的数据
• 需要排序/筛选的大型数据集
• 需要精确呈现的详细数据
• 管理界面和仪表板

基本功能：

• 排序：点击表头对列进行排序
• 筛选：按列搜索或筛选
• 分页：处理大型数据集
• 行选择：使用复选框执行批量操作
• 响应式：适配移动设备屏幕

高级功能：

• 调整列宽：拖动以调整宽度
• 调整列顺序：重新排列列
• 冻结列：保持表头/首列可见
• 展开行：显示更多详情
• 行内编辑：直接编辑单元格
• 导出：下载为 CSV/Excel

最佳实践：

• 文本左对齐，数字右对齐
• 使用一致的格式
• 悬停时高亮显示
• 显示加载状态
• 处理空状态
• 提供清晰的排序指示
• 谨慎使用斑马纹
• 尽可能避免横向滚动

响应式策略：

• 横向滚动：实现简单，但不太理想
• 卡片视图：将行转换为卡片
• 优先列：隐藏不太重要的列
• 展开行：展开前隐藏详情
• 对比视图：并排显示 2-3 个项目

无障碍：

• 使用语义化的 <table>、<thead>、<tbody>、<th>、<td>
• 为表头添加 scope 属性
• 为表格提供标题
• 使用 aria-sort 标记可排序的列
• 确保交互元素支持键盘导航

2. 卡片模式

用于展示相关信息并形成视觉层次的容器。

使用场景：

• 商品列表
• 用户资料
• 仪表盘小组件
• 内容预览
• 混合内容类型

组成部分：

• 图片/视觉元素：主图或图标
• 标题栏：标题和元数据
• 正文：描述或详情
• 操作：按钮或链接
• 页脚：补充信息

变体：

• 商品卡片：图片、标题、价格、加入购物车
• 用户卡片：头像、姓名、简介、关注按钮
• 文章卡片：缩略图、标题、摘要、阅读时长
• 统计卡片：数字、标签、趋势指示器

最佳实践：

• 网格中的卡片尺寸保持一致
• 建立清晰的视觉层次
• 提供充足的内边距和间距
• 添加悬停状态以提升交互性
• 将操作限制为 1-2 个主要操作
• 使用柔和的阴影营造层次感
• 确保触控目标足够大（最小 44x44px）

网格布局：

• 响应式列数（移动端 1 列，桌面端 2-4 列）
• 卡片等高或采用瀑布流布局
• 卡片间距保持一致

无障碍性：

• 使用语义化 HTML
• 为图片提供替代文本
• 确保对比度充足
• 适当时让整张卡片都可点击
• 使用标题标签作为标题

3. 列表模式

按顺序展示相似项目。

类型：

• 简单列表：纯文本项目
• 详细列表：每个项目包含多行内容
• 交互式列表：可点击/可选择的项目
• 分组列表：按类别组织
• 收件箱列表：包含预览、时间和状态的消息

最佳实践：

• 在项目之间设置清晰的视觉分隔
• 保持项目高度一致或采用自然流式布局
• 显示项目数量
• 突出显示已选项目
• 提供快捷操作
• 适当时支持多选
• 为长列表实现虚拟滚动

无障碍性：

• 使用语义化列表元素（<ul>、<ol>、<li>）
• 为项目提供唯一 ID
• 播报选择状态的变化
• 支持键盘导航

4. 网格模式

将项目排列成行和列。

使用场景：

• 图片库
• 商品目录
• 应用启动器
• 图标集
• 媒体库

网格类型：

• 固定网格：项目尺寸一致
• 瀑布流：高度不一，类似 Pinterest
• 响应式网格：随屏幕尺寸调整

最佳实践：

• 使用 CSS Grid 或 Flexbox
• 保持宽高比
• 为图片实现延迟加载
• 提供网格/列表视图切换
• 保持间距一致
• 处理空状态

响应式行为：

Mobile: 1-2 columns
Tablet: 2-4 columns
Desktop: 4-6 columns

5. 仪表盘模式

概览关键指标和数据可视化。

组件：

• KPI 卡片：包含趋势的关键指标
• 图表：折线图、柱状图、饼图、面积图
• 表格：详细数据
• 动态消息流：近期事件
• 快捷操作：常见任务

布局策略：

• 固定布局：预先确定位置
• 可拖动小组件：用户可自定义
• 响应式网格：随屏幕尺寸调整

最佳实践：

• 优先展示最重要的指标
• 统一时间范围
• 提供上下文信息（比较、趋势）
• 支持下钻查看详情
• 实时更新数据，或显示上次更新时间
• 支持自定义
• 支持导出/分享

反馈模式

1. Toast/提示条模式

简短的临时消息，用于说明系统状态或操作结果。

适用场景：

• 确认操作已完成（已保存、已删除、已发送）
• 显示简短通知
• 提示非关键错误
• 提供撤销操作的机会

最佳实践：

• 显示 3-7 秒
• 统一显示位置（底部居中或右上角）
• 一次显示一条 Toast，或将多条排队显示
• 提供关闭操作
• 避免遮挡重要内容
• 保持消息简洁
• 使用恰当的颜色（成功：绿色，错误：红色，信息：蓝色）
• 为破坏性操作提供撤销选项

不适用场景：

• 需要用户采取行动的关键错误
• 用户必须阅读的信息
• 多条同时出现的消息
• 长消息

无障碍：

• 使用 role="status" 或 role="alert"
• 向屏幕阅读器播报
• 不要过快自动关闭
• 提供手动关闭选项

示例结构：

<div class="toast" role="status" aria-live="polite">
  <span>Settings saved successfully</span>
  <button aria-label="Close notification">×</button>
</div>

2. 模态框/对话框模式

通过叠加层将用户注意力集中到特定任务或信息上。

类型：

• 警告对话框：需要用户确认的重要消息
• 确认对话框：用于是/否决策
• 表单对话框：收集输入
• 灯箱：图片/媒体查看器

适用场景：

• 重要决策
• 聚焦于单项任务
• 收集必要信息
• 中断破坏性操作
• 显示全尺寸媒体

最佳实践：

• 淡化背景内容（叠加层）
• 禁止与背景交互
• 提供明确的关闭方式（X 按钮、取消、Esc 键）
• 打开时将焦点置于第一个输入框或关闭按钮
• 关闭时将焦点返回到触发元素
• 保持内容简洁
• 在视口中央显示
• 打开时禁止正文滚动
• 避免模态框嵌套（在模态框中再打开模态框）

无障碍：

• 使用 role="dialog" 或 role="alertdialog"
• 设置 aria-modal="true"
• 使用 aria-labelledby 和 aria-describedby
• 实现焦点陷阱
• 支持按 Esc 关闭
• 向屏幕阅读器播报

结构：

<div class="modal-overlay">
  <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">Confirm Deletion</h2>
    <p>Are you sure you want to delete this item?</p>
    <div class="modal-actions">
      <button>Cancel</button>
      <button class="danger">Delete</button>
    </div>
  </div>
</div>

3. 加载状态模式

指示正在进行的处理或数据获取。

类型：

• 旋转加载指示器：圆形或线性进度指示器
• 进度条：显示完成百分比
• 骨架屏：内容占位符
• 闪烁效果：动画占位符
• 内嵌加载指示器：位于按钮或区块内

适用场景：

• 页面加载
• API 请求
• 文件上传
• 后台处理
• 无限滚动加载

最佳实践：

• 立即显示（100ms 内）
• 尽可能指示进度
• 长时间操作提供预计耗时
• 适当时允许取消
• 使用骨架屏提升感知性能
• 避免不必要地阻塞整个 UI
• 随加载逐步显示部分内容

骨架屏： 相比空白屏幕或旋转加载指示器，能提供更好的用户体验：

• 匹配实际内容的布局
• 使用细微动画
• 逐步加载内容
• 保持滚动位置

无障碍：

• 加载期间使用 aria-busy="true"
• 播报加载完成
• 为视觉加载指示器提供文本替代
• 确保键盘用户可以取消

4. 空状态模式

在没有内容时进行说明，并引导用户采取下一步操作。

类型：

• 首次使用：引导新用户
• 无结果：搜索/筛选未返回任何内容
• 错误状态：发生问题
• 已完成状态：所有任务均已完成

组成部分：

• 插图：视觉元素
• 标题：清晰的消息
• 描述：说明和引导
• 行动号召：主要的下一步操作

最佳实践：

• 鼓励并提供帮助
• 提供明确的下一步操作
• 根据上下文采用恰当的语气
• 添加相关插图
• 突出行动号召
• 提供替代方案或建议

示例：

首次使用：

"Welcome to your inbox!"
"You don't have any messages yet.
Why not invite your team?"
[Invite Team Button]

无结果：

"No results found for 'query'"
"Try different keywords or clear filters"
[Clear Filters Button]

错误：

"Oops, something went wrong"
"We couldn't load your data. Please try again."
[Retry Button]

无障碍：

• 提供有意义的文本
• 确保图片具有替代文本
• 确保行动号召可通过键盘操作

5. 通知徽标模式

指示未读内容或待处理的操作。

类型：

• 数字徽标：显示数量（5、12、99+）
• 圆点徽标：指示有内容，但不显示数量
• 状态徽标：在线、离线、忙碌状态

适用场景：

• 未读消息
• 待处理通知
• 购物车商品数量
• 用户状态指示器

最佳实践：

• 位置保持一致（图标右上角）
• 使用对比鲜明的颜色
• 限制显示的数字（数量较大时显示 99+）
• 查看后清除
• 避免过度使用
• 设置合适的尺寸

无障碍性：

• 将徽标内容包含在无障碍名称中
• 向屏幕阅读器播报更新
• 示例：aria-label="Messages (3 unread)"

交互模式

1. 拖放模式

通过拖动来移动或重新排列项目。

使用场景：

• 文件上传
• 列表重新排序
• 看板
• 图片库
• 表单构建器

交互状态：

• 可拖动：显示视觉指示器（手柄图标）
• 拖动中：项目跟随光标，显示原始位置
• 放置区域：突出显示有效目标
• 无效：显示无法放置的状态
• 已放置：以动画过渡到最终位置

最佳实践：

• 提供清晰的拖动手柄
• 清晰显示放置区域
• 平滑地为过渡添加动画
• 支持键盘替代操作
• 确认具有破坏性的放置操作
• 在靠近边缘处拖动时自动滚动
• 显示最终状态的预览

键盘替代操作：

• 选择项目
• 剪切/复制
• 导航到目标位置
• 粘贴/插入

无障碍性：

• 实现键盘控制
• 播报拖放操作
• 提供替代交互方式
• 使用合适的 ARIA 属性

2. 无限滚动模式

用户向下滚动时自动加载内容。

适用场景：

• 社交媒体信息流
• 图片库
• 新闻信息流
• 商品目录

最佳实践：

• 显示加载指示器
• 提供“加载更多”按钮作为备用方式
• 返回导航时保留滚动位置
• 仅在所有内容加载完成后显示页脚
• 允许跳转到特定项目
• 尽可能显示总数
• 提供停止自动加载的方式

无障碍性注意事项：

• 向屏幕阅读器播报新内容
• 确保键盘用户能够访问所有内容
• 提供跳转链接
• 考虑提供分页作为替代方案

性能：

• 对大型列表实现虚拟滚动
• 延迟加载图片
• 移除屏幕外的内容
• 对滚动事件进行防抖处理

3. 筛选和排序模式

筛选并整理显示的数据。

筛选类型：

• 复选框：多选类别
• 单选按钮：单选
• 范围滑块：数值范围
• 日期选择器：日期范围
• 搜索：文本匹配

排序选项：

• 按字母顺序（A-Z、Z-A）
• 按数值（从低到高、从高到低）
• 按日期（最新、最早）
• 相关性
• 热门程度

最佳实践：

• 清晰显示已启用的筛选条件
• 显示结果数量
• 允许清除单个筛选条件
• 提供“全部清除”选项
• 立即更新结果，或提供“应用”按钮
• 在 URL 中保留筛选状态
• 默认采用最实用的排序方式
• 清晰显示排序方向

移动端注意事项：

• 使用底部弹出层或侧边栏显示筛选条件
• 提供带数量徽标的筛选按钮
• 允许在关闭面板前应用筛选条件

4. 搜索模式

帮助用户查找特定内容或项目。

组件：

• 搜索输入框：用于输入查询的文本框
• 搜索按钮：提交搜索
• 清除按钮：重置搜索
• 自动完成：输入时显示建议
• 最近搜索：之前搜索过的词条
• 筛选条件：缩小结果范围
• 结果：匹配的项目

最佳实践：

• 让搜索功能醒目且易于查找
• 显示搜索图标
• 提供键盘快捷键（/、Ctrl+K）
• 搜索范围受限时予以说明
• 在结果中突出显示匹配的词语
• 无结果时显示提示和建议
• 在 URL 中保留搜索内容
• 实现防抖（300ms）

搜索体验：

• 即时搜索或搜索按钮提交
• 自动完成建议
• 对拼写错误进行模糊匹配
• 在结果中继续搜索
• 按相关性排序

5. 撤销/重做模式

反转或重放操作。

适用场景：

• 内容编辑器
• 绘图应用
• 电子邮件客户端
• 任何破坏性操作

实现方式：

• 立即撤销：显示带撤销按钮的 Toast
• 命令模式：使用可逆操作栈
• 键盘快捷键：Ctrl+Z、Ctrl+Y/Ctrl+Shift+Z
• 菜单选项：编辑菜单项

最佳实践：

• 为所有重要操作提供撤销功能
• 立即显示撤销选项（Toast）
• 设置合理的时间限制（5-10 秒）
• 清楚说明将撤销什么
• 支持多级撤销
• 没有可撤销操作时禁用撤销
• 妥善保存撤销历史记录

无障碍模式

WCAG 原则

可感知：信息必须以用户能够感知的方式呈现。

• 为非文本内容提供文本替代
• 为多媒体提供字幕和替代内容
• 创建能够以不同方式呈现的内容
• 让内容更易于查看和收听

可操作：所有用户都必须能够操作界面组件。

• 确保所有功能均可通过键盘访问
• 为用户留出足够的时间阅读和使用内容
• 不要设计可能引发癫痫的内容
• 帮助用户浏览并查找内容

可理解：信息和 UI 操作必须易于理解。

• 确保文本易读且易于理解
• 确保内容以可预测的方式呈现和运行
• 帮助用户避免并纠正错误

健壮：内容必须足够健壮，能够被各种用户代理解读。

• 最大限度地兼容当前和未来的工具

键盘导航

基本模式：

• Tab：在交互元素间向前移动
• Shift+Tab：向后移动
• Enter/Space：激活按钮和链接
• 方向键：在组件内导航（菜单、标签页）
• Esc：关闭对话框、取消操作
• Home/End：跳转到首项/末项

焦点管理：

• 显示可见的焦点指示器（轮廓、高亮）
• 使用符合逻辑的 Tab 顺序（遵循视觉顺序）
• 在模态框中锁定焦点
• 关闭对话框后恢复焦点
• 为主要内容提供跳过链接

最佳实践：

• 不要依赖仅限悬停的交互
• 确保所有交互元素均可通过键盘访问
• 为常见操作提供键盘快捷键
• 记录键盘快捷键
• 仅使用键盘进行测试

ARIA（无障碍富互联网应用）

角色： 定义元素是什么或有什么作用：

• role="button"、role="tab"、role="dialog"
• role="navigation"、role="main"、role="search"
• role="alert"、role="status"、role="log"

状态和属性：

• aria-expanded：可展开元素（true/false）
• aria-selected：选中项（true/false）
• aria-checked：复选框（true/false/mixed）
• aria-disabled：禁用状态（true/false）
• aria-hidden：从屏幕阅读器中隐藏（true/false）
• aria-label：无障碍名称
• aria-labelledby：对标签元素的引用
• aria-describedby：对描述的引用
• aria-live：播报动态变化（polite/assertive）
• aria-current：集合中的当前项（page/step/location）

最佳实践：

• 优先使用语义化 HTML
• 语义化 HTML 不足时再添加 ARIA
• 不要覆盖原生语义
• 确保 ARIA 属性与 UI 状态同步更新
• 使用屏幕阅读器进行测试

屏幕阅读器支持

注意事项：

• 使用符合逻辑的标题层级（h1、h2、h3...）
• 使用描述性链接文本（避免使用“点击此处”）
• 为图像提供替代文本
• 为表单输入项提供标签
• 将错误消息与输入项关联
• 播报动态内容变化
• 为视觉信息提供文本替代

常见屏幕阅读器：

• NVDA（Windows，免费）
• JAWS（Windows，商业软件）
• VoiceOver（macOS、iOS）
• TalkBack（Android）

颜色和对比度

要求：

• 文本对比度：普通文本为 4.5:1，大号文本为 3:1（WCAG AA）
• 增强对比度：普通文本为 7:1，大号文本为 4.5:1（WCAG AAA）
• UI 组件：界面元素和图形为 3:1

最佳实践：

• 不要仅依靠颜色传达信息
• 除颜色外，还要使用图案、图标或文本
• 使用色盲模拟器进行测试
• 提供高对比度模式
• 确保焦点指示器具有足够的对比度

表单无障碍访问

标签：

• 使用 for/id 将 <label> 与输入框关联
• 不要仅将 placeholder 用作标签
• 使用 <fieldset> 和 <legend> 对相关输入框进行分组

验证：

• 使用 aria-describedby 将错误与字段关联
• 使用 aria-invalid="true" 标记无效字段
• 使用 role="alert" 向屏幕阅读器播报错误
• 验证状态不要仅依靠颜色来区分

说明：

• 在表单前提供清晰的说明
• 标明必填字段
• 说明格式要求
• 提供输入示例

响应式模式

移动优先方法

先为移动屏幕进行设计，然后针对更大的屏幕进行增强。

优点：

• 强制聚焦于核心内容
• 渐进式增强
• 在移动设备上性能更好
• 比桌面优先更简单

断点：

/* Mobile: 320px - 767px (default) */

/* Tablet: 768px+ */
@media (min-width: 768px) { }

/* Desktop: 1024px+ */
@media (min-width: 1024px) { }

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) { }

自适应布局

流式网格：

• 使用百分比或弹性单位（fr、%）
• CSS Grid 和 Flexbox
• 使用容器查询实现组件级响应式布局

弹性图像：

img {
  max-width: 100%;
  height: auto;
}

响应式排版：

• 相对单位（rem、em）
• 使用 clamp() 实现流式排版
• 调整行长以提高可读性（45-75 个字符）

移动导航模式

汉堡菜单：

• 点击图标可切换滑出式菜单
• 最常见，但可能会隐藏导航
• 添加标签以便清楚说明

标签栏：

• 固定在底部的导航（iOS 模式）
• 3-5 个主要部分
• 始终可见

Priority+：

• 显示可容纳的项目，将溢出项目隐藏在菜单中
• 根据可用空间进行调整
• 适用于主导航

底部抽屉：

• 从底部向上滑出
• 适用于筛选器和操作
• 拇指容易触及

触控交互

触控目标：

• 点击目标至少为 44x44px
• 目标之间留有足够间距
• 主要操作使用更大的目标

手势：

• 轻触：主要操作
• 双击：缩放（谨慎使用）
• 长按：显示上下文菜单
• 滑动：删除、归档、导航
• 捏合：缩放
• 下拉刷新：更新内容

最佳实践：

• 为触控操作提供视觉反馈
• 避免依赖悬停的交互
• 支持纵向和横向模式
• 考虑拇指活动范围（易于触及、需要伸展、难以触及）
• 在实际设备上进行测试

响应式表格

策略：

1. 水平滚动：最简单，但不够理想
2. 优先列：隐藏不太重要的列
3. 堆叠卡片：将每一行变为一张卡片
4. 翻转表头：将表头旋转为行标签
5. 对比视图：并排显示 2-3 个项目

示例 - 堆叠卡片：

Desktop:
| Name | Email | Role | Status |

Mobile:
┌─────────────┐
│ John Doe    │
│ Email: j@   │
│ Role: Admin │
│ Status: ✓   │
└─────────────┘

常见 UI 模式检查清单

按钮模式

• 主要操作按钮（实心、高对比度）
• 次要操作按钮（描边或幽灵样式）
• 用于低优先级操作的三级/文本按钮
• 用于常见操作的图标按钮
• 用于相关操作的按钮组
• 用于开/关状态的切换按钮
• 用于移动设备主要操作的悬浮操作按钮（FAB）
• 按钮中的加载状态
• 降低不透明度以显示禁用状态

输入模式

• 带标签和占位符的文本输入框
• 带显示/隐藏切换的密码输入框
• 带图标和清除按钮的搜索输入框
• 用于多行输入的文本区域
• 用于从选项中进行选择的下拉框
• 用于从少量选项中单选的单选按钮
• 用于多选的复选框
• 用于开/关设置的切换开关
• 用于选择日期的日期选择器
• 支持拖放的文件上传
• 用于数值输入的范围滑块
• 用于选择颜色的颜色选择器

导航模式

• 顶部导航栏
• 侧边栏导航
• 面包屑导航
• 分页
• 标签页
• 多步骤流程的步骤指示器
• 用于页面内导航的锚点链接
• 返回顶部按钮

覆盖层模式

• 模态对话框
• 滑出面板／抽屉
• 用于提供上下文信息的弹出框
• 用于显示提示的工具提示
• 下拉菜单
• 上下文菜单（右键）
• 底部弹出面板（移动端）

反馈模式

• Toast 通知
• 警告横幅
• 行内消息
• 加载动画
• 进度条
• 骨架屏
• 成功／错误状态
• 空状态

内容模式

• 卡片布局
• 列表视图
• 网格布局
• 表格显示
• 时间线／动态信息流
• 主视觉区域
• 图片库
• 轮播图／滑块
• 视频播放器
• 头像／个人资料图片

设计令牌

用于保持一致性的标准化设计变量。

颜色令牌

Primary Colors:
- primary-50 to primary-900 (shades)

Semantic Colors:
- success (green)
- warning (yellow)
- error (red)
- info (blue)

Neutral Colors:
- gray-50 to gray-900

Text Colors:
- text-primary
- text-secondary
- text-disabled

间距令牌

- spacing-xs: 4px
- spacing-sm: 8px
- spacing-md: 16px
- spacing-lg: 24px
- spacing-xl: 32px
- spacing-2xl: 48px

字体排印令牌

Font Sizes:
- text-xs: 12px
- text-sm: 14px
- text-base: 16px
- text-lg: 18px
- text-xl: 20px
- text-2xl: 24px

Font Weights:
- normal: 400
- medium: 500
- semibold: 600
- bold: 700

Line Heights:
- tight: 1.25
- normal: 1.5
- relaxed: 1.75

边框圆角令牌

- rounded-none: 0
- rounded-sm: 2px
- rounded: 4px
- rounded-md: 6px
- rounded-lg: 8px
- rounded-xl: 12px
- rounded-full: 9999px

阴影令牌

- shadow-sm: subtle elevation
- shadow: default elevation
- shadow-md: medium elevation
- shadow-lg: large elevation
- shadow-xl: maximum elevation

性能注意事项

感知性能

• 立即显示内容（骨架屏）
• 渐进式加载
• 乐观 UI 更新
• 流畅动画（60fps）

实际性能

• 代码拆分
• 延迟加载图片和组件
• 对长列表使用虚拟滚动
• 防抖和节流
• 缓存策略
• 尽量减少重排和重绘

图片优化

• 使用适当的格式（WebP、AVIF）
• 响应式图片（srcset）
• 延迟加载
• 模糊渐显占位技术
• 合适的尺寸和压缩

UI 模式测试

可用性测试

• 用户访谈
• 任务完成度测试
• A/B 测试
• 热力图和点击追踪
• 会话录制

无障碍测试

• 键盘导航测试
• 屏幕阅读器测试
• 检查颜色对比度
• 自动化无障碍审查（axe、Lighthouse）
• 手动审查 WCAG 合规性

跨浏览器测试

• 在主流浏览器中测试（Chrome、Firefox、Safari、Edge）
• 在实际设备上测试
• 使用浏览器开发者工具进行响应式测试
• 检查渐进增强

性能测试

• Lighthouse 审查
• Core Web Vitals
• 加载时间测试
• 交互延迟
• 动画帧率

资源与工具

设计系统

• Material Design（Google）
• Human Interface Guidelines（Apple）
• Fluent Design（Microsoft）
• Polaris（Shopify）
• Carbon（IBM）
• Ant Design
• Atlassian Design System

组件库

• Shadcn UI
• Radix UI
• Headless UI
• Chakra UI
• MUI（Material-UI）
• Ant Design
• Bootstrap
• Tailwind UI

无障碍工具

• axe DevTools
• WAVE
• Lighthouse
• NVDA（屏幕阅读器）
• VoiceOver（屏幕阅读器）
• 颜色对比度检查工具

原型设计工具

• Figma
• Sketch
• Adobe XD
• Framer
• InVision

模式库

• UI Patterns
• Patternry
• Mobile Patterns
• Pttrns

结论

UI 设计模式为常见的界面难题提供了经过验证的解决方案。了解并恰当运用这些模式，可以打造：

• 一致的界面：熟悉的模式可降低学习成本
• 无障碍体验：内置无障碍考量
• 高效开发：可复用的组件和标准化方法
• 更好的 UX：经过测试、用户易于理解的模式

请记住：

• 选择适合具体场景的模式
• 根据品牌和用户需求定制模式
• 与真实用户进行测试
• 优先考虑无障碍
• 跟进不断演变的最佳实践
• 关注用户需求，而非潮流

UI 模式是指导原则，而非严格规则。请审慎调整，打造能有效满足用户需求的界面。