城市空气质量溯源
接入 68 个监测站,按小时聚合 PM2.5 与风向数据,用曲线色块定位异常时段,把排查范围从全城缩到 3 个街区。
我们把手绘插画、数据可视化与大数据分析编织进同一块画布:环保组织上传的 20 万条监测记录, 在你的浏览器里 1.8 秒内长成一棵可交互的「数据树」。你不需要写一行代码,就能把枯燥表格 变成可分享的可持续发展故事。
手绘插画 + 数据可视化:叶脉即数据流,节点即监测点。
面向数据分析师与环保组织成员,每条都给出可执行参数与避坑点,照着做就能把自然有机风格真正落到图表上。
oklch(.54 .1 142))+ 1 个强调色点缀,其余用暖灰。超过 3 种彩色,读者理解时长平均增加 1.4 秒。
oklch(.28 .022 78) 对米白底实测约 11:1;若把浅绿文字放在浅绿块上,务必降到图表下方用暖灰底承载,避免刷成「看不清的环保绿」。
overscroll-behavior: contain 防止带动整页。
ease-out 曲线,错峰间隔 80ms;禁用弹跳与旋转。系统开启「减弱动态效果」时全部降级为静态,避免眩晕。
object-fit:cover + 固定宽高比,避免加载后布局跳动(CLS 控制在 0.1 以内)。
min-width:0、文本加 overflow-wrap:break-word;点击区高度保持 ≥44px。
四个真实工作场景,把大数据分析、环保解决方案与用户体验串成一条可复用的链路。
接入 68 个监测站,按小时聚合 PM2.5 与风向数据,用曲线色块定位异常时段,把排查范围从全城缩到 3 个街区。
把手绘插画与图表模板组合成 12 页可滚动报告,读者平均停留 4 分 12 秒,捐赠转化率提升明显。
把 4 级供应商数据压缩成一张「数据树」,采购团队可在 30 秒内说明碳排热点与替代方案。
将 9 张拥挤表格重构为 4 个核心指标卡 + 1 条趋势带,桌面端首屏信息量提升 2.1 倍,移动端无需横滑即可读完结论。
不会。有机风格只作用于「容器与叙事」——圆角、暖米白底、手绘插画与舒缓动效;坐标轴、刻度、数值仍保持等宽对齐与精确刻度。建议把彩色面积控制在 30% 以内,关键数字用强调色点出即可。
先聚合再绘制:超过 10 万条记录时按时间桶(如 15 分钟)或地理网格聚合到 2000 个以内绘点,首屏渲染可从 6s 降到 1.8s 左右;明细数据留在下钻面板按需加载。
让插画只承担「氛围与隐喻」:放在 Hero 主视觉、区块标题旁与空状态页;图表区域则保持克制,仅用同色系的柔和色块呼应。两者共用同一套色相即可自然统一。
三处:①固定像素宽的图表容器撑破屏幕;②图例文字换行把卡片顶变形;③横向滚动的表格带动整页滑动。解法是容器用百分比 + min-width:0,图例折叠为「更多」入口,滚动容器加 overscroll-behavior: contain。
盯四个数:首屏加载 ≤2s、报告阅读完成率、关键结论被引用次数、移动端跳出率。改造后若完成率提升 30% 以上、跳出率下降 15% 以上,说明叙事与版式都到位了。
不是功能罗列,而是我们衡量自己是否合格的四条标准。
把杂乱的原始记录整理成有生长逻辑的指标体系,一次建模可复用到 12 类环保场景模板。
由插画师与分析师共同产出视觉母题,图表与插画共用同一色相,风格统一不割裂。
百万行数据首屏 1.8s 出图,支持折线、色块、树形与地图四种主视图,可导出静态图与可交互链接。
响应式设计覆盖 320px–2560px,全站对比度达标、动效可降级,弱网下依然可用。
现场用 90 分钟对齐 18 个环保指标的统计边界,会后图表返工率下降一半。
降低饱和度、抬高明度对比,把高亮让给关键数字;实测眼疲劳自评下降 28%。
首屏只渲染聚合层,点击节点再拉取明细,移动端流量平均节省 43%。
先定 1 个视觉母题再画图,图表与插画共用色相,评审轮次从 5 轮压到 2 轮。
先确认指标定义、时间范围与缺失值处理规则,产出一页指标字典,避免后期返工。
按 15 分钟或地理网格聚合,控制绘点数量在 2000 以内,保证首屏渲染 ≤2s。
确定手绘母题与色相(主色 + 强调色至多各 1 个),先画草稿再上真实数据渲染。
在 320px、768px、1440px、2560px 四档宽度检查溢出与对比度,通过后导出可交互链接。