अभी लॉगिन करें 今天想跟大家聊聊一个实际落地的大屏项目案例——首都国际机场的数据可视化设计。这个项目从需求稿到最终上线，中间经历了不少值得细说的环节，版式、图表、文案、3D效果和开发落地，反复推敲，所以想趁这个机会做一次完整复盘。
刚拿到需求的时候，页面是技术人员用模板直接搭出来的原型图。看到它的第一眼，我并没有立刻想配色或动效，而是先问自己几个问题：这个屏幕到底是干什么的？是纯展示数据，还是背后有监控预警逻辑？搞清楚这些，才能判断它应该偏静态展示，还是需要交互行为。数据可视化的功能定位不一样，设计方向会完全不同。
接着就是分析数据的主次和总分关系，看看当前这些图表到底合不合理，页面本身的大屏比例又该怎么利用。原图里有些信息堆叠得比较密，缺少主次节奏，所以我在不改变核心数据的前提下，重新梳理了布局——把最核心的航班进出港总览和延误取消数据往中间收拢，两侧用更简洁轻量的图表去承接排名和流量信息。重新布局之后，页面有了更明显的视觉重心，也留出了呼吸空间。
最终的设计稿里，中间是一个体积感很强的3D地球，左右两侧的图表都没有加边框，只是用纤细的条形图和环形图单纯呈现数据。道理很简单：当主视觉已经足够“重”的时候，其它元素越克制，整体反而越透气，该突出的信息才不会被装饰抢走。如果每个图表都套上框，整个页面会显得很局促，尤其是在3D地理城市这种主视觉场景下，辅助元素本来就该做减法。
因为是首都机场，用3D地球来承载空间感几乎是本能的选择，飞机绕着地球来回飞行，自然就会形成一道道光线。有了这些线，我把整个页面的主题定在了“线条感”上，其他元素也尽量设计得纤细，比如柱形图用细条，环形图只留薄薄一圈描边。这样页面里你中有我，我中有你，元素的形态彼此呼应，视觉上不会冲突。确定3D地球方案之前，我提前跟开发确认过能不能实现，这一点很重要——设计师脑子里有再好的画面，如果技术上跑不通，后续全是返工。所以但凡涉及不确定的效果，我都会先沟通再动手。
标题设计上我试了两个方向：左边那种比较方正的字体，看起来规矩，但跟机场航班动态的流动感不太搭；右边用斜体加上一点微妙的渐变色，很容易让人联想到飞机起飞时的速度感和倾斜姿态，更符合这个页面的气质。不过斜体加渐变不是万能公式，假如是政府类产品，需要端庄稳重的感觉，那就选正常字形更合适。
另外，我刻意在顶部增加了天气、温度、空气质量和实时时间。飞机在户外飞行，天气和空气质量是绕不开的关注点，尤其北京机场还常受能见度影响。而时间本身就是机场大屏的“实时”注脚，把它和航班数据放在一起，才让“实时数据”这个概念真正成立。
关于图表的优化，第一版里有一个“总航班量”图表，数据是全的，但表现力比较弱，延误和取消航班混在总量里，一眼看不出严重程度。我把它拆成出港和进港两个维度，合并同类项：出港总量下面直接展开“延误出港”“取消出港”，进港同理。这样大数字突出进出港航班总数，小数字紧接着说明延误和取消的量，数据关系一下子清晰了，也方便两个维度之间做对比。颜色上，延误用黄色，人在等待的时候天然对黄色有情绪映射；取消用红色，代表停止和中断，这种色彩语义不需要额外解释，观众扫一眼就能建立认知。
另一个图是“今日前五名延误进港机场”，一开始用的是环形图。环形图更适合展示占比，用来表达排名其实不太直观。但问题是，页面里已经用过条形图和柱形图了，如果这里再放一个条形图，整屏会显得单调，图表类型缺少变化。所以我最后还是保留了环形图，但用旁边的注释把排名从高到低列出来，既兼顾了图表多样性，又让排名信息直观可读。这种取舍就是设计里常要碰到的平衡——视觉形式不能完全让步于功能，也不能只顾好看而丢了传达效率。
文案上的调整，哪怕一个字的顺序，也要认真对待。页面左右两侧各有一个模块，一个管进港，一个管出港，初稿标题分别是“延误进港航班”和“延误出港航班”，不仔细看很容易把“进”“出”看混。我做的就是把关键词前移，改成“进港延误航班”和“出港延误航班”，这样观众能快速识别是哪一块数据。有时候，标题里一个字的顺序，就能决定信息获取的速度。另一个标题是“延误进出港机场-今日前五”，关键词“延误”夹在中间，不够醒目，而且数据格式上居然出现了小数点——航班数量一定是整数，这种细节会直接影响专业感。调整后改为“延误进出港机场 — 今日前五”，把“延误”提到最前面，横杠加空格让结构更透气，数据也全部规整为整数。
3D效果这块，从怎么设计到怎么落地，也有些值得一说的。一开始我设想过用点击切换的方式，让进港和出港的大地球和小缩略图自动轮播。但转念一想，这块大屏在实际使用场景里根本没有交互操作，硬加交互反而会干扰观看逻辑。于是改成定稿方案：把进出港数据同时呈现在一个地球上，用两种不同颜色的光来区分——青色是从北京往外扩散，代表出港方向；蓝色是向北京汇聚，代表进港方向。你再看页面里的其他模块，所有进港数据用的都是蓝色系，出港全是青色系，这样反复出现，观众会自然形成颜色认知，不需要额外说明。
我尽量用直白的方式说一下C4D里的实现过程。先找一张世界地图作为球皮，在PS里把色调调好；然后把这张图放进材质里，用置换和凹凸通道做出表面起伏感。小飞机的动画用的是对齐曲线，旋转关键帧的时候一定要勾选切线，不然飞机会横着飘。国家之间的连线靠一个叫LON—LAT Connection的插件生成，在洲、国家、城市之间设定起终点，插件会自动生成样条曲线，弧度可以调。最后的光粒效果用X-Particles来做，冻结第一个光点作为起点，剩下的粒子依次循环发射，再用头发渲染出光线的质感。
开发落地这边，我们用的是ECharts的3D路径图组件，网站上就有现成的示例。设计师要做的就是直接把调好色的球皮图交给开发，替换掉组件里的默认图片，地球就出来了；光线的颜色值也一并给出，然后让开发去调整数据接口和颜色映射。因为提前沟通过，这一步几乎没有反复。
复盘下来，几点感受：数据可视化大屏的设计，视觉表现和数据呈现的合理性，两条腿都得硬，而且这两条腿的主导权都在设计师手上。看原型图的时候，不要急着画界面，先花时间把数据之间的关系理清楚，谁主谁次，谁和谁该放在一起比较，哪些信息需要被强调——这些想明白了，界面才不会变成花架子。同时，任何不确定的效果，第一时间找开发确认，别等设计稿画完了再说做不了，那种返工对谁都是消耗。现在回头看，这个项目让我更深地体会到，设计大屏，其实是在数据与观看者之间搭一座桥，桥的宽度、坡度、材质，甚至扶手，都是设计师一点点磨出来的。
作者：吴星辰
