Back to Details

ui-ux-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI/UX Designer Skill

UI/UX 设计师技能指南

Expert in modern user interface and user experience design for web and mobile applications. Provides comprehensive guidance on design principles, interaction patterns, accessibility, and implementation using modern frameworks and libraries.
精通网页与移动应用的现代用户界面（UI）和用户体验（UX）设计。提供关于设计原则、交互模式、无障碍设计，以及使用现代框架和库实现设计的全面指导。

Core Competencies

核心能力

1. Design Principles

1. 设计原则

  • Visual Hierarchy: Guide user attention with size, color, spacing, contrast
  • Consistency: Maintain patterns across entire application
  • Affordance: Design elements that suggest their function
  • Feedback: Provide clear response to user actions
  • White Space: Use breathing room to reduce cognitive load
  • Typography: Choose readable fonts with proper sizing and spacing
  • Color Theory: Create harmonious palettes with proper contrast
  • Progressive Disclosure: Reveal complexity gradually
  • 视觉层级： 通过尺寸、颜色、间距、对比度引导用户注意力
  • 一致性： 在整个应用中保持统一的设计模式
  • 功能可见性： 设计能暗示自身功能的元素
  • 反馈机制： 对用户操作提供清晰的响应
  • 留白： 利用留白降低认知负荷
  • 排版： 选择易读的字体并设置合适的大小与间距
  • 色彩理论： 创建对比度合适的和谐调色板
  • 渐进式展示： 逐步展示复杂内容

2. User Research & Analysis

2. 用户研究与分析

  • User Personas: Define target user archetypes
  • User Journeys: Map complete user workflows
  • Pain Points: Identify friction in current experience
  • Task Analysis: Break down user goals into steps
  • Competitive Analysis: Learn from similar products
  • Usability Testing: Validate designs with real users
  • A/B Testing: Compare design variations empirically
  • Analytics Review: Use data to inform decisions
  • 用户画像： 定义目标用户原型
  • 用户旅程： 绘制完整的用户工作流程
  • 痛点分析： 识别现有体验中的摩擦点
  • 任务拆解： 将用户目标分解为具体步骤
  • 竞品分析： 借鉴同类产品的优缺点
  • 可用性测试： 通过真实用户验证设计
  • A/B测试： 实证对比不同设计变体
  • 数据分析： 利用数据指导决策

3. Interaction Patterns

3. 交互模式

  • Navigation: Clear, predictable movement through app
  • Forms: Efficient, error-tolerant data collection
  • Feedback: Loading states, success/error messages
  • Microinteractions: Small delightful moments
  • Gestures: Touch and mouse interactions
  • Transitions: Smooth, purposeful animations
  • Empty States: Guide users when no content exists
  • Errors: Helpful, actionable error messages
  • 导航设计： 清晰、可预测的应用内跳转逻辑
  • 表单设计： 高效、容错性强的数据收集表单
  • 反馈设计： 加载状态、成功/错误提示
  • 微交互： 小巧且令人愉悦的交互细节
  • 手势设计： 适配触摸与鼠标的交互方式
  • 过渡动画： 流畅且有意义的动画效果
  • 空状态设计： 无内容时引导用户的界面
  • 错误处理： 提供有用、可执行的错误提示

4. Accessibility (WCAG 2.1)

4. 无障碍设计（WCAG 2.1）

  • Perceivable: Content available to all senses
  • Operable: UI components usable by all
  • Understandable: Information and operation clear
  • Robust: Compatible with assistive technologies
  • Color Contrast: 4.5:1 for normal text, 3:1 for large
  • Keyboard Navigation: All functions keyboard-accessible
  • Screen Readers: Semantic HTML, ARIA labels
  • Focus Indicators: Clear visual focus states
  • 可感知性： 内容可通过多种感官获取
  • 可操作性： UI组件对所有用户可用
  • 可理解性： 信息与操作逻辑清晰易懂
  • 健壮性： 兼容辅助技术
  • 色彩对比度： 普通文本4.5:1，大文本3:1
  • 键盘导航： 所有功能支持键盘操作
  • 屏幕阅读器： 使用语义化HTML、ARIA标签
  • 焦点指示： 清晰的视觉焦点状态

5. Responsive Design

5. 响应式设计

  • Mobile First: Design for smallest screen, enhance up
  • Breakpoints: Common: 640px, 768px, 1024px, 1280px
  • Flexible Grids: Use relative units (%, rem, fr)
  • Touch Targets: Minimum 44x44px for mobile
  • Performance: Optimize for slow networks
  • Progressive Enhancement: Core experience works everywhere
  • 移动优先： 先为最小屏幕设计，再逐步增强
  • 断点设置： 常用断点：640px、768px、1024px、1280px
  • 弹性网格： 使用相对单位（%、rem、fr）
  • 触摸目标： 移动端最小44x44px
  • 性能优化： 适配低速网络环境
  • 渐进增强： 核心体验在所有设备上可用

Modern Tech Stack

现代技术栈

CSS Frameworks

CSS框架

Tailwind CSS (Recommended)
html
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
  Click Me
</button>
Benefits:
  • Utility-first approach
  • No CSS file bloat
  • Rapid prototyping
  • Consistent spacing/colors
  • Easy responsive design
Tailwind CSS（推荐）
html
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
  Click Me
</button>
优势：
  • 实用优先的设计理念
  • 无CSS文件冗余
  • 快速原型设计
  • 统一的间距/色彩规范
  • 轻松实现响应式设计

Component Libraries

组件库

shadcn/ui (Recommended for React)
  • Accessible components (Radix UI primitives)
  • Tailwind-styled
  • Copy/paste, not npm install
  • Full customization
Material UI (MUI)
  • Comprehensive component set
  • Material Design guidelines
  • Enterprise-ready
  • TypeScript support
Chakra UI
  • Accessible by default
  • Composable components
  • Dark mode built-in
  • Great developer experience
shadcn/ui（React项目推荐）
  • 无障碍组件（基于Radix UI原语）
  • Tailwind样式定制
  • 支持复制粘贴使用，无需npm安装
  • 完全可定制
Material UI (MUI)
  • 全面的组件集合
  • 遵循Material Design规范
  • 企业级可用
  • 支持TypeScript
Chakra UI
  • 默认支持无障碍设计
  • 组件可组合
  • 内置深色模式
  • 优秀的开发者体验

Design Tools

设计工具

  • Figma: Collaborative design (industry standard)
  • Adobe XD: Adobe ecosystem integration
  • Sketch: Mac-only, design systems
  • Framer: Interactive prototypes
  • Excalidraw: Quick wireframes
  • Figma： 协作式设计工具（行业标准）
  • Adobe XD： 集成Adobe生态系统
  • Sketch： 仅支持Mac，适用于设计系统
  • Framer： 交互式原型设计
  • Excalidraw： 快速线框图绘制

Icon Libraries

图标库

  • Lucide: Modern, consistent (recommended)
  • Heroicons: Tailwind-designed
  • Feather: Minimal, clean
  • Font Awesome: Comprehensive, classic
  • Lucide： 现代、风格统一（推荐）
  • Heroicons： Tailwind官方设计
  • Feather： 极简、清爽
  • Font Awesome： 全面、经典

UI/UX Workflow

UI/UX 工作流程

Phase 1: Research (20% of time)

阶段1：研究（占20%时间）

  1. Understand Users
    • Who are they?
    • What are their goals?
    • What's their context?
  2. Define Requirements
    • Functional requirements
    • Business goals
    • Technical constraints
  3. Competitive Analysis
    • What works well elsewhere?
    • What should we avoid?
    • Where's the opportunity?
  1. 用户理解
    • 用户是谁？
    • 他们的目标是什么？
    • 使用场景是什么？
  2. 需求定义
    • 功能需求
    • 业务目标
    • 技术限制
  3. 竞品分析
    • 哪些设计在其他产品中效果良好？
    • 哪些设计需要避免？
    • 存在哪些机会点？

Phase 2: Ideation (15% of time)

阶段2：构思（占15%时间）

  1. Sketching
    • Low-fidelity paper sketches
    • Multiple approaches
    • Quick iteration
  2. Wireframing
    • Digital low-fidelity layouts
    • Focus on structure, not style
    • Tools: Figma, Excalidraw
  3. Information Architecture
    • Content organization
    • Navigation structure
    • Page hierarchy
  1. 草图绘制
    • 低保真纸质草图
    • 多种设计方案
    • 快速迭代
  2. 线框图设计
    • 数字化低保真布局
    • 聚焦结构，而非样式
    • 工具：Figma、Excalidraw
  3. 信息架构
    • 内容组织方式
    • 导航结构
    • 页面层级

Phase 3: Design (30% of time)

阶段3：设计（占30%时间）

  1. Visual Design
    • Choose color palette
    • Select typography
    • Create components
    • Design key screens
  2. Design System
    • Define reusable components
    • Document patterns
    • Create style guide
  3. Prototyping
    • Interactive mockups
    • Test user flows
    • Validate interactions
  1. 视觉设计
    • 选择调色板
    • 确定排版方案
    • 创建组件
    • 设计核心页面
  2. 设计系统
    • 定义可复用组件
    • 记录设计模式
    • 创建风格指南
  3. 原型制作
    • 交互式原型
    • 测试用户流程
    • 验证交互逻辑

Phase 4: Implementation (30% of time)

阶段4：实现（占30%时间）

  1. Component Development
    • Build reusable components
    • Implement responsive behavior
    • Add accessibility features
  2. Integration
    • Connect to backend
    • Handle loading/error states
    • Optimize performance
  3. Polish
    • Smooth animations
    • Microinteractions
    • Edge case handling
  1. 组件开发
    • 构建可复用组件
    • 实现响应式行为
    • 添加无障碍特性
  2. 集成开发
    • 连接后端服务
    • 处理加载/错误状态
    • 性能优化
  3. 细节打磨
    • 流畅的动画效果
    • 微交互细节
    • 边缘场景处理

Phase 5: Testing & Iteration (5% of time)

阶段5：测试与迭代（占5%时间）

  1. Usability Testing
    • Observe real users
    • Identify issues
    • Gather feedback
  2. Accessibility Audit
    • Screen reader testing
    • Keyboard navigation
    • Color contrast check
  3. Performance Testing
    • Load times
    • Animation smoothness
    • Mobile performance
  1. 可用性测试
    • 观察真实用户使用
    • 识别问题
    • 收集反馈
  2. 无障碍审计
    • 屏幕阅读器测试
    • 键盘导航测试
    • 色彩对比度检查
  3. 性能测试
    • 加载时间
    • 动画流畅度
    • 移动端性能

Design System Template

设计系统模板

Color Palette

调色板

css
/* Primary Colors */
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;

/* Semantic Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;

/* Neutrals */
--gray-50: #f9fafb;
--gray-500: #6b7280;
--gray-900: #111827;
css
/* Primary Colors */
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;

/* Semantic Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;

/* Neutrals */
--gray-50: #f9fafb;
--gray-500: #6b7280;
--gray-900: #111827;

Typography Scale

排版规范

css
/* Tailwind default scale */
text-xs: 0.75rem (12px)
text-sm: 0.875rem (14px)
text-base: 1rem (16px)
text-lg: 1.125rem (18px)
text-xl: 1.25rem (20px)
text-2xl: 1.5rem (24px)
text-3xl: 1.875rem (30px)
text-4xl: 2.25rem (36px)
css
/* Tailwind default scale */
text-xs: 0.75rem (12px)
text-sm: 0.875rem (14px)
text-base: 1rem (16px)
text-lg: 1.125rem (18px)
text-xl: 1.25rem (20px)
text-2xl: 1.5rem (24px)
text-3xl: 1.875rem (30px)
text-4xl: 2.25rem (36px)

Spacing Scale

间距规范

css
/* Tailwind 4px base unit */
0: 0
1: 0.25rem (4px)
2: 0.5rem (8px)
3: 0.75rem (12px)
4: 1rem (16px)
6: 1.5rem (24px)
8: 2rem (32px)
12: 3rem (48px)
16: 4rem (64px)
css
/* Tailwind 4px base unit */
0: 0
1: 0.25rem (4px)
2: 0.5rem (8px)
3: 0.75rem (12px)
4: 1rem (16px)
6: 1.5rem (24px)
8: 2rem (32px)
12: 3rem (48px)
16: 4rem (64px)

Component Variants

组件变体

Button Sizes:
  • Small: py-1.5 px-3 text-sm
  • Medium: py-2 px-4 text-base
  • Large: py-3 px-6 text-lg
Button Styles:
  • Primary: bg-primary text-white
  • Secondary: bg-gray-200 text-gray-900
  • Ghost: bg-transparent hover:bg-gray-100
  • Danger: bg-red-500 text-white
按钮尺寸：
  • Small: py-1.5 px-3 text-sm
  • Medium: py-2 px-4 text-base
  • Large: py-3 px-6 text-lg
按钮样式：
  • Primary: bg-primary text-white
  • Secondary: bg-gray-200 text-gray-900
  • Ghost: bg-transparent hover:bg-gray-100
  • Danger: bg-red-500 text-white

Common UI Patterns

常见UI模式

Navigation

导航设计

Top Nav (Desktop)
html
<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <!-- Logo -->
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="/logo.svg" alt="Logo">
        </div>
        <!-- Nav items -->
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <a href="#" class="border-b-2 border-blue-500 text-gray-900 px-3 py-2">
            Dashboard
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-3 py-2">
            Projects
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
Mobile Menu (Hamburger)
html
<button class="sm:hidden p-2" aria-label="Open menu">
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
</button>
顶部导航（桌面端）
html
<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <!-- Logo -->
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-auto" src="/logo.svg" alt="Logo">
        </div>
        <!-- Nav items -->
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <a href="#" class="border-b-2 border-blue-500 text-gray-900 px-3 py-2">
            Dashboard
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 px-3 py-2">
            Projects
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
移动端菜单（汉堡按钮）
html
<button class="sm:hidden p-2" aria-label="Open menu">
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
</button>

Forms

表单设计

Input Field
html
<div class="space-y-2">
  <label for="email" class="block text-sm font-medium text-gray-700">
    Email address
  </label>
  <input
    type="email"
    id="email"
    name="email"
    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
    placeholder="you@example.com"
    required
  >
  <p class="text-sm text-gray-500">We'll never share your email.</p>
</div>
Form Validation
html
<!-- Error state -->
<input class="border-red-500 focus:ring-red-500 focus:border-red-500">
<p class="mt-1 text-sm text-red-600">This field is required</p>

<!-- Success state -->
<input class="border-green-500 focus:ring-green-500 focus:border-green-500">
<p class="mt-1 text-sm text-green-600">Looks good!</p>
输入框
html
<div class="space-y-2">
  <label for="email" class="block text-sm font-medium text-gray-700">
    Email address
  </label>
  <input
    type="email"
    id="email"
    name="email"
    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
    placeholder="you@example.com"
    required
  >
  <p class="text-sm text-gray-500">We'll never share your email.</p>
</div>
表单验证
html
<!-- Error state -->
<input class="border-red-500 focus:ring-red-500 focus:border-red-500">
<p class="mt-1 text-sm text-red-600">This field is required</p>

<!-- Success state -->
<input class="border-green-500 focus:ring-green-500 focus:border-green-500">
<p class="mt-1 text-sm text-green-600">Looks good!</p>

Cards

卡片组件

Basic Card
html
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">
    Card Title
  </h3>
  <p class="text-gray-600 mb-4">
    Card description goes here.
  </p>
  <button class="text-blue-600 hover:text-blue-700 font-medium">
    Learn more →
  </button>
</div>
基础卡片
html
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h3 class="text-lg font-semibold text-gray-900 mb-2">
    Card Title
  </h3>
  <p class="text-gray-600 mb-4">
    Card description goes here.
  </p>
  <button class="text-blue-600 hover:text-blue-700 font-medium">
    Learn more →
  </button>
</div>

Modals/Dialogs

模态框/对话框

Modal Structure
html
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold">Modal Title</h2>
      <button class="text-gray-400 hover:text-gray-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    
    <!-- Content -->
    <div class="mb-6">
      <p class="text-gray-600">Modal content goes here.</p>
    </div>
    
    <!-- Footer -->
    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
        Cancel
      </button>
      <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
        Confirm
      </button>
    </div>
  </div>
</div>
模态框结构
html
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4">
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold">Modal Title</h2>
      <button class="text-gray-400 hover:text-gray-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    
    <!-- Content -->
    <div class="mb-6">
      <p class="text-gray-600">Modal content goes here.</p>
    </div>
    
    <!-- Footer -->
    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
        Cancel
      </button>
      <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
        Confirm
      </button>
    </div>
  </div>
</div>

Loading States

加载状态

Spinner
html
<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Skeleton Loading
html
<div class="animate-pulse space-y-4">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
加载动画
html
<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
骨架屏加载
html
<div class="animate-pulse space-y-4">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

Toasts/Notifications

提示框/通知

Success Toast
html
<div class="fixed top-4 right-4 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg">
  <div class="flex items-start">
    <svg class="h-5 w-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
    </svg>
    <div class="ml-3">
      <p class="text-sm font-medium text-green-800">Successfully saved!</p>
    </div>
  </div>
</div>
成功提示
html
<div class="fixed top-4 right-4 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg">
  <div class="flex items-start">
    <svg class="h-5 w-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
    </svg>
    <div class="ml-3">
      <p class="text-sm font-medium text-green-800">Successfully saved!</p>
    </div>
  </div>
</div>

Accessibility Checklist

无障碍设计检查清单

Essential Requirements ✅

基础要求 ✅

  • All images have alt text
  • Forms have associated labels
  • Color contrast meets WCAG AA (4.5:1)
  • All interactive elements keyboard accessible
  • Focus indicators visible
  • Headings follow logical hierarchy (h1 → h2 → h3)
  • ARIA labels for icon buttons
  • Skip to main content link
  • Error messages associated with inputs
  • No information conveyed by color alone
  • 所有图片包含替代文本
  • 表单关联标签
  • 色彩对比度符合WCAG AA标准（4.5:1）
  • 所有交互元素支持键盘操作
  • 焦点指示可见
  • 标题遵循逻辑层级（h1 → h2 → h3）
  • 图标按钮添加ARIA标签
  • 跳过至主内容的链接
  • 错误提示与输入框关联
  • 不单独通过颜色传递信息

Advanced Requirements ✅

进阶要求 ✅

  • Screen reader tested (NVDA, JAWS, VoiceOver)
  • Keyboard shortcuts documented
  • Reduced motion respected (prefers-reduced-motion)
  • High contrast mode supported
  • Text can be resized to 200%
  • Content reflows at 320px width
  • Timeout warnings with extension option
  • ARIA landmarks for page regions
  • 已通过屏幕阅读器测试（NVDA、JAWS、VoiceOver）
  • 键盘快捷键已文档化
  • 尊重减少动画的设置（prefers-reduced-motion）
  • 支持高对比度模式
  • 文本可放大至200%
  • 内容在320px宽度下可重排
  • 超时提示支持延长时间
  • 页面区域添加ARIA地标

Responsive Design Patterns

响应式设计模式

Mobile-First Approach

移动优先方案

html
<!-- Base styles for mobile -->
<div class="p-4 text-sm">
  <!-- Enhanced for tablet -->
  <div class="sm:p-6 sm:text-base">
    <!-- Enhanced for desktop -->
    <div class="lg:p-8 lg:text-lg">
      Content
    </div>
  </div>
</div>
html
<!-- Base styles for mobile -->
<div class="p-4 text-sm">
  <!-- Enhanced for tablet -->
  <div class="sm:p-6 sm:text-base">
    <!-- Enhanced for desktop -->
    <div class="lg:p-8 lg:text-lg">
      Content
    </div>
  </div>
</div>

Responsive Grid

响应式网格

html
<!-- 1 column mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
html
<!-- 1 column mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Typography

响应式排版

html
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold">
  Responsive Heading
</h1>
html
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold">
  Responsive Heading
</h1>

Show/Hide by Screen Size

按屏幕尺寸显示/隐藏内容

html
<!-- Show only on mobile -->
<div class="block sm:hidden">Mobile content</div>

<!-- Hide on mobile -->
<div class="hidden sm:block">Desktop content</div>
html
<!-- Show only on mobile -->
<div class="block sm:hidden">Mobile content</div>

<!-- Hide on mobile -->
<div class="hidden sm:block">Desktop content</div>

Animation Guidelines

动画设计指南

Timing Functions

时间函数

css
/* Tailwind defaults */
ease-linear: linear
ease-in: cubic-bezier(0.4, 0, 1, 1)
ease-out: cubic-bezier(0, 0, 0.2, 1)  /* Best for entering */
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
css
/* Tailwind defaults */
ease-linear: linear
ease-in: cubic-bezier(0.4, 0, 1, 1)
ease-out: cubic-bezier(0, 0, 0.2, 1)  /* Best for entering */
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)

Duration Guidelines

时长规范

  • Instant: <100ms (hover effects)
  • Quick: 100-200ms (small transitions)
  • Normal: 200-300ms (most transitions)
  • Slow: 300-500ms (large movements)
  • Avoid: >500ms (feels sluggish)
  • 即时： <100ms（悬停效果）
  • 快速： 100-200ms（小型过渡）
  • 标准： 200-300ms（大多数过渡）
  • 缓慢： 300-500ms（大型移动效果）
  • 避免： >500ms（会显得迟缓）

Common Transitions

常见过渡效果

html
<!-- Hover effects -->
<button class="transition-colors duration-200 hover:bg-blue-600">

<!-- Fade in/out -->
<div class="transition-opacity duration-300 opacity-0 hover:opacity-100">

<!-- Slide in -->
<div class="transition-transform duration-300 transform translate-x-full group-hover:translate-x-0">

<!-- Scale -->
<img class="transition-transform duration-200 hover:scale-105">
html
<!-- Hover effects -->
<button class="transition-colors duration-200 hover:bg-blue-600">

<!-- Fade in/out -->
<div class="transition-opacity duration-300 opacity-0 hover:opacity-100">

<!-- Slide in -->
<div class="transition-transform duration-300 transform translate-x-full group-hover:translate-x-0">

<!-- Scale -->
<img class="transition-transform duration-200 hover:scale-105">

Dark Mode Implementation

深色模式实现

Tailwind Dark Mode

Tailwind 深色模式

html
<!-- Enable in tailwind.config.js: darkMode: 'class' -->

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <button class="bg-blue-500 dark:bg-blue-600">
    Click me
  </button>
</div>
html
<!-- Enable in tailwind.config.js: darkMode: 'class' -->

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <button class="bg-blue-500 dark:bg-blue-600">
    Click me
  </button>
</div>

Dark Mode Toggle

深色模式切换

javascript
// Toggle function
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}

// Initialize on load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
}
javascript
// Toggle function
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}

// Initialize on load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
}

Common Pitfalls & Solutions

常见陷阱与解决方案

Pitfall 1: Too Many Colors

陷阱1：颜色使用过多

Problem: Inconsistent color usage, visual chaos
Solution: Use a constrained palette (1 primary, 1-2 accent, neutrals)
问题： 颜色使用不一致，视觉混乱
解决方案： 使用受限调色板（1个主色、1-2个辅助色、中性色）

Pitfall 2: Inconsistent Spacing

陷阱2：间距不一致

Problem: Elements feel unaligned, unprofessional
Solution: Use 4px or 8px base unit, stick to spacing scale
问题： 元素对齐混乱，显得不专业
解决方案： 使用4px或8px作为基础单位，严格遵循间距规范

Pitfall 3: Poor Contrast

陷阱3：对比度不足

Problem: Text hard to read, fails accessibility
Solution: Use contrast checker, aim for 4.5:1 minimum
问题： 文本难以阅读，不符合无障碍要求
解决方案： 使用对比度检查工具，确保至少达到4.5:1

Pitfall 4: Tiny Touch Targets

陷阱4：触摸目标过小

Problem: Hard to tap on mobile
Solution: Minimum 44x44px for all interactive elements
问题： 移动端难以点击
解决方案： 所有交互元素最小尺寸为44x44px

Pitfall 5: No Loading States

陷阱5：无加载状态

Problem: Users unsure if action worked
Solution: Show spinners, disable buttons, provide feedback
问题： 用户不确定操作是否成功
解决方案： 显示加载动画、禁用按钮、提供反馈

Pitfall 6: Desktop-Only Design

陷阱6：仅适配桌面端的设计

Problem: Broken on mobile
Solution: Design mobile-first, test on real devices
问题： 移动端显示异常
解决方案： 采用移动优先设计，在真实设备上测试

Pitfall 7: Inaccessible Forms

陷阱7：无障碍性差的表单

Problem: Screen readers can't navigate
Solution: Associate labels, use semantic HTML, add ARIA
问题： 屏幕阅读器无法导航
解决方案： 关联标签、使用语义化HTML、添加ARIA属性

Resources

资源推荐

Learning

学习资源

Tools

工具资源

Inspiration

灵感来源

Success Criteria

成功标准

Good UI/UX achieves:
  • ✅ Users complete tasks efficiently
  • ✅ Zero confusion about how to use interface
  • ✅ Accessible to all users (WCAG AA minimum)
  • ✅ Works on all screen sizes
  • ✅ Fast load times (<3s initial, <1s interactions)
  • ✅ Consistent visual language throughout
  • ✅ Delightful microinteractions
  • ✅ Error messages are helpful
  • ✅ Users don't need documentation
Poor UI/UX results in:
  • ❌ High bounce rates
  • ❌ Support tickets about "how to..."
  • ❌ Accessibility complaints
  • ❌ Mobile users leave immediately
  • ❌ Frustrated users, negative reviews
优秀的UI/UX设计需达到：
  • ✅ 用户能高效完成任务
  • ✅ 用户对操作逻辑无困惑
  • ✅ 对所有用户无障碍（至少符合WCAG AA标准）
  • ✅ 适配所有屏幕尺寸
  • ✅ 加载速度快（首次加载<3s，交互响应<1s）
  • ✅ 视觉语言全程统一
  • ✅ 拥有令人愉悦的微交互
  • ✅ 错误提示有用且可执行
  • ✅ 用户无需查看文档即可使用
糟糕的UI/UX设计会导致：
  • ❌ 高跳出率
  • ❌ 大量关于“如何操作”的支持工单
  • ❌ 无障碍投诉
  • ❌ 移动端用户立即离开
  • ❌ 用户不满，负面评价