236 lines
8.2 KiB
Markdown
236 lines
8.2 KiB
Markdown
# 备考通 · 设计规范（Design System）
|
||
|
||
> 版本 v1.0 · 2026-08-26
|
||
> 适用：公务员考试备考工具「备考通」双端高保真原型（桌面 1440×900 / 移动 390×844）
|
||
> 依据：Ardot 文件 `718570750880145` 中的真实颜色变量与排印数值校准，非凭空编写。
|
||
|
||
---
|
||
|
||
## 1. 设计理念
|
||
|
||
- **沉稳专业，克制清晰**。深蓝主色传达「备考、专注、可信」的调性，浅米色画布带来温和舒展的阅读体验。
|
||
- **信息架构双端一致**：桌面端左侧导航 + 主内容；移动端底部 TabBar + 卡片流。两端遵循同一套色彩与组件规范。
|
||
- **数据可视化友好**：所有统计/进度/趋势使用统一的数值字体（Inter Bold）与语义色，突出关键数字。
|
||
|
||
---
|
||
|
||
## 2. 色彩系统（Color Tokens）
|
||
|
||
> 所有颜色已定义为 Ardot 颜色变量 `$3:N`，前端可直接映射为 CSS 变量。
|
||
|
||
### 2.1 中性底色
|
||
|
||
| 变量 | 名称 | 色值 | 用途 |
|
||
|---|---|---|---|
|
||
| `$3:3` | bgCanvas | `#F7F6F2` | 画布/页面背景（浅米白） |
|
||
| `$3:4` | bgCard | `#FFFFFF` | 卡片/面板背景 |
|
||
| `$3:5` | bgSoft | `#EFEFF5` | 图标底、次级填充、标签底色 |
|
||
| `$3:12` | borderSubtle | `#E8E6E0` | 卡片描边、分隔线（中性浅暖） |
|
||
|
||
### 2.2 品牌主色（深蓝系）
|
||
|
||
| 变量 | 名称 | 色值 | 用途 |
|
||
|---|---|---|---|
|
||
| `$3:6` | primary | `#2B4C8F` | 主按钮、主色、选中态高亮底 |
|
||
| `$3:7` | primaryDeep | `#1B2D5B` | 渐变深端、页面主标题强调、深色 hero |
|
||
| `$3:8` | primaryBright | `#3A6BD8` | 渐变亮端、hero 卡片、active 图标 |
|
||
|
||
> 渐变使用：`primaryDeep(#1B2D5B) → primaryBright(#3A6BD8)` 或 `primary(#2B4C8F) → primaryDeep(#1B2D5B)`。
|
||
|
||
### 2.3 文字色
|
||
|
||
| 变量 | 名称 | 色值 | 用途 |
|
||
|---|---|---|---|
|
||
| `$3:9` | textPrimary | `#1A1F2E` | 主标题、正文主色 |
|
||
| `$3:10` | textSecondary | `#6B7280` | 副标题、描述文字 |
|
||
| `$3:11` | textMuted | `#9CA2AD` | 弱提示、占位、次要标记 |
|
||
|
||
### 2.4 语义色（状态反馈）
|
||
|
||
| 变量 | 名称 | 色值 | 用途 |
|
||
|---|---|---|---|
|
||
| `$3:13` | success | `#1B9266` | 正向趋势、正确率、达标 |
|
||
| `$3:14` | successSoft | `#E0F5EB` | 正向标签底、打卡徽章底 |
|
||
| `$3:15` | warning | `#DC9A1E` | 提醒、中等状态 |
|
||
| `$3:16` | warningSoft | `#FEF0D1` | 提醒标签底 |
|
||
| `$3:17` | danger | `#D14C55` | 负向、错误、待复习错题数 |
|
||
| `$3:18` | dangerSoft | `#FCE5E7` | 危险标签底、错误提示底 |
|
||
|
||
> **应用原则**：语义色以「主色 + 浅底」成对出现（如 success 文字/图标 + successSoft 底），用于徽章、进度、趋势，保证状态一目了然。
|
||
|
||
---
|
||
|
||
## 3. 字体排印（Typography）
|
||
|
||
### 3.1 字体族
|
||
|
||
| 用途 | 字体 | 说明 |
|
||
|---|---|---|
|
||
| 中文 | `Sarasa Gothic SC` | 正文、标题、标签全中文场景 |
|
||
| 数字/英文 | `Inter` | 统计数字、时间、单价、代码标识 |
|
||
|
||
### 3.2 字重规范（数值映射）
|
||
|
||
| 语义 | 字重 | 说明 |
|
||
|---|---|---|
|
||
| Regular | `400` | 正文、描述 |
|
||
| Medium | `500` | 次要强调 |
|
||
| Semi Bold | `600` | 按钮、标签、小标题 |
|
||
| Bold | `700` | 页面标题、数据大字 |
|
||
|
||
> 设计工具中字体 style 与 CSS 字重映射见下表。
|
||
|
||
### 3.3 字号层级（桌面端实测校准）
|
||
|
||
| 层级 | 字号 | 字重 | 字体 | 颜色 | 用途 |
|
||
|---|---|---|---|---|---|
|
||
| H1 页面标题 | 24px | Bold(700) | Sarasa | textPrimary | 页面主标题 |
|
||
| 卡标题 | 15px | SemiBold(600) | Sarasa | textPrimary | 区块/卡片标题 |
|
||
| 数据大字 | 22px | Bold(700) | **Inter** | textPrimary/语义色 | 统计数字核心值 |
|
||
| 标签 | 12px | Regular(400)/SemiBold | Sarasa | textSecondary | 字段名、标签 |
|
||
| 副标题 | 13px | Regular(400) | Sarasa | textSecondary | 页面副文案、表头摘要 |
|
||
| 按钮文字 | 13px | SemiBold(600) | Sarasa | 白/主 | 主次按钮 |
|
||
| 趋势指数 | 11px | Medium(500) | Sarasa | success/danger | 涨跌、占比标注 |
|
||
|
||
### 3.4 行高
|
||
|
||
- 大标题/数据：`1.2`（紧凑，突出数值）
|
||
- 正文/描述：`1.5`（舒朗易读）
|
||
- 标签/小字：`1.4`
|
||
|
||
---
|
||
|
||
## 4. 主题色板速查（前端 CSS 变量）
|
||
|
||
```css
|
||
:root {
|
||
/* 背景 */
|
||
--bg-canvas: #F7F6F2;
|
||
--bg-card: #FFFFFF;
|
||
--bg-soft: #EFEFF5;
|
||
--bg-border: #E8E6E0;
|
||
|
||
/* 品牌 */
|
||
--primary: #2B4C8F;
|
||
--primary-deep: #1B2D5B;
|
||
--primary-bright: #3A6BD8;
|
||
|
||
/* 文字 */
|
||
--text-primary: #1A1F2E;
|
||
--text-secondary: #6B7280;
|
||
--text-muted: #9CA2AD;
|
||
|
||
/* 语义 */
|
||
--success: #1B9266;
|
||
--success-soft: #E0F5EB;
|
||
--warning: #DC9A1E;
|
||
--warning-soft: #FEF0D1;
|
||
--danger: #D14C55;
|
||
--danger-soft: #FCE5E7;
|
||
|
||
/* 字体 */
|
||
--font-sans: "Sarasa Gothic SC", "PingFang SC", sans-serif;
|
||
--font-num: "Inter", "SF Pro", sans-serif;
|
||
|
||
/* 圆角 */
|
||
--radius-sm: 8px;
|
||
--radius-md: 12px;
|
||
--radius-lg: 16px;
|
||
--radius-xl: 24px;
|
||
--radius-pill: 999px;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 圆角与阴影
|
||
|
||
### 5.1 圆角层级
|
||
|
||
| Token | 值 | 用途 |
|
||
|---|---|---|
|
||
| radius-sm | 8px | 图标底、小徽章、输入框内元素 |
|
||
| radius-md | 12px | 次级卡、分段切换、标签 |
|
||
| radius-lg | 16px | 标准卡片（默认） |
|
||
| radius-xl | 24px | Hero 渐变大卡 |
|
||
| radius-pill | 999px | 头像、胶囊按钮、天数徽章 |
|
||
|
||
### 5.2 阴影
|
||
|
||
| 层级 | 值 | 用途 |
|
||
|---|---|---|
|
||
| level-0 | 无 | 平面卡片（默认） |
|
||
| level-1 | `0 1px 2px rgba(0,0,0,0.04)` | 悬浮态轻投影 |
|
||
| level-2 | `0 4px 12px rgba(27,45,91,0.08)` | 弹层、浮起卡片、TabBar |
|
||
| level-3 | `0 8px 24px rgba(27,45,91,0.14)` | 模态、下拉菜单 |
|
||
|
||
> 本项目默认以「白底 + 细描边(borderSubtle)」表达卡片，不用重阴影，保持干净克制的风格。
|
||
|
||
---
|
||
|
||
## 6. 组件规范
|
||
|
||
### 6.1 卡片（Card）
|
||
- 背景 `bgCard(#FFF)`，描边 `borderSubtle` 1px，圆角 16px（radius-lg）。
|
||
- 内边距：桌面 `24px`，移动 `16px`。
|
||
- 卡片间距：桌面 `20px`，移动 `12px`。
|
||
|
||
### 6.2 按钮（Button）
|
||
| 类型 | 底色 | 文字 | 圆角 | 高度 |
|
||
|---|---|---|---|---|
|
||
| 主按钮 | primary(#2B4C8F) | #FFF | 10px | 40px |
|
||
| 次按钮 | 透明 + primary 描边 | primary | 10px | 40px |
|
||
| 胶囊 | primary | #FFF | pill | 44px |
|
||
|
||
### 6.3 徽章 / 标签（Badge）
|
||
- `successSoft`/`warningSoft`/`dangerSoft` 底 + 对应语义色文字，圆角 pill 或 8px，字号 12px。
|
||
- 例：打卡徽章（successSoft + success）、待复习红点（dangerSoft）。
|
||
|
||
### 6.4 进度条 / 模块掌握度
|
||
- 轨道 `bgSoft`，填充 `primary(#2B4C8F)` 或语义色（达标 success / 待提升 warning）。
|
||
- 高度 6-8px，圆角 pill。
|
||
|
||
### 6.5 侧边栏（桌面）
|
||
- 宽 220px，白底 `bgCard` + 右侧 borderSubtle；导航项高 40px，圆角 10px。
|
||
- 高亮态：容器 `primary` 底 + 图标/文字白；展开子菜单缩进 36px。
|
||
|
||
### 6.6 TabBar（移动）
|
||
- 高 120px（含上下 padding 21px），胶囊底 `bgCard` 描边；选中项 `primary` 圆角胶囊，未选中灰。
|
||
|
||
---
|
||
|
||
## 7. 间距与布局规范
|
||
|
||
### 7.1 间距刻度
|
||
`4 / 8 / 12 / 16 / 20 / 24 / 32`（基于 4px 网格）。
|
||
|
||
### 7.2 栅格
|
||
- 桌面：内容主区宽 1220px，左右 padding 32px，列间距 16-24px。
|
||
- 移动：左右 padding 24px，卡片宽 342px，卡片间距 12px。
|
||
|
||
### 7.3 画布节点间距（原型排布）
|
||
- 行距 100 / 列距 60（仅用于画布排布，非页面内布局）。
|
||
|
||
---
|
||
|
||
## 8. 图标规范
|
||
- **一律使用线性矢量图标**，stroke 1.5-2px，尺寸 20-28px，颜色 `textSecondary(#6B7280)`；选中/高亮态换 `primary` 或白。
|
||
- 图标不能替代关键文字，文字标签始终保留（可识别性优先）。
|
||
- 数据图表图标（折线/柱状）用规整闭合 SVG 图形，避免长条/旗类 path 解析出错。
|
||
|
||
---
|
||
|
||
## 9. 动效约定（建议）
|
||
- 按钮 hover：背景透明度 0.08 过渡 120ms。
|
||
- 卡片 hover：level-1 投影 160ms。
|
||
- 切换/展开：250ms ease，位移 8-12px 渐显。
|
||
- 移动端 Tab 切换：淡入 200ms。
|
||
|
||
---
|
||
|
||
## 10. 落地注意事项
|
||
1. 所有颜色引用设计变量，禁止硬编码；换肤(浅/深)时仅需替换 token。
|
||
2. 数据大字必须用 Inter Bold，与中文正文区分，保证数字层级清晰。
|
||
3. 语义色成对出现（主色 + 浅底），状态反馈不依赖单一颜色。
|
||
4. 两端组件复用同一套 token，保证一致性。
|