ui-ux-design-principles

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI/UX Design Principles

UI/UX设计原则

Comprehensive guide for UI and UX design principles in software development, covering visual design, interaction patterns, accessibility, performance, and responsive design.

面向软件开发的UI与UX设计原则综合指南，涵盖视觉设计、交互模式、可访问性、性能和响应式设计。

When to Apply

适用场景

Reference these guidelines when:

Designing new UI components or interfaces
Implementing user interactions and navigation
Ensuring accessibility compliance (WCAG 2.1 AA)
Creating responsive and mobile-first layouts
Optimizing user feedback and error handling
Building design systems and maintaining consistency
Testing and iterating on user experience

在以下情况下可参考这些指南：

设计新的UI组件或界面
实现用户交互和导航
确保符合可访问性规范（WCAG 2.1 AA）
创建响应式、移动端优先的布局
优化用户反馈和错误处理
构建设计系统并保持一致性
对用户体验进行测试和迭代

Rule Categories by Priority

按优先级划分的规则类别


visual-
accessibility-
interaction-
responsive-
feedback-
ia-
performance-
consistency-
mobile-
testing-

Priority	Category	Impact	Prefix
1	Visual Design	HIGH	`visual-`
2	Accessibility	CRITICAL	`accessibility-`
3	Interaction Design	HIGH	`interaction-`
4	Responsive Design	HIGH	`responsive-`
5	User Feedback	MEDIUM-HIGH	`feedback-`
6	Information Architecture	MEDIUM	`ia-`
7	Performance Optimization	MEDIUM	`performance-`
8	Consistency	MEDIUM	`consistency-`
9	Mobile-First Design	HIGH	`mobile-`
10	Testing and Iteration	MEDIUM	`testing-`


visual-
accessibility-
interaction-
responsive-
feedback-
ia-
performance-
consistency-
mobile-
testing-

优先级	类别	影响程度	前缀
1	视觉设计	高	`visual-`
2	可访问性	严重级	`accessibility-`
3	交互设计	高	`interaction-`
4	响应式设计	高	`responsive-`
5	用户反馈	中高	`feedback-`
6	信息架构	中	`ia-`
7	性能优化	中	`performance-`
8	一致性	中	`consistency-`
9	移动端优先设计	高	`mobile-`
10	测试与迭代	中	`testing-`

Quick Reference

快速参考

1. Visual Design (HIGH)

1. 视觉设计（高优先级）

```
visual-hierarchy
```
- Establish clear visual hierarchy
```
visual-color-palette
```
- Use cohesive color palette
```
visual-typography
```
- Effective typography for readability
```
visual-contrast
```
- Maintain WCAG 2.1 AA contrast
```
visual-style-consistency
```
- Consistent style across application

```
visual-hierarchy
```
- 建立清晰的视觉层级
```
visual-color-palette
```
- 使用统一协调的配色方案
```
visual-typography
```
- 采用易读性佳的排版方案
```
visual-contrast
```
- 满足WCAG 2.1 AA对比度要求
```
visual-style-consistency
```
- 整个应用保持统一的风格

2. Accessibility (CRITICAL)

2. 可访问性（严重级优先级）

```
accessibility-wcag
```
- Follow WCAG guidelines
```
accessibility-semantic-html
```
- Use semantic HTML
```
accessibility-alt-text
```
- Provide alt text for images
```
accessibility-keyboard-navigation
```
- Ensure keyboard navigability
```
accessibility-assistive-tech
```
- Test with assistive technologies

```
accessibility-wcag
```
- 遵循WCAG规范
```
accessibility-semantic-html
```
- 使用语义化HTML
```
accessibility-alt-text
```
- 为图片提供替代文本
```
accessibility-keyboard-navigation
```
- 确保支持键盘导航
```
accessibility-assistive-tech
```
- 使用辅助技术进行测试

3. Interaction Design (HIGH)

3. 交互设计（高优先级）

```
interaction-navigation
```
- Intuitive navigation patterns
```
interaction-familiar-components
```
- Use familiar UI components
```
interaction-cta
```
- Clear calls-to-action
```
interaction-animations
```
- Judicious use of animations
```
interaction-responsive
```
- Cross-device compatibility

```
interaction-navigation
```
- 直观的导航模式
```
interaction-familiar-components
```
- 使用用户熟悉的UI组件
```
interaction-cta
```
- 清晰的行动号召按钮
```
interaction-animations
```
- 合理使用动画效果
```
interaction-responsive
```
- 跨设备兼容性

4. Responsive Design (HIGH)

4. 响应式设计（高优先级）

```
responsive-fluid-layouts
```
- Use relative units and flexible layouts
```
responsive-media-queries
```
- Breakpoints for different screen sizes
```
responsive-images
```
- Responsive images with srcset
```
responsive-typography
```
- Relative units for typography
```
responsive-content-priority
```
- Prioritize content for mobile

```
responsive-fluid-layouts
```
- 使用相对单位和弹性布局
```
responsive-media-queries
```
- 为不同屏幕尺寸设置断点
```
responsive-images
```
- 配合srcset实现响应式图片
```
responsive-typography
```
- 排版使用相对单位
```
responsive-content-priority
```
- 移动端场景下优先展示核心内容

5. User Feedback (MEDIUM-HIGH)

5. 用户反馈（中高优先级）

```
feedback-mechanisms
```
- Clear feedback for user actions
```
feedback-loading
```
- Loading indicators for async operations
```
feedback-errors
```
- Clear error messages and recovery
```
feedback-analytics
```
- Track user behavior

```
feedback-mechanisms
```
- 针对用户操作给出清晰反馈
```
feedback-loading
```
- 异步操作提供加载指示器
```
feedback-errors
```
- 清晰的错误提示和恢复方案
```
feedback-analytics
```
- 追踪用户行为

6. Information Architecture (MEDIUM)

6. 信息架构（中优先级）

```
ia-organization
```
- Logical content organization
```
ia-labeling
```
- Clear labeling and categorization
```
ia-search
```
- Effective search functionality
```
ia-sitemap
```
- Visualize structure with sitemap

```
ia-organization
```
- 内容组织逻辑清晰
```
ia-labeling
```
- 标签和分类清晰明确
```
ia-search
```
- 高效的搜索功能
```
ia-sitemap
```
- 通过站点地图可视化结构

7. Performance Optimization (MEDIUM)

7. 性能优化（中优先级）

```
performance-images
```
- Optimize images and assets
```
performance-lazy-loading
```
- Lazy load non-critical resources
```
performance-code-splitting
```
- Code splitting for initial load
```
performance-core-web-vitals
```
- Monitor Core Web Vitals

```
performance-images
```
- 优化图片和静态资源
```
performance-lazy-loading
```
- 非核心资源懒加载
```
performance-code-splitting
```
- 代码拆分优化首屏加载
```
performance-core-web-vitals
```
- 监控Core Web Vitals指标

8. Consistency (MEDIUM)

8. 一致性（中优先级）

```
consistency-design-system
```
- Develop and adhere to design system
```
consistency-terminology
```
- Consistent terminology
```
consistency-positioning
```
- Consistent element positioning
```
consistency-visual
```
- Visual consistency across sections

```
consistency-design-system
```
- 制定并遵循设计系统
```
consistency-terminology
```
- 术语使用保持一致
```
consistency-positioning
```
- 元素位置保持一致
```
consistency-visual
```
- 不同模块之间视觉风格一致

9. Mobile-First Design (HIGH)

9. 移动端优先设计（高优先级）

```
mobile-first-approach
```
- Design mobile first, scale up
```
mobile-touch-targets
```
- Touch-friendly interface elements
```
mobile-gestures
```
- Implement common gestures
```
mobile-thumb-zones
```
- Consider thumb zones

```
mobile-first-approach
```
- 优先设计移动端版本，再向上适配
```
mobile-touch-targets
```
- 界面元素适配触摸操作
```
mobile-gestures
```
- 实现通用手势支持
```
mobile-thumb-zones
```
- 考虑拇指操作热区

10. Testing and Iteration (MEDIUM)

10. 测试与迭代（中优先级）

```
testing-ab
```
- A/B testing for critical decisions
```
testing-heatmaps
```
- Use heatmaps and session recordings
```
testing-user-feedback
```
- Gather and incorporate feedback
```
testing-iteration
```
- Iterate based on data

```
testing-ab
```
- 关键决策采用A/B测试
```
testing-heatmaps
```
- 使用热图和会话录制工具
```
testing-user-feedback
```
- 收集并落地用户反馈
```
testing-iteration
```
- 基于数据进行迭代

How to Use

使用方法

Read individual rule files for detailed explanations and code examples:

rules/visual-hierarchy.md
rules/accessibility-wcag.md
rules/responsive-fluid-layouts.md

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
Additional context and references

阅读单独的规则文件获取详细说明和代码示例：

rules/visual-hierarchy.md
rules/accessibility-wcag.md
rules/responsive-fluid-layouts.md

每个规则文件包含：

重要性简要说明
错误代码示例及说明
正确代码示例及说明
额外背景信息和参考资料

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded:

AGENTS.md

如需查看所有规则展开的完整指南，请参考：

AGENTS.md