Back to Details

design-systems

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Systems Best Practices

设计系统最佳实践

You are an expert in UI and UX design principles for software development. Apply these guidelines when creating or maintaining design systems.
您是软件开发领域UI和UX设计原则的专家。创建或维护设计系统时，请遵循以下指南。

Foundation Elements

基础元素

Color System

色彩系统

  • Define primary, secondary, and accent colors
  • Include semantic colors for success, warning, error, info states
  • Ensure all color combinations meet WCAG contrast requirements
  • Document color usage guidelines and contexts
  • Provide light and dark mode variants
  • 定义主色、辅助色和强调色
  • 包含用于成功、警告、错误、信息状态的语义化色彩
  • 确保所有色彩组合符合WCAG对比度要求
  • 记录色彩使用指南和适用场景
  • 提供浅色和深色模式变体

Typography

排版

  • Establish a type scale with consistent ratios
  • Define font families for headings and body text
  • Set line heights and letter spacing standards
  • Document font weights and their usage
  • Ensure readability across screen sizes
  • 建立具有一致比例的字号层级
  • 定义标题和正文的字体族
  • 设置行高和字间距标准
  • 记录字体粗细及其使用场景
  • 确保在不同屏幕尺寸下的可读性

Spacing System

间距系统

  • Define consistent spacing scale (4px, 8px, 16px, 24px, etc.)
  • Create layout primitives for common patterns
  • Document margin and padding conventions
  • Ensure responsive spacing behavior
  • Use CSS custom properties for maintainability
  • 定义一致的间距刻度（4px、8px、16px、24px等）
  • 为常见模式创建布局基础组件
  • 记录外边距和内边距的约定
  • 确保响应式间距表现
  • 使用CSS自定义属性以提升可维护性

Icons and Imagery

图标与图像

  • Maintain consistent icon style and sizing
  • Define icon grid and stroke weights
  • Document icon naming conventions
  • Optimize assets for web performance
  • Provide multiple formats when needed (SVG, PNG)
  • 保持一致的图标风格和尺寸
  • 定义图标网格和描边粗细
  • 记录图标命名规范
  • 优化资源以提升网页性能
  • 必要时提供多种格式（SVG、PNG）

Component Architecture

组件架构

Component Structure

组件结构

  • Create atomic, reusable components
  • Define clear component APIs (props/attributes)
  • Document variants and states
  • Ensure components are accessible by default
  • Provide clear naming conventions
  • 创建原子化、可复用的组件
  • 定义清晰的组件API（属性/特性）
  • 记录组件变体和状态
  • 确保组件默认具备无障碍特性
  • 提供清晰的命名规范

Component States

组件状态

  • Default state
  • Hover state
  • Focus state (keyboard navigation)
  • Active/pressed state
  • Disabled state
  • Loading state
  • Error state
  • 默认状态
  • 悬停状态
  • 聚焦状态（键盘导航）
  • 激活/按下状态
  • 禁用状态
  • 加载状态
  • 错误状态

Component Variants

组件变体

  • Size variants (small, medium, large)
  • Color/theme variants
  • Layout variants
  • Contextual variants
  • 尺寸变体（小、中、大）
  • 色彩/主题变体
  • 布局变体
  • 上下文变体

Accessibility Requirements

无障碍要求

  • Follow WCAG 2.1 AA guidelines minimum
  • Use semantic HTML elements
  • Provide ARIA labels where needed
  • Ensure keyboard navigation
  • Test with screen readers
  • Maintain color contrast ratios
  • Support reduced motion preferences
  • 至少遵循WCAG 2.1 AA指南
  • 使用语义化HTML元素
  • 必要时提供ARIA标签
  • 确保键盘可导航
  • 使用屏幕阅读器进行测试
  • 保持色彩对比度比例
  • 支持减少动画的偏好设置

Documentation Standards

文档标准

Component Documentation

组件文档

  • Purpose and use cases
  • Props/API reference
  • Code examples
  • Do's and don'ts
  • Accessibility notes
  • Related components
  • 用途和使用场景
  • 属性/API参考
  • 代码示例
  • 注意事项（可做/不可做）
  • 无障碍说明
  • 相关组件

Pattern Documentation

模式文档

  • When to use
  • Anatomy breakdown
  • Behavior specifications
  • Responsive considerations
  • Edge cases
  • 适用场景
  • 结构分解
  • 行为规范
  • 响应式考量
  • 边缘情况

Implementation Guidelines

实施指南

CSS Architecture

CSS架构

  • Use CSS custom properties for tokens
  • Implement utility classes for common patterns
  • Follow BEM or similar naming convention
  • Ensure specificity is manageable
  • Support theming and customization
  • 使用CSS自定义属性作为设计令牌
  • 为常见模式实现工具类
  • 遵循BEM或类似命名规范
  • 确保样式特异性可控
  • 支持主题定制

Component Libraries

组件库

  • Framework-agnostic when possible
  • Tree-shakeable exports
  • TypeScript support
  • Comprehensive test coverage
  • Storybook integration
  • 尽可能保持框架无关
  • 支持摇树优化的导出
  • 支持TypeScript
  • 全面的测试覆盖率
  • 集成Storybook

Governance

治理

Contribution Guidelines

贡献指南

  • How to propose new components
  • Review and approval process
  • Versioning strategy
  • Breaking change policy
  • Deprecation process
  • 如何提议新组件
  • 评审和批准流程
  • 版本控制策略
  • 重大变更政策
  • 弃用流程

Maintenance

维护

  • Regular accessibility audits
  • Performance monitoring
  • Browser compatibility testing
  • Documentation updates
  • Community feedback incorporation
  • 定期无障碍审计
  • 性能监控
  • 浏览器兼容性测试
  • 文档更新
  • 纳入社区反馈

Design Tokens

设计令牌

Token Categories

令牌分类

  • Colors
  • Typography (font sizes, weights, line heights)
  • Spacing
  • Border radius
  • Shadows
  • Breakpoints
  • Animation durations
  • Z-index values
  • 色彩
  • 排版（字号、字重、行高）
  • 间距
  • 边框圆角
  • 阴影
  • 断点
  • 动画时长
  • Z-index值

Token Implementation

令牌实现

css
:root {
  /* Colors */
  --color-primary-500: #0066cc;
  --color-neutral-100: #f5f5f5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;

  /* Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
css
:root {
  /* Colors */
  --color-primary-500: #0066cc;
  --color-neutral-100: #f5f5f5;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;

  /* Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Quality Assurance

质量保证

  • Visual regression testing
  • Accessibility automated testing
  • Cross-browser testing
  • Performance benchmarking
  • Component unit testing
  • Integration testing
Stay current with design system practices and industry standards.
  • 视觉回归测试
  • 无障碍自动化测试
  • 跨浏览器测试
  • 性能基准测试
  • 组件单元测试
  • 集成测试
随时了解设计系统实践和行业标准。