UI Design Patterns

UI设计模式

A comprehensive guide to common user interface design patterns, component patterns, interaction patterns, and accessibility best practices for building modern web and mobile applications.

一份关于常见用户界面设计模式、组件模式、交互模式以及无障碍设计最佳实践的综合指南，适用于构建现代网页和移动应用。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Design User Interfaces: Create intuitive and user-friendly interface designs
Implement UI Components: Build reusable interface components following established patterns
Solve UX Problems: Address common user experience challenges with proven solutions
Ensure Accessibility: Make interfaces accessible to all users including those with disabilities
Build Design Systems: Create consistent component libraries and design systems
Review Interfaces: Evaluate existing interfaces for usability and best practices
Prototype Interactions: Design and implement interactive UI behaviors
Optimize Navigation: Structure information architecture and navigation flows
Handle Form Design: Create effective forms with proper validation and feedback
Display Data: Present complex data in clear, scannable formats
Provide Feedback: Communicate system state and user actions effectively
Responsive Design: Adapt interfaces for different screen sizes and devices

在以下场景中使用此技能：

设计用户界面：创建直观且易用的界面设计
实现UI组件：遵循既定模式构建可复用的界面组件
解决UX问题：用经过验证的方案解决常见的用户体验挑战
确保无障碍性：让界面对包括残障人士在内的所有用户可用
构建设计系统：创建一致的组件库和设计系统
评审界面：评估现有界面的可用性和最佳实践符合性
制作交互原型：设计并实现交互式UI行为
优化导航：构建信息架构和导航流程
处理表单设计：创建带有适当验证和反馈的高效表单
展示数据：以清晰、易扫描的格式呈现复杂数据
提供反馈：有效传达系统状态和用户操作结果
响应式设计：让界面适配不同屏幕尺寸和设备

Core Concepts

核心概念

UI Patterns

UI模式

UI patterns are reusable solutions to common design problems. They provide:

Consistency: Users recognize familiar patterns across applications
Efficiency: Proven solutions save design and development time
Usability: Patterns are tested and refined through widespread use
Communication: Shared vocabulary for designers and developers
Accessibility: Established patterns often include accessibility considerations

UI模式是针对常见设计问题的可复用解决方案，它能提供：

一致性：用户可在不同应用中识别熟悉的模式
高效性：经过验证的方案节省设计和开发时间
易用性：模式经过广泛使用的测试和优化
沟通性：为设计师和开发者提供通用词汇
无障碍性：成熟的模式通常包含无障碍设计考量

Design Systems

设计系统

A design system is a collection of reusable components, patterns, and guidelines:

Component Library: Reusable UI building blocks
Design Tokens: Variables for colors, spacing, typography
Usage Guidelines: When and how to use each component
Accessibility Standards: WCAG compliance requirements
Code Examples: Implementation references
Documentation: Comprehensive guides and principles

设计系统是可复用组件、模式和指南的集合：

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

Atomic Design Methodology

原子设计方法论

Breaking interfaces into atomic units:

Atoms: Basic building blocks (buttons, inputs, labels)
Molecules: Simple combinations of atoms (search field with button)
Organisms: Complex components (headers, forms, cards)
Templates: Page-level layouts
Pages: Specific instances with real content

将界面拆分为原子级单元：

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

Navigation Patterns

导航模式

1. Tabs Pattern

1. 标签页模式

Organize content into multiple panels shown one at a time.

When to Use:

Related content categories at the same hierarchy level
Limited number of sections (3-7 tabs ideal)
User needs to switch between views frequently
Screen space is limited

Anatomy:

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

Best Practices:

Highlight active tab clearly
Keep tab labels short and descriptive
Maintain state when switching tabs
Use icons + text for clarity
Ensure keyboard navigation works
Consider mobile alternatives (dropdown, segmented control)

Accessibility:

Use ARIA
```
role="tablist"
```
,
```
role="tab"
```
,
```
role="tabpanel"
```
Implement arrow key navigation
Set
```
aria-selected
```
and
```
aria-controls
```
Ensure tab panels are focusable

Example HTML:

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>

将内容组织为多个面板，一次只显示一个。

适用场景：

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

结构：

[标签页1] [标签页2] [标签页3]
─────────────────────────
当前激活标签页的内容

最佳实践：

清晰高亮当前激活的标签页
标签页标签简短且描述性强
切换标签页时保留状态
使用图标+文本提升清晰度
确保键盘可导航
考虑移动端替代方案（下拉菜单、分段控制器）

无障碍设计：

使用ARIA
```
role="tablist"
```
,
```
role="tab"
```
,
```
role="tabpanel"
```
实现箭头键导航
设置
```
aria-selected
```
和
```
aria-controls
```
属性
确保标签页面板可获取焦点

HTML示例：

html

<div role="tablist" aria-label="内容板块">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    概述
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    详情
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">
    设置
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  概述内容...
</div>

2. Accordion Pattern

2. 手风琴模式

Vertically stacked sections with expand/collapse functionality.

When to Use:

Long pages with distinct sections
Progressive disclosure of information
FAQ sections
Settings panels
Limited screen space

Types:

Single Expand: Only one panel open at a time
Multi Expand: Multiple panels can be open simultaneously
Nested: Accordions within accordions

Best Practices:

Use clear, descriptive headers
Provide visual indicators (chevron, +/-)
Consider default state (collapsed vs first open)
Animate transitions smoothly (200-300ms)
Maintain content when collapsed
Allow keyboard control

Accessibility:

Use
```
<button>
```
for headers
Set
```
aria-expanded
```
attribute
Use
```
aria-controls
```
to link header and panel
Ensure keyboard navigation (Enter, Space, Arrow keys)
Provide proper heading hierarchy

Example Structure:

html

<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>

垂直堆叠的可展开/收起板块。

适用场景：

包含多个不同板块的长页面
信息的渐进式披露
FAQ板块
设置面板
屏幕空间有限

类型：

单展开：同一时间仅一个面板展开
多展开：可同时展开多个面板
嵌套：手风琴内嵌套手风琴

最佳实践：

使用清晰、描述性的标题
提供视觉指示器（ Chevron箭头、+/-符号）
考虑默认状态（全部折叠或第一个面板展开）
平滑过渡动画（200-300ms）
折叠时保留内容
支持键盘控制

无障碍设计：

标题使用
```
<button>
```
元素
设置
```
aria-expanded
```
属性
使用
```
aria-controls
```
关联标题和面板
确保键盘导航（Enter、Space、箭头键）
使用正确的标题层级

结构示例：

html

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section-1">
      板块标题
      <span class="icon" aria-hidden="true">▼</span>
    </button>
  </h3>
  <div id="section-1" hidden>
    <p>板块内容...</p>
  </div>
</div>

3. Breadcrumbs Pattern

3. 面包屑导航模式

Show user's location in site hierarchy.

When to Use:

Deep site hierarchies (3+ levels)
E-commerce category navigation
Documentation sites
Multi-step processes

Best Practices:

Show current location clearly
Make previous levels clickable
Use appropriate separators (>, /, →)
Keep labels concise
Consider mobile truncation
Place at top of page

Accessibility:

Use
```
<nav>
```
with
```
aria-label="Breadcrumb"
```
Mark current page with
```
aria-current="page"
```
Provide sufficient color contrast
Ensure keyboard navigation

Example:

html

<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>

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

适用场景：

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

最佳实践：

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

无障碍设计：

使用带有
```
aria-label="Breadcrumb"
```
的
```
<nav>
```
元素
用
```
aria-current="page"
```
标记当前页面
提供足够的颜色对比度
确保键盘可导航

示例：

html

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/products/electronics">电子产品</a></li>
    <li aria-current="page">笔记本电脑</li>
  </ol>
</nav>

4. Pagination Pattern

4. 分页模式

Navigate through large sets of content split across pages.

Types:

Numbered: Show page numbers (1, 2, 3...)
Load More: Button to load additional content
Infinite Scroll: Automatically load as user scrolls
Prev/Next: Simple navigation between pages

When to Use:

Search results
Product listings
Blog archives
Data tables

Best Practices:

Show current page clearly
Provide Previous/Next controls
Include First/Last page links
Show total page count or results
Use ellipsis for skipped pages (1 ... 5 6 7 ... 20)
Maintain scroll position appropriately
Consider load time and performance

Accessibility:

Use
```
<nav>
```
with
```
aria-label="Pagination"
```
Mark current page with
```
aria-current="page"
```
Disable non-functional links properly
Provide text alternatives for icon-only controls

在拆分到多个页面的大量内容间导航。

类型：

数字分页：显示页码（1, 2, 3...）
加载更多：点击按钮加载额外内容
无限滚动：用户滚动时自动加载
上一页/下一页：简单的页面间导航

适用场景：

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

最佳实践：

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

无障碍设计：

使用带有
```
aria-label="Pagination"
```
的
```
<nav>
```
元素
用
```
aria-current="page"
```
标记当前页面
正确禁用不可用的链接
为纯图标控件提供文本替代

5. Menu Patterns

5. 菜单模式

Dropdown Menu

下拉菜单

Reveals additional options on click or hover.

Best Practices:

Prefer click over hover for mobile compatibility
Add small delay before closing on hover
Indicate submenu with arrow icon
Keep menu depths shallow (2-3 levels max)
Position intelligently to avoid viewport overflow

点击或悬停时显示额外选项。

最佳实践：

移动端优先使用点击而非悬停
悬停关闭前添加短暂延迟
用箭头图标指示子菜单
保持菜单层级较浅（最多2-3级）
智能定位以避免超出视口

Mega Menu

巨型菜单

Large dropdown showing multiple columns and categories.

When to Use:

E-commerce sites with many categories
Sites with complex information architecture
When standard dropdown feels cramped

Best Practices:

Use grid layout for organization
Include visual elements (icons, images)
Group related items
Provide clear visual hierarchy
Close on outside click or Esc key

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

适用场景：

包含大量分类的电商站点
信息架构复杂的站点
标准下拉菜单空间不足时

最佳实践：

使用网格布局组织内容
包含视觉元素（图标、图片）
分组相关项
提供清晰的视觉层级
点击外部或按Esc键关闭

Hamburger Menu

汉堡菜单

Collapsible menu for mobile navigation.

Best Practices:

Use recognizable icon (three horizontal lines)
Provide label for clarity ("Menu")
Animate opening/closing
Disable body scroll when open
Include close button in menu
Consider alternatives for better discoverability

Accessibility:

Use proper ARIA roles and states
Support keyboard navigation
Announce menu state to screen readers
Ensure focus management

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

最佳实践：

使用可识别的图标（三条水平线）
提供清晰的标签（“菜单”）
添加开启动画
菜单打开时禁用页面滚动
菜单内包含关闭按钮
考虑更易发现的替代方案

无障碍设计：

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

Form Patterns

表单模式

1. Input Validation Pattern

1. 输入验证模式

Provide feedback on user input correctness.

Validation Types:

Required Fields: Must be completed
Format Validation: Email, phone, URL patterns
Length Validation: Min/max characters
Range Validation: Numeric ranges
Custom Rules: Business logic validation

Timing:

On Submit: Traditional approach, all errors at once
On Blur: Validate when leaving field
On Change: Real-time validation as typing
Hybrid: Combine approaches for best UX

Best Practices:

Mark required fields clearly (asterisk, "required" label)
Provide inline error messages near fields
Use clear, helpful error messages
Show success states when appropriate
Group related errors
Disable submit until form is valid (optional)
Preserve user input when showing errors
Support browser autofill

Error Message Guidelines:

Be specific about the problem
Explain how to fix it
Use friendly, non-technical language
Avoid blame ("You entered..." → "Email format invalid")

Visual Indicators:

Red border/background for errors
Green for success/valid
Icons to reinforce state
Sufficient color contrast

Accessibility:

Use
```
aria-invalid="true"
```
for invalid fields
Link errors with
```
aria-describedby
```
Announce errors to screen readers
Ensure error messages are programmatically associated

Example:

html

<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>

提供用户输入正确性的反馈。

验证类型：

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

验证时机：

提交时：传统方式，一次性显示所有错误
失焦时：离开字段时验证
输入时：实时输入验证
混合方式：结合多种方式以获得最佳UX

最佳实践：

清晰标记必填字段（星号、“必填”标签）
在字段附近显示内联错误消息
使用清晰、有用的错误消息
适当显示成功状态
分组相关错误
表单验证通过前可禁用提交按钮（可选）
显示错误时保留用户输入
支持浏览器自动填充

错误消息指南：

明确说明问题
解释如何修复
使用友好、非技术化的语言
避免指责性表述（将“您输入了...”改为“邮箱格式无效”）

视觉指示器：

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

无障碍设计：

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

示例：

html

<div class="form-field">
  <label for="email">
    邮箱地址 <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">
    请输入有效的邮箱地址
  </div>
</div>

2. Multi-Step Forms Pattern

2. 多步骤表单模式

Break long forms into multiple steps or pages.

When to Use:

Complex forms with many fields
Logical grouping of related information
Onboarding flows
Checkout processes
User registration

Components:

Progress Indicator: Show current step and total steps
Step Navigation: Move between steps
Review Step: Summary before submission
Save Draft: Allow returning later

Best Practices:

Keep steps focused on single topic
Show progress clearly
Allow backward navigation
Validate each step before proceeding
Save progress automatically
Provide way to skip optional steps
Show time estimate if possible
Use descriptive step titles

Progress Indicators:

Linear steps (1 → 2 → 3 → 4)
Step labels with numbers
Percentage completion
Visual timeline

Accessibility:

Use
```
aria-label
```
for step indicators
Announce step changes
Ensure keyboard navigation works
Mark completed/current/upcoming steps

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

适用场景：

包含大量字段的复杂表单
相关信息的逻辑分组
引导流程
结账流程
用户注册

组件：

进度指示器：显示当前步骤和总步骤数
步骤导航：在步骤间切换
回顾步骤：提交前的汇总页面
保存草稿：允许稍后返回

最佳实践：

每个步骤聚焦单一主题
清晰显示进度
允许向后导航
进入下一步前验证当前步骤
自动保存进度
提供跳过可选步骤的方式
可能的话显示时间预估
使用描述性的步骤标题

进度指示器：

线性步骤（1 → 2 → 3 → 4）
带数字的步骤标签
完成百分比
视觉时间线

无障碍设计：

步骤指示器使用
```
aria-label
```
播报步骤变化
确保键盘可导航
标记已完成/当前/待完成步骤

3. Inline Editing Pattern

3. 内联编辑模式

Edit content directly in place without separate form.

When to Use:

Spreadsheet-like interfaces
Quick edits to existing content
Data tables
User profiles
Settings pages

Interaction Modes:

Click to Edit: Click field to make editable
Always Editable: Fields always in edit mode
Edit Button: Explicit button to enter edit mode
Row/Item Edit: Edit entire row or item at once

Best Practices:

Provide clear visual feedback for editable areas
Show edit mode clearly (border, background change)
Include Save/Cancel actions
Auto-save on blur (optional)
Validate before saving
Show loading state during save
Handle errors gracefully
Keyboard shortcuts (Enter to save, Esc to cancel)

Visual States:

Default: Shows content, hints at editability
Hover: Indicate interactivity
Edit: Clear input/editing interface
Saving: Loading indicator
Saved: Brief success confirmation

Accessibility:

Use semantic HTML elements
Provide clear labels
Announce state changes
Support keyboard-only interaction

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

适用场景：

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

交互模式：

点击编辑：点击字段进入编辑状态
始终可编辑：字段始终处于编辑模式
编辑按钮：点击明确的按钮进入编辑模式
行/项编辑：一次性编辑整行或整个项

最佳实践：

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

视觉状态：

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

无障碍设计：

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

4. Search Patterns

4. 搜索模式

Autocomplete/Typeahead

自动补全/输入提示

Show suggestions as user types.

Best Practices:

Debounce input (300ms delay)
Highlight matching characters
Show both recent and relevant results
Limit number of suggestions (5-10)
Allow keyboard navigation (arrows, Enter)
Clear suggestions on Esc
Show "No results" state
Include search button as fallback

Accessibility:

Use
```
role="combobox"
```
and
```
aria-autocomplete
```
Announce suggestion count
Use
```
aria-activedescendant
```
for highlighted option
Ensure screen reader support

用户输入时显示建议。

最佳实践：

输入防抖（300ms延迟）
高亮匹配字符
显示最近和相关结果
限制建议数量（5-10个）
允许键盘导航（箭头键、Enter）
按Esc键清除建议
显示“无结果”状态
提供搜索按钮作为备选

无障碍设计：

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

Filtering

筛选

Narrow results based on criteria.

Types:

Faceted Search: Multiple filter categories
Tag Filters: Select/deselect tags
Range Filters: Sliders for numeric ranges
Date Filters: Date pickers or presets

Best Practices:

Show active filters clearly
Display result count
Allow clearing individual or all filters
Update results in real-time or with Apply button
Preserve filter state in URL
Provide filter presets for common queries

根据条件缩小结果范围。

类型：

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

最佳实践：

清晰显示激活的筛选条件
显示结果数量
允许清除单个或所有筛选条件
实时更新结果或通过应用按钮更新
在URL中保留筛选状态
提供常见查询的筛选预设

5. Form Layout Patterns

5. 表单布局模式

Single Column

单列布局

Best for mobile and simplicity.

Advantages:

Easier to scan vertically
Better mobile experience
Reduces cognitive load
Higher completion rates

最适合移动端和简洁场景。

优势：

垂直扫描更轻松
移动端体验更好
降低认知负荷
更高的完成率

Multi-Column

多列布局

Use for related fields or space efficiency.

Best Practices:

Keep related fields together
Left-align labels
Use for short forms only
Stack on mobile

用于相关字段或节省空间。

最佳实践：

相关字段放在一起
标签左对齐
仅用于短表单
移动端自动堆叠

Label Positioning

标签位置

Top Labels: Fastest completion, best for mobile
Left Labels: Space-efficient, good for data entry
Inline Labels: Placeholder-style (use carefully)

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

Data Display Patterns

数据展示模式

1. Table Pattern

1. 表格模式

Display structured data in rows and columns.

When to Use:

Comparing data across multiple dimensions
Large datasets requiring sorting/filtering
Detailed data requiring precision
Admin interfaces and dashboards

Essential Features:

Sorting: Click headers to sort columns
Filtering: Search or filter by column
Pagination: Handle large datasets
Row Selection: Checkboxes for bulk actions
Responsive: Adapt for mobile screens

Advanced Features:

Column Resizing: Drag to adjust width
Column Reordering: Rearrange columns
Frozen Columns: Keep headers/first column visible
Expandable Rows: Show additional details
Inline Editing: Edit cells directly
Export: Download as CSV/Excel

Best Practices:

Left-align text, right-align numbers
Use consistent formatting
Highlight on hover
Show loading states
Handle empty states
Provide clear sorting indicators
Use zebra striping sparingly
Avoid horizontal scrolling when possible

Responsive Strategies:

Horizontal Scroll: Simple but less ideal
Card View: Transform rows into cards
Priority Columns: Hide less important columns
Expandable Rows: Hide details until expanded
Comparison View: Show 2-3 items side-by-side

Accessibility:

Use semantic
```
<table>
```
,
```
<thead>
```
,
```
<tbody>
```
,
```
<th>
```
,
```
<td>
```
Add
```
scope
```
attribute to headers
Provide table caption
Use
```
aria-sort
```
for sortable columns
Ensure keyboard navigation for interactive elements

以行和列显示结构化数据。

适用场景：

跨多个维度比较数据
需要排序/筛选的大型数据集
需要精确显示的详细数据
管理界面和仪表盘

核心功能：

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

高级功能：

列宽调整：拖动调整宽度
列重排：重新排列列顺序
冻结列：保持表头/第一列可见
可展开行：显示额外详情
内联编辑：直接编辑单元格
导出：导出为CSV/Excel格式

最佳实践：

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

响应式策略：

水平滚动：最简单但最不理想
卡片视图：将行转换为卡片
优先级列：隐藏次要列
可展开行：隐藏详情直到展开
对比视图：并排显示2-3个项

无障碍设计：

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

2. Card Pattern

2. 卡片模式

Container for related information with visual hierarchy.

When to Use:

Product listings
User profiles
Dashboard widgets
Content previews
Mixed content types

Anatomy:

Image/Visual: Hero image or icon
Header: Title and metadata
Body: Description or details
Actions: Buttons or links
Footer: Supplementary info

Variations:

Product Card: Image, title, price, add to cart
User Card: Avatar, name, bio, follow button
Article Card: Thumbnail, headline, excerpt, read time
Stat Card: Number, label, trend indicator

Best Practices:

Consistent card sizes in grid
Clear visual hierarchy
Adequate padding and spacing
Hover states for interactivity
Limit actions to 1-2 primary actions
Use subtle shadows for depth
Ensure touch targets are large enough (44x44px min)

Grid Layouts:

Responsive columns (1 on mobile, 2-4 on desktop)
Equal height cards or masonry layout
Consistent gaps between cards

Accessibility:

Use semantic HTML
Provide alt text for images
Ensure sufficient contrast
Make entire card clickable when appropriate
Use heading tags for titles

带有视觉层级的相关信息容器。

适用场景：

产品列表
用户资料
仪表盘小部件
内容预览
混合内容类型

结构：

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

变体：

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

最佳实践：

网格中的卡片尺寸一致
清晰的视觉层级
足够的内边距和间距
悬停状态指示交互性
限制1-2个主要操作
使用细微阴影增加深度
确保触摸目标足够大（最小44x44px）

网格布局：

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

无障碍设计：

使用语义化HTML
为图片提供替代文本
确保足够的对比度
适当情况下让整个卡片可点击
标题使用标题标签

3. List Pattern

3. 列表模式

Sequential display of similar items.

Types:

Simple List: Text-only items
Detailed List: Multiple lines per item
Interactive List: Clickable/selectable items
Grouped List: Organized by categories
Inbox List: Messages with preview, time, status

Best Practices:

Clear visual separation between items
Consistent item height or natural flow
Show item count
Highlight selected items
Provide quick actions
Support multi-select when appropriate
Implement virtual scrolling for long lists

Accessibility:

Use semantic list elements (
```
<ul>
```
,
```
<ol>
```
,
```
<li>
```
)
Provide unique IDs for items
Announce selection changes
Support keyboard navigation

按顺序显示相似项。

类型：

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

最佳实践：

项间清晰的视觉分隔
一致的项高度或自然流
显示项数量
高亮选中项
提供快速操作
适当情况下支持多选
长列表实现虚拟滚动

无障碍设计：

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

4. Grid Pattern

4. 网格模式

Items arranged in rows and columns.

When to Use:

Image galleries
Product catalogs
App launchers
Icon sets
Media libraries

Grid Types:

Fixed Grid: Consistent item sizes
Masonry: Variable heights, Pinterest-style
Responsive Grid: Adapts to screen size

Best Practices:

Use CSS Grid or Flexbox
Maintain aspect ratios
Implement lazy loading for images
Provide grid/list view toggle
Consistent gaps
Handle empty states

Responsive Behavior:

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

项按行和列排列。

适用场景：

图片画廊
产品目录
应用启动器
图标集
媒体库

网格类型：

固定网格：项尺寸一致
瀑布流：高度可变，类似Pinterest风格
响应式网格：适配屏幕尺寸

最佳实践：

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

响应式行为：

移动端：1-2列
平板：2-4列
桌面端：4-6列

5. Dashboard Pattern

5. 仪表盘模式

Overview of key metrics and data visualizations.

Components:

KPI Cards: Key metrics with trends
Charts: Line, bar, pie, area charts
Tables: Detailed data
Activity Feeds: Recent events
Quick Actions: Common tasks

Layout Strategies:

Fixed Layout: Predetermined positions
Draggable Widgets: User-customizable
Responsive Grid: Adapts to screen size

Best Practices:

Prioritize most important metrics
Use consistent timeframes
Provide context (comparisons, trends)
Enable drilling down for details
Update data in real-time or show last update time
Support customization
Export/share capabilities

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

组件：

KPI卡片：带趋势的关键指标
图表：折线图、柱状图、饼图、面积图
表格：详细数据
活动流：近期事件
快速操作：常用任务

布局策略：

固定布局：预定义位置
可拖动小部件：用户可自定义
响应式网格：适配屏幕尺寸

最佳实践：

优先显示最重要的指标
使用一致的时间范围
提供上下文（对比、趋势）
支持钻取查看详情
实时更新数据或显示最后更新时间
支持自定义
导出/分享功能

Feedback Patterns

反馈模式

1. Toast/Snackbar Pattern

1. 提示框/小吃店模式

Brief, temporary message about system state or action result.

When to Use:

Confirm action completion (saved, deleted, sent)
Show brief notifications
Non-critical errors
Undo opportunities

Best Practices:

Display for 3-7 seconds
Position consistently (bottom center or top right)
One toast at a time, or queue multiple
Provide dismiss action
Avoid blocking important content
Keep message concise
Use appropriate colors (success: green, error: red, info: blue)
Offer undo for destructive actions

Don't Use For:

Critical errors requiring user action
Information user must read
Multiple simultaneous messages
Long messages

Accessibility:

Use
```
role="status"
```
or
```
role="alert"
```
Announce to screen readers
Don't auto-dismiss too quickly
Provide manual dismiss option

Example Structure:

html

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

关于系统状态或操作结果的简短临时消息。

适用场景：

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

最佳实践：

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

不适用场景：

需要用户操作的关键错误
用户必须阅读的信息
多条同时显示的消息
长消息

无障碍设计：

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

结构示例：

html

<div class="toast" role="status" aria-live="polite">
  <span>设置已成功保存</span>
  <button aria-label="关闭通知">×</button>
</div>

2. Modal/Dialog Pattern

2. 模态框/对话框模式

Overlay that focuses user attention on specific task or information.

Types:

Alert Dialog: Important message requiring acknowledgment
Confirmation Dialog: Yes/No decisions
Form Dialog: Input collection
Lightbox: Image/media viewer

When to Use:

Critical decisions
Focus on single task
Collect required information
Interrupt destructive actions
Display full-size media

Best Practices:

Dim background content (overlay)
Disable background interaction
Provide clear close option (X button, Cancel, Esc key)
Focus first input or close button on open
Return focus to trigger element on close
Keep content concise
Position in viewport center
Prevent body scroll when open
Avoid modal inception (modal within modal)

Accessibility:

Use
```
role="dialog"
```
or
```
role="alertdialog"
```
Set
```
aria-modal="true"
```
Use
```
aria-labelledby
```
and
```
aria-describedby
```
Implement focus trap
Support Esc to close
Announce to screen readers

Structure:

html

<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>

将用户注意力集中在特定任务或信息上的覆盖层。

类型：

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

适用场景：

关键决策
聚焦单一任务
收集必填信息
中断破坏性操作
显示全尺寸媒体

最佳实践：

模糊背景内容（覆盖层）
禁用背景交互
提供清晰的关闭选项（X按钮、取消、Esc键）
打开时聚焦第一个输入框或关闭按钮
关闭后将焦点返回触发元素
内容简洁
位于视口中央
打开时禁止页面滚动
避免模态框嵌套（模态框内的模态框）

无障碍设计：

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

结构：

html

<div class="modal-overlay">
  <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">确认删除</h2>
    <p>您确定要删除此项目吗？</p>
    <div class="modal-actions">
      <button>取消</button>
      <button class="danger">删除</button>
    </div>
  </div>
</div>

3. Loading States Pattern

3. 加载状态模式

Indicate ongoing process or data fetching.

Types:

Spinners: Circular or linear progress
Progress Bars: Show completion percentage
Skeleton Screens: Content placeholders
Shimmer Effect: Animated placeholder
Inline Loaders: Within buttons or sections

When to Use:

Page loading
API requests
File uploads
Background processing
Infinite scroll loading

Best Practices:

Show immediately (within 100ms)
Indicate progress when possible
Provide estimated time for long operations
Allow cancellation when appropriate
Use skeleton screens for better perceived performance
Avoid blocking entire UI unnecessarily
Show partial content as it loads

Skeleton Screens: Better UX than blank screens or spinners:

Match layout of actual content
Use subtle animation
Load content progressively
Maintain scroll position

Accessibility:

Use
```
aria-busy="true"
```
during loading
Announce loading completion
Provide text alternative for visual loaders
Ensure keyboard users can cancel

指示正在进行的流程或数据获取。

类型：

加载器：圆形或线性进度
进度条：显示完成百分比
骨架屏：内容占位符
微光效果：动画占位符
内联加载器：按钮或板块内的加载器

适用场景：

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

最佳实践：

立即显示（100ms内）
可能的话显示进度
长操作提供预估时间
适当情况下允许取消
使用骨架屏提升感知性能
避免不必要地阻塞整个UI
内容加载时显示部分内容

骨架屏：比空白屏幕或加载器更好的UX：

匹配实际内容的布局
使用细微动画
渐进式加载内容
保持滚动位置

无障碍设计：

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

4. Empty States Pattern

4. 空状态模式

Communicate when no content exists and guide next action.

Types:

First Use: Guide new users
No Results: Search/filter returned nothing
Error State: Something went wrong
Completed State: All tasks done

Components:

Illustration: Visual element
Heading: Clear message
Description: Explanation and guidance
Call-to-Action: Primary next step

Best Practices:

Be encouraging and helpful
Provide clear next action
Use appropriate tone for context
Include relevant illustration
Make CTA prominent
Offer alternatives or suggestions

Examples:

First Use:

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

No Results:

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

Error:

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

Accessibility:

Provide meaningful text
Ensure images have alt text
Make CTAs keyboard accessible

告知用户无内容存在并引导下一步操作。

类型：

首次使用：引导新用户
无结果：搜索/筛选无结果
错误状态：出现错误
完成状态：所有任务已完成

组件：

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

最佳实践：

语气鼓励且有帮助
提供清晰的下一步操作
根据上下文使用适当的语气
包含相关插图
突出显示行动号召
提供替代方案或建议

示例：

首次使用：

"欢迎来到您的收件箱！"
"您目前还没有任何消息。
何不邀请您的团队？"
[邀请团队按钮]

无结果：

"未找到与'查询词'相关的结果"
"尝试不同的关键词或清除筛选条件"
[清除筛选条件按钮]

错误：

"哎呀，出了点问题"
"我们无法加载您的数据，请重试。"
[重试按钮]

无障碍设计：

提供有意义的文本
确保图片有替代文本
行动号召支持键盘操作

5. Notification Badge Pattern

5. 通知徽章模式

Indicate unread items or pending actions.

Types:

Numeric Badge: Show count (5, 12, 99+)
Dot Badge: Indicate presence without count
Status Badge: Online, offline, busy states

When to Use:

Unread messages
Pending notifications
Cart item count
User status indicators

Best Practices:

Position consistently (top-right of icon)
Use contrasting colors
Limit numbers (99+ for large counts)
Clear when viewed
Don't overuse
Size appropriately

Accessibility:

Include in accessible name
Announce updates to screen readers
Example:
```
aria-label="Messages (3 unread)"
```

指示未读项或待处理操作。

类型：

数字徽章：显示数量（5, 12, 99+）
点徽章：仅指示存在不显示数量
状态徽章：在线、离线、忙碌状态

适用场景：

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

最佳实践：

位置一致（图标右上角）
使用对比色
数量限制（大数用99+）
查看后清除
不要过度使用
尺寸合适

无障碍设计：

包含在无障碍名称中
向屏幕阅读器播报更新
示例：
```
aria-label="消息（3条未读）"
```

Interaction Patterns

交互模式

1. Drag and Drop Pattern

1. 拖放模式

Move or reorder items by dragging.

Use Cases:

File uploads
List reordering
Kanban boards
Image galleries
Form builders

Interaction States:

Draggable: Visual indicator (handle icon)
Dragging: Item follows cursor, original position shown
Drop Zone: Highlight valid targets
Invalid: Show when can't drop
Dropped: Animate to final position

Best Practices:

Provide clear drag handles
Show drop zones clearly
Animate transitions smoothly
Support keyboard alternatives
Confirm destructive drops
Auto-scroll when dragging near edges
Show preview of final state

Keyboard Alternative:

Select item
Cut/Copy
Navigate to target
Paste/Insert

Accessibility:

Implement keyboard controls
Announce drag/drop actions
Provide alternative interaction method
Use appropriate ARIA attributes

通过拖动移动或重新排序项。

用例：

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

交互状态：

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

最佳实践：

提供清晰的拖动手柄
清晰显示放置区域
平滑过渡动画
支持键盘替代方案
确认破坏性放置操作
拖动到边缘时自动滚动
显示最终状态预览

键盘替代方案：

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

无障碍设计：

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

2. Infinite Scroll Pattern

2. 无限滚动模式

Automatically load content as user scrolls down.

When to Use:

Social media feeds
Image galleries
News feeds
Product catalogs

Best Practices:

Show loading indicator
Provide "Load More" button as fallback
Maintain scroll position on back navigation
Include footer only after all content
Allow jumping to specific items
Show total count when possible
Provide way to stop auto-loading

Accessibility Concerns:

Announce new content to screen readers
Ensure keyboard users can access all content
Provide skip links
Consider pagination alternative

Performance:

Implement virtual scrolling for large lists
Lazy load images
Remove off-screen content
Debounce scroll events

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

适用场景：

社交媒体信息流
图片画廊
新闻信息流
产品目录

最佳实践：

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

无障碍问题：

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

性能：

长列表实现虚拟滚动
图片懒加载
移除屏幕外内容
滚动事件防抖

3. Filter and Sort Pattern

3. 筛选和排序模式

Refine and organize displayed data.

Filter Types:

Checkboxes: Multi-select categories
Radio Buttons: Single selection
Range Sliders: Numeric ranges
Date Pickers: Date ranges
Search: Text matching

Sort Options:

Alphabetical (A-Z, Z-A)
Numeric (low-high, high-low)
Date (newest, oldest)
Relevance
Popularity

Best Practices:

Show active filters clearly
Display result count
Allow clearing individual filters
Provide "Clear All" option
Update results immediately or with Apply button
Preserve filter state in URL
Default to most useful sort
Show sort direction clearly

Mobile Considerations:

Use bottom sheet or sidebar for filters
Provide filter button with count badge
Allow applying filters before closing panel

细化和组织显示的数据。

筛选类型：

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

排序选项：

字母顺序（A-Z, Z-A）
数值顺序（低到高, 高到低）
日期顺序（最新, 最旧）
相关性
受欢迎程度

最佳实践：

清晰显示激活的筛选条件
显示结果数量
允许清除单个筛选条件
提供“全部清除”选项
实时更新结果或通过应用按钮更新
在URL中保留筛选状态
默认使用最有用的排序方式
清晰显示排序方向

移动端考量：

使用底部弹窗或侧边栏放置筛选器
提供带数量徽章的筛选按钮
允许关闭面板前应用筛选

4. Search Pattern

4. 搜索模式

Help users find specific content or items.

Components:

Search Input: Text field for query
Search Button: Submit search
Clear Button: Reset search
Autocomplete: Suggestions while typing
Recent Searches: Previously searched terms
Filters: Refine results
Results: Matching items

Best Practices:

Make search prominent and easy to find
Show search icon
Provide keyboard shortcut (/, Ctrl+K)
Show search scope if limited
Highlight matching terms in results
Show "No results" state with suggestions
Preserve search in URL
Implement debouncing (300ms)

Search UX:

Instant search vs submit button
Autocomplete suggestions
Fuzzy matching for typos
Search within results
Sort by relevance

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

组件：

搜索输入框：输入查询的文本框
搜索按钮：提交搜索
清除按钮：重置搜索
自动补全：输入时显示建议
最近搜索：之前搜索过的关键词
筛选器：细化结果
结果：匹配的项

最佳实践：

搜索框突出且易于找到
显示搜索图标
提供键盘快捷键（/, Ctrl+K）
搜索范围有限时显示范围
结果中高亮匹配关键词
显示“无结果”状态并提供建议
在URL中保留搜索内容
实现输入防抖（300ms）

搜索UX：

即时搜索 vs 提交按钮
自动补全建议
拼写错误的模糊匹配
结果内搜索
按相关性排序

5. Undo/Redo Pattern

5. 撤销/重做模式

Reverse or replay actions.

When to Use:

Content editors
Drawing applications
Email clients
Any destructive action

Implementation:

Immediate Undo: Toast with undo button
Command Pattern: Stack of reversible actions
Keyboard Shortcuts: Ctrl+Z, Ctrl+Y/Ctrl+Shift+Z
Menu Options: Edit menu items

Best Practices:

Provide undo for all significant actions
Show undo option immediately (toast)
Set reasonable time limit (5-10 seconds)
Clear messaging about what will undo
Support multiple undo levels
Disable when no actions to undo
Persist undo history appropriately

撤销或重做操作。

适用场景：

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

实现方式：

即时撤销：带撤销按钮的提示框
命令模式：可撤销操作的栈
键盘快捷键：Ctrl+Z, Ctrl+Y/Ctrl+Shift+Z
菜单选项：编辑菜单项

最佳实践：

所有重要操作都提供撤销
立即显示撤销选项（提示框）
设置合理的时间限制（5-10秒）
清晰说明撤销的内容
支持多级撤销
无操作可撤销时禁用
适当保留撤销历史

Accessibility Patterns

无障碍设计模式

WCAG Principles

WCAG原则

Perceivable: Information must be presentable to users in ways they can perceive.

Provide text alternatives for non-text content
Provide captions and alternatives for multimedia
Create content that can be presented in different ways
Make it easier to see and hear content

Operable: Interface components must be operable by all users.

Make all functionality keyboard accessible
Give users enough time to read and use content
Don't design content that may cause seizures
Help users navigate and find content

Understandable: Information and UI operation must be understandable.

Make text readable and understandable
Make content appear and operate in predictable ways
Help users avoid and correct mistakes

Robust: Content must be robust enough to be interpreted by various user agents.

Maximize compatibility with current and future tools

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

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

可操作性：界面组件必须对所有用户可操作。

所有功能支持键盘操作
给用户足够的时间阅读和使用内容
不要设计可能导致癫痫的内容
帮助用户导航和查找内容

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

文本可读且易懂
内容的呈现和操作可预测
帮助用户避免和纠正错误

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

最大化与当前和未来工具的兼容性

Keyboard Navigation

键盘导航

Essential Patterns:

Tab: Move forward through interactive elements
Shift+Tab: Move backward
Enter/Space: Activate buttons and links
Arrow Keys: Navigate within components (menus, tabs)
Esc: Close dialogs, cancel actions
Home/End: Jump to first/last item

Focus Management:

Visible focus indicators (outline, highlight)
Logical tab order (follows visual order)
Focus trap in modals
Return focus after closing dialogs
Skip links for main content

Best Practices:

Don't rely on hover-only interactions
Ensure all interactive elements are keyboard accessible
Provide keyboard shortcuts for common actions
Document keyboard shortcuts
Test with keyboard only

核心模式：

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

焦点管理：

可见的焦点指示器（轮廓、高亮）
合理的Tab顺序（遵循视觉顺序）
模态框内的焦点陷阱
关闭对话框后返回焦点
主内容的跳转链接

最佳实践：

不要依赖仅悬停的交互
确保所有交互式元素支持键盘操作
为常用操作提供键盘快捷键
文档化键盘快捷键
仅用键盘测试

ARIA (Accessible Rich Internet Applications)

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

Roles: Define what an element is or does:

```
role="button"
```
,
```
role="tab"
```
,
```
role="dialog"
```

role="navigation"

,

role="main"

,

role="search"

```
role="alert"
```
,
```
role="status"
```
,
```
role="log"
```

States and Properties:

```
aria-expanded
```
: Expandable elements (true/false)
```
aria-selected
```
: Selected items (true/false)
```
aria-checked
```
: Checkboxes (true/false/mixed)
```
aria-disabled
```
: Disabled state (true/false)
```
aria-hidden
```
: Hide from screen readers (true/false)
```
aria-label
```
: Accessible name
```
aria-labelledby
```
: Reference to labeling element
```
aria-describedby
```
: Reference to description
```
aria-live
```
: Announce dynamic changes (polite/assertive)
```
aria-current
```
: Current item in set (page/step/location)

Best Practices:

Use semantic HTML first
Add ARIA when semantic HTML isn't sufficient
Don't override native semantics
Keep ARIA attributes updated with UI state
Test with screen readers

角色：定义元素的类型或功能：

```
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
不要覆盖原生语义
UI状态变化时更新ARIA属性
用屏幕阅读器测试

Screen Reader Support

屏幕阅读器支持

Considerations:

Logical heading hierarchy (h1, h2, h3...)
Descriptive link text (avoid "click here")
Alt text for images
Labels for form inputs
Error messages associated with inputs
Announce dynamic content changes
Provide text alternatives for visual information

Common Screen Readers:

NVDA (Windows, free)
JAWS (Windows, commercial)
VoiceOver (macOS, iOS)
TalkBack (Android)

考量因素：

合理的标题层级（h1, h2, h3...）
描述性链接文本（避免“点击这里”）
图片的替代文本
表单输入的标签
与输入关联的错误消息
播报动态内容变化
为视觉信息提供文本替代

常见屏幕阅读器：

NVDA（Windows，免费）
JAWS（Windows，商用）
VoiceOver（macOS，iOS）
TalkBack（Android）

Color and Contrast

颜色和对比度

Requirements:

Text Contrast: 4.5:1 for normal text, 3:1 for large text (WCAG AA)
Enhanced Contrast: 7:1 for normal, 4.5:1 for large (WCAG AAA)
UI Components: 3:1 for interface elements and graphics

Best Practices:

Don't rely on color alone to convey information
Use patterns, icons, or text in addition to color
Test with color blindness simulators
Provide high contrast mode
Ensure focus indicators have sufficient contrast

要求：

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

最佳实践：

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

Form Accessibility

表单无障碍设计

Labels:

Associate
```
<label>
```
with inputs using
```
for
```
/
```
id
```
Don't use placeholder as only label
Group related inputs with
```
<fieldset>
```
and
```
<legend>
```

Validation:

Associate errors with fields using
```
aria-describedby
```
Mark invalid fields with
```
aria-invalid="true"
```
Announce errors to screen readers with
```
role="alert"
```
Don't rely on color alone for validation states

Instructions:

Provide clear instructions before form
Indicate required fields
Show format requirements
Offer example inputs

标签：

使用
```
for
```
/
```
id
```
将
```
<label>
```
与输入框关联
不要仅用占位符作为标签
用
```
<fieldset>
```
和
```
<legend>
```
分组相关输入

验证：

用
```
aria-describedby
```
关联错误和字段
用
```
aria-invalid="true"
```
标记无效字段
用
```
role="alert"
```
向屏幕阅读器播报错误
不要仅依赖颜色表示验证状态

说明：

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

Responsive Patterns

响应式模式

Mobile-First Approach

移动优先方法

Design for mobile screens first, then enhance for larger screens.

Benefits:

Forces focus on essential content
Progressive enhancement
Better performance on mobile
Easier than desktop-first

Breakpoints:

css

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

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

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

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

先为移动屏幕设计，再为大屏幕增强。

优势：

迫使聚焦核心内容
渐进式增强
移动端性能更好
比桌面优先更简单

断点：

css

/* 移动端：320px - 767px（默认） */

/* 平板：768px+ */
@media (min-width: 768px) { }

/* 桌面端：1024px+ */
@media (min-width: 1024px) { }

/* 大型桌面端：1440px+ */
@media (min-width: 1440px) { }

Adaptive Layouts

自适应布局

Fluid Grids:

Use percentages or flexible units (fr, %)
CSS Grid and Flexbox
Container queries for component-level responsiveness

Flexible Images:

css

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

Responsive Typography:

Relative units (rem, em)
Fluid typography with clamp()
Adjust line length for readability (45-75 characters)

流体网格：

使用百分比或弹性单位（fr, %）
CSS Grid和Flexbox
组件级响应式的容器查询

弹性图片：

css

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

响应式排版：

相对单位（rem, em）
使用clamp()的流体排版
调整行长度以提升可读性（45-75个字符）

Mobile Navigation Patterns

移动端导航模式

Hamburger Menu:

Icon toggles slide-out menu
Most common but can hide navigation
Include label for clarity

Tab Bar:

Fixed bottom navigation (iOS pattern)
3-5 main sections
Always visible

Priority+:

Show items that fit, hide overflow in menu
Adapts to available space
Good for primary navigation

Bottom Sheet:

Slides up from bottom
Good for filters, actions
Easy thumb reach

汉堡菜单：

图标切换滑出菜单
最常见但可能隐藏导航
包含清晰的标签

标签栏：

固定底部导航（iOS模式）
3-5个主要板块
始终可见

优先级+：

显示能容纳的项，溢出项隐藏在菜单中
适配可用空间
适合主导航

底部弹窗：

从底部滑出
适合筛选器、操作
拇指易触及

Touch Interactions

触摸交互

Touch Targets:

Minimum 44x44px tap targets
Adequate spacing between targets
Larger targets for primary actions

Gestures:

Tap: Primary action
Double Tap: Zoom (use carefully)
Long Press: Show context menu
Swipe: Delete, archive, navigate
Pinch: Zoom
Pull to Refresh: Update content

Best Practices:

Provide visual feedback for touches
Avoid hover-dependent interactions
Support both portrait and landscape
Consider thumb zones (easy, stretch, hard to reach)
Test on actual devices

触摸目标：

最小44x44px的点击目标
目标间足够的间距
主要操作使用更大的目标

手势：

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

最佳实践：

触摸时提供视觉反馈
避免依赖悬停的交互
支持竖屏和横屏
考虑拇指区域（易触及、需伸展、难触及）
在实际设备上测试

Responsive Tables

响应式表格

Strategies:

Horizontal Scroll: Simplest but least ideal
Priority Columns: Hide less important columns
Stacked Cards: Each row becomes a card
Flip Headers: Rotate headers to row labels
Comparison View: Show 2-3 items side by side

Example - Stacked Cards:

Desktop:
| Name | Email | Role | Status |

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

策略：

水平滚动：最简单但最不理想
优先级列：隐藏次要列
堆叠卡片：每行变为一个卡片
翻转表头：将表头转为行标签
对比视图：并排显示2-3个项

示例 - 堆叠卡片：

桌面端：
| 姓名 | 邮箱 | 角色 | 状态 |

移动端：
┌─────────────┐
│ 张三        │
│ 邮箱：z@... │
│ 角色：管理员 │
│ 状态：✓     │
└─────────────┘

Common UI Patterns Checklist

常见UI模式检查清单

Button Patterns

按钮模式

Primary action button (filled, high contrast)
Secondary action button (outlined or ghost)
Tertiary/text buttons for low priority actions
Icon buttons for common actions
Button groups for related actions
Toggle buttons for on/off states
Floating action button (FAB) for primary mobile action
Loading state in buttons
Disabled state with reduced opacity

主要操作按钮（填充、高对比度）
次要操作按钮（轮廓或幽灵按钮）
低优先级操作的三级/文本按钮
常用操作的图标按钮
相关操作的按钮组
开关状态的切换按钮
移动端主要操作的浮动操作按钮（FAB）
按钮的加载状态
禁用状态（降低透明度）

Input Patterns

输入模式

Text input with label and placeholder
Password input with show/hide toggle
Search input with icon and clear button
Textarea for multi-line input
Select/dropdown for choosing from options
Radio buttons for single selection from few options
Checkboxes for multi-selection
Toggle switch for on/off settings
Date picker for date selection
File upload with drag-and-drop
Range slider for numeric input
Color picker for color selection

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

Navigation Patterns

导航模式

Top navigation bar
Sidebar navigation
Breadcrumb navigation
Pagination
Tabs
Stepper for multi-step processes
Anchor links for in-page navigation
Back to top button

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

Overlay Patterns

覆盖层模式

Modal dialogs
Slideover/drawer
Popover for contextual information
Tooltip for hints
Dropdown menu
Context menu (right-click)
Bottom sheet (mobile)

模态对话框
滑出/抽屉
上下文信息的弹出框
提示信息的工具提示
下拉菜单
右键菜单
移动端底部弹窗

Feedback Patterns

反馈模式

Toast notifications
Alert banners
Inline messages
Loading spinners
Progress bars
Skeleton screens
Success/error states
Empty states

提示通知
警告横幅
内联消息
加载器
进度条
骨架屏
成功/错误状态
空状态

Content Patterns

内容模式

Card layouts
List views
Grid layouts
Table displays
Timeline/activity feed
Hero section
Image gallery
Carousel/slider
Video player
Avatar/profile picture

卡片布局
列表视图
网格布局
表格展示
时间线/活动流
英雄板块
图片画廊
轮播/滑块
视频播放器
头像/个人资料图片

Design Tokens

设计令牌

Standardized design variables for consistency.

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

Color Tokens

颜色令牌

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

主色调：
- primary-50 到 primary-900（不同色调）

语义颜色：
- success（绿色）
- warning（黄色）
- error（红色）
- info（蓝色）

中性色：
- gray-50 到 gray-900

文本颜色：
- text-primary
- text-secondary
- text-disabled

Spacing Tokens

间距令牌

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

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

Typography Tokens

排版令牌

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

字体大小：
- text-xs: 12px
- text-sm: 14px
- text-base: 16px
- text-lg: 18px
- text-xl: 20px
- text-2xl: 24px

字体粗细：
- normal: 400
- medium: 500
- semibold: 600
- bold: 700

行高：
- tight: 1.25
- normal: 1.5
- relaxed: 1.75

Border Radius Tokens

圆角令牌

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

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

Shadow Tokens

阴影令牌

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

- shadow-sm: 细微浮层
- shadow: 默认浮层
- shadow-md: 中等浮层
- shadow-lg: 大浮层
- shadow-xl: 最大浮层

Performance Considerations

性能考量

Perceived Performance

感知性能

Show content immediately (skeleton screens)
Progressive loading
Optimistic UI updates
Smooth animations (60fps)

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

Actual Performance

实际性能

Code splitting
Lazy loading images and components
Virtual scrolling for long lists
Debouncing and throttling
Caching strategies
Minimize reflows and repaints

代码分割
图片和组件懒加载
长列表虚拟滚动
防抖和节流
缓存策略
最小化重排和重绘

Image Optimization

图片优化

Appropriate formats (WebP, AVIF)
Responsive images (srcset)
Lazy loading
Blur-up placeholder technique
Proper sizing and compression

合适的格式（WebP, AVIF）
响应式图片（srcset）
懒加载
模糊占位符技术
适当的尺寸和压缩

Testing UI Patterns

测试UI模式

Usability Testing

可用性测试

User interviews
Task completion testing
A/B testing
Heat maps and click tracking
Session recordings

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

Accessibility Testing

无障碍测试

Keyboard navigation testing
Screen reader testing
Color contrast checking
Automated accessibility audits (axe, Lighthouse)
Manual WCAG compliance review

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

Cross-browser Testing

跨浏览器测试

Test in major browsers (Chrome, Firefox, Safari, Edge)
Test on actual devices
Use browser dev tools for responsive testing
Check for progressive enhancement

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

Performance Testing

性能测试

Lighthouse audits
Core Web Vitals
Loading time testing
Interaction latency
Animation frame rates

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

Resources and Tools

资源和工具

Design Systems

设计系统

Material Design (Google)
Human Interface Guidelines (Apple)
Fluent Design (Microsoft)
Polaris (Shopify)
Carbon (IBM)
Ant Design
Atlassian Design System

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

Component Libraries

组件库

Shadcn UI
Radix UI
Headless UI
Chakra UI
MUI (Material-UI)
Ant Design
Bootstrap
Tailwind UI

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

Accessibility Tools

无障碍工具

axe DevTools
WAVE
Lighthouse
NVDA (screen reader)
VoiceOver (screen reader)
Color contrast checkers

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

Prototyping Tools

原型工具

Figma
Sketch
Adobe XD
Framer
InVision

Figma
Sketch
Adobe XD
Framer
InVision

Pattern Libraries

模式库

UI Patterns
Patternry
Mobile Patterns
Pttrns

UI Patterns
Patternry
Mobile Patterns
Pttrns

Conclusion

结论

UI design patterns provide proven solutions to common interface challenges. By understanding and applying these patterns appropriately, you can create:

Consistent Interfaces: Familiar patterns reduce learning curve
Accessible Experiences: Built-in accessibility considerations
Efficient Development: Reusable components and standardized approaches
Better UX: Tested patterns that users understand

Remember:

Choose patterns appropriate for your context
Customize patterns to fit your brand and users
Test with real users
Prioritize accessibility
Stay updated with evolving best practices
Focus on user needs over trends

UI patterns are guidelines, not strict rules. Adapt them thoughtfully to create interfaces that serve your users effectively.

UI设计模式为常见的界面挑战提供了经过验证的解决方案。通过理解并适当应用这些模式，您可以创建：

一致的界面：熟悉的模式降低学习曲线
无障碍的体验：内置的无障碍设计考量
高效的开发：可复用组件和标准化方法
更好的UX：用户熟悉的经过测试的模式

请记住：

选择适合您上下文的模式
定制模式以适应您的品牌和用户
与真实用户一起测试
优先考虑无障碍性
跟上不断发展的最佳实践
聚焦用户需求而非趋势

UI模式是指南，而非严格的规则。要深思熟虑地调整它们，以创建能有效服务用户的界面。

ui-design-patterns

Original

Translation

UI Design Patterns

UI设计模式

When to Use This Skill

何时使用此技能

Core Concepts

核心概念

UI Patterns

UI模式

Design Systems

设计系统

Atomic Design Methodology

原子设计方法论

Navigation Patterns

导航模式

1. Tabs Pattern

1. 标签页模式

2. Accordion Pattern

2. 手风琴模式

3. Breadcrumbs Pattern

3. 面包屑导航模式

4. Pagination Pattern

4. 分页模式

5. Menu Patterns

5. 菜单模式

Dropdown Menu

下拉菜单

Mega Menu

巨型菜单

Hamburger Menu

汉堡菜单

Form Patterns

表单模式

1. Input Validation Pattern

1. 输入验证模式

2. Multi-Step Forms Pattern

2. 多步骤表单模式

3. Inline Editing Pattern

3. 内联编辑模式

4. Search Patterns

4. 搜索模式

Autocomplete/Typeahead

自动补全/输入提示

Filtering

筛选

5. Form Layout Patterns

5. 表单布局模式

Single Column

单列布局

Multi-Column

多列布局

Label Positioning

标签位置

Data Display Patterns

数据展示模式

1. Table Pattern

1. 表格模式

2. Card Pattern

2. 卡片模式

3. List Pattern

3. 列表模式

4. Grid Pattern

4. 网格模式

5. Dashboard Pattern

5. 仪表盘模式

Feedback Patterns

反馈模式

1. Toast/Snackbar Pattern

1. 提示框/小吃店模式

2. Modal/Dialog Pattern

2. 模态框/对话框模式

3. Loading States Pattern

3. 加载状态模式

4. Empty States Pattern

4. 空状态模式

5. Notification Badge Pattern

5. 通知徽章模式

Interaction Patterns