mailinapp
Documentation menu

KPI 计分卡模块

一个大号的标题数字,用于展示邮件所报告的核心指标——收入、注册人数、NPS,或任何收件人应该第一眼看到的内容。这是数字摘要邮件和仪表盘邮件最常用来开头的模块,通常是三个并排排列在一张图表上方。

工作原理

一张计分卡由一个标签、一个大号数值、一个可选的趋势指示器,以及一个可选的迷你趋势图组成——按这个视觉顺序从上到下排列。数值和标签始终以真实的 HTML 文本渲染,使用你设置的字号和颜色;阅读这个标题数字从不依赖任何图片加载成功。只有迷你趋势图是渲染出的 PNG 图片,而且即便如此,它也只是叠加在一个本就清晰可读的数字之上的装饰。

趋势指示器("Δ")只有在同时设置了前值和趋势方向之后才会出现。模块把它们当作一个整体的手动输入单元,而不是两个各自独立的可选字段,因此永远不会出现只显示 Δ 百分比、却没有箭头说明哪个方向是好的这种模糊状态。百分比本身始终由 value 与 previousValue 的对比计算得出;方向(上升/下降/持平)并不是根据数字是否上升来推断的——需要你自己设置。

这一点很重要,因为"上升"并不总是好消息。工单数量或流失率上升是坏事,报告这两者的计分卡需要用一个代表下降的颜色箭头来表明这一点,即便原始数字确实增加了。箭头的颜色遵循你选择的方向(上升为绿色、下降为红色、持平为琥珀色),使用的是项目自身的状态色,而不是写死的调色板。

迷你趋势图是一张小型趋势线图片,绘制的是你在迷你趋势图数值字段中手动输入的数值——若是绑定模式,则是绑定字段每一行的数值,上限为 60 个数据点。只有当至少有两个点可以连成一条线时,它才会渲染。当设置了 Δ 时,趋势图的线条颜色会跟随 Δ 的颜色,因此一条向下的、看起来不妙的趋势线一眼就能看出是红色的;若没有配置 Δ,则回退为项目的品牌色。

可配置字段:

  • 标签——指标的名称,以及它自己的颜色和字号。
  • 数值——标题数字,以字面字符串形式存储(因此也可以包含合并标签)。
  • 格式——数字、货币(美元,不保留小数),或百分比——控制 value 与 previousValue 在显示时如何格式化,而不影响它们的存储方式。
  • 前值——用于计算 Δ 的比较基准。要显示任何 Δ,都必须同时设置趋势方向。
  • 趋势方向——无 / 上升 / 下降 / 持平。决定箭头图形及其颜色。
  • 迷你趋势图数值——手动输入的一组数字,从左到右绘制。
  • 卡片的背景色、内边距、边框、圆角半径。
  • 数值文本与标签文本各自独立的颜色/字号组合。

除了手动输入的数值,KPI 计分卡还可以把自己的数值绑定到一个已连接的数据源,或绑定到过往某次营销活动自身的响应结果。数据源绑定会把一个数值字段与一个聚合方式(求和、平均值、计数,或最新一行)配对,把每一行绑定数据折叠为唯一的那个标题数字。绑定只会替换 value 以及迷你趋势图的数据来源;previousValue 和 trendDirection 始终保持手动输入,因为绑定的"前值"需要这个数据模型并不保留的历史快照。两种模式的完整机制参见将图表绑定到真实数据。

示例

Subject

Your July performance summary

要在实际场景中查看这个模块,最快的方式是以仪表盘用途新建一个项目。它会自动生成一个"Weekly performance"标题,以及并排排列在分栏中的三张 KPI 计分卡:收入以货币形式呈现并带上升 Δ,新增注册以普通数字呈现并带上升 Δ,转化率以百分比呈现并带持平 Δ。后面紧跟着一张柱状图(仪表盘网格预设)。这是一个带有合理示例数字的起点,在你连接数据之前不会绑定任何真实内容。

一封每周运营摘要邮件可以用三张计分卡开头(待处理工单、平均响应时间、CSAT),每张都带一个与上周相比的 Δ,让读者在滚动查看任何图表之前先看到结论。一份营销活动后的报告可以用一张大号计分卡展示"总收入",通过数据源聚合绑定到该营销活动商品模块产生的订单,配一条迷你趋势图展示发送前的每日增长曲线。一家订阅制企业的月度总结可以把 MRR、流失账户数和净新增账户数放进三张计分卡:三张卡片、三个不同的 Δ 方向,每一个都能正确着色,因为方向是逐卡手动设置的,而不是根据变化的正负号来猜测的。

静态回退效果是什么样子

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    $24,800
    <span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
       alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
       style="display:block;max-width:100%;height:auto;margin:4px 0" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>

在迷你趋势图的 <img> 出现之前,数值、标签和 Δ 就已经全部是真实文本;下方的小型灰色文字行以纯文本形式重复了同样的三项信息,因此即便关闭图片,这张卡片依然完全可读。

相关内容