背景
orbital-elements-3d 是一个用 Three.js 写的开普勒轨道六根数（a、e、i、Ω、ω、ν）交互式 3D 教学演示：拖动滑块改变根数，场景里的轨道、角度弧线、标记实时变化，帮助建立每个参数的几何直觉。
我最近给它做了一轮比较大的体验迭代（PR #1）。这轮迭代有意思的地方在于：它不是先画原型再开发，而是完全由真实使用中的痛点驱动，改完之后回头一看，每个改动几乎都能对应到经典的 UCD/UED 方法论。这篇文章把整个过程和方法论映射整理出来，既是一次复盘，也算给"小项目怎么做用户体验"留一个参考样本。
痛点是怎么暴露的
所有问题都来自实际使用时的截图反馈，而不是设计假设：
- P1 场景文字与实物重叠：近地点、升交点的标签在特定轨道参数下完全重叠，“卫星"标签直接贴在卫星标记上，文字压在地球表面无法阅读。
- P2 标签随缩放失效：坐标轴标签（春分点、北极）是 3D 精灵，拉近看地球时飞出视口，拉远又缩得太小——必须"达到特定缩放级别"才能看到。Ω/i/ω/ν 符号按世界单位缩放，近景时又大又糊。
- P3 线条过细：所有线都是 1px（three.js 普通
Line 的 linewidth 在浏览器里无效），坐标轴同样纤细，高分屏和投屏下很吃力。 - P4 视觉元素自相矛盾：地球经纬网的汇聚点不在南北极，而是落在赤道附近（几何体极轴没对齐场景的 +Z 轴），和"北极"标注打架。
- P5 信息分散冗余：场景文字、左下信息面板、底部折叠说明三处信息各自为政，近地点高度还在两处重复出现、格式不一致。
修改前：近地点/升交点/卫星标签挤在一起，文字直接压在地球上。
修改前特写：拉近看地球时，3D 精灵标签变得巨大、模糊，甚至被视口裁掉一半。
这个过程本身就是 UCD 最强调的环节：从真实使用情境中发现问题。如果一开始只是对着设计稿自查，P2、P4 这类问题很难被主动发现。
改动与 UCD 原则
每条改动单独看都不复杂，但动机都能回溯到明确的可用性原则（Nielsen 启发式、Norman 设计原则、格式塔原理）：
点位文字移出场景，合并为右上角图例，通过颜色关联标记。 解决 P1。对应 Nielsen #8"美观与极简”——消除重叠信息；关联方式用的是格式塔相似性，也就是 Norman 说的自然映射：不需要文字指着实体，用户靠颜色自己完成"图例 ↔ 场景标记"的对应。
修改后：点位文字全部进右上角图例（含实时数据），场景里只剩图形本身。
轴标签和根数符号改为 HTML 覆盖层：固定字号、每帧投影定位、投影飞出视口时钉在视口边缘；X/Z 箭头随视图同步伸缩。 解决 P2。对应 Nielsen #1"系统状态可见性"——关键导航信息在任何缩放级别都不能丢失，可见性不仅是文字，也包括图形指示。
修改后特写（与修改前同一机位）：地球贴图、清晰的小标签、“北极 (Z)““春分点 (X)“钉在视口边缘，箭头收缩到标签旁。
点击根数标题行切换对应图形显隐，卡片变暗、图例行同步隐藏。 教学时经常需要"只看某一根数"的聚焦能力。对应 Norman 的示能与意符（手型光标、悬停提示告诉用户这里可点）、反馈原则（变暗是即时确认），以及 Nielsen #3"用户控制与自由”。
帮助体系改为渐进披露 + 情境帮助：总说明收进标题旁的 ? 图标（点击开关、点外部关闭）；悬停某个根数标题只弹出该根数的解释；点击场景里的 Ω/ν 符号，弹出的就是这个符号的含义。说明默认收起降低初始认知负荷，需要时又出现在问题发生的位置——比让用户翻文档更进一步，对应 Nielsen #10 的情境化实现。
情境帮助：点击场景里的 ν 符号，弹出真近点角的解释，再次点击或点其他处消失。
信息面板并入图例，统一数值格式。 解决 P5。对应 Nielsen #4"一致性与标准”：同一数据只在一处维护、一种格式呈现。
地球贴上 NASA Blue Marble 真实影像，经纬网极点对齐 +Z。 解决 P4。对应 Nielsen #2"系统与现实世界的匹配”：真实大陆和正确的经纬网符合用户已有的地球心智模型，抽象纯色球做不到这一点。
新增线宽滑块（1–6px）。 解决 P3。“看得清"的标准因人而异（屏幕、视力、投屏），给调节手段比定死一个"设计者认为合适"的值更合理——既是用户控制，也是可访问性考量。实现上有个小坑：three.js 普通线的 linewidth 在浏览器中会被忽略，必须引入官方的 Line2 宽线组件才能真正调宽。
从 UED 框架回看
UCD 偏流程和可用性原则，UED 的视角更宽，还要管情感、美感和学习体验。用几个框架套一下：
Garrett 用户体验五要素。 战略层 → 范围层 → 结构层 → 框架层 → 表现层。这轮改动全部落在最上面两层：框架层（图例整合、信息架构、帮助何时出现）和表现层（贴图、字号、线宽、颜色）。下面三层没动，说明产品的战略（教学演示）和范围（六根数交互）本来就成立，痛点集中在体验和呈现——这类项目补体验比加功能收益大得多。
Morville 用户体验蜂窝。 七个维度至少命中五个：易用（消除重叠、标签常可见）、可找（图例集中、颜色关联）、可及（线宽字号可调）、合意（地球贴图的质感）、有价值（点击符号出解释，直接服务教学核心价值）。
Norman 情感化设计三层。 地球贴图是本能层（第一眼的美感）；点击显隐、即时反馈是行为层（过程顺畅）；? 图标和情境说明是反思层（用户事后觉得"这工具把六根数讲清楚了”，形成口碑）。
认知负荷理论（教学类产品特别相关）。 重叠文字、看不清的线属于外在认知负荷——设计缺陷造成的精力浪费，这轮改动主要在削减它；点击场景符号弹出"此刻正在看的参数"的解释，是把学习资源嵌入操作情境，支持相关认知负荷。对教学工具来说，这比通用可用性更贴近本质。
KANO 模型。 标签不重叠、线看得清是基本型需求，优先补齐；点击出说明、线宽可调是期望型；地球贴图是魅力型。这轮的顺序恰好是先基本、再期望、后魅力，符合 KANO 推荐的投入次序。
验证方式
每轮改动后，用无头 Chrome 对页面截图（默认视图、特写缩放、元素隐藏态、低轨警告态），确认改动生效且没有引入新问题，形成"反馈 → 修改 → 截图验证"的快速闭环。这个办法对纯前端小项目性价比很高：不需要起服务、不需要人工操作，一行命令就能拿到多种状态下的真实渲染结果，贴图朝向、标签钉边这类视觉问题也能直接看图确认。
几点思考
- 痛点驱动 + 方法论事后归因，是小项目性价比最高的 UCD/UED 实践方式。 不需要重型流程，但每个改动都能讲清楚"为什么这么做”，避免了凭感觉乱改。
- 五条原则覆盖了绝大多数改动：可见性、一致性、渐进披露、情境帮助、用户控制。遇到体验问题先往这五条上想，基本不会偏。
- 教学类产品优先削减外在认知负荷。 看不清、找不到、对不上，比缺功能更伤体验。
- 诚实地说，这套做法还缺两块：一是度量（比如用 HEART 框架衡量任务成功率——“用户能否独立讲清六个参数”），二是真实用户验证（找一两个目标用户操作观察卡点）。补上这两块，才算完整的 UCD 闭环。
改动已全部合入上游 PR，迭代过程的方法论分析也整理成了系列 issue（痛点 / UCD / UED / 总结），欢迎交流。