← CASE STUDIES
CASE STUDY · DESIGNER'S RETROSPECTIVE
Scanat 体积测量 - 从交互方案到可视化效果的设计过程
从被砍掉的多边形投影方案,到最终上线的参考面工具——测试五种可视化方案的完整过程。
3d-designresearch3d-visualizationcollaborationprototypingai-workflow
Scanat 体积测量 - 从交互方案到可视化效果的设计过程
ROLE
UI/UX设计 · 竞品调研 · 可运行原型 · 跨职能协作
PROJECT TYPE
功能拓展
PLATFORM
Web App · Mobile App · iPad App
USERS
做土方工程规划的建筑/土木工程专业人员
TEAM
5人:设计 ×1、PM ×2、Web开发 ×1、App开发 ×1
TIMELINE
2026.01 – 2026.06
STATUS
2026年6月上线(第一版)
MY CONTRIBUTION
  1. 设计两套交互方案,并制作可运行原型验证。
  2. 探索并确定体积可视化方案。
↔ THIS CASE STUDY IS ABOUT
Scanat
面向建筑与室内设计的3D扫描与测量平台。
VIEW PRODUCT →
[ TL;DR ]

建筑施工中经常需要计算土方体积,例如填平坑洞或清理土堆。传统方式要么依赖人工估算,要么使用专业软件测量。

这次需求来自一家建筑公司客户,希望直接在 Scanat 扫描模型中计算体积。团队评估后决定将其做成正式功能。

CORE HIGHLIGHTS
  1. 交互方案调整:初版采用多边形绘制 + 投影计算,并做了完整设计和可运行 Demo。由于实现成本和工期问题,团队结合客户的短期使用场景,先改为参考面方案上线,多边形方案保留为后续方向。
  2. 体积视觉探索:在真实 3D 环境中测试了 5 种方案,最终选择半透明多面体增强。内测后继续优化顶部与底部的区分,加入渐变效果。
[ 02 · PROBLEM ]
核心问题
  • 专业概念:此前项目更多集中在室内场景,我对土方计算、基准面和行业视觉惯例都不熟悉;
  • 交互方式:最初并不清楚专业体积测量的实际流程,直觉上更接近 3D 软件里的模型操作;
  • 视觉表现:体积如何在真实地形上既可读又有体量感,也没有现成答案。
调研

因此设计前先调研了几款专业工具,主要确认三类问题:

  1. 挖方、填方和体积差值的概念与视觉惯例;
  2. 绘制面、基准面的区别和计算方式;
  3. 不同体积计算与交互方式。
[ 03 · APPROACH ]

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

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

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

关键决策

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

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

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

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

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

关键决策:

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

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

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

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

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

体积本身:五种方案的实测

方案结果
实心圆柱体色块过重,会遮挡模型,也缺少层次感。
半透明圆柱体模型可以透出,但圆柱边界仍然明显,整体看起来像多根管状体堆叠。
堆积体覆面可以贴合地形,但更像表面覆盖,体积边界和体量感都偏弱。
半透明多面体已经接近理想效果,体量感较好,也没有圆柱体的堆积感;但边界偏弱,整体颜色过浅。
半透明多面体增强最终方案。在半透明多面体的基础上加强边界和颜色对比,保留体量感的同时提升可读性。

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

[ 05 · WALKTHROUGH ]
01绘制参考面用户在地形模型上放置顶点,实时查看面积和平面预览。
02参考面边界顶点连接后形成用于计算体积的参考面。
03体积可视化使用带渐变的半透明多面体,保持体积与地形关系清晰。
04复杂地形在不平整地形上,体积与地形的关系仍然清晰。
[ 06 · OUTCOME ]

上线:2026年6月上线第一版。

内部团队反馈:客户成功部、销售与市场团队都给出了正面反馈。销售反馈很多客户对这个功能感兴趣。

市场侧的实际作用:在建筑科技相关展会上,市场部用体积测量功能获得了更多建筑、公共服务领域的客户信息。

使用信号:上线后,平台里土坑、土堆类扫描模型明显增加,说明功能开始进入真实使用场景。

数据说明:目前只有定性反馈,没有可引用的使用率、留存或转化数据。

[ 07 · REFLECTION ]
  1. 关于产品:简化方案取消了挖方 / 填方 / 体积差值的行业惯例,我最初对此有疑问。但上线后的客户反馈说明,对 Scanat 这类面向更广泛用户的产品,降低理解门槛有时比完整复刻专业工具更重要。
  2. 关于原型:3D 交互和视觉效果很难靠静态稿判断。可运行原型让我能更早验证手感、边界情况和渲染效果,也减少了设计稿与最终实现之间的偏差。
↔ THE PRODUCT
Scanat
面向建筑与室内设计的3D扫描与测量平台。
VIEW PRODUCT →
OTHER CASE STUDIES
012026.01
Why review feedback keeps dying in group chatsA recurring annoyance became a data model, then a shipped plugin — the full trail from problem discovery to the decision that shaped it.READ CASE STUDY →
022025.01
The handoff doc nobody reads — so I made it executableDesigning a CLI as a design deliverable: what changes when the spec is something engineers run instead of skim.READ CASE STUDY →