design-systems
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDesign Systems
设计系统
Design System Principles
设计系统原则
Core Principles
核心原则
- Consistency: Ensure consistent visual language and behavior across all products
- Scalability: Design systems that grow with the product and team
- Efficiency: Speed up design and development through reusable components
- Accessibility: Build accessibility into every component from the start
- Maintainability: Create systems that are easy to update and maintain
- Documentation: Document everything thoroughly for clear adoption
- 一致性：确保所有产品的视觉语言和交互行为保持统一
- 可扩展性：设计能随产品和团队一同成长的系统
- 高效性：通过可复用组件加速设计与开发流程
- 可访问性：从组件设计之初就融入无障碍支持
- 可维护性：打造易于更新和维护的系统
- 文档化：全面记录所有内容，确保清晰的落地性
Design System Structure
设计系统结构
- Foundations: Colors, typography, spacing, icons, elevation
- Components: Reusable UI elements with documented variations
- Patterns: Common solutions to recurring design problems
- Templates: Page layouts and screen structures
- Guidelines: Usage rules and best practices
- Resources: Assets, downloads, and implementation guides
- 基础层：色彩、排版、间距、图标、层级阴影
- 组件层：带有文档说明变体的可复用UI元素
- 模式层：针对常见设计问题的通用解决方案
- 模板层：页面布局与界面结构
- 规范层：使用规则与最佳实践
- 资源层：素材、下载资源及落地指南
Component Libraries
组件库
Popular Component Libraries
主流组件库
- Material Design: Google's design system with comprehensive components
- Ant Design: Enterprise-class UI design language and React components
- Tailwind CSS: Utility-first CSS framework with design tokens
- shadcn/ui: Beautiful, accessible components built with Radix UI and Tailwind
- Chakra UI: Simple, modular and accessible component library
- MUI: React components that implement Google's Material Design
- Material Design：谷歌推出的设计系统，包含全面的组件
- Ant Design：企业级UI设计语言及React组件库
- Tailwind CSS：实用优先的CSS框架，带有设计令牌
- shadcn/ui：基于Radix UI和Tailwind构建的美观、无障碍组件库
- Chakra UI：简洁、模块化的无障碍组件库
- MUI：实现Google Material Design的React组件库
Component Design Principles
组件设计原则
- Single Responsibility: Each component should have one clear purpose
- Composability: Components should be composable and flexible
- Predictable Behavior: Components should behave consistently
- Accessible: All components must meet WCAG AA standards
- Responsive: Components must work across all device sizes
- Documented: Each component has clear documentation and examples
- 单一职责：每个组件应具备明确的单一用途
- 可组合性：组件需具备可组合性与灵活性
- 行为可预测：组件的交互行为需保持一致
- 无障碍支持：所有组件必须符合WCAG AA标准
- 响应式适配：组件需适配全尺寸设备
- 文档化：每个组件都配有清晰的文档与示例
Component States
组件状态
- Default: Normal state of the component
- Hover: When user hovers over the component
- Focus: When component has keyboard focus
- Active: When component is being activated
- Disabled: When component is not available
- Loading: When component is in a loading state
- Error: When component has an error state
- 默认态：组件的常规状态
- 悬停态：用户鼠标悬停在组件上的状态
- 聚焦态：组件获得键盘焦点的状态
- 激活态：组件被触发时的状态
- 禁用态：组件不可用的状态
- 加载态：组件处于加载中的状态
- 错误态：组件出现错误时的状态
Typography
排版
Typography Fundamentals
排版基础
- Font Families: Choose font families that are readable and on-brand
- Font Weights: Use a limited number of weights (regular, medium, bold)
- Font Sizes: Establish a type scale with consistent ratios
- Line Height: Use appropriate line height for readability (1.4-1.6)
- Letter Spacing: Adjust letter spacing for headings and uppercase text
- Text Alignment: Left-align for body text, center for short headings
- 字体家族：选择兼具可读性与品牌契合度的字体
- 字重：使用有限的字重（常规、中等、粗体）
- 字号：建立具备统一比例的字号层级
- 行高：使用合适的行高提升可读性（1.4-1.6）
- 字间距：针对标题和大写文本调整字间距
- 文本对齐：正文左对齐，短标题居中对齐
Type Scale
字号层级
- Modular Scale: Use a mathematical scale for consistent sizing
- Common Ratios: Major third (1.25), Perfect fourth (1.33), Golden ratio (1.618)
- Responsive Typography: Scale text size based on viewport width
- Clamp Function: Use CSS clamp() for fluid typography
- Text Scaling: Support text scaling up to 200% for accessibility
- 模块化层级：使用数学比例构建统一的字号体系
- 常见比例：大三度（1.25）、纯四度（1.33）、黄金比例（1.618）
- 响应式排版：根据视口宽度调整文本大小
- Clamp函数：使用CSS clamp()实现流体排版
- 文本缩放：支持文本缩放至200%以满足无障碍需求
Typography Hierarchy
排版层级结构
- H1: Main page title, largest size
- H2: Section headings
- H3: Subsection headings
- H4-H6: Minor headings
- Body: Main content text
- Caption: Supporting text, labels
- Overline: Category labels, small uppercase text
- H1：页面主标题，字号最大
- H2：章节标题
- H3：子章节标题
- H4-H6：次要标题
- 正文：主要内容文本
- 说明文字：辅助文本、标签
- overline：分类标签、小型大写文本
Color Theory
色彩理论
Color Fundamentals
色彩基础
- Primary Color: Main brand color, used for primary actions
- Secondary Color: Supporting brand color, used for accents
- Neutral Colors: Grays for text, backgrounds, borders
- Semantic Colors: Success, warning, error, info colors
- Color Palettes: Create shades and tints of each color
- Color Contrast: Ensure WCAG AA compliance (4.5:1 for normal text)
- 主色：品牌核心色彩，用于主要操作元素
- 辅助色：品牌辅助色彩，用于强调元素
- 中性色：用于文本、背景、边框的灰色系
- 语义色：成功、警告、错误、提示类色彩
- 色彩调色板：为每个色彩创建深浅色调变体
- 色彩对比度：确保符合WCAG AA标准（常规文本对比度4.5:1）
Color Systems
色彩系统
- HSL: Hue, Saturation, Lightness - easier for designers to work with
- RGB: Red, Green, Blue - used for digital displays
- HEX: Hexadecimal - common in web design
- Design Tokens: Store colors as tokens for consistency
- Dark Mode: Create dark mode variants of all colors
- HSL：色相、饱和度、亮度，更便于设计师操作
- RGB：红、绿、蓝，用于数字显示设备
- HEX：十六进制，网页设计中常用
- 设计令牌：将色彩存储为令牌以保证一致性
- 深色模式：为所有色彩创建深色模式变体
Color Usage Guidelines
色彩使用规范
- 60-30-10 Rule: 60% neutral, 30% primary, 10% accent
- Limit Palette: Use 5-7 colors maximum for clarity
- Meaningful Colors: Use color to convey meaning consistently
- Accessibility First: Ensure all color combinations meet contrast requirements
- Color Blindness: Consider color blind users when choosing palettes
- 60-30-10法则：60%中性色、30%主色、10%强调色
- 限制调色板：最多使用5-7种色彩以保证清晰性
- 色彩语义化：使用色彩持续传递一致的含义
- 无障碍优先：确保所有色彩组合满足对比度要求
- 色弱友好：选择色彩时考虑色弱用户的需求
Spacing Systems
间距系统
Spacing Fundamentals
间距基础
- Spacing Scale: Use a consistent scale (4px, 8px, 16px, 24px, 32px, 48px, 64px)
- 4px Base Grid: Use 4px as the base unit for spacing
- Consistent Application: Apply spacing consistently across components
- Responsive Spacing: Adjust spacing for different screen sizes
- Whitespace: Use whitespace effectively to improve readability
- 间距层级：使用统一的间距尺度（4px、8px、16px、24px、32px、48px、64px）
- 4px基准网格：以4px为基础单位设置间距
- 统一应用：在所有组件中一致地应用间距
- 响应式间距：针对不同屏幕尺寸调整间距
- 留白：有效使用留白提升可读性
Spacing Types
间距类型
- Padding: Space inside elements
- Margin: Space outside elements
- Gap: Space between flex/grid items
- Inset: Shorthand for top, right, bottom, left spacing
- 内边距（Padding）：元素内部的空间
- 外边距（Margin）：元素外部的空间
- 间隙（Gap）：Flex/Grid元素之间的空间
- 内边距简写（Inset）：top、right、bottom、left间距的简写形式
Icon Systems
图标系统
Icon Fundamentals
图标基础
- Icon Style: Choose a consistent icon style (outline, filled, duotone)
- Icon Size: Establish standard sizes (16px, 24px, 32px, 48px)
- Icon Library: Use an established icon library (Material Icons, Lucide, Heroicons)
- Custom Icons: Create custom icons when needed, maintain consistency
- Accessibility: Include aria-label or aria-hidden for icons
- 图标风格：选择统一的图标风格（轮廓、填充、双色）
- 图标尺寸：建立标准尺寸（16px、24px、32px、48px）
- 图标库：使用成熟的图标库（Material Icons、Lucide、Heroicons）
- 自定义图标：必要时创建自定义图标，保持风格一致
- 无障碍支持：为图标添加aria-label或aria-hidden属性
Icon Guidelines
图标规范
- Meaningful: Icons should be universally understood
- Simple: Keep icons simple and clear
- Consistent: Use consistent stroke width and style
- Scalable: Icons should look good at all sizes
- Labeled: Always provide text labels for icons
- 语义明确：图标应具备通用的辨识度
- 简洁清晰：保持图标简洁明了
- 风格统一：使用统一的描边宽度与风格
- 可缩放：图标在所有尺寸下都应显示清晰
- 附带标签：始终为图标提供文本标签
Illustration Guidelines
插图规范
Illustration Style
插图风格
- Consistent Style: Maintain consistent illustration style across all illustrations
- Color Palette: Use brand colors for illustrations
- Purpose: Use illustrations to support content, not decorate
- Accessibility: Ensure illustrations don't distract from content
- Loading States: Use illustrations for empty and loading states
- 风格统一：在所有插图中保持一致的风格
- 色彩适配：使用品牌色彩绘制插图
- 目的性：使用插图辅助内容表达，而非单纯装饰
- 无障碍友好：确保插图不会干扰内容阅读
- 状态场景：为空白状态和加载状态设计插图
Design Tokens
设计令牌
Token Fundamentals
令牌基础
- Naming Convention: Use clear, descriptive names (color-primary-500)
- Categories: Organize tokens by category (color, spacing, typography)
- Aliases: Create aliases for semantic tokens (color-text-primary)
- Platform Support: Support multiple platforms (web, iOS, Android)
- Documentation: Document all tokens with examples
- 命名规范：使用清晰、描述性的命名（如color-primary-500）
- 分类管理：按类别组织令牌（色彩、间距、排版）
- 别名设置：为语义化令牌创建别名（如color-text-primary）
- 跨平台支持：支持多平台（网页、iOS、Android）
- 文档化：为所有令牌添加示例说明
Token Types
令牌类型
- Color Tokens: Colors for backgrounds, text, borders, etc.
- Spacing Tokens: Padding, margin, gap values
- Typography Tokens: Font families, sizes, weights, line heights
- Border Radius Tokens: Rounded corner values
- Shadow Tokens: Elevation and shadow values
- Animation Tokens: Duration, easing, delay values
- 色彩令牌：用于背景、文本、边框等的色彩值
- 间距令牌：内边距、外边距、间隙的数值
- 排版令牌：字体家族、字号、字重、行高
- 圆角令牌：圆角数值
- 阴影令牌：层级阴影数值
- 动画令牌：时长、缓动效果、延迟数值
Design System Documentation
设计系统文档
Documentation Structure
文档结构
- Overview: Introduction to the design system
- Foundations: Colors, typography, spacing, icons
- Components: Each component with examples and guidelines
- Patterns: Common design patterns and solutions
- Guidelines: Usage rules and best practices
- Resources: Downloads, assets, and implementation guides
- 概述：设计系统介绍
- 基础层：色彩、排版、间距、图标
- 组件层：每个组件的示例与规范
- 模式层：常见设计模式与解决方案
- 规范层：使用规则与最佳实践
- 资源层：下载资源、素材及落地指南
Documentation Best Practices
文档最佳实践
- Live Examples: Show live, interactive examples
- Code Snippets: Provide code for each component
- Do's and Don'ts: Show correct and incorrect usage
- Accessibility Notes: Include accessibility requirements
- Changelog: Track changes and updates
- Versioning: Use semantic versioning for releases
- 交互式示例：展示可交互的实时示例
- 代码片段：为每个组件提供代码示例
- 正确/错误示例：展示正确与错误的使用方式
- 无障碍说明：包含无障碍要求
- 更新日志：记录变更与更新内容
- 版本管理：使用语义化版本管理发布版本