数据可视化,大屏设计,地图可视化,设计规范

南昌城市大脑 · 智慧交通大屏

把交通感知、拥堵识别与事件监测装进一块可读的大屏

智慧城市数据可视化 · 南昌城市大脑交通不限行项目封面

这块屏不是给设计师看的,是给值班的交警看的。他们要在几十秒里判断:哪儿堵了、为什么堵、该往哪儿调。

我的角色
驻场设计 · 全程对接
项目性质
从 0 到 1
时间
2021

从杭州经验到南昌本地化落地

在南昌之前,团队已经做过杭州城市大脑,那套「感知—分析—调度」的逻辑跑通过,也真的用在交通治理里了。南昌是带着经验接的第二个城市。

但城市不一样:路网结构、拥堵成因、值班员的使用习惯都不同。杭州的经验能复用框架,不能复用答案。

驻场南昌,把现场反馈变成设计决策

这次我没在办公室做,直接去了南昌驻地,和交通管理部门的人一起上班,需求一条条过。

驻场的好处是能听到真话。在会议室里,需求方会说「要全面、要好看」;到了值班室,他们指着屏幕说「这个我根本来不及看」。后面很多取舍,都是被这类现场反馈改掉的。

三个痛点,一套解法

先看问题。当时南昌的交通治理卡在三件事上:

  • 人车增长快,路跟不上:机动车 3.27 亿、驾驶人 4 亿,基础设施进度还在放缓
  • 资源分配不均:停车位、道路资源、人口分布都往一块挤
  • 治理难:靠人工经验感知,拥堵成因说不清,宏观协调推不动
南昌交通场景的三个痛点与对应解法
三个痛点,对应「实时感知 / 智能分析 / 精准调度」 · 点击查看原图

一屏回答四个问题

大屏最容易犯的错是把数据铺满。这块屏按值班员的动作顺序排:先看全局态势,再定位堵点,再问为什么堵,最后看具体事件。

所以底部只留四个入口——态势感知、拥堵识别、成因诊断、事件监测。左边是行政区拥堵指数和路段排行,中间是地图,右边是流量曲线和路口延误排行。

态势感知界面:左排行、中地图、右曲线
态势感知:左边看排行,中间看地图,右边看曲线 · 点击查看原图

出事了,要的是能立刻处置

真出事故时,值班员要的不是趋势图,是「哪条路、什么车、多久能到」。

所以事件监测做成报警驱动:报警量、事件列表、实时视频、处置动作全放在同一屏,看到就能处理,不用来回切页面。

事件监测界面:报警量、实时视频与事件处理
事件监测:报警、视频、处置在同一屏 · 点击查看原图

地图是我一层层调出来的

系统自带的地图放到深色大屏上,噪音太大:颜色饱和、信息冗余、没有品牌色。

所以我用 Mapbox 的样式编辑器自己调:陆地、水系、建筑、标注、道路,一层层定颜色,做出 3D 效果。左边那串图层一共 117 个,一个个关掉再重新配。

Mapbox 地图样式编辑器与图层配置
Mapbox 样式编辑器:117 个图层逐个配 · 点击查看原图

一套组件,撑住后面所有页面

一套大屏不可能只做一个页面。图标、组件、图表都收敛成一套,后面加页面不用从零画。

南昌城市大脑的图标与组件
图标与组件:统一到一套里 · 点击查看原图
组件库与数据图表
组件库与图表 · 点击查看原图

手机端也得看

领导不在值班室,手机端要能看同一份数据。所以关键指标另做了一版移动端,不是把大屏缩小。

手机端实时监控界面
手机端实时监控:不是把大屏缩小 · 点击查看原图