那个没人看的 3D 酯化反应
我们曾经为酯化反应做了一个完整的 3D 分子动画。
酯化反应——就是醇和羧酸在酸催化下缩合成酯的那个反应。在我们的 3D 版本里，每一个原子都有精确的空间坐标，每一根化学键都有真实的角度，轨道动画流畅，光照柔和，相机能 360 度自由旋转。
它很漂亮。技术上也很扎实。
但它失败了。
用户数据告诉我们一件残酷的事情：学生在这个 3D 可视化上的平均停留时间，比纯文字版的讲解还短。我们去看了行为录屏，发现学生把大量时间花在了「搞清楚怎么转视角」和「找到看得清断键过程的角度」上，而不是花在理解反应机理本身上。
3D 的自由度变成了认知负担。旋转操控分散了注意力。一个本质上很简单的概念——「这根键断裂，那根键生成，水分子离去」——被包装成了一个空间探索谜题。
我们砍掉了它。用一个扁平的 2D 动画重新做，箭头清晰地沿着键的断裂和生成路径移动。没有旋转，没有视角焦虑，学生的注意力被完整地引导在反应过程上。
上线后：停留时间翻倍。配套练习的正确率提升了 34%。
那一次经历让我们想明白了一件事——也是这篇文章想讲的唯一一件事：
技术上更炫 ≠ 教学上更好。
可视化是教学语言，不是装饰
这句话是我们的第一性原理。它印在内部文档的第一行，出现在每一次设计评审的第一页。
可视化是教学语言，不是装饰。每一个视觉元素必须服务于一个唯一目标：降低认知负荷。
如果你认真对待这句话，它的推论是激进的：在添加任何视觉元素之前——任何粒子特效、任何动画、任何 3D 旋转——你必须能回答一个问题：
「这个元素是否帮助一个 16 岁的学生，比读课本更快地理解这个概念？」
如果答案不是明确的「是」，它就不应该出现。
这不是反对美感。我们非常在意视觉品质——我们 3D 分子模型的材质经过仔细调教（粗糙度 0.2，金属度 0.1），追求的是专业实验室仿真软件的科学质感，而不是儿童益智游戏的塑料感。但美感服务于教学，永远不反过来。
我们把这个原则量化成一个明确的优先级序列：
- 学习清晰度——可视化是否真正降低了认知负荷？
- 教学适切性——选的维度（2D / 3D / 图表）是否匹配知识点的空间特征？
- 开发效率
- 基础设施完善度
注意前两个是关于学生的，后两个是关于我们的。这个排序是刻意的，也是不可动摇的。
不要默认选 3D
这是我们设计体系中最反直觉的原则。
在教育科技行业，3D 几乎是一种默认的「高级感」信号。投资人看到 3D 会觉得技术先进。Demo 视频里 3D 旋转更有视觉冲击力。社交媒体上 3D 截图更容易吸引眼球。
但我们不这么看。在 Vectora 的设计语言里，3D 和 2D 不是升级关系，而是不同的语言，适合传达不同的信息。
维度选择必须由知识点的空间特征驱动——不是由观众的期待驱动，不是由竞品的做法驱动，更不是由「哪个更好看」驱动。
维度决策矩阵
| 知识点特征 | 推荐维度 | 理由 |
|---|---|---|
| 分子空间构型（VSEPR、杂化轨道） | 3D | 空间角度是核心认知目标，2D 根本无法传达 |
| 反应方程、断键成键过程 | 2D 动画 | 焦点是原子的移动路径和键的变化，2D 反而更清晰 |
| 数值关系、趋势变化 | 图表 | 定量关系用坐标轴最直观 |
| 电子云、概率分布 | 3D | 概率密度是三维空间概念 |
| 反应能量曲线、速率 | 2D 图表 + 动画 | 单变量随时间变化，图表最清晰 |
| 原子大小、周期趋势 | 2D + 交互 | 对比关系明确，平面排列更利于扫视比较 |
| 晶体结构、晶胞 | 3D | 空间堆积和对称性需要三维旋转才能理解 |
每一个维度选择，我们都要求设计者回答一个检验问题：
「如果把这个 3D 换成 2D 动画或图示，学习效果会下降吗？」
如果答案是「不会」，那就应该用 2D。
这个原则说起来容易，做起来很难。3D 的引力是巨大的——它更好 Demo，截图更好看，让人觉得「更先进」。抵抗这种引力需要一个明确的、文档化的决策框架，这就是我们为什么要把这张矩阵表格写下来。
三条硬性禁止
- 禁止为了视觉冲击力选择更高维度。 不需要 3D 的概念强上 3D，增加的不是理解力，而是认知负荷——旋转操控本身就在消耗注意力。
- 禁止装饰性粒子和特效。 除非粒子本身代表了一个物理/化学实体（电子、离子、光子），否则不添加。没有「背景星尘」，没有「氛围光斑」。
- 禁止没有教学意义的动画。 每一个动画都必须能回答一个问题：「它在展示什么知识点或过程？」背景呼吸光效、无意义的缓动装饰，零容忍删除。
10 秒规则
认知科学有一个被广泛引用的数字：人类工作记忆的容量大约是 4±1 个单元。也就是说，在任何给定时刻，一个人能够有效处理的信息单元不超过 3 到 5 个。
当一个可视化同时呈现太多运动元素、太多竞争色彩、太多不清晰的层级关系时，它不是在教学——它是在制造信息过载。
我们把这个认知科学原理转化成了一条简单的验收标准：
一个从未学过这个知识点的学生，能在 10 秒内理解屏幕上在展示什么吗？
如果不能，问题不在学生，在设计。
围绕这条标准，我们发展出了五个具体的减负策略。
1. 信息节流
在视觉焦点区域内，同一时刻的动态变化元素不超过 3 个。如果一个反应涉及 5 个原子的运动，我们将动画分阶段编排，让注意力沿路径依次流动，而不是同时处理五道平行信息流。
2. 渐进揭示
复杂过程分成多个阶段呈现（通过 Tab 或时间轴），每个阶段只引入一个新概念。第一个 Tab 永远是最简单、最直观的示例。每个后续 Tab 增加一个复杂度维度。
我们从不在第一屏就展示最复杂的情况。
3. 视觉锚点
每个画面必须有且仅有一个明确的视觉焦点——通过对比度（更高的饱和度或亮度）、尺寸（比周围元素更大）、或运动（静止画面中唯一移动的东西）来实现。视线不应该游移；它应该被引导。
4. 冗余编码
关键信息必须同时通过颜色和形状和文字标注三个通道传达。我们从不依赖单一通道。一个成键电子不仅仅是蓝色的——它是蓝色的、比原子核小的、并且标注了「e⁻」。
这对无障碍访问很重要，但更重要的是，多通道编码能显著提高信息的获取速度。
5. 去噪
一切不直接服务于当前学习目标的视觉元素，删除。
宁可画面空一点，也不要满。空是专注。满是干扰。
信息三层模型
我们用一个三层结构来组织每一个可视化中的信息：
| 层级 | 载体 | 目的 |
|---|---|---|
| 第一层：视觉 | 3D/2D 场景中直接可见的颜色、大小、位置、动画 | 基本理解——不读文字也能获得 |
| 第二层：标注 | 场景内可切换的标签（键长、电荷、角度数值） | 进阶理解——按需获取的细节 |
| 第三层：文字 | 侧边信息面板中的解释性文字 | 深入理解——概念的来龙去脉 |
关键的设计约束是：学生仅凭第一层就应该能获得对概念的基本理解。 第二层和第三层提供深化，但它们不是前提。
这和大多数教育软件的做法正好相反。大多数工具把文字解释放在前面，把可视化放在后面作为「插图」。我们把可视化放在前面，把文字放在后面作为「注释」。
区别在于：前者是「先读这段话，再看那个动画」；后者是「先看明白这个东西，再理解为什么」。
先观察，再操控
学生打开一个资源的瞬间，屏幕上必须已经有值得看的东西在发生。
永远不展示空白画布等待操作。永远不展示默认值为零的初始状态。
- 动画型资源：默认自动播放
- 浏览型资源：第一个 Tab 的第一个示例已经在屏幕上
- 参数模拟型资源：参数填充了有教学意义的默认值
默认状态的选择也不是随意的——它应该展示这个资源最关键的教学点。
化学键资源？默认展示电子转移的动画——反应中最戏剧性的瞬间——而不是静态的结果。VSEPR 分子几何？默认视角选择最能揭示空间结构的角度，而不是「正面全景」。
每一个初始状态都是一个关于「什么最重要」的论点。
对比驱动学习
每一个资源至少提供两个可切换的案例供对比。但不是任意两个——案例的选择必须有教学意义，差异必须显著且能带出学习点。
- ✅ NaCl vs MgO——电荷数不同 → 键强度不同 → 学生发现规律
- ❌ NaCl vs KCl——太相似 → 切换后几乎看不出区别 → 学不到新东西
切换案例时的视觉变化必须是明显的、即时的、有意义的。如果学生切换了 Tab 却需要仔细对比才能发现差异，这个对比就算失败了。
画布是液体，面板是固体
这是我们对全屏行为的一个比喻——但它表达的是一个更深层的设计信念。
当学生进入全屏模式时，核心的可视化画布（3D 场景、2D 动画、图表）会扩张到填满所有可用空间。但控制面板和信息侧栏保持固定宽度（24rem / 384px），不膨胀。
为什么？因为画布从更多空间中受益——更多像素意味着复杂分子结构或反应动画有更高的视觉清晰度。但一个 600px 宽的文字面板反而比 384px 宽的更难读。文字阅读有一个舒适的栏宽区间，我们尊重它。
这不仅仅是一条布局规则。它是关于什么该随空间增长、什么不该增长的判断。
视觉理解随屏幕面积线性增益。文字理解不是。
黄金检验
每一次设计评审的最后一个问题：
如果把这个资源的所有可视化都去掉，换成文字和静态图片，学习效果会一样吗？
如果答案是「是」——那这个可视化是装饰品。它可能很好看，但它没有教任何光靠一份 PDF 教不了的东西。
反过来说，我们的追求是：
好的可视化，应该让学生获得读课本永远无法获得的理解。
分子旋转后才能看到的真实空间构型。慢动作回放中才能体会的断键-成键瞬间。拖动参数滑块后才能「感受到」的温度对反应速率的影响。
这些是文字做不到的事情。如果我们的可视化不是在做这些事情，那我们就跟一本带插图的教科书没有区别——而一本带插图的教科书不需要我们。
写在最后
如果你是学生：Vectora 上的每一个资源，每一个视觉元素，都经过了这套设计哲学的审视。它存在，是因为它挣得了自己的存在权。当你使用我们的模拟器时，你不是在浏览某个人的技术作品集——你在使用一个为「让你理解」而被反复设计、争论和打磨的工具。
如果你是家长：我们不靠视觉冲击力竞争。我们靠一个更难衡量的东西竞争——你的孩子用完我们的工具后，是不是真的理解了。这是一个更难交付的承诺，但它是正确的承诺。
如果你是教育工作者：我们希望听到你的反馈。这套设计哲学是一份活的文档，最好的修正来自每天看着学生学习和挣扎的人。
在 Vectora，每一个可视化决策都从同一个问题开始：「它帮助理解，还是制造干扰？」帮助理解的，发布。制造干扰的——无论多漂亮——不发布。