# 施工管理SaaS界面设计：模型里的位置感

原网页：https://www.jvds.cn/share/ui-design/tectra-model-progress-u010
语言：zh-CN
发布：2026-10-10
作者：界达设计工作室（JVDS）

Tectra这套施工管理SaaS界面设计，把建筑剖面当成了工作台的中心。蓝色模型里有圆点和进度浮层，白色区域再接截面与指标卡。先找位置，再看数值，是这组画面最清楚的设计方向。

## 蓝色模型让数据有一个可以指认的位置

建筑被打开成剖面，房间、人物与树木仍有轮廓。几个圆点分布在模型内部，其中一个附近显示带名称、日期和比例的浮层。工程数据因此不是孤立地挂在角落，而是与某处空间一起出现。

总体完成卡放在模型右侧，局部卡与总览保持区别。顶部Dashboard、Progress、Timeline和Work areas各占一个位置，当前项有浅灰底。空间、统计和工作视图的层级，单从布局就能分辨。

界达设计喜欢这里的蓝黄关系。大面积蓝色把模型连成一个整体，黄色只出现在标记、变化箭头和局部图线中。小面积强调色可以提醒当前重点，又不把每个房间都涂成需要处理的警报。

模型左下还有一排头像，与空间内容并置，给工作台增加了人员线索。它们没有占用进度卡标题的位置，视觉上与施工对象保持区别。若头像代表参与者，可在正式交互中用名称和角色补充说明；这里不把图示头像推断为真实协作权限。

整体完成卡的曲线与下方小弧线不同：曲线强调连续变化，弧线强调当前比例。相同配色并没有抹掉图形用途的差异。评审工程仪表盘时，可以先问每张图是在显示趋势、范围还是当前状态，再决定它们是否需要相同视觉面积。

![Tectra建筑剖面、模型圆点及右侧总体完成图](https://www.jvds.cn/upload/2026/1008/d187-tp/u010-i1.webp)

桌面主视图上部｜模型标记与进度浮层同处空间，顶部区分工作视图。

## 转到白色区域，阅读方式也改变了

模型下面的Details、Notes和Material卡采用相近的大数字与弧线。蓝色场景有较多轮廓，白底卡片则让数值有一个安静的阅读区域。这种切换对信息密集的软件很实用，模型无需同时承受所有说明文字。

统一卡片也让含义说明变得更重要。Notes旁边出现比例时，读者还需要知道它表示记录完成程度还是其他统计。以界达设计的经验来说，[指标名称和计算范围](https://www.jvds.cn/share/ui-design/dashboard-metric-selection)应靠近数值，不能只因弧线样式一致，就默认这些比例可以互相比。

每张卡右上角的小箭头提供了明细方向。若继续做交互原型，可以从一次实际点选检查对象名称是否延续到详情，并显示更新日期。这里能看见的是入口，无法确认它打开什么内容。

## 截面的小单位，是解释图形的重要文字

2D Cross Section Z的标题带有ft，下面的密集竖线中有一段黄色，底部又显示另一条蓝色范围线。颜色在这里提示区间，文字则告诉读者正在量什么。两者放在同一模块，视觉上有对照关系。

Cut and Fill局部把黄色端点放在上方，蓝色端点放在下方，数值紧贴各自线段。比只列一排数字更直观，视线可以直接比较上下位置。空白也留下了，短线和细字没有挤成一团。

这些图示适合用来观察测量数据的表达，不能据此判断数值的工程准确性。实际页面仍应清楚给出端点名称、参考基准和期间；浅灰单位文字较细，尤其需要在正常显示尺寸下检查是否能读清。

![Tectra桌面截面区域与蓝黄色Cut and Fill端点局部](https://www.jvds.cn/upload/2026/1008/d187-tp/u010-i2.webp)

截面模块及右侧放大处｜ft标注依附端点，进度比例还需独立说明口径。

## 手机页把空间总览与指标列表分开

手机画面没有把整块桌面压成一张小图。上方展示模型和浮层，另一个屏幕把Details、Notes并列，Material铺满一行，截面继续向下。这种[重排](https://www.jvds.cn/share/ui-design/responsive-ui-design-method)保留了原来的内容关系，也给文字留下空间。

底部图标导航中当前项用黄色底块标出，与模型里的重点色一致。它既延续风格，也提示所在位置。图标含义若不够直观，可以在正式产品里加入短标签，并检查切换后是否保持已选工作区域。

施工软件常需要在不同设备上讨论同一个对象。借鉴这组界面时，值得优先保留项目与位置的名称，再决定卡片一次显示几张。模型的视觉吸引力由此有了实际用途：方便把一句“这一处”落实到可查的数据。

![Tectra手机模型概览和纵向Details、Notes、Material卡片](https://www.jvds.cn/upload/2026/1008/d187-tp/u010-i3.webp)

移动视图上下两层｜空间概览与指标卡分开，当前对象应跨层延续。

## 让业务数据和工作对象一起被看懂

工程、设施或现场管理软件若需要同时展示模型、图表和记录，可以先明确各视图共享的对象信息。界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可围绕业务流程规划桌面和移动界面。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)