先定 60-30-10 的用色比例
中性暖底占 60%、大地绿主色占 30%、暖橙与玫紫强调色合计不超过 10%。强调色只用于按钮、关键数字、激活标签，避免大面积高饱和填充。
自然有机风格 · 梦想纵横 · 大数据分析
把散落的环保数据，编织成一片会呼吸的梦想生态
以自然有机风格重塑数据可视化：环形放射的指标体系、可触摸的模块化布局、带交互动画的曲线叙事。让每一次浏览都像走进一片会生长的森林，看见科技感与环保理念在同一屏里共生。
3.2s首屏可交互时长目标
18类环保指标可视化图元
62%用户对有机曲线的偏好度
0.4s模块化卡片的动效节奏
实用指导清单
把自然有机风落到数据页面的 7 个可执行动作
面向环保与科技主题的分析型网页，本清单给出可直接照做的参数阈值与避坑点，照着改就能让页面从「通用后台」变成「会呼吸的生态看板」。
曲线圆角统一到 20–30px
卡片用 28px、图表容器用 20px、标签用胶囊圆角。同一页面圆角不超过 3 档，避免直角与圆角混杂带来的割裂感。
环形放射指标控制在 4–6 环
超过 6 环视线会散。每环代表一个可持续维度（碳排、能耗、水耗、回收率），环间距不小于 12px，中心留给一句标语。
动画时长锁定 0.3–0.6s
入场淡入上浮用 0.45s ease-out，图片呼吸缩放用 8–13s 循环。避免弹跳与急促位移，节奏舒缓才符合有机气质。
图表数据点降噪到每屏 ≤ 120 个
单屏散点超过 120 个即需聚合。折线保留关键拐点，异常值用玫紫单点高亮，其余降到 30% 透明度作为背景层。
模块化布局留出 12–20px 卡间距
卡片间距小于 12px 会拥挤、大于 20px 会松散。区块内边距用 32px，整页纵向节奏保持 4/8pt 倍数，信息密度与呼吸感兼顾。
上线前必做的 3 项校验
① 320px 宽无横向滚动；② 所有图片预置宽高比防跳动；③ 开启「减弱动态效果」后仍能完整读到数据。达标线：Lighthouse 可访问性 ≥ 90。
图文混排特写
让数据可视化说人话：一张图配一段可执行的结论
传统看板只给数字，梦想生态要求每个图元都带一句「所以呢」。左侧的环形图负责宏观占比，右侧文字负责给出行动建议，二者中间用一条缓和的曲线牵引视线，完成从数据到决策的翻译。
−38%阅读图表到理解结论的耗时
+27%关键指标的二次回看率
4 档字号层级（正文到标题）
- 每张图配 1 句结论 + 1 个行动项，不超过 40 字。
- 趋势图必须有基线参考，避免视觉夸大波动。
- 颜色语义全站统一：绿=改善、橙=持平、紫=需关注。
应用场景展示
悬停展开横向风琴：四种生态数据现场
将鼠标移到面板上即可展开细节，收拢时保持整屏清爽。适合在有限的横向空间里容纳多组场景叙事。
场景 01
城市碳排监测
接入 2400+ 传感点，按街区聚合到 15 分钟粒度，异常街区自动用玫紫标出并生成核查工单。
场景 02
园区能耗分析
把电、水、气三张表合成一张有机曲线，识别夜间待机浪费，平均可压降 11% 的无效能耗。
场景 03
供应链环保溯源
为每批材料打上回收率标签，链路任一节点低于 60% 阈值即触发预警，支持一键导出合规报告。
场景 04
公众环保参与
把个人碳足迹折算成可视化「生态叶」，社区榜单每周更新，参与度提升约 2.3 倍。
核心能力卡片
三张卡，撑起梦想生态的技术底盘
点击标签切换视角：数据层、体验层、动效层各自的能力边界与量化指标一次看清。
多源环保数据接入
传感器、ERP、公开数据集三类来源统一建模，字段对齐后即可进入可视化层。
- 支持 12 种时序格式自动识别
- 增量同步延迟 ≤ 90 秒
- 字段映射准确率 98.6%
有机形态可视化引擎
把常规柱状折线转译为有机曲线与环形放射，保留数据准确性的同时降低阅读门槛。
- 18 类图元可自由组合
- 单图渲染 ≤ 120ms
- 色盲友好配色通过校验
模块化布局与交互动画
区块以模块为单位自由拼装，配合 0.3–0.6s 的缓动动画，让滚动浏览也保持呼吸感。
- 布局栅格 12 列可断点重排
- 动效统一 4 档时长令牌
- 减弱动态效果下完整可读