技术分享 | 交通数据可视化大屏端展示效果提升策略研究
引言
交通数据是构建交通模型、在线仿真、大数据平台应用的基础，是城市智能化建设的底盘。大屏作为新兴的数据展示渠道，目前还存在展示风格单一、色彩显示误差、产品体验不佳等问题。本文从视觉设计和交互设计的角度对国内交通数据可视化大屏端展示现状、痛点、效果提升策略等方面进行研究，探索以“定制大屏风格、适配展示设备、提高产品体验”为核心的交通数据大屏端展示策略。
01 国内交通数据可视化大屏端展示现状
大屏可以为交通数据提供更大尺度、更深层次、更多内容的可视化展示，近年来在项目汇报，对外宣传等方面的使用频率日趋增加，交管局、指挥中心等部门已将大屏作为交通管理的日常支持设备。但传统的大屏数据展示多沿用PC端展示形式，无法充分展现交通数据的深度和规律。如何通过视觉设计和交互设计尽可能展现交通数据内涵、突出交通信息要点，是交通行业设计师关注的焦点。
交通数据与道路息息相关，因此以道路为载体的地图常被应用于交通数据可视化大屏展示，具体可分为2D地图、2.5D地图和3D地图。展示风格以深色、浅色两类为主；深色版本多用深蓝色系、黑色系作为背景，搭配亮色展示指标；浅色版本多以纯净的浅色作为背景，但实际使用中浅色版本更容易造成视觉刺激，且对大屏设备的损耗更大。
02 国内交通数据可视化大屏端展示痛点
2.1 大屏页面设计概念单一，展示风格单一
目前国内大屏风格单一、多以深色科技风格为主，各领域没有形成特有的数据展示风格，交通数据的特点难以体现，需要用户凭借文字信息才能对各模块的页面功能进行区别。
2.2 不同显示设备间存在色彩误差、显示兼容问题
由于制作工艺限制，LED屏、LDP屏、4K屏等不同类型的屏幕对同一颜色的展示效果存在差距，电脑显示器上看起来较为柔和的蓝色，在大屏终端展示时有可能偏黑色或绿色。此外，屏幕的分辨率、设备尺寸大小、用户与屏幕的视距等因素也会对最终的大屏展示效果产生影响。
2.3 页面产品体验不佳
国内交通数据可视化大屏端展示存在页面信息过多、主次不分、页面下钻过深、逻辑复杂等体验问题。页面信息过多与主次不分问题常见于将PC端功能组件直接复用的大屏页面。为尽可能展示交通数据，原有平台中的数据指标会被尽可能堆积于大屏页面中。数据的层级划分模糊，导致用户无法在纷繁的指标中找到重点。此外，由于部分交通数据的耦合度大、关联性强，按照传统设计方法展示完整的业务逻辑需要经历多次下钻或多个操作步骤，如交通仿真的数据模拟展示在PC端中会涉及路段选择、参数配置、启动模拟、显示结果等多次操作，查看结果的时间成果过高。过于复杂的操作逻辑也会增加信息展示的遗漏率，降低产品体验感。
03 交通数据可视化大屏端展示效果提升策略
面对当前交通数据可视化大屏端展示风格单一、设备显示存在色差、产品体验不佳等问题，结合视觉设计、交互设计和实际项目经验有效挖掘交通数据深层信息、展示交通数据背后潜藏的客观规律是交通设计师协助汇报人讲好项目故事、辅助决策者进行决策的关键举措。结合当前交通数据可视化大屏端展示痛点，通过“定制大屏风格、适配展示设备、提高产品体验”为核心的交通数据大屏端展示模式，实现交通数据的有效、高效可视化展示。
3.1 探索交通数据自身特点，定制大屏页面展示风格
交通信息涉及较多地图数据，以地图为主、图表等小组件为辅的页面表现形式较适用于交通数据的表达。在此基础上针对不同用途的交通数据，结合具体情况进行地图类型和图表类型的灵活组合，凸显交通各类数据特色。
地图展示中，2D地图常用于与地理高度无关的交通数据展示，例如市级范围的道路指数数据、道路路况等数据；2.5D地图可用于路面建筑的简单建模展示，更生动地还原道路环境，常用于小区域内的数据精细化展示，如区域内的卡口点位数据、灯杆点位数据等；3D地图可生动地对路面信息进行还原，模拟真实环境，打造身临其境的视觉体验，常用于交通模型构建、道路在线仿真，数字孪生等。
图：大屏中以地图为主、图表为辅的展示形式
来源：福田中心区智慧交通主驾驶舱
3.2 实地考察、确定适配大屏展示设备的色彩调性
实地考察前需要了解项目的硬件需求和软件需求，硬件需求包括大屏显示设备的设备参数、屏幕分辨率和设备搭建环境等；软件需求包括展示数据内容、大屏页面布局、大屏呈现的色调风格等。
设计师的项目实地考察要贯穿项目发展的全生命周期，前期需要通过现场调试把握大屏真实展示尺寸，确定电脑屏幕与大屏屏幕的色彩差异，在确定风格基调和色彩基调的基础上结合大屏实际情况确定调性。最终的页面设计需要优先满足大屏现场展示效果。
图：现场实地调试
来源：深圳市综合交通监测平台
大屏界面相较于业务交互更倾向于数据展示，为加强用户对整体系统功能的理解，项目前期需要明确功能模块的数量范围、模块切换按钮的设置位置、预留一定的可扩展空间以防止项目后期需求变更。需求明确后进行主题页面设计，主题页面需具有通用性，可适用于大屏项目中多数页面需求，对常用、通用组件的布局和设计起到指导作用。
3.3 提升产品体验
3.3.1 优先满足必要信息的合理、突出展示
大屏页面展示按照重要程度可分为主要信息展示区域和次要信息展示区域。一般单个页面设置一个主要区域和多个次要区域。特殊情况下出现多个主要区域时，应保持主要区域的大小一致性，并加强主要区域与次要区域的层级对比。例如，在以“地图（主）+图表（次）”为主的页面风格中，主要信息一般占整个屏幕展示界面的40%及以上，特殊页面则根据展示要求进行单独定制。
图：大屏常用布局
图：定制页面设计
来源：福田中心区智慧交通主驾驶舱
3.3.2 大屏内容精简化，突出产品概念和重点数据信息
与PC端复杂的交互逻辑相比，大屏端展示更侧重于对产品故事的呈现和对重点数据的突出；直抒胸臆，使用户第一眼便能了解到产品的内涵和各模块的功能定位。因此地图内的展示要素不宜过多，表达形式不能相互冲突，例如在页面已有表达区域分布的面状要素的情况下，不应再叠加表示区域热点趋势的热力图；页面的逻辑层次不应过于复杂，以用户能直接操作所有选项为优，尽量在二级菜单范围内表达全部内容。地图内数据尽量通过气泡形式进行展示，数据过多时可通过弹窗展示，但弹窗内不宜进行更深层级的下钻操作。动效可适当应用于突出重点数据，默认动效面积不宜超过页面数据表达面积的10%。
3.3.3 制定大屏数据展示规范，提高页面统一性和可读性
大屏设计必须有统一的色彩、文本、图标、组件等展示规范。正红、正黄、橙、正绿一般用于表示交通状态，其余类型图表在颜色选择时应尽量不与这四色同色，避免信息传达出现偏差；在同等级的指标数据展示中，数值的字号要大于对应说明文字的字号，同一页面中字体等级最好小于5级，字体类型小于3种；地图图标可设计统一的外部轮廓，通过颜色和内部细节进行区分。
总结与展望
随着新基建和信息化建设的快速发展，交通数据的质量逐步提升，体量逐渐增大，可视化的大屏端展示需求也日益提高。目前，深圳交通中心为福田中心区交通设施和空间环境综合提升工程、交通运行综合监测可视化升级优化等多个项目提供了多类型、多风格的可视化展示大屏，为道路路况、路面停车、信号控制等各类交通数据提供了创新、多样的数据表达方式。通过可视化大屏的建设，提升了交通数据可视化表达的深度和广度，并进一步提高各业务部门对各类交通事件的监测能力和把控能力。
呈现纷繁信息背后的规律、解释不同类型数据背后的因果关系、为交通决策者提供有力的支持是交通行业设计师的职责所在。了解交通数据可视化大屏端展示的现状、分析痛点并通过“定制大屏风格、适配展示设备、提高产品体验”为核心的设计模式提升交通数据展示水平，最大限度的发挥数据价值，助力交通行业更好、更快发展。
撰写：黄琳惠
审核：叶柏龙
审定：丘建栋