ui-ux-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUI/UX Design Principles
UI/UX设计原则
This skill provides expert guidance on user interface and user experience design, applicable across all frontend frameworks.
本技能提供用户界面和用户体验设计方面的专业指导，适用于所有前端框架。
When to Apply This Skill
何时使用该技能
Use these principles when:
- Designing component layouts and visual hierarchy
- Creating or improving user flows
- Making design system decisions
- Implementing responsive designs
- Ensuring accessibility compliance
- Discussing color, typography, or spacing
在以下场景中使用这些原则：
- 设计组件布局和视觉层级
- 创建或优化用户流程
- 做出设计系统相关决策
- 实现响应式设计
- 确保可访问性合规
- 讨论色彩、排版或间距方案
Core Design Principles
核心设计原则
1. Visual Hierarchy
1. 视觉层级
Establish Clear Information Architecture
- Use size, color, and spacing to indicate importance
- Guide user attention to primary actions
- Group related elements visually
css
/* Good: Clear hierarchy */
.card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.card-description {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.card-metadata {
font-size: 0.875rem;
color: var(--text-tertiary);
}建立清晰的信息架构
- 利用字号、颜色和间距体现内容重要性
- 引导用户注意力集中到主要操作上
- 对相关元素进行视觉分组
css
/* 优秀示例：层级清晰 */
.card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.card-description {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.card-metadata {
font-size: 0.875rem;
color: var(--text-tertiary);
}2. Consistency
2. 一致性
Design System Tokens
- Define colors, spacing, typography centrally
- Use CSS variables or design tokens
- Maintain consistency across components
css
:root {
/* Spacing scale (4px base) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
/* Color palette */
--primary: #3b82f6;
--primary-hover: #2563eb;
--danger: #ef4444;
--success: #10b981;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', monospace;
}设计系统Token
- 统一定义色彩、间距、排版规则
- 使用CSS变量或设计Token
- 保持所有组件风格统一
css
:root {
/* 间距体系（基础单位4px） */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
/* 调色板 */
--primary: #3b82f6;
--primary-hover: #2563eb;
--danger: #ef4444;
--success: #10b981;
/* 排版 */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', monospace;
}3. Responsive Design
3. 响应式设计
Mobile-First Approach
- Design for smallest screen first
- Progressively enhance for larger screens
- Use fluid typography and spacing
css
/* Mobile-first */
.container {
padding: var(--space-4);
max-width: 100%;
}
/* Tablet */
@media (min-width: 768px) {
.container {
padding: var(--space-6);
max-width: 720px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
padding: var(--space-8);
max-width: 1200px;
}
}Fluid Typography
css
/* Responsive font sizing */
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
}
p {
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.6;
}移动端优先方案
- 先针对最小尺寸屏幕设计
- 针对更大屏幕逐步增强体验
- 使用流式排版和间距
css
/* 移动端优先 */
.container {
padding: var(--space-4);
max-width: 100%;
}
/* 平板端 */
@media (min-width: 768px) {
.container {
padding: var(--space-6);
max-width: 720px;
}
}
/* 桌面端 */
@media (min-width: 1024px) {
.container {
padding: var(--space-8);
max-width: 1200px;
}
}流式排版
css
/* 响应式字号设置 */
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
}
p {
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.6;
}4. Accessibility (a11y)
4. 可访问性（a11y）
WCAG 2.1 AA Compliance
Color Contrast
- Text: 4.5:1 minimum contrast ratio
- Large text (18pt+): 3:1 minimum
- Interactive elements: Clear focus states
css
/* Good: Sufficient contrast */
.button-primary {
background: #2563eb; /* Contrast with white text: 8.6:1 */
color: #ffffff;
}
/* Focus states for keyboard navigation */
.button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}Semantic HTML
html
<!-- Good: Semantic and accessible -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<main>
<article>
<h1>Page Title</h1>
<section>
<h2>Section Title</h2>
<p>Content...</p>
</section>
</article>
</main>
<!-- Bad: Divitis and non-semantic -->
<div class="navigation">
<div class="nav-item">Home</div>
</div>ARIA Attributes
html
<!-- Loading state -->
<button aria-busy="true" aria-live="polite">
<span aria-hidden="true">⏳</span>
Loading...
</button>
<!-- Error message -->
<input
type="email"
aria-describedby="email-error"
aria-invalid="true"
/>
<span id="email-error" role="alert">
Please enter a valid email address
</span>符合WCAG 2.1 AA标准
色彩对比度
- 普通文本：最低对比度4.5:1
- 大字号文本（18pt及以上）：最低对比度3:1
- 交互元素：提供清晰的聚焦状态
css
/* 优秀示例：对比度充足 */
.button-primary {
background: #2563eb; /* 与白色文本对比度：8.6:1 */
color: #ffffff;
}
/* 适配键盘导航的聚焦状态 */
.button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}语义化HTML
html
<!-- 优秀示例：语义化且可访问 -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
<main>
<article>
<h1>页面标题</h1>
<section>
<h2>板块标题</h2>
<p>内容...</p>
</section>
</article>
</main>
/* 反面示例：Div堆砌无语义 */
<div class="navigation">
<div class="nav-item">首页</div>
</div>ARIA属性
html
<!-- 加载状态 -->
<button aria-busy="true" aria-live="polite">
<span aria-hidden="true">⏳</span>
加载中...
</button>
<!-- 错误提示 -->
<input
type="email"
aria-describedby="email-error"
aria-invalid="true"
/>
<span id="email-error" role="alert">
请输入有效的电子邮箱地址
</span>5. User Feedback
5. 用户反馈
Loading States
jsx
// Skeleton screens for content loading
function UserCardSkeleton() {
return (
<div className="animate-pulse">
<div className="h-12 w-12 bg-gray-300 rounded-full" />
<div className="h-4 bg-gray-300 rounded w-3/4 mt-2" />
<div className="h-4 bg-gray-300 rounded w-1/2 mt-2" />
</div>
);
}Error States
jsx
// Clear, actionable error messages
function ErrorMessage({ error, retry }) {
return (
<div role="alert" className="error-banner">
<svg aria-hidden="true">⚠️</svg>
<div>
<h3>Something went wrong</h3>
<p>{error.message}</p>
</div>
<button onClick={retry}>Try Again</button>
</div>
);
}Success Feedback
- Provide immediate visual confirmation
- Use toast notifications for non-blocking feedback
- Maintain context (don't navigate away immediately)
加载状态
jsx
// 内容加载的骨架屏
function UserCardSkeleton() {
return (
<div className="animate-pulse">
<div className="h-12 w-12 bg-gray-300 rounded-full" />
<div className="h-4 bg-gray-300 rounded w-3/4 mt-2" />
<div className="h-4 bg-gray-300 rounded w-1/2 mt-2" />
</div>
);
}错误状态
jsx
// 清晰、可操作的错误提示
function ErrorMessage({ error, retry }) {
return (
<div role="alert" className="error-banner">
<svg aria-hidden="true">⚠️</svg>
<div>
<h3>出现问题</h3>
<p>{error.message}</p>
</div>
<button onClick={retry}>重试</button>
</div>
);
}成功反馈
- 提供即时的视觉确认
- 使用toast通知提供非阻塞反馈
- 保留上下文（不要立即跳转页面）
6. Interaction Design
6. 交互设计
Button States
css
.button {
/* Default state */
background: var(--primary);
color: white;
transition: all 150ms ease;
/* Hover state */
&:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
/* Active state */
&:active {
transform: translateY(0);
}
/* Disabled state */
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Loading state */
&[aria-busy="true"] {
position: relative;
color: transparent;
}
}Microinteractions
- Provide subtle feedback for user actions
- Use transitions for state changes
- Keep animations under 300ms for responsiveness
css
/* Card hover effect */
.card {
transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}按钮状态
css
.button {
/* 默认状态 */
background: var(--primary);
color: white;
transition: all 150ms ease;
/* 悬浮状态 */
&:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
/* 激活状态 */
&:active {
transform: translateY(0);
}
/* 禁用状态 */
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 加载状态 */
&[aria-busy="true"] {
position: relative;
color: transparent;
}
}微交互
- 为用户操作提供微妙的反馈
- 状态切换使用过渡效果
- 动画时长控制在300ms以内保证响应速度
css
/* 卡片悬浮效果 */
.card {
transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}7. Form Design
7. 表单设计
User-Friendly Forms
html
<form>
<!-- Label association -->
<label for="email">
Email Address
<span aria-label="required">*</span>
</label>
<input
id="email"
type="email"
required
autocomplete="email"
placeholder="you@example.com"
aria-describedby="email-hint"
/>
<small id="email-hint">We'll never share your email</small>
<!-- Inline validation -->
<div role="alert" id="email-error" class="hidden">
Please enter a valid email address
</div>
</form>Form Best Practices
- One column layout on mobile
- Group related fields
- Show validation inline and on submit
- Disable submit button during processing
- Preserve user input on errors
用户友好的表单
html
<form>
<!-- 标签关联 -->
<label for="email">
电子邮箱地址
<span aria-label="required">*</span>
</label>
<input
id="email"
type="email"
required
autocomplete="email"
placeholder="you@example.com"
aria-describedby="email-hint"
/>
<small id="email-hint">我们绝不会分享您的邮箱</small>
<!-- 内联校验 -->
<div role="alert" id="email-error" class="hidden">
请输入有效的电子邮箱地址
</div>
</form>表单最佳实践
- 移动端使用单列布局
- 对相关字段进行分组
- 内联和提交时都展示校验结果
- 处理中禁用提交按钮
- 出错时保留用户已输入内容
8. Color Theory
8. 色彩理论
Color Palette Structure
css
:root {
/* Primary palette (brand) */
--primary-50: #eff6ff;
--primary-500: #3b82f6; /* Main brand color */
--primary-900: #1e3a8a;
/* Semantic colors */
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
/* Neutral palette */
--gray-50: #f9fafb;
--gray-500: #6b7280;
--gray-900: #111827;
/* Text colors */
--text-primary: var(--gray-900);
--text-secondary: var(--gray-600);
--text-tertiary: var(--gray-400);
}Dark Mode Support
css
@media (prefers-color-scheme: dark) {
:root {
--text-primary: var(--gray-50);
--text-secondary: var(--gray-400);
--bg-primary: var(--gray-900);
--bg-secondary: var(--gray-800);
}
}调色板结构
css
:root {
/* 主色调（品牌色） */
--primary-50: #eff6ff;
--primary-500: #3b82f6; /* 品牌主色 */
--primary-900: #1e3a8a;
/* 语义化颜色 */
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
/* 中性色 */
--gray-50: #f9fafb;
--gray-500: #6b7280;
--gray-900: #111827;
/* 文本颜色 */
--text-primary: var(--gray-900);
--text-secondary: var(--gray-600);
--text-tertiary: var(--gray-400);
}深色模式支持
css
@media (prefers-color-scheme: dark) {
:root {
--text-primary: var(--gray-50);
--text-secondary: var(--gray-400);
--bg-primary: var(--gray-900);
--bg-secondary: var(--gray-800);
}
}9. Typography
9. 排版
Typographic Scale
css
:root {
/* Type scale (1.25 ratio) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
/* Line heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
}Readable Text
- Optimal line length: 50-75 characters
- Line height: 1.5-1.75 for body text
- Sufficient contrast (4.5:1 minimum)
字号体系
css
:root {
/* 字号比例（1.25倍递增） */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
/* 行高 */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
}文本可读性
- 最佳行宽：50-75个字符
- 正文行高：1.5-1.75
- 对比度充足（最低4.5:1）
Design Patterns
设计模式
Card Pattern
卡片模式
jsx
function Card({ title, description, action, image }) {
return (
<article className="card">
{image && <img src={image} alt="" className="card-image" />}
<div className="card-content">
<h3 className="card-title">{title}</h3>
<p className="card-description">{description}</p>
</div>
{action && (
<footer className="card-footer">
<button>{action.label}</button>
</footer>
)}
</article>
);
}jsx
function Card({ title, description, action, image }) {
return (
<article className="card">
{image && <img src={image} alt="" className="card-image" />}
<div className="card-content">
<h3 className="card-title">{title}</h3>
<p className="card-description">{description}</p>
</div>
{action && (
<footer className="card-footer">
<button>{action.label}</button>
</footer>
)}
</article>
);
}Modal Pattern
弹窗模式
jsx
function Modal({ isOpen, onClose, title, children }) {
if (!isOpen) return null;
return (
<div
className="modal-overlay"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<div
className="modal-content"
onClick={(e) => e.stopPropagation()}
>
<header className="modal-header">
<h2 id="modal-title">{title}</h2>
<button
onClick={onClose}
aria-label="Close modal"
>
×
</button>
</header>
<div className="modal-body">{children}</div>
</div>
</div>
);
}jsx
function Modal({ isOpen, onClose, title, children }) {
if (!isOpen) return null;
return (
<div
className="modal-overlay"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<div
className="modal-content"
onClick={(e) => e.stopPropagation()}
>
<header className="modal-header">
<h2 id="modal-title">{title}</h2>
<button
onClick={onClose}
aria-label="Close modal"
>
×
</button>
</header>
<div className="modal-body">{children}</div>
</div>
</div>
);
}UX Best Practices
UX最佳实践
- Progressive Disclosure - Show only what's necessary, reveal details on demand
- Consistent Navigation - Keep navigation in expected locations
- Forgiving Design - Allow undo, confirm destructive actions
- Performance Perception - Use optimistic updates, skeleton screens
- Mobile Gestures - Support swipe, pinch-to-zoom where appropriate
- 渐进式披露 - 仅展示必要内容，按需展示细节
- 导航一致性 - 导航放在用户预期的位置
- 容错设计 - 支持撤销操作，破坏性操作需要二次确认
- 性能感知 - 使用乐观更新、骨架屏优化感知性能
- 移动端手势 - 合适的场景支持滑动、捏合缩放等手势
Design System Checklist
设计系统检查清单
When building a design system:
- Color palette with semantic naming
- Typography scale and font families
- Spacing scale (4px or 8px base)
- Component library with consistent API
- Accessibility guidelines
- Dark mode support
- Documentation with live examples
- Design tokens (CSS variables or similar)
搭建设计系统时需要确认：
- 带有语义化命名的调色板
- 字号体系和字体家族
- 间距体系（基础单位4px或8px）
- API一致的组件库
- 可访问性指南
- 深色模式支持
- 带实时示例的文档
- 设计Token（CSS变量或其他实现）
Tools and Resources
工具和资源
- Design Tools: Figma, Adobe XD
- Accessibility: axe DevTools, WAVE
- Color Contrast: WebAIM Contrast Checker
- Typography: Modular Scale Calculator
- Icons: Heroicons, Lucide, Phosphor
- 设计工具：Figma、Adobe XD
- 可访问性工具：axe DevTools、WAVE
- 色彩对比度工具：WebAIM Contrast Checker
- 排版工具：Modular Scale Calculator
- 图标库：Heroicons、Lucide、Phosphor
Anti-Patterns to Avoid
需要避免的反模式
❌ Low contrast text
❌ Tiny touch targets on mobile (minimum 44×44px)
❌ Removing focus outlines without alternative
❌ Auto-playing media without controls
❌ Using color alone to convey information
❌ Horizontal scrolling (except carousels)
❌ Opening links in new tabs without indication
❌ 低对比度文本
❌ 移动端触控目标过小（最小尺寸应为44×44px）
❌ 移除聚焦边框且没有替代方案
❌ 自动播放媒体且没有控制开关
❌ 仅使用颜色传递信息
❌ 横向滚动（轮播组件除外）
❌ 无提示打开新标签页的链接