看一眼就知道先干什么：vibe 项目的仪表盘设计实战

打开一个 vibe 项目的后台，第一眼看到的往往是一排数字：今日访问、注册用户、总收入、待处理订单。数字不少，可店主看完还是不知道今天该先干什么。仪表盘的问题从来不是数据不够，而是数据没有排成一句能指导行动的话。本文讲的，就是怎么给 vibe 项目做一个“看一眼就知道干什么”的仪表盘。

先说清楚本文的例子：文中出现的“山风民宿”与店主“阿梨”均为虚构，只是为了把道理讲具体而编的例子，不是真实产品和真实用户。方法本身是通用的，放到任何一个 vibe 项目里都能直接套用。

先定一个观点：仪表盘回答三个问题，不是陈列所有数据

一个好的仪表盘只回答三个问题：现在怎么样、哪里出问题了、接下来先干什么。凡是回答不了这三个问题的数据，不管多好看，都不配上第一屏。很多 AI 生成的仪表盘犯的第一个错，就是把数据库里所有能统计的字段都铺出来：用户表、订单表、日志表各来一排卡片，最后拼成一张数据墙。墙上的数字越多，读它的人越不知道从哪里下手。

山风民宿的阿梨每天早上打开后台，她真正想知道的只有三件事：今天有没有房可卖、昨天入住的客人有没有异常、这个月离满房目标还差多少。于是她的仪表盘第一屏只有四张卡：今日可售房数、昨日入住率、本月累计收入、需要处理的异常（比如客人投诉、保洁未完成、支付失败）。四张卡下面是一条行动清单：先处理异常，再看收入进度。其他数据——渠道来源、房型偏好、历史同比——全部收进第二屏，想深挖的人自己点进去。

判断一张卡该不该上第一屏，有个简单标准：这个数字变了，你今天会不会立刻做一件不同的事？今日可售房数从 3 间掉到 0 间，阿梨会立刻关掉促销、去协调保洁；昨日入住率跌了十个点，她会去看是不是某条评价出了问题。如果数字变了你也不会改主意，那它就是装饰，放到第二屏去。

指标分三层：北极星、护栏、虚荣指标

指标选错，仪表盘越精致越误导人。建议把指标分成三层。第一层是北极星指标，只有一个，代表产品真正创造的价值。对山风民宿来说不是注册用户数，而是“已完成入住的间夜数”——只有客人真的住进来了，民宿才赚到钱。第二层是护栏指标，守住底线：投诉率、支付失败率、保洁超时率。这些数字平时不起眼，一旦越线就必须报警。第三层是虚荣指标：访问量、页面浏览量、收藏数。它们看着涨得开心，但涨了也不代表生意变好，放到第二屏，甚至只放周报里。

分层还有一个实际好处：AI 生成代码时最容易把虚荣指标做大做亮，因为它们最好算、最好画折线图。你在提示词里先写清“北极星指标是什么、护栏指标是哪几个、虚荣指标不进第一屏”，生成的仪表盘骨架就不会跑偏。反过来，如果你不先定指标，AI 会默认把所有字段都当成同等重要，最后交出一张谁也读不懂的墙。

每个指标还要配一句人话解释。不要只写“转化率 12.4%”，要写“转化率 12.4%，意思是每 100 个看房的人里有 12 个人下单，比上周低 1.8 个点”。分母、口径、对比基准这三样缺一个，数字就没法信。特别是 AI 生成的统计代码，经常把“注册用户”和“激活用户”混着算，把“下单数”和“支付成功数”混着算。仪表盘上线前，先把每个指标的口径写进一张表：分子是什么、分母是什么、时间窗口是几天、异常值怎么处理。这张表就是以后扯皮时的证据。

布局按阅读顺序排：总览、拆解、清单

第一屏建议按“总览—拆解—清单”三段排。最上面是 3 到 4 张总览卡，只放北极星指标和护栏指标，每张卡带一个对比：比昨天、比上周同期、比目标，至少占一个。没有对比的绝对数字是没有意义的——“今日收入 4800 元”到底是好是坏，没人知道；写成“今日收入 4800 元，比上周同期高 12%，离本月目标还差 31%”，立刻就有了判断。

中间一段是拆解：把总览数字按一个维度切开。民宿按房型切、按渠道切、按星期几切，切一次就够了，不要同时切三个维度。阿梨发现本月收入差目标 31%，点进拆解一看：大床房满了，双床房空着——问题立刻具体到“双床房怎么卖”，而不是笼统的“收入不行”。拆解的维度要选那个能直接对应到行动的维度：能对应到“给哪类房降价”“找哪个渠道谈”的维度才是好维度；只能对应到“知道了”的维度是坏维度。

最下面是一张行动清单，而不是又一张图表。清单里的每一项都要有动词和对象：“联系保洁补做 302 房”“给支付失败的 3 笔订单重发链接”“回复 2 条待处理的客人留言”。仪表盘的终点不是让人“了解情况”，而是让人“做完下一件事”。如果你的仪表盘看完之后用户还是不知道先干什么，那它就是一张海报，不是工具。

空数据、缺数据、延迟数据：三种情况三种写法

仪表盘最容易翻车的地方，是数据还没来的时候。新产品上线第一天，北极星指标是 0，折线图是一条贴着底的直线，新用户一看就觉得这产品没人用。空数据不要画成 0，要写成一句话：“还没有入住记录，完成第一笔入住后这里会显示间夜数。”同时给一个去向：去哪里能产生第一条数据。空状态不是空白的图表，而是一次引导。

缺数据和空数据不一样。空数据是真的没有，缺数据是应该有但没传上来：比如某个渠道的订单接口断了两小时，或者统计任务昨晚没跑完。缺数据最忌讳悄悄按 0 显示——阿梨看到某渠道订单为 0，以为是渠道没流量，其实是接口断了，判断全错。正确做法是在卡片角上挂一个小标记：“渠道 A 数据截至昨日 18 时，今日数据延迟”，并且把缺失时段在折线图上断开，不要用直线连过去。断开的线本身就是一句提醒：这段别信。

延迟数据则要写清刷新节奏。实时、每小时、每天，这三种节奏对应的文案完全不同。写“实时”就要真的做到分钟级，否则用户会拿着刚下的单一再刷新，发现数字没变，立刻不信你。大部分 vibe 项目根本不需要实时：民宿一天看两次就够了，电商每小时看一次也够了。把刷新时间直接写在卡片右下角——“每小时更新，上次更新 09:00”——比任何“实时大屏”的口号都让人放心。

时间范围与对比：默认给对，自定义给够

时间范围的选择器是仪表盘上最容易被 AI 做复杂的地方：今天、本周、本月、本季度、自定义、同比、环比一排按钮全摆出来，用户点哪个都不知道自己在比什么。建议默认只给三个：今天、本周、本月。默认视图就是“今天”，因为大多数小团队每天只关心今天。自定义时间段可以有，但收进一个入口，不要和常用选项平起平坐。

对比基准同样要克制。同比和环比同时出现时，图表上会有四条线，谁也看不清。规则是：日报看环比（今天比昨天），周报看周同比（这周比上周），月报看月同比（这月比上月）。基准写在图表标题里，不要让用户猜：“本月收入（对比上月同期）”。还有一个常见坑：对比期的天数不对齐。比如 10 月 29 日的“本月”只有 29 天，拿它去比完整的 9 月 30 天，数字天然吃亏。正确做法是比“上月前 29 天”，也就是同期对齐。这个细节 AI 生成代码时经常漏掉，上线前要专门测一次跨月、跨周的边界。

权限与可见性：不是所有人该看同一张盘

仪表盘做到后面一定会撞上权限问题：保洁阿姨需不需要看到收入？兼职客服需不需要看到全部客人的手机号？答案通常是不需要。仪表盘的权限规则可以很简单：按角色定可见范围。店主看全部，保洁只看自己负责房间的任务和状态，客服只看留言和订单状态、看不到收入和成本。规则写进代码之前，先写进一张角色—数据对照表，每行写清“这个角色能看到什么、不能看到什么、为什么”。

这里有个 vibe 项目特有的坑：AI 生成后台时，经常为了省事给所有登录用户返回同一套统计接口，前端再按角色隐藏卡片。隐藏不等于没权限，懂行的人打开网络请求就能看到全部数字。正确做法是后端按角色过滤数据，前端只负责展示拿到的部分。验收时不要只点界面，要换两个不同角色的账号各看一次，再打开一次接口返回，确认敏感数字真的没下发。

还有一种“可见性”是给用户自己的：让用户自己决定仪表盘上放什么。提供 3 到 5 个可选卡片、允许拖动排序、允许隐藏不关心的卡片，这个功能成本不高，但能极大提高仪表盘被长期打开的概率。人只会长期看自己挑过的东西，别人排好的墙再漂亮，看三天也就腻了。

上线验收清单：发之前逐项打勾

最后给一张可以直接用的验收清单。第一，每个指标的口径表有没有写完，分子、分母、窗口、异常处理四项齐不齐。第二，第一屏能不能在十秒内回答三个问题：现在怎么样、哪里出问题了、接下来先干什么。第三，空数据、缺数据、延迟数据三种状态有没有分别测过，缺数据有没有断开折线而不是画成 0。第四，时间对比有没有对齐同期，跨月、跨周的边界有没有测过。第五，换两个角色登录，敏感数字有没有真的在接口层被过滤掉。第六，手机上打开一次：卡片有没有挤成一列长条、折线图有没有小到看不清、行动清单的按钮点不点得到。

仪表盘做完不是结束，而是开始。第一个月每周看一次：第一屏的卡片有没有哪张从来没人点、行动清单里的任务有没有哪类从来没人做。没人点的卡片降到第二屏，没人做的任务换一种写法。仪表盘和别的产品功能一样，是越改越贴合的，不是第一版就定型的。阿梨的民宿仪表盘到今天已经改了四版：第一版是数据墙，第二版砍到四张卡，第三版加了行动清单，第四版加了保洁视角。每一版都不是推翻重来，而是把“看一眼就知道干什么”这句话兑现得更彻底一点。你的仪表盘也可以这样，一版一版往这句话上靠。

图表选型：先想清楚要比什么，再选图

仪表盘上最常见的浪费，是把所有数据都画成折线图，或者把所有占比都画成饼图。选图之前先问一句：我想让用户比什么？比趋势，用折线图，一条线讲一个指标随时间的变化；比大小，用柱状图，几根柱子一眼分出高低；比构成，用堆叠柱状图或者直接写百分比，饼图只在类别不超过四个、且有人真的关心“谁占几成”时才用。类别一多，饼图就变成一盘谁也分不清的彩色碎片，不如一张按大小排好序的表格。

表格在仪表盘里经常被低估，其实它是性价比最高的“图”。阿梨的渠道拆解最后用的就是表格：一行一个渠道，列分别是订单数、收入、占比、对比上周。表格能同时放四个数字、能排序、能点进去看明细，折线图做不到。规则是：需要精确数字、需要排序、需要逐行处理的时候，用表格；只需要看走势、看异常拐点的时候，用图。两者不是对立的，好的仪表盘是图在上、表在下，图负责发现异常，表负责落实到人。

还有两个细节值得单独写进验收项。第一，纵轴不要从一个很大的数字起画，那样会把波动压成一条直线，也不要为了夸大波动把纵轴截得太狠，让 3% 的变化看起来像腰斩。纵轴从 0 起是默认，确实需要截断时要在图上标出来。第二，颜色不要超过三种语义：正常、注意、异常。绿色、黄色、红色各管一种状态，其他装饰色越少越好。颜色一多，用户先要学图例，再看数据，仪表盘就慢了一拍。数据可视化的目标不是好看，而是快：快到用户扫一眼就能决定下一步。

最后说一句关于“实时大屏”的克制。很多 vibe 项目上线第一周就想做一块挂在墙上的实时大屏，数字不停跳，看着很酷。但大屏的代价是统计接口要扛住高频查询、缓存要做对、异常时还要有人盯着。先把每天看两次的仪表盘做对，再考虑要不要实时。顺序反了，大屏就会变成一块谁也不敢信、谁也不敢关的装饰板。

回头总结，仪表盘只有一条验收标准：一个忙人早上打开它，十秒钟内能不能说出今天先干什么。做不到这一点，图表再精美、数字再齐全，都是白做。从这句话出发，先定三个问题，再定指标分层，再排总览、拆解、清单三段，最后把空数据、缺数据、时间对比和权限四处容易翻车的地方逐项测过去。做完这些，你的仪表盘就不再是一面数据墙，而是一张每天早上真正会被打开的工作台。

顺带提醒一个容易被忽略的环节：仪表盘的数据口径变了，老用户会先怀疑产品出问题，而不是怀疑口径。改口径时要在卡片旁留一句说明，写清从哪天起、按什么新口径算，并保留旧口径的对比至少一个月。口径可以改，但不能悄悄改，悄悄改掉的信任，要用好几个版本才能挣回来。