SaaS Analytics Dashboard

---
version: alpha
name: SaaS Analytics Dashboard
description: 一套适用于分析产品与数据工作台的明亮界面体系，以清晰的扁平信息架构为基础，克制使用玻璃表面，并通过蓝紫数据层、绿色行动与成功信号构建高密度但易读的仪表盘。
sourceUrl: "https://www.uupm.cc/demo/saas-analytics-dashboard"
websiteUrl: "https://www.uupm.cc/demo/saas-analytics-dashboard"
exampleUrl: "https://www.uupm.cc/demo/saas-analytics-dashboard"
language: zh-CN
sourceLanguage: en

colors:
  primary: "#0080FF"
  primary-dark: "#0066CC"
  secondary: "#8B00FF"
  cta: "#22C55E"
  cta-active: "#16A34A"
  ink: "#0F172A"
  body: "#475569"
  muted: "#64748B"
  hairline: "#E2E8F0"
  canvas: "#FFFFFF"
  surface-soft: "#F8FAFC"
  surface-glass: "#FFFFFFCC"
  surface-glass-hover: "#FFFFFFF2"
  on-primary: "#FFFFFF"
  on-cta: "#FFFFFF"
  success: "#22C55E"
  warning: "#F59E0B"
  error: "#EF4444"

typography:
  display-xl:
    fontFamily: "Poppins, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -1.8px
  display-lg:
    fontFamily: "Poppins, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.16
    letterSpacing: -1.2px
  display-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.7px
  title-lg:
    fontFamily: "Poppins, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  title-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: "Open Sans, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  body-md:
    fontFamily: "Open Sans, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-sm:
    fontFamily: "Open Sans, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  label:
    fontFamily: "Open Sans, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  metric:
    fontFamily: "Poppins, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 80px

effects:
  glass-blur: 12px
  glass-border: "1px solid rgba(0, 128, 255, 0.10)"
  glass-shadow: "0 4px 24px rgba(0, 128, 255, 0.08)"
  glass-shadow-hover: "0 8px 32px rgba(0, 128, 255, 0.15)"
  cta-shadow-hover: "0 8px 24px rgba(34, 197, 94, 0.30)"

components:
  button-primary:
    backgroundColor: "{colors.cta}"
    textColor: "{colors.on-cta}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 14px 32px
    minHeight: 48px
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    borderWidth: 2px
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 12px 30px
    minHeight: 48px
  glass-card:
    backgroundColor: "{colors.surface-glass}"
    borderColor: "rgba(0, 128, 255, 0.10)"
    rounded: "{rounded.lg}"
    padding: 24px
    backdropBlur: 12px
  metric-card:
    backgroundColor: "{colors.surface-soft}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.md}"
    padding: 16px
  chart-panel:
    backgroundColor: "{colors.surface-soft}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.md}"
    padding: 24px
  status-badge:
    backgroundColor: "rgba(34, 197, 94, 0.10)"
    textColor: "{colors.success}"
    rounded: "{rounded.pill}"
    padding: 6px 10px
---

## 概览

这是一套面向分析产品、运营工作台、报表工具和数据密集型 SaaS 的通用明亮界面体系。它组合两种视觉层级：

1. **扁平信息架构**：承载表格、指标、标签、表单与导航。
2. **克制的玻璃表面**：用于首屏产品片段、重点功能卡、浮动状态与少量高层容器。

它不是泛化的“蓝色 SaaS 风格”。体系的识别点来自严格的颜色职责：蓝色表示信息与选中，紫色区分对照数据序列，绿色只负责承诺型操作和正向状态。界面主体保持白色与冷灰，让图表和指标始终优先。

## 设计原则

- **数据先于装饰。** 渐变、玻璃层和阴影必须服务于分组或数据强调。
- **一种颜色只承担一种职责。** 蓝色负责信息，紫色负责比较，绿色负责行动与成功。
- **玻璃是容器处理，不是页面底色。** 页面背景保持不透明，只在有边界的重点表面使用半透明。
- **高密度、低噪声。** 模块可以紧凑，但页面节奏和字号层级必须从容。
- **产品证据优先。** 使用图表、KPI、表格、进度与真实界面片段，不用抽象 3D 装饰替代产品。

## 色彩体系

### 核心职责

- **Primary Blue**（`{colors.primary}` — #0080FF）：选中导航、第一图表序列、链接、焦点环、描边按钮和信息图标。
- **Primary Dark**（`{colors.primary-dark}` — #0066CC）：蓝色控件的 hover / pressed 状态。
- **Secondary Violet**（`{colors.secondary}` — #8B00FF）：对照序列、次级可视化与蓝紫标题强调，不与主 CTA 争夺注意力。
- **CTA / Success Green**（`{colors.cta}` — #22C55E）：主转化动作、同步成功、正向变化、完成进度与确认图标。
- **Ink**（`{colors.ink}` — #0F172A）：标题、核心指标、品牌识别与高强调标签。
- **Body**（`{colors.body}` — #475569）：正文、普通导航与辅助说明。
- **Canvas**（`{colors.canvas}` — #FFFFFF）：默认页面和应用画布。
- **Soft Surface**（`{colors.surface-soft}` — #F8FAFC）：图表槽、指标组、交替区块、表头与内嵌区域。
- **Hairline**（`{colors.hairline}` — #E2E8F0）：分隔线、图表网格、输入框与扁平卡片边框。

### 渐变规则

标志性渐变从 `{colors.primary}` 以 135° 过渡到 `{colors.secondary}`。只用于短标题片段、身份图形或一个大型 CTA 区块。禁止用于正文、整段文字、表格单元格或所有卡片。

首屏氛围可以在白色到浅灰底上加入低透明径向色场：蓝色不超过 15%，紫色不超过 10%。最终仍必须明显属于明亮界面。

### 语义边界

- 绿色可同时表示主承诺动作与正向状态，两者共同表达“向前推进”。
- 红色只用于删除、负向变化和阻断性错误。
- 橙色只用于警告与注意状态。
- 紫色不得表示警告或错误。

## 字体体系

标题、卡片标题和大型指标使用 **Poppins**；正文、控件、导航、标签及高密度数据说明使用 **Open Sans**。

| Token | 字号 | 字重 | 用途 |
| --- | ---: | ---: | --- |
| `{typography.display-xl}` | 60px | 700 | Desktop 首屏标题 |
| `{typography.display-lg}` | 48px | 700 | 大型区块标题 |
| `{typography.display-md}` | 36px | 700 | 仪表盘或 CTA 区标题 |
| `{typography.title-lg}` | 24px | 600 | 定价与功能组标题 |
| `{typography.title-md}` | 20px | 600 | 卡片与面板标题 |
| `{typography.body-lg}` | 20px | 400 | 首屏辅助说明 |
| `{typography.body-md}` | 16px | 400 | 默认正文与产品说明 |
| `{typography.body-sm}` | 14px | 400 | 图注、图表标签、帮助文字 |
| `{typography.label}` | 14px | 600 | 按钮、Tab、筛选与徽标 |
| `{typography.metric}` | 30px | 700 | KPI 与重要总数 |

首屏标题保持紧凑字距，每行控制在 8–12 个英文单词对应的视觉长度。常规指标标签使用正常字距，不使用大段全大写宽字距。

## 布局

### 网格与容器

- 最大内容宽度：1280px。
- Desktop 营销首屏：文案与真实产品片段采用 6/6 平衡分栏。
- Dashboard：12 列网格，24px gutter。
- 功能卡：Desktop 3 列、Tablet 2 列、Mobile 1 列。
- 指标摘要：Desktop 4 列、Tablet/Mobile 2 列；420px 以下可变为 1 列。
- 定价区：3 个等宽卡片，只突出一个推荐方案。

### 间距

使用 4px 基础网格。默认 section padding 为 `{spacing.section}`（80px），紧凑应用区可降至 48px。普通卡片内边距 24px，密集指标卡 16px，相关行内控件间隔 8–12px。

不要因为卡片密集就压缩页面级留白。宽松区块与紧凑模块之间的反差正是体系的一部分。

## 表面、层级与玻璃效果

### 表面层级

1. **Canvas：** 实色白，无阴影。
2. **Inset region：** `{colors.surface-soft}`，无阴影，可带 hairline。
3. **Flat card：** 白色或浅灰底，1px `{colors.hairline}`。
4. **Glass card：** `{colors.surface-glass}`、12px backdrop blur、蓝色低透明边框与 `{effects.glass-shadow}`。
5. **Floating status：** 更紧凑的玻璃处理，必须带明确语义图标。

当浏览器不支持 backdrop blur 时，玻璃卡仍须可读；fallback 背景至少为 92% 不透明白色。

阴影只用于玻璃或浮动表面。普通指标卡和图表卡依靠边框与填充建立层级。

## 形状体系

- 4px：图表柱、小型可视化标记。
- 8px：筛选、紧凑控件、表格操作按钮。
- 12px：标准按钮、输入框、Dashboard 面板与指标卡。
- 16px：玻璃卡、导航壳、功能卡与定价卡。
- 24px：少量宣传或收尾 CTA 容器。
- Pill：状态徽标、分段选择器与头像。

不要把全部组件做成胶囊。Primary / secondary button 固定使用 12px 圆角。

## 组件规范

### 导航

营销页使用 16px 圆角玻璃导航壳：品牌在左，主要目标居中，账户与承诺型操作在右。应用页改用带 hairline 的扁平白色顶部栏或侧栏；玻璃导航不得悬在数据表格上方。

### 按钮

**Primary button：** 绿色填充、白字、12px 圆角、最小高度 48px。Hover 使用 `{colors.cta-active}`，最多上移 2px，并使用 `{effects.cta-shadow-hover}`。Focus-visible 使用 3px 蓝色焦点环与 2px 白色 offset。

**Secondary button：** 透明或白底、2px 蓝色边框、蓝色文字、12px 圆角，与主按钮等高。Hover 可反转为蓝底白字。

**Tertiary action：** 低优先级工具使用纯文字蓝色操作；不得用绿色做三级链接。

Disabled 控件降低对比度但保留原有语义色相，并关闭 hover 位移。

### 玻璃卡

`{components.glass-card}` 用于功能摘要、产品预览和少量重点定价容器。Hover 可以提升边框透明度和阴影，但不做 scale。重复超过 6 个的内容卡必须切换为扁平表面，避免视觉噪声。

### 指标卡

指标卡包含短标签、大型等宽数字、可选变化量以及最多一个微图表。正向变化使用绿色，负向变化使用红色。趋势不可只靠颜色表达，必须同时显示箭头、正负号或文字标签。

### 图表面板

- 主序列用蓝色，对照序列用紫色。
- 目标完成、正向柱或成功阈值用绿色。
- 网格线使用 1px 或更细的 `{colors.hairline}`。
- 面积填充透明度控制在 5–20%。
- 图例位于图表上方或侧边，同时包含色标和文字标签。
- Tooltip 使用不透明白色或近白色表面、hairline 边框和 8–12px 圆角，不依赖 blur。

### 定价卡

使用三张并列卡片，以蓝色 ring 或顶部 badge 标识推荐方案，购买按钮仍保持绿色。禁止用高饱和渐变铺满整张推荐卡，所有方案应保持可对比的信息结构。

### 状态与通知

状态 Chip 使用 10% 语义色底、语义色文字和小图标。浮动通知可以使用玻璃效果，但必须位于 viewport 内，并在小屏回到正常文档流。

### 输入与筛选

输入框使用白底、1px hairline、12px 圆角、最小高度 44px和蓝色焦点环。筛选与日期范围可使用 8px 紧凑控件。错误状态同时提供红色边框和明确帮助文字，不能移除键盘蓝色焦点指示。

## 交互状态

所有交互组件在适用时必须定义 default、hover、focus-visible、active、disabled、loading 和 error。

- Hover transition：150–200ms。
- 表面/阴影 transition：最长 300ms。
- Pressed：取消上移，可下移 1px。
- Loading：保持按钮宽度稳定，用 spinner 替换前置图标。
- Selected filter：蓝色浅底 + 蓝色文字或边框。
- Focus-visible：3px primary-blue ring，不得只靠阴影。

## 动效

动效必须克制且有功能意义。首屏产品片段可以在 4 秒内上下浮动 4–6px；实时状态可每 1.5 秒 pulse；图表可在首次进入时以 400–700ms 绘制一次。

遵守 `prefers-reduced-motion`：移除浮动和 pulse，将 transition 缩短到近乎即时，图表直接呈现终态。禁止循环播放指标计数动画。

## 响应式规则

| 断点 | 行为 |
| --- | --- |
| `< 640px` | 首屏单列；CTA 全宽堆叠；功能/定价单列；指标 2 列；浮动通知回到文档流。 |
| `640–767px` | CTA 可并排；Dashboard 摘要保持 2 列。 |
| `768–1023px` | 功能与指标 2 列；导航折叠；侧面板堆叠到主图下方。 |
| `≥ 1024px` | 完整 6/6 首屏；功能/定价 3 列；指标 4 列；主图占 Dashboard 行宽的 2/3。 |

图表必须保留标签；无法安全降低密度时允许横向滚动。图表文字不得缩小到 12px 以下。

## 无障碍

- 文字和控件满足 WCAG 2.2 AA。
- 绿色主按钮使用白字时必须通过对比度校验；否则改用更深绿色或深色文字。
- 所有图表必须提供文本摘要或可访问表格替代。
- 颜色序列同时通过标签、线型、标记或图标区分。
- Pointer target 最小 44 × 44px。
- Dialog 与浮动通知必须正确管理焦点并具有 accessible name。
- 模糊与透明度不得让文字对比度低于 AA。

## 文案调性

使用简洁、证据导向的表达。标题说明用户结果，辅助文案解释可量化价值。指标标签使用名词，不写口号。按钮使用明确动词，如“创建报表”“导出数据”“开始试用”；已知目的地时避免模糊的“了解更多”。

## 应当与不应

### 应当

- 页面主体保持白色与冷灰。
- 将绿色保留给承诺动作和正向状态。
- 玻璃表面必须具有实色 fallback 与清晰边框。
- 以真实数据结构作为核心视觉内容。
- 用 Poppins 建立层级，用 Open Sans 保证密集信息可读。
- 重复 Dashboard 模块保持扁平，只在重点位置使用玻璃。

### 不应

- 不要对整个页面或所有嵌套卡片应用 blur。
- 绿色已承担行动职责时，不要再把蓝紫渐变用于主按钮。
- 不要只靠颜色表达图表含义。
- 不要在表格或表单后添加装饰性 glow。
- 不要混用无关的圆角尺度，也不要把所有控件做成 pill。
- 不要让浮动卡在 Mobile 视口外被裁切。

## QA 清单

- [ ] 蓝色、紫色、绿色分别保持信息、对照、行动/成功职责。
- [ ] 关闭 backdrop-filter 后页面仍完全可读。
- [ ] 重复数据模块使用扁平表面，玻璃只用于重点层级。
- [ ] 控件在适用时包含 hover、focus-visible、active、disabled、loading 状态。
- [ ] 图表具有标签及非纯颜色识别方式。
- [ ] 文字和控件对比度通过 WCAG 2.2 AA。
- [ ] 所有交互元素的键盘焦点可见。
- [ ] Mobile 无浮动通知裁切和页面级横向溢出。
- [ ] Reduced-motion 模式移除持续浮动与 pulse。
- [ ] 规范保持通用，不绑定某个分析产品或品牌业务。