Snapshot

2. 探索并确定体积可视化方案。 | | 当前状态 | 2026年6月上线（第一版） |

<aside>

Live Demo ↗

</aside>

TL;DR

一家建筑公司客户希望直接在 Scanat 的扫描模型中计算坑洞、土堆等土方体积，而不是依赖人工估算或切换到其他专业软件。我们将这个需求设计成跨 Web、Mobile 和 iPad 的正式测量功能，让用户在已有 3D 地形模型中完成体积计算，并直接查看空间化的测量结果。

**我的工作：**负责专业场景调研、两套交互方案设计与可运行原型验证，并探索体积与参考面的 3D 可视化方式，跟进开发实现和内测后的迭代。

https://res.cloudinary.com/v7b2p5ho/video/upload/v1786514878/etlrsnrta1cmilgesacd.mov

1. Problem

场景与任务断点

客户已经能够用 Scanat 获取真实场地的 3D 模型，但土方体积计算仍需要依赖人工估算或其他专业工具。产品机会并不只是增加一个“体积数值”，而是把 范围定义、参考高度、计算结果和 3D 空间关系 放进同一个测量流程，让用户能直接基于已有扫描数据完成判断。

三个核心设计问题

1. 如何把专业的土方计算逻辑转化成可以在 3D 模型中完成的交互？

土方测量涉及测量范围、基准面、挖方 / 填方以及目标高度等概念。设计需要先确定用户到底要定义哪些信息、按什么顺序操作，以及哪些反馈需要在绘制过程中实时出现。

2. 当理想方案的实现成本过高时，怎样在不丢失核心价值的前提下简化？

初版希望通过多边形圈定局部范围并投影计算，能力更完整，但开发评估后实现周期和边界情况都超出第一版预期。需要重新确认客户最核心的短期场景，并找到一个能更快上线、同时保留后续扩展空间的交互模型。

3. 如何让抽象的体积结果在真实 3D 地形上克堵？

只有数值不足以帮助用户判断坑洞或土堆与地形的关系；但体积视觉如果过重，又会遮挡原始模型。设计需要在体量感、边界识别、地形可见性以及多个测量结果并存时的遮挡之间取得平衡。

前期调研

土方测量是 Scanat 此前较少覆盖的专业场景。为了定义上述问题，我先对相关专业工具和行业惯例做了调研，重点确认三类信息：

1. 挖方、填方和体积差值的含义及常见视觉表达；
2. 绘制范围、基准面与目标高度之间的关系；
3. 不同工具如何完成范围定义、体积计算和结果可视化。

2. Approach

项目共经历六个阶段，设计稿与可运行 Demo 交替推进：

1. 在 Figma 中设计初版多边形测量方案；
2. 用 Antigravity 制作第一版 Demo，验证交互和初步视觉效果；
3. 需求调整后，设计第二版参考面方案；
4. 用 Codex 制作第二版 Demo，继续验证交互细节；
5. 在 Demo 中调试视觉效果，并交付设计参数；
6. 根据开发实现和测试反馈继续优化。

3. Design Decisions

决策一：初版多边形投影方案的交互设计

需求：用户需要在 3D 地形模型上圈定范围，计算其中的土方体积，并区分挖方（cut）和填方（fill）。

关键决策：

• 结果展示平面面积、挖方量、填方量和两者差值；
• 填方使用蓝紫色，挖方使用橙红色；
• 用户绘制多边形，系统生成用于计算的基准面；基准面下方为填方，上方为挖方；
• 用户可调整基准面高度，体积同步重新计算。

原型作用：完成静态方案后，我又制作了可交互原型，用来验证交互手感和边界情况。主要解决了三个问题：

1. 实时反馈：逐点绘制时实时显示面积，而不是等闭合后才显示结果；
2. 区分绘制面与基准面：绘制面使用挖方 / 填方颜色，基准面使用半透明白色，避免用户混淆两者；
3. 高度边界：即使参考面悬空，也按用户输入的目标高度计算，不重新依赖模型取点。因为实际场景中，用户可能就是要把地形整平到一个模型中不存在的目标高度。

https://res.cloudinary.com/v7b2p5ho/video/upload/v1786611085/brrx9gbgjzsfcwolwcbt.mov

决策二：简化方案后的交互设计

**改动背景：**开发评估后认为多边形投影实现周期过长，边界情况也较多。

**简化方案：**团队重新和客户确认短期场景后发现，一个模型通常只测一个坑或土堆。于是先改为“选定高度生成参考面”的方案，覆盖主要场景，同时保留多边形测量作为后续方向。

关键决策：

• 以模型包围盒的水平面作为参考面，用户只需调整高度；
• 通过 Slider 或输入框修改高度，确认后直接生成体积；
• 第一版不再要求用户理解挖方 / 填方，系统自动判断，并沿用现有测量配色。

原型作用：第二版原型用于验证参考面交互和实时面积反馈。测试过程基本顺利，但暴露出一个明显问题：同一模型存在多个体积时，参考面尺寸相同、仅高度不同，画面会严重重叠。针对这个问题，我们先做了两步处理：

1. 未选中的体积只显示参考面交线和数值，不显示完整体积，减少遮挡；
2. 后续多边形方案上线后，再根据场景引导用户选择合适的测量方式。

https://res.cloudinary.com/v7b2p5ho/video/upload/v1786611083/o2evvis9uyn49pewbthz.mov

决策三：体积与参考面的视觉呈现

需求：体积要与地形清楚区分，能看出体量，并在不平整地形上保持可读，同时兼容现有测量配色。

关键决策：

• 我直接在原型中测试不同视觉方案，最终与产品、测试确定半透明多面体增强。它能保留参考面与地形的空间关系，也能贴合不规则地形；

  体积本身：4种方案的实测

  方案	结果
  A-半透明圆柱体	某些情况下模型可以透出，但体积较大时仍然是实心感，且圆柱边界仍然明显，整体看起来像多根管状体堆叠。
  B-堆积体覆面	可以贴合地形，但更像表面覆盖，体积边界和体量感都偏弱。
  C-半透明多面体	已经接近理想效果，体量感较好，也没有圆柱体的堆积感；但边界偏弱，整体颜色过浅。
  D-半透明多面体增强	✅ 最终方案。在半透明多面体的基础上加强边界和颜色对比，保留体量感的同时提升可读性。

  

• 内测时发现单一颜色难以区分体积顶部和底部。随后在开发 Demo 中继续调试，最终加入渐变：越接近参考面，颜色越亮。

  

4. Outcome

• 上线：2026年6月上线第一版。
• 内部团队反馈：客户成功部、销售与市场团队都给出了正面反馈。销售反馈很多客户对这个功能感兴趣。
• 市场侧的实际作用：在建筑科技相关展会上，市场部用体积测量功能获得了更多建筑、公共服务领域的客户信息。
• 使用信号：上线后，平台里土坑、土堆类扫描模型明显增加，说明功能开始进入真实使用场景。

5. Reflection

1. 关于产品：简化方案取消了挖方 / 填方 / 体积差值的行业惯例，我最初对此有疑问。但上线后的客户反馈说明，对 Scanat 这类面向更广泛用户的产品，降低理解门槛有时比完整复刻专业工具更重要。
2. 关于原型：3D 交互和视觉效果很难靠静态稿判断。可运行原型让我能更早验证手感、边界情况和渲染效果，也减少了设计稿与最终实现之间的偏差。