第二章：看不见的蓝图 —— 需求分析与项目规划

2.1 一个价值百万的好习惯

想象一下，你如果要决定亲手建造一座房子。你会热血上涌，立刻冲到建材市场去买水泥和砖头吗？

当然不会。

你一定会先坐下来，然后找张白纸，画一张草图。标注哪里是客厅，哪里是卧室，门朝哪开，窗户要多大。有了这张图，你才知道该买多少砖，水管怎么铺，电线往哪走。没这张图就开工，建出来的可能不是房子，而是一堆昂贵的废墟。

软件开发和盖房子一模一样。

那张“草图”，在软件开发的世界里，就叫做需求分析和项目规划。它可能是你整个项目中最不“性感”的部分——没有代码，没有动画，没有炫酷的效果。

但请相信我，它绝对是你整个项目中最有价值的部分。

为什么？因为这个习惯能把你的思维模式从 “我能做什么” 转换成 “我应该做什么” 。它能帮你在被代码细节吞没之前，先看清楚整片森林的模样。

这是我们给自己的第一个专业训练。

2.2 第一步：把“我想要”变成“用户想要”

千万别被“需求分析”这四个字吓到。对于我们这个独立开发的项目，它其实很简单，就是回答三个问题：

谁会用它？ —— 可能是化学爱好者、学生、或者只是想看点酷炫东西的普通人。
他们能用它做什么？ —— 这是我们定义功能的地方。
我们如何衡量成功？ —— 功能做到什么程度才算“完成了”？

为了更好地回答这些问题，我们引入一个工具，叫做用户想要（User wants）。它的格式简单得不像话：

作为一个 [用户角色]，我希望 [做某件事]，以便 [达到某个目的]。

这个句式强迫我们站在用户的角度思考问题，把我们自身带入到用户的视角中去，而不是站在开发者的角度去炫技。我们来尝试写几条：

作为一个对化学元素很感兴趣的人，我希望在页面上看到所有118个元素，以便对元素周期表有一个整体的认识。
作为一个喜欢探索的用户，我希望能够用鼠标拖拽旋转整个元素集合，以便从不同角度观察它们。
作为一个对画面效果有极致要求的人，我希望能够切换不同的3D布局（比如球体、螺旋），以便用更直观的方式理解元素之间的关系。
作为一个想要深入研究某个元素的用户，我希望点击某个元素后能查看它的详细信息（如名称、用途、原子质量），以便获取我需要的具体知识。

你看，这样一来，我们想要做的那些“功能”就不再是浮于空中的想法，而是一个个服务于具体用户、有具体目的的任务。

2.3 第二步：区分“必要”与“锦上添花”

有了”用户想要“，我们就有了一个功能清单。但一股脑全做进去，我们的项目可能永远也做不完。这时候，我们就必须要学会做一个艰难的判断：分清主次。

这里我们要再次引入第一章提到的那个工具，叫做MVP（Minimum Viable Product，最小可行产品）。

它不是指一个烂到让人没法用的半成品，它指的是：用最少的功能，来验证我们核心想法的产品。对于THE118™项目，我们的核心想法是“纯数学驱动的3D元素周期表”。那么，能让这个想法跑起来的最小功能集是什么呢？

我们可以把功能分成三类：

P0（核心功能，必须做）：没有它，项目就不成立。
P1（重要功能，应该做）：让产品更好用、更完整。
P2（增强功能，可以做）：锦上添花，未来有时间再加。

来看看我们的清单：

功能	优先级	理由
展示全部118个元素	P0	这是周期表的基本定义
5种3D布局及切换动画	P0	项目的核心亮点，“纯数学驱动3D”的体现
鼠标拖拽旋转场景	P1	让3D场景真正可交互，极大提升体验
点击元素查看详情	P1	从“看”到“探索”的升级，让应用更有深度
元素详情面板	P1	承载详情信息的容器
亮色/暗色主题切换	P2	提升视觉体验和长时间使用的舒适度
搜索特定元素	P2	方便用户快速定位，但交互上与点击聚焦有重叠
移动端适配	P2	让手机用户也能使用，涉及更多交互适配
多语言国际化	P2	让更多国家的用户能使用

这个优先级列表，就是我们项目的“施工计划书”。我们会严格遵循它，先集中精力完成所有P0功能，让它成为一个能跑通的项目。然后，我们再从容地加上P1和P2，不断完善它。

一个给自己的承诺：在完成P0之前，我绝不会分心去做P2的事情。这是避免项目无限期拖延的黄金法则。

2.4 第三步：画一张“导游图”

文字描述有时不够直观。尤其是当我们在设计交互流程时，一张图胜过千言万语。

现在，我们试着画一张简单的流程图，描述用户从进入网页到查看元素详情的完整路径。这在软件工程中，也是一个标准动作。

text

[用户打开网页]
      │
      ▼
[看到默认的3D布局 (比如表格)]
      │
      ├─ 鼠标拖拽 ───▶ [旋转/缩放场景]
      │
      ├─ 点击底部图标 ───▶ [切换到其他3D布局 (球体/螺旋等)]
      │
      └─ 点击某个元素 ───▶ [元素飞到屏幕中央，高亮显示]
                             │
                             ├─ 点击空白区域 ───▶ [元素退回原位]
                             │
                             └─ 双击该元素 ───▶ [弹出详情面板]
                                                 │
                                                   └── 点击遮罩层 ───▶ [关闭面板]

这张流程图虽然简单，但它就是我们编写代码的“导游图”。当我们迷失在各种 Hooks 和组件里的时候，回到这张图，它总能提醒我们：用户接下来应该去往哪里。

2.5 最后一步：写下我们的里程碑

有了功能清单和交互流程，我们就可以制定一个粗略的版本计划。这不只是为了好看，而是为了给自己设立一个个可以庆祝的“里程碑”，让漫长的开发旅程变得有节奏、有成就感。

我们可以简单地将功能映射到之前设想的三个版本中：

版本	核心任务	里程碑意义
v0.1.0	展示118个元素，实现5种3D布局及切换动画	核心引擎跑通：证明我们自研的数学矩阵方法是可行的
v0.2.0	加入拖拽旋转、卡片点击选中与聚焦、详情面板	交互体验成型：用户终于可以用手去探索这个3D世界了
v1.0.0	加入主题切换、搜索、移动端适配、国际化等	产品完整发布：这是一个可以骄傲地分享给任何人的作品

好了，我们已经花了一整章的时间，还没写一行代码。你是不是觉得有点手痒了？

但我希望你能记住这种“先规划，后行动”的感觉。这是一种强大的方法论。从下一章开始，我们将要做出一个更关键的、甚至可能有些颠覆常识的技术决策。

我们为什么放弃了别人都在用的 Three.js？又为什么选择了一条看似更难的路——去直接操控 CSS transform 中的 matrix3d() 函数？这背后的“为什么”，才是我们整个项目中最闪亮的部分。