☀️ 晴天模式
切换下雨
一、引言：为什么状态可视化很重要
做监控类项目时，我遇到过一个尴尬的问题：
"这个回南天等级 'formal-mild' 是什么意思？"
用户看不懂我用文字描述的状态。这让我意识到：数据本身不会说话，但设计可以让它开口。
本文分享我在 个人监控中心 项目中的状态可视化设计实践，从回南天监测到带伞提醒，探索如何让复杂数据一目了然。
二、核心原则
2.1 颜色映射情绪
人类对颜色有直觉反应：
绿色 = 安全 / 正常
黄色 = 警告 / 注意
红色 = 危险 / 紧急
在 回南天监测面板 中，我设计了 6 级颜色体系：
● SAFE 安全 ● WATCH 观察 ● WARNING 预警 ● MILD 轻度 ● MODERATE 中度 ● SEVERE 重度
2.2 动画表达紧急程度
静态颜色只能表达"是什么"，动画才能表达"有多急"。
| 等级 | 动画频率 | 用户感知 |
|---|---|---|
| SAFE | 4秒/次（呼吸） | 安心，无需关注 |
| WATCH | 2秒/次（扫描） | 留意，偶尔查看 |
| WARNING | 2秒/次（闪烁） | 警惕，准备应对 |
| MODERATE | 1秒/次（警报） | 紧急，立即行动 |
| SEVERE | 0.5秒/次（剧烈） | 危险，全面防护 |
关键洞察：频率越高，紧迫感越强。从 4 秒到 0.5 秒，用户能直观感受到"事态升级"。
三、实战案例：回南天监测面板
3.1 设计演进
❌ V1 — 纯文字描述
当前状态：formal-mild 置信度：85% 建议：关闭门窗
用户反馈：看不懂 formal-mild 是什么意思
⚠️ V2 — 颜色区分
🔶 轻度回南天 置信度：85% 建议：关闭门窗
好一点，但不够直观，用户不知道"轻度"有多严重
✅ V3 — 动态卡片 + 动画（最终方案）
MILD
轻度回南天：墙壁轻微出水，建议关闭门窗
置信度: 85%
颜色 + 动画 + 文案，三重信息传递
3.2 完整演示
点击查看各等级实际效果：
四、另一个案例：带伞提醒
回南天是"等级可视化"，带伞提醒是"主题可视化"。
4.1 背景主题色随天气变化
☀️
晴天
橙色主题
☁️
多云
灰色主题
🌧️
雨天
蓝色主题
设计逻辑：晴天暖色（橙）→ 雨天冷色（蓝），符合直觉。
实际效果：查看带伞提醒面板 →
五、通用方法论
5.1 设计 Checklist
颜色是否符合直觉？（绿 = 好，红 = 坏）
动画是否干扰阅读？（背景动，文字静）
一眼能否 get 到状态？（3 秒原则）
色盲用户能否区分？（不只看颜色）
5.2 工具推荐
六、总结
好的状态可视化 = 降低认知负担
用户不需要理解 formal-mild 是什么意思，
只需要看到 红色闪烁 就知道：危险，要行动了。
技术服务于感知，而非炫技。
欢迎交流讨论！
