SaaS Dashboard：功能型页面的设计平衡

背景：SaaS 产品需要一个分析面板，展示用户的业务数据——活跃用户、事件追踪、漏斗分析。这类页面的设计挑战不是「好不好看」，而是「在信息密度极高的情况下，用户还能不能找到他要的东西」。

功能型页面 vs 营销页面的区别

huashu-design 有一个重要的分类：功能型页面是用户要一直用的，营销页面是用户只看一次的。

营销页面追求「第一印象」，功能型页面追求「每天用不烦」。

所以 Dashboard 的设计原则和官网落地页完全相反：
- 官网要留白 → Dashboard 要信息密度
- 官网要统一 → Dashboard 要扫视效率
- 官网要动效 → Dashboard 要即时反馈

第一步：布局——视口即信息

Dashboard 的布局目标是：用户不需要滚动，就能看到最重要的 3 个数据。

┌─────────┬───────────────┬─────────┐
│ 核心 KPI │  趋势图表(主)   │ 提醒    │
│ (3 卡)   │               │         │
├─────────┤               ├─────────┤
│ 事件统计 │               │ 快速操  │
│ (表格)   │               │ 作按钮  │
└─────────┴───────────────┴─────────┘

三栏布局，左侧 KPI 卡片，中间主图表占 50% 宽度，右侧辅助信息和操作。

关键细节： 这个布局在 1440px 屏幕上是三栏，在 1024px 上变成两栏（图表 + KPI 在上，其他在下），在手机上变成单栏堆叠。

第二步：KPI 卡片——这次可以带 icon

和营销页面不同，Dashboard 的 KPI 卡片可以带 icon——不是因为装饰需求，而是因为用户靠 icon 快速定位他想看的指标。

┌──────────────────┐
│ 📊 活跃用户       │
│ 12,384            │  ← 36px 粗体
│ ↑ 8.2% 今日新增   │  ← 12px 趋势
│ ◤◢◤◢◤◤◢◤  sparkline │  ← 20px 高
└──────────────────┘

三个 KPI 卡片：活跃用户、收入、转化率。每张卡高度固定为 100px，确保所有卡片在视口内完整可见。

第三步：B 图表——趋势图 + 漏斗

主图：折线图

中间区域放的是 30 天活跃用户趋势图。SVG 内联，无依赖。

• X 轴：日期（只标周一，不标每一天——减少标签密集度）
• Y 轴：用户数（从 0 开始，不是从最小值开始——防止视觉夸大）
• 悬停：显示具体数值（用 title 属性，不需要 tooltip 组件）

辅助图：漏斗图

右侧下方放了一个 3 步骤的漏斗图——展示用户从访问到转化的流失。

访问 100%  ████████████
注册 24%   ████
付费 8%    ██

漏斗的设计要点：每个阶段的宽度是比例化的，阶段之间用箭头连接，右侧标注转化率数字。

第四步：表格——信息的最后防线

Dashboard 底部是事件追踪表格。表格是最无聊但最不可或缺的 UI 元素。

huashu-design 的表格设计规则：

1. 斑马纹不要：阅读效率比视觉「好看」重要，斑马纹反而干扰连续阅读
2. 行高 40px：太密了点不到，太疏了一页看不到几行
3. 数字右对齐：遵循数字阅读习惯
4. 排序可点击：表头加 cursor:pointer，hover 变色
5. 空状态：没有数据时显示「暂无数据」+ 一个简洁的 icon，不是空白

第五步：色彩——低信息密度配色

Dashboard 的色彩策略不同于营销页面——它需要「低信息密度的底色」。

• 背景：#F8F6F4（极浅暖灰）— 不刺眼
• 卡片：#FFFFFF — 清晰边界
• 字体：#2D2D2D / #8A7F75 — 主次分明
• accent：#C04A1A — 只用于趋势箭头和高亮数据

所有颜色饱和度控制在 30% 以下，保证用户看一整天不会疲劳。

为什么不用 Tailwind UI 的模板？

Tailwind UI 的 Dashboard 模板的问题是：所有信息一样重要。

它们的模板在 KPI 卡片、图表、表格、侧边栏、顶部导航上平均用力——用户不知道先看哪里。

huashu-design 通过信息层级（左柱右图 + 大小对比 + 色彩轻重）来引导视线，而不是靠组件库的「每个组件都精致」。

耗时复盘

核心心得

Dashboard 设计的本质：告诉用户哪些信息值得看 5 秒，哪些值得看 10 秒，哪些扫一眼就够了。

信息没有优先级，就是信息噪音。功能型页面不需要证明设计水平，它需要经得起用户每天使用 8 小时的考验。

下次你做 Dashboard 的时候，不要先画组件，先给所有信息排优先级——哪些是用户每天要看的，哪些是每周才看一次的。排完再动手。

截图清单

1. ✅ SaaS Dashboard（三栏布局 + KPI + 趋势图 + 漏斗 + 表格）— 已插入上文