Back to Details

explainer-visuals

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Explainer Visuals

解释性动画视觉效果

Create animated, interactive visuals that make complex ideas intuitive.
创建交互式动画视觉效果，让复杂概念变得直观易懂。

Philosophy

设计理念

Great explainer visuals don't just illustrate—they reveal. They show the structure hidden in complexity, the motion implicit in static descriptions, the relationships that words struggle to convey.
Core principles:
  • Earned complexity: Start simple, add layers through interaction or animation
  • Semantic motion: Movement carries meaning, not just attention
  • Readable at rest: The static state communicates the core idea
  • Progressive disclosure: Let viewers control depth of exploration
优秀的解释性视觉效果不只是展示——更是揭示。它们展现复杂事物背后的结构，静态描述中隐含的动态变化，以及文字难以传达的关联关系。
核心原则：
  • 渐进式复杂度：从简单开始，通过交互或动画逐步添加层级
  • 语义化动效：动效传递信息，而非仅吸引注意力
  • 静态可读：静止状态即可传达核心信息
  • 渐进式展示：让观看者控制探索的深度

Discovery Process

需求探索流程

Before creating any visual, conduct a brief discovery interview using AskUserQuestion. Understand not just WHAT to visualize, but WHY this idea needs visual treatment.
在创建任何视觉效果之前，使用AskUserQuestion进行简短的需求探索访谈。不仅要了解需要可视化的内容，还要明白为什么这个概念需要视觉化呈现。

Discovery Questions

探索问题

Ask 1-2 focused questions from these categories:
Understanding the idea:
  • "What's the single most important insight viewers should take away?"
  • "What makes this concept hard to explain in words alone?"
  • "Is there a common misconception this visual should correct?"
Understanding the context:
  • "Where will this appear in your essay? (Opening hook, supporting evidence, climactic reveal, summary)"
  • "What's the surrounding content's tone? (Academic, conversational, provocative, instructive)"
Understanding the audience:
  • "What does your reader already know about this topic?"
  • "Should this feel like a quick insight or an explorable deep-dive?"
Skip discovery only if the user has already provided rich context about their goals.
从以下类别中选择1-2个针对性问题：
理解核心概念：
  • “观看者需要获取的最重要的核心洞见是什么？”
  • “为什么这个概念仅用文字难以解释清楚？”
  • “这个视觉效果需要纠正哪些常见的误解？”
理解使用语境：
  • “它会出现在文章的哪个位置？（开篇引入、支撑论据、核心结论、总结部分）”
  • “周边内容的风格是什么？（学术严谨、口语化、颠覆性、指导性）”
理解目标受众：
  • “读者对这个主题已经有哪些了解？”
  • “这应该是快速获取洞见的内容，还是可供深入探索的内容？”
如果用户已经提供了关于目标的丰富背景信息，可以跳过需求探索环节。

Visual Format Selection

视觉格式选择

Choose format based on the nature of the idea:
Concept TypeOptimal FormatWhy
Transformation/ChangeMorphing animationShows before→after as continuous process
Hierarchy/StructureZoomable treemap or nested diagramReveals layers through interaction
Process/FlowStepped animation with scrubberUser controls pace of revelation
ComparisonSide-by-side with synchronized animationParallel structure highlights differences
Accumulation/GrowthBuilding animationEach element adds to previous
Relationship/NetworkForce-directed graphReveals emergent structure
Distribution/ProportionAnimated unit chart or waffleMakes quantities tangible
Cycle/FeedbackLooping animation with entry pointsShows perpetual motion of systems
Timeline/SequenceHorizontal scroll with annotationsNatural reading direction
Spatial/GeographicAnnotated map with zoomGrounds abstract in physical
Mental ModelMetaphor-based diagramConnects abstract to familiar
Trade-off/TensionSlider-controlled balanceShows interdependence
根据概念的性质选择合适的格式：
概念类型推荐格式原因
转化/变化变形动画将前后变化展示为连续过程
层级/结构可缩放树形图或嵌套图表通过交互展示层级关系
流程/流转带进度控制的分步动画用户可控制信息揭示的节奏
对比/比较同步动画的并排展示平行结构突出差异
积累/增长构建式动画每个元素在之前的基础上添加
关联/网络力导向图展示涌现式结构
分布/占比动画化单位图或华夫图让数量更具象
循环/反馈带入口点的循环动画展示系统的持续运转
时间线/序列带注释的横向滚动条符合自然阅读方向
空间/地理可缩放标注地图将抽象内容落地到物理空间
思维模型基于隐喻的图表将抽象概念与熟悉事物关联
权衡/张力滑块控制的平衡图展示相互依赖关系

Design System

设计系统

Typography

排版

css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

--text-hero: 2rem;      /* Single key number or word */
--text-title: 1.25rem;  /* Visual title */
--text-label: 0.875rem; /* Axis labels, annotations */
--text-micro: 0.75rem;  /* Secondary details */
css
font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;

--text-hero: 2rem;      /* 单个关键数字或词汇 */
--text-title: 1.25rem;  /* 视觉标题 */
--text-label: 0.875rem; /* 坐标轴标签、注释 */
--text-micro: 0.75rem;  /* 次要细节内容 */

Color Palettes

配色方案

Minimal (default):
css
--ink: #1a1a2e;        /* Primary elements */
--ink-light: #4a4a68;  /* Secondary elements */
--accent: #e94560;     /* Single highlight */
--ground: #fafafa;     /* Background */
--ground-alt: #f0f0f5; /* Alternate regions */
Data-rich (when showing categories):
css
--cat-1: #4e79a7; --cat-2: #f28e2c; --cat-3: #e15759;
--cat-4: #76b7b2; --cat-5: #59a14f; --cat-6: #af7aa1;
Adapt to essay context:
  • Technical/analytical → cooler palette, more contrast
  • Personal/reflective → warmer palette, softer edges
  • Provocative/challenging → bolder accent, higher saturation
极简风格（默认）：
css
--ink: #1a1a2e;        /* 主要元素 */
--ink-light: #4a4a68;  /* 次要元素 */
--accent: #e94560;     /* 单个高亮元素 */
--ground: #fafafa;     /* 背景色 */
--ground-alt: #f0f0f5; /* 交替区域背景色 */
数据密集型（展示分类时使用）：
css
--cat-1: #4e79a7; --cat-2: #f28e2c; --cat-3: #e15759;
--cat-4: #76b7b2; --cat-5: #59a14f; --cat-6: #af7aa1;
适配文章语境：
  • 技术/分析类 → 冷色调，高对比度
  • 个人/反思类 → 暖色调，柔和边缘
  • 颠覆性/挑战性 → 更醒目的强调色，高饱和度

Motion Principles

动效原则

javascript
const EASE = {
  standard: 'cubic-bezier(0.4, 0, 0.2, 1)',  // Smooth, natural
  enter: 'cubic-bezier(0, 0, 0.2, 1)',       // Start fast, settle
  exit: 'cubic-bezier(0.4, 0, 1, 1)',        // Start slow, accelerate
  bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)' // Slight overshoot
};

const DURATION = {
  micro: 100,    // Color, opacity
  fast: 200,     // Small movements
  medium: 350,   // Standard transitions
  slow: 500,     // Large movements
  dramatic: 800  // Major reveals
};
Motion semantics:
  • Fade = existence (appear/disappear)
  • Scale = importance (emphasize/de-emphasize)
  • Translate = relationship (group/separate)
  • Morph = identity (transform)
  • Rotate = state (toggle, cycle)
javascript
const EASE = {
  standard: 'cubic-bezier(0.4, 0, 0.2, 1)',  /* 流畅自然的动效 */
  enter: 'cubic-bezier(0, 0, 0.2, 1)',       /* 快速进入，平稳落地 */
  exit: 'cubic-bezier(0.4, 0, 1, 1)',        /* 缓慢启动，加速退出 */
  bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)' /* 轻微过冲的弹性效果 */
};

const DURATION = {
  micro: 100,    /* 颜色、透明度变化 */
  fast: 200,     /* 小幅度移动 */
  medium: 350,   /* 标准过渡效果 */
  slow: 500,     /* 大幅度移动 */
  dramatic: 800  /* 核心内容揭示 */
};
动效语义：
  • 淡入淡出 = 存在状态（出现/消失）
  • 缩放 = 重要性变化（强调/弱化）
  • 平移 = 关联关系（分组/分离）
  • 变形 = 身份转化（形态改变）
  • 旋转 = 状态变化（切换、循环）

Technology Selection

技术选型

Choose the simplest tool that achieves the effect:
ComplexityToolUse When
SimplePure CSSState transitions, hovers, basic transforms
StandardVanilla JS + CSSSequenced animations, scroll triggers, simple interactions
ComplexGSAPTimeline sequences, physics, SVG morphing
Data-drivenD3.jsForce layouts, maps, data-bound transitions
For most explainer visuals, vanilla JS + CSS is sufficient.
选择能实现效果的最简工具：
复杂度工具适用场景
简单纯CSS状态切换、悬停效果、基础变换
标准Vanilla JS + CSS序列动画、滚动触发、简单交互
复杂GSAP时间线序列、物理动效、SVG变形
数据驱动D3.js力导向布局、地图、数据绑定过渡
对于大多数解释性视觉效果，Vanilla JS + CSS就足够了。

Code Structure

代码结构

Every visual is a self-contained HTML file:
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visual: [Concept Name]</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { /* Design tokens */ }
    /* Component styles */
  </style>
</head>
<body>
  <figure class="explainer-visual" role="img" aria-label="[Description]">
    <!-- Visual content -->
    <figcaption class="visually-hidden">[Accessible description]</figcaption>
  </figure>
  <script>
    // Animation and interaction logic
  </script>
</body>
</html>
每个视觉效果都是一个独立的HTML文件：
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visual: [Concept Name]</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { /* 设计变量 */ }
    /* 组件样式 */
  </style>
</head>
<body>
  <figure class="explainer-visual" role="img" aria-label="[Description]">
    <!-- 视觉内容 -->
    <figcaption class="visually-hidden">[无障碍描述]</figcaption>
  </figure>
  <script>
    // 动画与交互逻辑
  </script>
</body>
</html>

Accessibility Requirements

无障碍要求

css
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
Every visual must include:
  1. role="img" aria-label="..."
    on container
  2. Full text alternative in 
    .visually-hidden
    caption
  3. Respect 
    prefers-reduced-motion
  4. Keyboard-accessible interactions
  5. Visible focus states
css
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
每个视觉效果必须包含：
  1. 容器上添加
    role="img" aria-label="..."
    属性
  2. 在
    .visually-hidden
    标题中添加完整的文本替代内容
  3. 遵循
    prefers-reduced-motion
    动效偏好设置
  4. 支持键盘操作的交互
  5. 可见的焦点状态

Patterns Reference

模式参考

See references/patterns.md for implementation patterns:
  • Morphing shape transitions
  • Scroll-driven storytelling
  • Interactive slider diagrams
  • Annotated step-through animations
  • Force-directed relationship graphs
  • Unit/waffle chart animations
查看[references/patterns.md]获取实现模式：
  • 变形形状过渡
  • 滚动驱动的叙事动画
  • 交互式滑块图表
  • 带注释的分步动画
  • 力导向关联图
  • 单位/华夫图动画

Delivery

交付规范

Output as single HTML file that:
  1. Is completely self-contained (inline all CSS/JS)
  2. Works when opened directly in browser
  3. Can be embedded via iframe
  4. Includes comments explaining key decisions
For library-dependent visuals (D3, GSAP), include CDN links with integrity hashes.
输出为单个HTML文件，需满足：
  1. 完全独立（内联所有CSS/JS代码）
  2. 直接在浏览器中打开即可运行
  3. 可通过iframe嵌入
  4. 包含注释说明关键设计决策
对于依赖第三方库的视觉效果（如D3、GSAP），需添加带完整性哈希的CDN链接。

Quality Checklist

质量检查清单

Before delivering:
  • Static state communicates the core idea
  • Animation reveals insight, not just decorates
  • Interactions are discoverable (cursor hints, hover states)
  • Works on mobile (touch-friendly, responsive)
  • Reduced motion alternative exists
  • Accessible description is complete
  • Code is commented for future modification
  • File size reasonable (<100KB simple, <500KB complex)
交付前需确认：
  • 静止状态即可传达核心信息
  • 动画揭示洞见，而非仅作为装饰
  • 交互操作易于发现（光标提示、悬停状态）
  • 支持移动端（触控友好、响应式布局）
  • 提供简化动效的替代方案
  • 无障碍描述完整准确
  • 代码包含注释方便后续修改
  • 文件大小合理（简单效果<100KB，复杂效果<500KB）