跳到主要内容

PULSE — 产品分析仪表盘

产品分析仪表盘

产品分析仪表盘:五个管理视图收进一屏,所有卡片由同一个时间筛选器驱动,数字一律等宽,从不让版面挪动。

2026-03
  • 全栈开发
  • 数据可视化
  • 产品界面设计
Next.jsTypeScriptTailwind CSSRechartsVercel
PULSE — 产品分析仪表盘 预览
  1. 01

    五个管理视图汇聚在同一屏

  2. 02

    唯一的时间筛选器——7 天、30 天或 90 天——驱动全部卡片

  3. 03

    全部使用等宽数字:任何数值都不会挪动版面

需求

一个面向订阅制业务的产品分析仪表盘。这类工具的问题从来不是数据,而是数据太多。经常性收入、活跃账户、转化率、流失、按渠道的获客、套餐分布——样样重要,于是没有一样重要。

委托的是界面:把通常要在五个标签页里读的东西,变成一屏就能读懂。

约束

  • 高密度是刻意的。 打开仪表盘的人要的是一览无余,而不是逐个点击。
  • 任何颜色都不能单独承载信息:色觉障碍者读到的图表仍须可读。
  • 数字时刻在变:数值从三位变成四位时,版面不能跟着动。

决策

两级导航,不是六级。

一切归入两个入口:管理——总览、受众、收入、漏斗、留存——与空间——集成、设置。这个区分不是按主题,而是按时间:每天要看的,和只设一次的。仅此一条分法,就砍掉了一半的来回。

时间筛选器凌驾于一切之上。

七天、三十天或九十天:页首的一个选择器驱动全部视图。若每张卡片各带筛选器,就会出现不成立的对比——三十天的收入旁边挨着七天的流失。

处处使用等宽数字。

所有数值都以等宽排版。一列金额在小数点上对齐,刷新中的计数器也不再让版面跳动。这是三行样式的细节,却改变了整个工具给人的稳固感。

结果

一屏装下的总览:带区间对比的净经常性收入、活跃账户、转化、流失、按渠道的获客与套餐分布。账户表可排序,数据可导出,活动实时可见。

如果重做

缺一个告警。一个需要你想起来才会打开的仪表盘,只在你想起来的日子里有用:下一步该做的是一个可配置的流失阈值,通过电子邮件通知。数据早就在那里,缺的是用法。

Aureon