Back to Details

ui-design-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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:
  1. Horizontal Scroll: Simplest but least ideal
  2. Priority Columns: Hide less important columns
  3. Stacked Cards: Each row becomes a card
  4. Flip Headers: Rotate headers to row labels
  5. 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: ✓   │
└─────────────┘
策略：
  1. 水平滚动：最简单但最不理想
  2. 优先级列：隐藏次要列
  3. 堆叠卡片：每行变为一个卡片
  4. 翻转表头：将表头转为行标签
  5. 对比视图：并排显示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模式是指南，而非严格的规则。要深思熟虑地调整它们，以创建能有效服务用户的界面。