讲师：夜航（易知微设计总监）&元宝（易知微设计专家）
本文的核心主题是梳理数字孪生可视化项目的通用流程。我们会从整体入手，讲解完整流程中各个环节的基本做法，帮助大家建立一个全局认知。在此基础上，后续的第二、第三、第四小节，会从整个流程中提炼出一些在实际项目中容易出错、容易被忽视、或经常让人感到困惑的关键问题，进行重点讲解和拆解，帮助大家更有针对性地提升项目实操能力。
为了解决这些真实难题，易知微「数字孪生实战训练营」首次完整公开一线交付团队的方法论与实战路径，带你系统拆解一个数字孪生项目从0到1的全过程。训练营所有课程均已完结，如需了解更多可滑到文末扫进入专属群聊~
1. 孪生/可视化项目设计的通用流程
在后续课程中，我们将分别讲解 Web 和游戏引擎两条主要技术路线。因此，在进入具体技术细节之前，有必要先让大家对两种路线中共通的流程有一个整体认知，理解其底层的一致路径。
为此，夜航老师整理了一张相对完整的流程方法图。和上一节课程类似，依然通过“一图讲清”的方式，帮助大家快速把握数字孪生或可视化项目中的通用流程框架。
从图中可以看到，整体结构以阶段划分为主线，同时结合协同角色以及各环节的关键任务进行分类梳理。整个流程大致分为六个核心环节：需求调研、设计执行、设计评审、页面开发、交互设计配置，以及最后的数据联调。
1.1. 需求调研环节
在这一环节中，首先协同的角色是项目经理。项目经理不仅负责直接承接项目需求，也通常会参与部分原型的绘制工作。该阶段包含多个关键任务：
1.1.1. 设计稿分辨率确定
这是很多新手在项目初期容易遇到的问题。由于现场大屏的尺寸会受到多种因素影响，而大屏不同于B端后台系统，其适配方案相对有限，因此通常需要采用固定分辨率进行设计。分辨率的确定主要依赖以下三点：
- 屏幕物理尺寸：需确认物理尺寸的长宽比例是否与提供的分辨率一致。如大屏为10米×5米（2:1），而分辨率为1920×1080（16:9），两者比例不一致，就需要根据物理尺寸进行换算，以避免画面拉伸。
- 直接查看屏幕分辨率：在拼控设置正常的情况下，可通过右键查看屏幕分辨率，这通常是最准确的参考。
- 主机硬件支持能力：可视化或孪生项目对硬件要求较高，尤其是CPU、内存和显卡。如果硬件性能不足，即使屏幕支持8K，设计稿也可能只能按4K标准制作。
1.1.2. 风格参考
在调研阶段，需要明确客户偏好的配色风格、UI风格以及整体场景风格。通常从这三个维度提供参考，以便前期快速完成风格对齐。
1.1.3. 输出时间点
需明确几个关键节点：首先是风格确认（通常先出1–2张稿件）；其次是完整设计稿的产出时间；然后是开发阶段（无论是前端开发还是平台搭建）的交付时间；最后是系统测试与上线时间，即项目收尾节点。
1.1.4. 输出优先级
项目初期，部分需求可能尚未明确。对于已确定内容应优先推进，而存在变动风险的部分可适当延后安排。
1.1.5. 原型内容
主要包括整体交互逻辑、数据层级关系、数据样例，以及数据上下限和极值等信息。
1.2. 设计执行环节
该阶段由设计师主导，主要围绕配色、字体字号、图表选型和主视觉设计四个方面展开：
1.2.1. 配色
需结合客户行业属性，确认是否存在品牌色、语义色及禁忌色。例如工业领域中，红色和橙色通常代表告警，不适合作为主色使用。
1.2.2. 字体字号
字体大小与前期确定的分辨率和屏幕物理尺寸密切相关，同时还需考虑观看距离（视距），以确保信息清晰可读。
1.2.3. 图表选型
需根据数据类型和表达目的选择合适图表。相关方法可参考已有图表设计经验或专题分享。
1.2.4. 主视觉设计
包括地图、GIS数据展示、建筑建模等常见内容，同时还涉及将抽象的业务流程或组织架构转化为更直观的视觉表达。
1.3. 设计评审环节
该环节包括设计师自检、团队内部评审以及客户评审三个层次：
- 设计师自检：基于设计基础原则（配色、排版、图标规范、对齐等）进行检查，同时重点排查错别字等低级错误。
- 内部评审：由团队负责人（TL）及项目经理参与，重点评估交互流程是否顺畅、视觉层级是否清晰，以及业务表达是否准确。
- 客户评审：需准备完整的设计说明，结合行业背景和品牌特性进行讲解。同时要引导客户给出具体、有效的反馈，并对模糊意见进行进一步拆解和确认。
1.4. 页面开发及搭建环节
该阶段需要与前端协同推进，以平台搭建（如EasyV）为例，重点包括：
1.4.1. 切图规范
需从后期维护角度出发，按模块和元素分层切图，避免将所有元素合并为单一图片，影响后续修改效率。
1.4.2. 素材格式
- 静态素材：不透明图片建议使用JPG，透明背景使用PNG。
- 动态素材：不建议使用GIF（体积较大），常用格式包括APNG，以及视频格式WebM和MP4（其中WebM支持透明通道，适合平台使用）。
1.4.3. 素材压缩
需控制素材体积，避免影响加载性能。可借助相关工具对静态或动态文件进行压缩优化。
1.5. 交互设计配置环节
该环节与页面搭建紧密关联，主要包括：
- 明确交互目的：区分展示型系统与操作型系统，并结合用户习惯设计交互，避免违背常规使用逻辑。
- 检查交互闭环：确保所有操作路径完整，例如页面可正常返回、弹窗可关闭等。
- 图表交互检查：重点检查交互模式下的细节，如下拉菜单、时间筛选、提示框等是否配置完整。
- 图层遮挡关系：避免交互组件被装饰层遮挡，如有必要需开启“事件穿透”以保证可操作性。
- 三维场景交互：检查是否有元素影响三维场景的点击或视角操作，并进行相应处理。
1.6. 数据联调环节
该阶段通常在设计、开发及交互配置完成后进行。在数据接入完成的前提下，设计师需要重点检查实际数据对页面样式的影响。例如，设计稿中的短数据在真实环境中可能变为长数据，从而导致换行、遮挡等问题，因此需针对这些情况进行适配和优化。
2. 设计前要做的三大现场测试
作为设计师，不应只停留在设计执行阶段，而是要对最终落地效果负责。因此，从前期调研到后期配合开发还原的整个过程，都需要主动参与，把控最终呈现给客户的效果。
在数字孪生或可视化项目中，大家在页面开发与搭建阶段，往往对3D相关内容（如3D地图、设备模型的交付方式）存在疑问。这部分会在后续课程中，分别从Web和游戏引擎两条技术路线展开详细讲解。在熟悉整体流程之后，这里重点提炼出三个最容易被忽略、出错或产生困惑的关键测试点。
2.1. “大屏”设计前要做的现场测试（易漏）
2.1.1. 比例与清晰度
前面已经讲到分辨率的确认，其核心目的是保证画面不变形且尽可能清晰。在实际项目中，常见问题是投屏后画面被拉伸，例如圆形变成椭圆。
更稳妥的做法是：在大屏具备条件时，尽早制作一版设计稿（哪怕是简版），实际投屏测试效果。这一步虽然简单，但非常关键，可以提前规避比例失真和清晰度问题，是最可靠的验证方式。
2.1.2. 字体与字号
字体和字号必须通过实际投屏来验证。可以有两种方式：
- 准备不同字号（如12号、24号等）的字体样例进行测试；
- 或直接使用已有设计稿进行整体投屏查看。
需要特别注意的是，不同字体在相同字号下的视觉大小可能存在差异。例如某些字腔较小的字体，在大屏上会显得模糊不清。因此，一旦使用特殊字体，务必进行实测，并建议与标准字体（如思源黑体）进行对比。
很多设计师习惯在整体设计完成后再进行投屏测试，但字体字号实际上会直接影响信息密度和排版结构。如果后期才发现字号不合适（例如观看距离远、用户年龄偏大），很可能导致整体布局推翻重做，返工成本较高。
此外，项目中也常遇到客户希望“一屏展示所有内容”的情况。虽然可以通过轮播或切换等方式折中解决，但更理想的方式是在前期就引导客户明确信息层级，避免后期反复调整字号和排版。
2.1.3. 色彩显示
色彩测试同样建议通过实际投屏完成。常见做法是将色卡或渐变色带投放到大屏上进行观察，从而判断屏幕的显示效果。
在实际项目中，尤其是拼接屏，可能会出现不同屏块之间色差明显的问题。这类问题往往需要通过更换或调整硬件来解决。
更专业的测试需要关注：色相、亮度、饱和度和对比度等参数。当前在一些平台（如EasyV）中，也提供了大屏字体与色彩测试模板，可以直接套用并调整为目标分辨率进行验证。
2.2. 大屏硬件未到位时的替代测试方案
在实际项目中，大屏往往尚未安装完成，但设计工作已经启动，此时可以采用以下方式进行预验证：
2.2.1. 比例与清晰度
通过CAD图纸确认屏幕尺寸（长宽比例、是否有折角等），至少保证画面不会变形。至于分辨率上限，可向硬件厂商咨询，但仍需在设备到位后进行最终验证。
2.2.2. 字体与字号
可通过打印或喷绘方式进行模拟测试。将设计稿按大屏实际比例放大输出，悬挂在预定位置，从真实观看距离进行观察。这种方式虽然不如投屏精确，但可以有效判断字号是否合适，降低后期修改风险。
2.2.3. 色彩显示
当前大屏技术已较为成熟，整体色差问题较过去明显减少。常见偏差主要体现在高饱和度或高对比度场景（如“特别黑”或“特别亮”）。因此，在设计中可以适当大胆使用色彩，后期也可以通过参数调整进行优化。
总体来看，如果在设计前能够把比例与清晰度、字体与字号、色彩显示这三个关键点提前验证到位，可以显著降低后期返工风险，也能让整个项目推进更加顺畅。
3. 如何确认项目设计风格
3.1. 设计风格可以拆解的维度
在实际项目中，“设计风格”并不是一个抽象概念，而是可以从多个具体维度进行拆解和理解，主要包括以下三个方面：
3.1.1. 色彩
色彩通常是用户最直观、最先感知到的部分，例如整体偏好什么色调、采用怎样的配色体系等。通过一整套可视化组件（如图表、按钮、装饰元素等）的组合，可以更清晰地看到不同页面在配色及细节上的统一方式。
3.1.2. UI风格
在大屏设计中，图文编排及装饰性表达通常归属于UI风格范畴。常见类型包括：
- 轻量点线面风格：整体更简洁、轻盈；
- 硬朗机甲风格：结构更厚重、块面感更强，也是较为常见的一类；
- 文化底蕴风格：多用于博物馆、文化景区等场景，常结合古风元素、曲线造型及偏古典的配色体系。
3.1.3. 场景风格（偏3D表现）
该维度更多体现在材质、光影及空间表达上：
- 简约几何/全息风格：偏虚拟、非写实，模型轻量，加载效率高，适合Web端；
- 真实感写实风格：强调环境还原（如天空、植被等），制作成本和复杂度更高；
- 定制风格化：在既有模型基础上，通过材质和光照进行风格重塑，例如强化金属感、科技感等，以满足客户个性化需求。
3.2. 如何与客户沟通确认设计风格
3.2.1. 重视前期调研与沟通方式
风格确认不能停留在“喜欢什么颜色”这种浅层问题上，更有效的方式是提供成体系的参考方案进行讲解。同时，需要将参考内容拆解为多个维度（色彩、UI、场景等）进行说明，而不是简单丢给客户一张参考图。否则，双方对“参考点”的理解容易产生偏差，影响最终交付效果。
3.2.2. 在不确定或沟通困难时的策略
如果项目时间紧或客户反馈不明确，可以优先选取关键页面，用已有素材快速拼出一个接近目标效果的示意版本。通过更直观的方式帮助客户理解，从而尽快达成共识。
3.2.3. 设计表现需要有“说法”
在向客户确认设计方案时，一个核心原则是：所有设计表现都需要有合理的解释依据。无论是颜色选择、材质表现，还是整体风格倾向，都应基于前期调研结果，而非事后“补理由”。
案例1：品牌色延展
例如企业品牌色为红色，但在大屏设计中，通常不会大面积使用纯红，而是以更具科技感的蓝色作为主色，再辅以品牌红进行点缀。这种方案既兼顾视觉接受度，也能形成合理的设计解释。
案例2：行业属性提炼
如港口、水利等行业，可通过曲线、水波等元素进行视觉表达，在标题装饰或界面细节中强化行业特征，使设计更具关联性。
案例3：企业理念表达
对于“高效”“亲和”等抽象理念，可通过造型和色彩进行转译。例如：
- 偏效率感 → 更锐利、偏硬朗的造型（如尖角）；
- 偏亲和感 → 更柔和的表达（如圆角）。
即使是一个细微的圆角处理，也应有其设计依据，而不是随意添加。
需要注意的是，设计理念不应在项目结束后才临时构建，否则往往只是“为解释而解释”，无法真正指导设计本身。更合理的方式是在前期就基于调研结果明确设计方向，将理念自然融入到设计过程中，最终再进行系统梳理，用于方案提案与沟通。
在实际工作中，设计师通常也会建立自己的“灵感库”或案例板，将收集到的参考素材进行整合，从中提炼可复用的设计语言，再转化为具体项目中的视觉表达。
💡关于如何更系统地向客户确认设计风格，以及提案中的表达技巧，会在第五节设计课中进一步展开。
4. 如何让设计&交付快人一步
在实际项目中，提效的核心不只是“做得快”，而是通过方法减少重复劳动和返工成本。这里可以从两个方向入手：资产复用与设计容错（防御性设计） 。
4.1. 资产复用：从“每次从0开始”到“可持续积累”
很多项目效率低的根本原因，是缺乏资产沉淀，导致每次都从头开始。无论是否使用平台工具，都建议建立统一的素材与代码资产库，至少解决“0到0.5”的启动效率问题。
4.1.1. 图表资产
图表是最高频使用的组件。即使是同一种图表（如柱状图），也建议沉淀多种样式版本。因为实际项目中，客户往往会要求“同一屏不要出现相同样式的图表”。
复用方式也很简单：在已有结构基础上，通过调整配色、字体等即可快速生成新样式，大幅提升设计效率。
4.1.2. 图形资产
可视化系统相比传统UI，更依赖装饰性元素，例如表头样式、边框、小标题装饰、地图标记点等。
这些高频素材（如光效、装饰线条等）不应重复制作，而应统一沉淀为标准素材（如PNG），随用随取，减少重复劳动。
4.1.3. 3D资产
在数字孪生项目中，常用模型（如摄像头、车辆等）没有必要重复建模，应形成标准模型库。同时，贴图、HDR环境贴图等也属于高价值资产。
尤其是可平铺（无缝）的贴图和高质量HDR资源，一旦处理完成，后续可长期复用，能显著降低制作成本。
4.1.4. 团队协作与资产共享
当团队规模达到2人及以上，就需要考虑资产共享机制（如统一文件库或平台）。只有在统一资产基础上开展设计，页面搭建效率才能像“搭积木”一样快速推进，而不是每个人各自重复造轮子。
4.2. 设计容错（防御性设计）：减少“出乎意料”的返工
设计容错本质上是一种预判能力。是否具备这种能力，直接影响客户对专业度的判断。
不做容错的后果：
- 频繁被打回修改，牵一发动全身
- 最终交付效果不如设计稿
- 客户对专业能力产生质疑
4.2.1. 如何做好设计容错？
（1）设计前的数据调研
需要重点确认：
- 是否能提供真实数据
- 数据/文本长度范围
- 单位、最大值与最小值
- 分类数量
- 是否存在空数据
如果缺乏这些信息就直接设计，很容易出现“理想化设计”，最终导致崩坏。
应对策略：
- 预留空间（留白、间距）应对数据变化
- 在设计稿中尽量模拟真实数据
- 设置容错机制（如分类过多时自动滚动、文本超长自动省略或滚动）
（2）文本长度处理
需提前定义规则，例如：
- 超出长度是省略号还是换行
- 是否采用滚动（跑马灯）
- 滚动速度如何控制
如果是开发实现，必须与前端提前约定清楚规则，避免后期反复调整。
（3）最大值与最小值适配
例如从三位数变为七位数时，如果没有预留空间，就会出现布局“爆掉”的问题。因此设计时必须预估极端情况。
（4）空数据处理
实际项目中，数据为空的情况非常常见。如果没有设计兜底方案，可能会出现乱码、异常小数等问题，严重影响观感。
4.2.2. 数据调研不足时的应对方式
现实中经常遇到数据拿不到或沟通困难的情况，这时不能“放弃设计”，而要主动降低风险：
- 预留更多空间，避免设计过满
- 参考行业数据进行合理模拟
- 提前设计好通用组件规则（如文本处理、滚动机制等）
- 与开发约定统一调用标准组件，减少不确定性
4.3. 设计师的角色：贯穿全流程的“责任人”
设计师不只是“出图的人”，而是贯穿调研 → 设计 → 开发配合 → 上线校验的关键角色。如果只完成设计稿而不关注落地效果，本质上是对项目不负责任。
真正高效的设计方式是：
- 把项目当作自己的作品
- 主动参与全流程关键节点
- 不断复盘与总结经验
建议将这些经验沉淀为一套SOP流程文档，在每个项目关键节点进行对照检查，而不是每次临时思考。这样不仅能显著减少返工，也能持续提升整体交付效率。
4.4. 设计容错的思考小练习
在理想的设计状态下，我们通常会将数据统一保留一位小数，使整体呈现更加整齐。但在接入真实数据后，会发现小数位数往往不固定，有些数据可能要到较后几位才出现有效数字，前面大量为0。
这时就容易出现客户反馈：“这数据不对啊！”
例如某些数据，如果强行按照规则只保留一位小数，不足部分用0补齐，就会出现“看起来是0，但实际上并不为0”的情况。
客户往往会质疑：“我这个数据不是0啊，多少还是有的，为什么显示成0？”
这背后其实是设计对“整齐美观”的追求，与客户对“数据真实”的需求之间的冲突。
那么，如何在两者之间取得平衡？
在金融、科研等对数据精度要求极高的行业中，这类问题非常常见。这些场景下的数据通常小于1，且包含多位小数。因此在项目前期就要格外注意，数据表达必须保证准确，不能由设计师主观决定将其简化为一位或两位小数，否则会显得不严谨、不专业。
在保证数据准确的前提下，可以通过优化视觉表现来提升美观度。例如，目前看起来不整齐，往往是因为不同数字（如1和0）的字宽存在差异。这时可以选用数字等宽的字体，或开启等宽数字的设置，在统一保留相同小数位（如四位）的情况下，让数据在视觉上保持整齐。这是一种兼顾准确性与美观性的有效方式。
此外，对齐方式也需要根据具体展示载体进行选择。不同场景下，居中对齐、左对齐或右对齐各有适用情况。一般来说，在表格类场景中，数字更适合统一小数位后进行右对齐，这样整体排列会更加规整清晰。
还有一种情况是数据量级非常大，例如几千万甚至上亿，同时又包含个位数的精度。从业务角度来看，用户往往更关注量级本身，而非精确到个位的数值。这时可以与客户沟通，对数据单位进行压缩（如转换为“百万”级别），通过前端或平台配置实现单位调整，从而让数据表达更加清晰易读。
另外一个实际案例是电影票房占比的展示。当某些影片占比极低（小于0.0几）时，可以统一采用“保留一位小数+最小显示0.1”的方式，对于所有小于0.1%的数据，在前面加上“小于”符号，统一表示为“小于0.1%”，而不再展示具体数值。这种方式既保证了展示的简洁性和整齐性，又避免了信息误导。当然，这类规则需要提前与客户沟通确认，在达成一致的前提下再执行。
总体来看，这类问题的关键在于：不牺牲数据准确性，通过设计手段优化呈现，并在必要时通过规则与客户达成共识。
从流程梳理到关键问题拆解，可以看到，数字孪生可视化项目的难点并不只在“技术实现”，更在于前期判断、过程把控以及细节处理的综合能力。 很多返工与问题，本质上都源于前期认知不清或缺乏经验沉淀。只有建立起完整的方法论，并在项目中不断复盘与优化，才能真正实现稳定交付与效率提升。希望这套通用流程与实战经验，能够帮助你在复杂项目中少踩坑、更从容。
目前训练营课程已全部完结，文中提到的完整项目流程图、设计规范模板及实战案例均已整理开放：
加入交流群，即可获取：
《Web孪生实战设计：效率与协作的秘诀》
易知微专注于AI+数字孪生与数据可视化领域，致力于将数据、业务与三维场景深度融合，构建 “数智视融合、虚实人联动” 的数字化应用体系。依托自研数字孪生引擎与低代码可视化平台，具备三维建模渲染、实时数据接入、仿真推演及业务联动等核心能力，已服务智慧城市、能源、水利、交通、园区等多个行业的数千家客户。
如果您有数据可视化、数字孪生或相关数智化项目需求，欢迎联系专业客户顾问，获取专属解决方案与案例演示。
