汽车制造工艺可视化系统
客户
中国一汽
时间
2023年
项目职责
视觉设计
UI/UX设计
动效设计
项目介绍

汽车数据可视化是将车间数据以直观、易于理解的图表和图形的方式呈现出来,帮助车间管理者更好地了解车间生产情况和状况,及时做出决策,提高生产效率和质量。

本项目原专为中国一汽定制开发。考虑到核心业务数据的保密性与敏感性,完整保留了原版项目的视觉风格,对涉密数据等内容进行替换调整,最终形成为演示用 Demo 版本。

用户研究

在项目前期,我们围绕汽车工厂的生产场景进行了用户研究。将用户划分为两个主要群体,共募集了10名访谈对象,通过在线会议的形式进行访谈。我们的目的是了解不同岗位在生产监控、设备管理和数据决策中的多方面需求。

第一类是工厂管理层。他们关注的是整体生产效率、产量完成率、车间运行状态等。他们通常不会深入每台设备的细节,而是希望快速了解工厂当前信息。

第二类是车间人员。他们需要实时掌握各车间产线状态,包括当前生产车型、生产节拍、已完成数量、良品率、设备运行情况以及是否存在待处理故障。他们更关注信息的实时性和可操作性,希望系统能够帮助他们快速定位问题,并判断是否需要调整人员、设备或生产计划。

研究结果

结合访谈结果和甲方提供的文档来看。用户的核心需求可以归纳为以下几个方面。

首先,用户需要一个全局化的生产总览。汽车工厂由多个车间组成,各车间之间存在上下游关系。因此用户需要通过一个统一入口查看冲压、焊接、涂装、总装等车间的运行情况。

其次,用户需要实时关注异常。在生产现场,设备故障、产线停滞、环境异常或能耗异常都会影响交付节奏。系统需要将异常信息以高优先级方式呈现,例如页面顶部的红色故障提示、设备状态色彩标识、异常设备列表等,帮助用户第一时间发现问题。

第三,用户需要从宏观到微观的交互体验。管理层关注整体,一线人员关注产线。系统需要支持从车间总览进入具体车间,再从车间进入设备弹窗详情,满足不同角色的需求。

第四,用户需要数据与空间位置结合。汽车工厂中的设备、机器人、输送线、工位和库存区域都具有明确空间关系。相比单纯的数据看板,三维车间视图更能帮助用户理解问题发生的位置,例如故障设备位于哪条线、是否影响当前生产流向。

第五,用户需要可读性强、低学习成本的界面。制造现场用户面对的信息密度较高,系统需要通过清晰的信息层级、明确的状态颜色、统一的组件样式和直观数据图表降低理解成本。

设计挑战

该系统面临的主要难点在于如何在复杂的生产场景中建立清晰的数据呈现。

第一,数据来源复杂,指标类型多样。系统需要整合产量、节拍、良品率、设备状态、能耗、环境温湿度、库存等多类数据。这些数据来自不同系统和设备,更新频率、数据类型都不相同。如果直接堆叠展示,会造成界面信息过载。

第二,车间场景多样。冲压、焊接、涂装、总装车间的生产流程差异很大。例如冲压车间包含模具、设备运行和环境监控。焊接车间侧重机器人、焊接线、产量等等。设计时需要注意统一视觉风格的前提下保留各车间的业务差异。

第三,异常响应要求高。工厂生产线具有连续性,一个设备故障可能影响整条产线。如果异常信息不够突出,用户可能错过关键处理时间。因此系统需要在视觉层面建立明确的预警机制,使异常状态能够被快速识别。

第四,三维场景与数据面板之间需要平衡。三维车间虽然更直观,但也容易占用大量视觉空间。数据面板能够提供精确指标,但过多面板又会削弱场景感。因此本项目需要在沉浸式展示和高效阅读之间找到平衡。

设计方案

系统采用由宏观到微观的信息架构。这种层级关系的优势是管理人员可以停留在总览层快速判断状态,生产人员可以进入车间层查看产线表现。

第一层是车间总览场景。页面左侧为垂直的导航按钮,分别对应冲压车间、焊接车间、涂装车间、总装车间等车辆生成流程的核心车间。当前所在车间会以高亮状态显示,帮助用户明确当前视图位置。

第二层是车间生产监控层。不同车间页面使用2.5D视角呈现车间布局,包括生产线、输送线、工位、库存区等区域。当用户点击具体区域时,镜头会拉近至具体生成区域。右侧固定为数据面板区,展示当前车间最关键的运行指标。例如冲压车间页面呈现环境监控、产线生产数据和设备运行状态。

第三层是设备详情层。当用户点击设备后,系统通过居中的弹窗展示设备列表、设备状态、生产信息、故障记录、实时电量和角度参数。弹窗背景对原车间界面进行暗化处理,使用户注意力聚焦在当前设备。

系统围绕工厂生产管理中的关键指标进行数据组织,重点呈现生产进度、设备状态、质量表现、能耗消耗和异常信息。在信息选择上,优先保留能够帮助用户判断的核心数据,避免在主界面堆叠过多细节。

图表设计方面,产量、完成率、良品率等指标主要使用数字卡片、进度条和百分比呈现,便于用户快速判断当前生产状态。能耗和用电趋势使用折线图、柱状图和仪表盘展示,帮助用户识别波动和异常峰值。设备运行状态则通过状态标签、颜色和列表卡片,使不同的状态能够被快速区分。

下个项目