接入与清洗
对接业务库与埋点表，字段去重后保留 ≤40 个核心维度；空值率高于 15% 的字段先标记后使用。
Workflow
平均交付 5 个工作日四步把原始数据变成可读卡片
每步都有明确产出物与验收指标，避免“图表很好看、结论没人用”的常见浪费。
指标建模
按“北极星指标 + 3 个过程指标”组织卡片层级，每个图表只回答 1 个问题。
卡片编排
用 12 列栅格排布，特性卡固定 4 张，卡片间距 12–20px，保证一屏信息密度可控。
验证与迭代
做 5 人可用性测试，任务完成率 ≥85%、定位目标卡片的平均耗时 ≤8 秒为准入线。
Updates
最新动态与资讯
关于大数据分析、可视化图表与交互设计的近期实践记录。
卡片密度调优：从“信息塞满”到“一眼可读”
把单卡元素从 11 个压到 6 个后，测试者首次定位正确率提升 23%。
跑马灯文字带如何不喧宾夺主
速度控制在 26s/循环、字号不超过正文的 0.9 倍，只做语境串联，不做主要信息载体。
超小屏不塌：320px 下的卡片降级方案
单列堆叠 + 表格转卡片 + 长词强制断行，横向溢出归零。
Voices
客户评价
来自数据团队与业务团队的真实反馈，关注可用而非好看。
“以前周会要翻 5 个看板，现在一张卡片流就能对齐结论，会议时长从 60 分钟压到 35 分钟。”
“可视化图表终于不再只是‘炫技’，每张卡都写清了指标口径，跨部门争论少了约一半。”
“窄屏体验做得很稳，运营同学用手机就能看当日核心指标，不用再等 PC 端报表。”
Panel
数据可视化面板
示例仪表盘结构：左列条形对比 + 右侧关键数字卡，全部使用同一套设计令牌。
1.2s首屏图表可交互耗时
8s定位目标卡片上限
4 张特性卡固定数量
12 列栅格对齐基准
Showcase
可横向滚动 →横向滚动作品带
左右滑动查看更多数据卡片场景，每张卡对应一个真实分析问题。
留存漏斗卡
把 5 级漏斗压缩成 1 张卡，流失节点用强调色细线标出，一眼看出问题层级。
渠道对比卡
同卡对比 4 个渠道的 ROI，用明度层次区分优先级，避免高饱和色互相打架。
异常预警卡
波动超过 ±2 个标准差触发提示，卡片顶部以细高亮条呈现，不遮挡数据。
用户分群卡
按 RFM 分为 6 群，每群给出 1 条可执行的运营动作建议。
Partners
合作伙伴墙
数据源、可视化与前端工程侧的协作伙伴。
DATA LAKE
BI SUITE
CHART KIT
CDN EDGE
UX LAB
GRID STUDIO
Checklist
实用指导清单
照着做就能落地的 6 条要点，每条都带可量化阈值，建议逐条对照验收。
先定栅格再画卡
锁定 12 列栅格与 4/8pt 间距节奏，卡片间距固定 12–20px；容器宽度按 1140 / 1400 / 1680px 三档放宽。
一卡一问
每张卡只回答 1 个业务问题，标题用动词开头；单卡元素不超过 6 个，超出就拆卡。
60-30-10 配色
约 60% 暖米白底、30% 主色承载结构、10% 强调色只点按钮/关键数字/激活态，禁止大面积高饱和填充。
断点逐个验
1024px 转 2 列、640px 转 1 列、380px 以下收内边距到 8–12px；用 320px 宽度实测，横向滚动条必须为 0。
图表可读性阈值
正文与背景对比度 ≥4.5:1，图表标注字号不低于正文 0.85 倍，坐标轴刻度不超过 6 条。
性能与降级
图片统一 object-fit:cover + loading=lazy，首屏图表 1.2s 内可交互；开启 prefers-reduced-motion 时关闭跑马灯与呼吸动效。
Plans
服务与价格档位
按数据规模与交付深度分档，均可先做 1 页卡片样张再决定。
把你的数据交给我们，先看一版看得懂的卡片
留下业务目标与现有指标口径，48 小时内返回 1 页卡片样张与栅格结构说明。
Principles
四条贯穿全站的体验原则
卡片式设计不是把内容切碎，而是让信息在正确的层级上被看见。
结构先行
模块对齐同一基线，避免视觉噪音。
- 12 列栅格
- 4/8pt 间距
层次清晰
用明度而非饱和度区分主次。
- 三级景深阴影
- 1px 分隔线
动效克制
缓慢缩放与淡入上浮，0.3–0.6s。
- Ken Burns 呼吸感
- 支持降级
移动优先
点按区不小于 44px，窄屏不塌。
- 单列堆叠
- 长词强制断行