上一篇讲清楚了产状的数学计算。这篇记录一下一个网页从一个"能跑就行"的原型，一步步迭代，最后长成一个能在没信号的野外拍照录音存数据离线用的工具的过程。
下面每个版本都配一张当时的界面示意图。
v1.1.0 初版：能跑就行的箭头
最早一版只想着把倾向倾角算出来显示。界面很直接：顶部一个满宽的绿色"开始测量（授权传感器）"按钮，中间一块大数字面板显示倾角和倾向，下面一个圆形表盘，表盘里一根黄色长箭头从中心指向倾向方向，长度按倾角缩放。再往下把 Yaw/Pitch/Roll 和屏幕法线一并铺开。
几点不足：
- 按钮占了一整行，空间利用低。
- 那根黄色箭头偏长，穿过中心点，与底部刻度文字重叠。
- 倾向数字后缀"（真北）"括号，中文里还夹着英文 "Dip Dir"，中英混排。
- 原生数据全部展开，不关心这些行的用户也得一并看着。
v1.2.0 加水平仪气泡
第一个改进是把中心圆盘做成了一个像真水平仪的东西。圆心多了一圈绿色外环和一个会移动的小气泡，气泡按法线水平分量偏移，倾斜越大气泡越靠边。手感上像在用真正的水准管，比光看数字直观多了。指针还是那根黄箭头，依然又长又黄。
v1.3.3 指针固定，表盘转动
这是个根本性的设计翻转。之前一直是"指针动、表盘不动"，但这样在固定平面上转手机时指针会跟着转，不符合"产状不变指针就不动"的直觉。改成反过来：
- 指针固定朝画布顶部，永远不动。
- 整个表盘刻度盘随倾向旋转，让倾向方位的刻度对准顶部指针。
- 气泡继续当物理水平仪。
这一改，贴在斜面上转手机时指针保持稳定，表盘刻度像指南针那样转，配合指针直接读出方位。
v1.3.5 加横纵水平管
光一个圆形水平仪只能看总倾斜，看不出"往哪边歪"。这一版在圆盘两侧加了两根细长水平管：一根纵向（测南北分量），一根横向（测东西分量），各自只反映自己那方向的倾斜。两根管贴着圆盘外边，没占多少空间，但读数更明确了。
v1.3.6 存帧、下载 CSV、备注
前面几版都只是"实时看一眼"，野外测量要记录。这版加了三个东西：
- 冻结/继续切换（单按钮，文本跟着切换）。
- 存一帧：每次点击把当前帧原始数据存一条，含序号、时间、倾向、倾角、四元数、加速度、法线分量。
- 下载 CSV：把所有记录导出，UTF-8 BOM 兼容 Excel，文件名带时间戳。
- 旁边加了个备注输入框，每条测点能敲几个字。
这下从"看"升级到"记"了。
v1.3.8 开始/冻结合一，详情折叠
界面越来越挤。这版做了两件减法：
- 开始测量和冻结读数本来是两个按钮，合成一个：没启动时显示"开始测量"，启动后变成"冻结读数"，再点切回继续。少一个按钮就少一行。
- 那一长串 Yaw/Pitch/Roll/法线/罗盘/磁偏角/经纬度，默认收起来，只显示一个"原生数据"标题，点了才展开。普通人不用看这些。
界面一下子清爽了，圆盘成了绝对主体。
v1.3.11 水平管细长贴边，指针白色半透
水平管本来有点粗，挤得圆盘不好看。这版把它们做细做长，紧贴圆盘外缘，像真的水准管贴在仪表边上。指针也改了：
- 缩短，不再顶到刻度字。
- 从刺眼的黄色换成白色半透明，与深色背景对比清晰但不喧宾夺主。
- 屏幕朝下时才变红警示。
按钮文案也统一：开始测量、保存、下载，字号统一，加了 white-space:nowrap 防止英文状态下换行。
v1.4.1 拍照、录音、ZIP 打包
野外调查光记数字不够，得能拍照存证、录音备注。这版加了：
- 拍照按钮：调起后置摄像头，拍完存为附件。
- 录音按钮：用
MediaRecorder录音，优先选 AAC/Opus 高压缩编码，点一下开始，再点停止，文件用时间戳命名（rec_20260718063012.webm）。 - 下载：有附件时用 JSZip 打成 zip（CSV + media 文件夹，附件名带序号前缀关联），没附件就纯 CSV。
- 所有文件名统一用
YYYYMMDDHHmmss格式，精确到秒。
这下从"记录"升级到"多媒体记录"了。
v1.4.3 离线缓存，开始/暂停
最后一个关键问题：野外经常没信号。一旦断网，浏览器刷新就加载不出页面，之前采集的数据也无法继续使用。这版加了 Service Worker：
- 第一次访问时把页面本身、JSZip CDN 缓存到本地。
- 之后断网也能正常打开和使用，刷新不会白屏。
- 用 stale-while-revalidate 策略，有网时悄悄更新，没网时用缓存。
按钮文案最后又改了一次：去掉"继续"，只留两个状态——开始和暂停，简洁明确。
详情区从"原生数据"改名"详细信息"，配一个可旋转的小三角按钮，点击展开/收起，不再写"点击展开"这种说明文字。中文状态下纯中文，英文状态下纯英文，不再混排。
一路改下来的几点体会
1. 指针和表盘谁该动，是个设计问题不是技术问题。 最早让指针动、表盘不动，技术上都对，但用起来不顺手——贴在固定平面上转手机时指针会跟着转，违反"产状不变"的直觉。反过来指针固定、表盘转动，立刻就顺手了。这种"谁动谁不动"的选择，纯几何算不出来，得靠实际拿着手机在斜面上转两下才知道。
2. 减按钮比加按钮难。 开始/冻结/继续三个按钮合成一个，要处理"没启动点开始、启动后点切换冻结"两种状态，逻辑变复杂了，但界面少了两行。值得。
3. 原生数据该藏起来。 Yaw/Pitch/Roll/四元数/加速度这些是给调试和复算用的，普通用户根本不看。默认折叠、给个三角按钮，是比"点击展开"这种文字说明更克制的做法。
4. 野外工具必须能离线。 这一点一开始没想，等真拿到没信号的地方才发现刷新就白屏。Service Worker 加上之后才算是能放心带出门的东西。
5. 命名要为文件系统着想。 时间戳用 YYYYMMDDHHmmss 而不是 ISO 的 2026-07-18T06:30:12，是因为前者直接排序、不会因为冒号在某些系统报错、文件名里也好看。
整个过程没碰过产状的数学计算，改的全是"用起来顺不顺手""断网了能不能用""能不能把照片和录音一起带走"这些工程和界面问题。
对于具体的需求来说，算得对只是起步，用得顺才是工具。