Snapshot

2. 重新设计文件管理与3D工作区，并确定Light / Dark场景化视觉策略；
3. 后续持续在同一框架上扩展测量、模型操作和协作功能。 | | 当前状态 | 已上线并持续沿用，后续Web功能均基于这套基础结构扩展 |

TL;DR

Scanat 最初以 iPhone / iPad 为主要产品形态。随着客户需求增加，公司开始建设 Web 端，让用户可以在桌面环境中继续管理扫描文件、查看模型，并承载后续更复杂的测量和模型操作。

项目初期的 Web 线框基本沿用了 iPad 的布局。我重新根据桌面端的输入方式、屏幕空间和专业工作场景设计产品框架，最终形成 Tree + 多视图的文件管理、可组合的三区域 3D Model Space，以及 信息页面 Light / 3D 工作区 Dark 的视觉策略。这套结构从公测开始一直沿用，并成为后续 Web 功能扩展的基础。

**我的工作：**负责 Web 端 0→1 的信息架构、主要模块 UI/UX 和视觉方向，并在上线后持续基于同一框架设计新的专业功能。

1. Problem

从 iPad 迁移到桌面端

项目开始时，第一版 Web Wireframe 基本直接沿用了 iPad 的布局。但桌面端的使用环境已经发生变化：屏幕更宽，以鼠标和键盘为主，也更适合同时展示文件层级、模型和属性信息。

如果继续放大 iPad 页面，会出现横向空间利用不足、文件浏览效率偏低，以及 3D 操作过程中上下文频繁切换的问题。

三个核心设计问题

1. **文件管理：**如何在桌面端同时处理更多文件、层级和元信息，而不是继续使用以 Card 为主的平板结构；
2. **3D 工作区：**如何让模型导航、3D Canvas 和当前对象信息持续可见，同时把主要空间留给模型；
3. **视觉主题：**文件管理和 3D 操作的内容特征不同，是否需要强行使用同一种 Light / Dark Theme。

前期调研

核心框架需要在约 3 周内确定。考虑到团队规模和项目阶段，我没有等待完整的正式研究，而是先基于已有客户场景、现有 iPad 产品问题和专业桌面工具建立框架假设；上线后再通过持续功能扩展验证这套结构是否成立。

界面布局方面，主要查看了 Figma、Spline、AutoCAD Web、Blender、Pix4D 等桌面专业工具，重点研究它们如何利用宽屏空间组织导航、Canvas、工具和属性。

2. Approach

核心设计约 3 周，主要分为四个阶段：

1. 对比 iPad 与 Desktop Web 的输入方式、屏幕空间、信息密度和主要使用场景；
2. 研究桌面专业工具的工作区结构，确定高信息密度、上下文持续可见和突出 3D Canvas 三个原则；
3. 分别重做 File Management 和 3D Model Space，并比较全 Light、全 Dark 和场景化主题三种视觉方向；
4. 与产品经理、产品总监和 CTO Review 后确定方案，2024 年 5 月公测，并继续在真实使用中扩展功能。

3. Design Decisions

决策一：文件管理从 Card Grid 改为 Tree + 多视图

相比 iPad 上以 Card 为主的浏览方式，Web 用户需要更快地扫描较多文件，并同时查看层级和文件信息。

最终方案使用：

• 左侧 Tree Navigation 管理文件夹层级；
• 主区域支持 Table / List / Map 三种视图；
• 根据视图展示不同的文件信息和空间位置。

这个调整没有改变原有文件逻辑，只重新设计了桌面端的信息呈现方式。后续团队协作等功能也继续扩展在这套结构上。

决策二：3D Model Space 使用可组合的三区域结构

3D Model Space 的不同功能都围绕中央 3D Canvas 展开，但需要同时展示的辅助信息并不相同。常规场景会在画布左右同时显示面板，而全景漫游、轮廓图等功能只需要单侧面板；同一个位置也可能根据功能承担列表、导览、详情或参数设置。

因此我没有把左右区域固定定义为“列表”和“详情”，而是建立了一套可组合的三区域结构：

• 中央主区域：3D Canvas + Toolbar
• 左 / 右辅助区域：根据功能承载列表、导览、详情或参数
• 左右可以同时出现，也可以只出现一侧

常规功能通常使用左右双面板 + 中央画布；单侧面板功能则把必要信息集中到一侧。这样不同功能可以复用同一套 Web Shell，同时根据任务调整具体内容，而不需要重新设计一级布局。

决策三：Light / Dark 按任务场景拆分

视觉阶段比较了全 Light、全 Dark 和 Split Theme 三个方向。

文件管理以列表、文字和元信息为主，Light Theme 的阅读效率更高；Model Space 以 3D 模型为核心，Dark Theme 能降低周边界面对模型的干扰。最终没有要求整个产品统一为一种主题，而是根据任务场景分别处理。

4. Outcome

**上线与沿用：**2024年5月公测，2025年6月正式版上线。File Management 和 Model Space 的一级结构上线后一直沿用，没有发生重构。

**客户与销售反馈：**公测后整体反馈积极。当时 Web 版需要额外付费，仍有客户专门购买相应版本；销售反馈有部分客户甚至希望在移动端也能完全复刻web端的布局和使用体验。因此，自Web公测上线以来一直到现在，Web版都是销售团队推广时最重要的产品卖点之一，

**平台分工：**在部分大型客户中，移动端更多用于现场调查和扫描，Web 更多承担后续设计、分析和方案规划，与桌面端最初的产品判断基本一致。

**支撑后续扩展：**立方体、体积测量、全景漫游、楼层设置、轮廓图和家具布置等功能陆续建立在同一套 Web Shell 上。随着产品发展，除必须依赖 App 的能力外，越来越多复杂功能开始优先在 Web 设计或内测。

5. Reflection

1. 跨平台不是直接迁移界面。 功能逻辑可以复用，但输入方式、屏幕比例和工作场景变化后，需要重新判断信息如何组织和同时出现。
2. 桌面宽屏的价值是保留上下文。 对专业工具来说，比单纯增加信息密度更重要的是让文件层级、3D Canvas 和对象详情保持并行关系。