零售门店日清
把客流、转化、连带率放在一屏，店长每天早会看 3 分钟。
- 刷新
- 30s
- 核心指标
- 4 项
创意排版 × 数据可视化
让数字开口说话， 排版先替它绽放一次 大数据分析仪表盘 · 网页设计灵感稿
把 数据可视化 当作一条“可阅读的版式”：先定 8pt 栅格与字号阶梯，再让关键指标以超大字重跳出。字号对比建议 ≥ 3.5:1，主标题与正文间距控制在 --sp-5 上下，用户 3 秒内就能抓住结论，而不是先被装饰晃眼。
灵感母版 01
3.5×标题与正文字号对比下限
1.62正文行高，长文更耐读
44px按钮最小点按高度
00
合作伙伴墙
这些团队把大数据分析做成了日常对话：数据源接入后 5 分钟内出第一版看板，排版规范随行就市地沉淀为内部组件库。
零售小账本门店客流分析
云仓协作组库存周转看板
城市出行台通勤热力可视化
轻学数据课学习行为分析
社区健康站随访指标聚合
田垄气象局产区数据播报
01
实用指导清单
给做数据看板的设计师：下面 6 条都是可在当日改稿中直接落地的参数与顺序，先排字，再排色，最后启动效。
- 先建立字阶，再谈装饰
把标题、指标数字、正文三档字号定成固定比例：正文
--fs-sm、指标--fs-xl、主标题--fs-3xl，相邻档位差距保持 ≥ 1.4 倍；超过 4 档就会让看板失去主次。 - 用 8pt 节奏管住间距
卡片内边距取
--sp-4，卡片间距 12–20px，区块之间用--sp-7封顶；同一屏内间距种类不超过 4 种，视觉密度才稳定。 - 大数字留白，小标签降噪
关键指标四周至少留出自身高度 0.5 倍的空白，单位缩小到 0.5em 并用强调色；轴标签、图例统一用
--muted，避免和主色抢视线。 - 配色守 60-30-10
约 60% 纯白底、30% 主色（按钮、激活态、图表主线）、10% 强调色（关键数字、细高亮、状态点）；同屏高饱和色块面积控制在 12% 以内。
- 动效只做呼吸，不做巡游
图表入场 200–350ms、缓动统一
--ease-out；背景图缓慢缩放周期 12–18s；对prefers-reduced-motion直接关闭缩放与位移。 - 上线前做三查
一查 320px 宽是否横向溢出，二查点按区是否 ≥ 44px，三查色对比是否 ≥ 4.5:1（正文）。三条全过再交付，返工率通常能降到 10% 以下。
排版参数速查
- 栅格：12 列 / 沟槽 16px
- 圆角：锐利 2–6px，卡片统一
--r-md - 阴影：
--sh-1常态，--sh-3悬浮 - 过渡：
--t-base250ms
02
常见问题 FAQ
都是团队在做大数据分析与创意排版时常卡住的 4 个点，答案尽量给到参数。
信息很多但看起来很乱，先改哪里？
先改层级，不动颜色。把所有元素按“结论—证据—备注”三级归类，只保留一个最大字号；同一容器内字号档位压到 3 档以内，多余颜色先降为中性灰，通常能解决 70% 的“乱”。
数据可视化一定要用很多颜色区分吗？
不必。折线类图表建议 3–5 条以内，主线用 主色，对比线用中性灰，只有异常点用强调色；超过 6 条请改用小倍数图或分面，而不是继续加色。
创意排版会不会牺牲数据可读性？
把“创意”放在标题与版式结构上，把“稳定”留给坐标轴与图例：坐标轴刻度、网格线、单位一律不参与造型实验。只要数值与刻度的视觉关系不变，读者就不会读错。
看板多久刷新一次才不打扰人？
运营类看板 15–30s 一次，管理类 5–10 分钟一次即可；刷新时避免整屏重排，只更新数字与趋势线，并保留 150ms 的数值过渡，减少视觉跳动。
03
应用场景展示
四个真实业务切面，每个都给出可量化的观测口径，方便直接搬进你的看板需求文档。
仓储周转监控
按 SKU 分层看周转天数，异常件自动落到待办清单。
- 刷新
- 5min
- 预警线
- ±15%
城市通勤热力
早晚高峰热力图层叠线路图，用于排班与运力提示。
- 粒度
- 15min
- 图层
- 3 层
学习行为追踪
记录完成率与卡点章节，给学生一页可读的进步曲线。
- 周期
- 周报
- 样本
- ≥ 200
04
核心能力卡片
四项能力，按“数据进来—看清—互动—留下来”的顺序排列，每张都附一个可验收的量化口径。
多源接入与清洗
表格、接口、埋点三类数据统一进管道，字段命名与单位自动对齐，异常值打标而非直接删除。
接入耗时 ≤ 5min / 字段映射准确率 ≥ 98%
创意排版可视化
超大字重指标 + 细线图表混排，非对称栅格承载结论，图表与文字同屏阅读不打架。
首屏结论识别 ≤ 3s / 图表 ≤ 5 条主线
交互设计与钻取
点、悬停、筛选三种交互保持一致语义，下钻层级不超过 3 层，随时可回到总览。
下钻 ≤ 3 层 / 操作反馈 ≤ 200ms
用户体验与无障碍
键盘可达、焦点可见、对比度达标，色彩之外再用形状与文字标注编码含义。
正文对比 ≥ 4.5:1 / 点按区 ≥ 44px
05
解决方案对比
同一份数据，四种呈现方式各有代价。按你的读者与刷新频率挑，不必全都上。
| 方案 | 适合读者 | 首屏信息量 | 成本/维护 | 结论 |
|---|---|---|---|---|
| 海报式总览 | 管理层、访客 | 3 个核心指标 | 低，改动少 | 汇报首选 |
| 工作台式看板 | 运营、分析师 | 8–12 个指标 | 中，需维护布局 | 日常首选 |
| 分面小倍数图 | 研究者、复盘会 | 按维度铺开 | 中高，图量多 | 适合深挖 |
| 单指标大屏 | 现场、展厅 | 1 个指标 | 低，但浪费屏幕 | 仅作氛围 |
06
服务 / 价格档位
三档服务对应不同颗粒度，价格按“每套看板”的交付口径标注，便于预算对齐。
把这份排版灵感，变成你自己的看板规范
先把字号阶梯、8pt 间距、60-30-10 配色三件事写进团队文档，再谈动效与创意。落地一版通常只需 2–3 天，后续每新增一个指标，复用组件即可。
已有 6 类指标模板可直接套用
开始整理规范