Back to Details

design-handoff

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Handoff

设计交接

Create clear, complete handoff documentation so developers can implement designs accurately.
创建清晰、完整的交接文档，帮助开发者精准实现设计方案。

What to Include

文档包含内容

Visual Specifications

视觉规范

  • Exact measurements (padding, margins, widths)
  • Design token references (colors, typography, spacing)
  • Responsive breakpoints and behavior
  • Component variants and states
  • 精确尺寸（内边距、外边距、宽度）
  • 设计令牌引用（颜色、排版、间距）
  • 响应式断点及表现
  • 组件变体与状态

Interaction Specifications

交互规范

  • Click/tap behavior
  • Hover states
  • Transitions and animations (duration, easing)
  • Gesture support (swipe, pinch, long-press)
  • 点击/轻触行为
  • 悬停状态
  • 过渡与动画（时长、缓动效果）
  • 手势支持（滑动、捏合、长按）

Content Specifications

内容规范

  • Character limits
  • Truncation behavior
  • Empty states
  • Loading states
  • Error states
  • 字符限制
  • 截断规则
  • 空状态
  • 加载状态
  • 错误状态

Edge Cases

边缘场景

  • Minimum/maximum content
  • International text (longer strings)
  • Slow connections
  • Missing data
  • 内容的最少/最多展示量
  • 多语言文本（长字符串）
  • 网络缓慢场景
  • 数据缺失场景

Accessibility

无障碍适配

  • Focus order
  • ARIA labels and roles
  • Keyboard interactions
  • Screen reader announcements
  • 焦点顺序
  • ARIA 标签与角色
  • 键盘交互
  • 屏幕阅读器播报内容

Principles

编写原则

  1. Don't assume — If it's not specified, the developer will guess. Specify everything.
  2. Use tokens, not values — Reference 
    spacing-md
    not 
    16px
    .
  3. Show all states — Default, hover, active, disabled, loading, error, empty.
  4. Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.
  1. 不做假设 — 未明确说明的内容，开发者会自行猜测，因此需明确所有细节。
  2. 使用令牌而非具体数值 — 引用
    spacing-md
    而非
    16px
    。
  3. 展示所有状态 — 默认、悬停、激活、禁用、加载、错误、空状态。
  4. 说明设计原因 — 例如“移动端采用折叠设计是因为用户主要单手持机操作”，这类说明能帮助开发者做出合理的判断。