ui-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI/UX Best Practices Frontend Design

UI/UX最佳实践：前端设计

Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development.

本指南是全面的UI/UX与前端设计最佳实践手册，包含8个分类下的42条规则，按影响优先级排序，指导开发人员创建具备可访问性、高性能和用户友好性的界面。

When to Apply

适用场景

Reference these guidelines when:

Structuring HTML for accessibility and semantics
Writing CSS for responsive layouts and visual hierarchy
Optimizing images and fonts for Core Web Vitals
Designing forms with proper validation and error handling
Adding animations and interactive elements

在以下场景中可参考本指南：

为可访问性和语义化构建HTML结构
编写用于响应式布局和视觉层级的CSS
针对Core Web Vitals优化图片和字体
设计带有适当验证和错误处理的表单
添加动画和交互元素

Rule Categories by Priority

按优先级划分的规则分类


access-
cwv-
layout-
resp-
typo-
color-
form-
anim-

Priority	Category	Impact	Prefix
1	Accessibility & WCAG Compliance	CRITICAL	`access-`
2	Core Web Vitals Optimization	CRITICAL	`cwv-`
3	Visual Hierarchy & Layout	HIGH	`layout-`
4	Responsive & Mobile-First Design	HIGH	`resp-`
5	Typography & Font Loading	MEDIUM-HIGH	`typo-`
6	Color & Contrast	MEDIUM	`color-`
7	Forms & Validation UX	MEDIUM	`form-`
8	Animation & Performance	LOW-MEDIUM	`anim-`


access-
cwv-
layout-
resp-
typo-
color-
form-
anim-

优先级	分类	影响程度	前缀
1	可访问性与WCAG合规性	关键	`access-`
2	Core Web Vitals优化	关键	`cwv-`
3	视觉层级与布局	高	`layout-`
4	响应式与移动优先设计	高	`resp-`
5	排版与字体加载	中高	`typo-`
6	颜色与对比度	中	`color-`
7	表单与验证UX	中	`form-`
8	动画与性能	中低	`anim-`

Quick Reference

快速参考

1. Accessibility & WCAG Compliance (CRITICAL)

1. 可访问性与WCAG合规性（关键）

```
access-semantic-html
```
- Use semantic HTML elements for screen readers
```
access-keyboard-navigation
```
- Ensure full keyboard navigation
```
access-focus-indicators
```
- Provide visible focus indicators
```
access-alt-text
```
- Provide meaningful alt text for images
```
access-aria-labels
```
- Use ARIA labels for icon-only controls
```
access-target-size
```
- Ensure minimum touch target size (24×24px)
```
access-heading-hierarchy
```
- Maintain logical heading hierarchy

```
access-semantic-html
```
- 为屏幕阅读器使用语义化HTML元素
```
access-keyboard-navigation
```
- 确保支持完整的键盘导航
```
access-focus-indicators
```
- 提供可见的焦点指示器
```
access-alt-text
```
- 为图片提供有意义的替代文本
```
access-aria-labels
```
- 为仅含图标的控件使用ARIA标签
```
access-target-size
```
- 确保最小触摸目标尺寸为24×24px
```
access-heading-hierarchy
```
- 维持逻辑化的标题层级

2. Core Web Vitals Optimization (CRITICAL)

2. Core Web Vitals优化（关键）

```
cwv-optimize-lcp
```
- Optimize Largest Contentful Paint under 2.5s
```
cwv-minimize-cls
```
- Minimize Cumulative Layout Shift under 0.1
```
cwv-improve-inp
```
- Improve Interaction to Next Paint under 200ms
```
cwv-responsive-images
```
- Serve responsive images with srcset
```
cwv-lazy-load-offscreen
```
- Lazy load offscreen images and iframes
```
cwv-critical-css
```
- Inline critical CSS and defer the rest

```
cwv-optimize-lcp
```
- 将最大内容绘制（Largest Contentful Paint）优化至2.5秒以内
```
cwv-minimize-cls
```
- 将累积布局偏移（Cumulative Layout Shift）控制在0.1以内
```
cwv-improve-inp
```
- 将交互到下一次绘制（Interaction to Next Paint）提升至200毫秒以内
```
cwv-responsive-images
```
- 使用srcset提供响应式图片
```
cwv-lazy-load-offscreen
```
- 懒加载屏幕外的图片和iframe
```
cwv-critical-css
```
- 内联关键CSS并延迟加载其余部分

3. Visual Hierarchy & Layout (HIGH)

3. 视觉层级与布局（高）

```
layout-visual-hierarchy
```
- Establish clear visual hierarchy
```
layout-whitespace
```
- Use whitespace to improve readability
```
layout-f-pattern
```
- Design for F-pattern reading behavior
```
layout-grid-system
```
- Use a consistent grid system
```
layout-single-cta
```
- Limit to one primary CTA per screen
```
layout-proximity-grouping
```
- Group related elements with proximity

```
layout-visual-hierarchy
```
- 建立清晰的视觉层级
```
layout-whitespace
```
- 使用留白提升可读性
```
layout-f-pattern
```
- 针对F型阅读行为进行设计
```
layout-grid-system
```
- 使用一致的网格系统
```
layout-single-cta
```
- 每个屏幕限制一个主要CTA（行动召唤按钮）
```
layout-proximity-grouping
```
- 通过邻近性对相关元素进行分组

4. Responsive & Mobile-First Design (HIGH)

4. 响应式与移动优先设计（高）

```
resp-mobile-first
```
- Design mobile-first with min-width queries
```
resp-fluid-typography
```
- Use fluid typography with clamp()
```
resp-container-queries
```
- Use container queries for components
```
resp-touch-targets
```
- Size touch targets for mobile (44×44px)
```
resp-viewport-meta
```
- Configure viewport meta tag correctly

```
resp-mobile-first
```
- 采用移动优先设计，配合min-width媒体查询
```
resp-fluid-typography
```
- 使用clamp()实现流式排版
```
resp-container-queries
```
- 为组件使用容器查询
```
resp-touch-targets
```
- 为移动端设置触摸目标尺寸为44×44px
```
resp-viewport-meta
```
- 正确配置viewport元标签

5. Typography & Font Loading (MEDIUM-HIGH)

5. 排版与字体加载（中高）

```
typo-font-display
```
- Use font-display to control loading behavior
```
typo-preload-fonts
```
- Preload critical web fonts
```
typo-readable-line-length
```
- Constrain line length (45-75ch)
```
typo-line-height
```
- Set appropriate line height (1.5-1.7)
```
typo-system-font-stack
```
- Use system font stack for UI elements

```
typo-font-display
```
- 使用font-display控制字体加载行为
```
typo-preload-fonts
```
- 预加载关键网页字体
```
typo-readable-line-length
```
- 限制行宽为45-75ch
```
typo-line-height
```
- 设置合适的行高（1.5-1.7）
```
typo-system-font-stack
```
- 为UI元素使用系统字体栈

6. Color & Contrast (MEDIUM)

6. 颜色与对比度（中）

```
color-contrast-ratio
```
- Meet WCAG contrast ratio requirements (4.5:1)
```
color-not-only-indicator
```
- Never use color alone to convey information
```
color-dark-mode
```
- Support dark mode with prefers-color-scheme
```
color-semantic-palette
```
- Use semantic color names in design tokens

```
color-contrast-ratio
```
- 满足WCAG对比度比例要求（4.5:1）
```
color-not-only-indicator
```
- 绝不单独使用颜色传递信息
```
color-dark-mode
```
- 通过prefers-color-scheme支持深色模式
```
color-semantic-palette
```
- 在设计令牌中使用语义化颜色名称

7. Forms & Validation UX (MEDIUM)

7. 表单与验证UX（中）

```
form-inline-validation
```
- Use inline validation after field blur
```
form-error-messages
```
- Write actionable error messages
```
form-labels-above
```
- Place labels above input fields
```
form-input-types
```
- Use correct HTML input types for mobile
```
form-autocomplete
```
- Enable browser autocomplete with correct attributes

```
form-inline-validation
```
- 在字段失焦后使用内联验证
```
form-error-messages
```
- 编写可操作的错误提示信息
```
form-labels-above
```
- 将标签放置在输入字段上方
```
form-input-types
```
- 为移动端使用正确的HTML输入类型
```
form-autocomplete
```
- 使用正确的属性启用浏览器自动完成功能

8. Animation & Performance (LOW-MEDIUM)

8. 动画与性能（中低）

```
anim-gpu-properties
```
- Animate only GPU-accelerated properties
```
anim-will-change
```
- Use will-change sparingly for animation hints
```
anim-reduced-motion
```
- Respect user motion preferences
```
anim-duration-easing
```
- Use appropriate animation duration and easing

```
anim-gpu-properties
```
- 仅对GPU加速属性执行动画
```
anim-will-change
```
- 谨慎使用will-change作为动画提示
```
anim-reduced-motion
```
- 尊重用户的动画偏好设置
```
anim-duration-easing
```
- 使用合适的动画时长和缓动函数

How to Use

使用方法

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules
Example: access-semantic-html

阅读各个参考文件获取详细说明和代码示例：

章节定义 - 分类结构和影响级别
规则模板 - 添加新规则的模板
示例：access-semantic-html

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded: AGENTS.md

如需查看包含所有扩展规则的完整指南：AGENTS.md