2026-08-27 15:29:52 +08:00

8.2 KiB

Raw Blame History

备考通 · 设计规范（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 变量）

: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. 落地注意事项

所有颜色引用设计变量，禁止硬编码；换肤(浅/深)时仅需替换 token。
数据大字必须用 Inter Bold，与中文正文区分，保证数字层级清晰。
语义色成对出现（主色 + 浅底），状态反馈不依赖单一颜色。
两端组件复用同一套 token，保证一致性。

8.2 KiB Raw Blame History Unescape Escape

备考通 · 设计规范（Design System）

1. 设计理念

2. 色彩系统（Color Tokens）

2.1 中性底色

2.2 品牌主色（深蓝系）

2.3 文字色

2.4 语义色（状态反馈）

3. 字体排印（Typography）

3.1 字体族

3.2 字重规范（数值映射）

3.3 字号层级（桌面端实测校准）

3.4 行高

4. 主题色板速查（前端 CSS 变量）

5. 圆角与阴影

5.1 圆角层级

5.2 阴影

6. 组件规范

6.1 卡片（Card）

6.2 按钮（Button）

6.3 徽章 / 标签（Badge）

6.4 进度条 / 模块掌握度

6.5 侧边栏（桌面）

6.6 TabBar（移动）

7. 间距与布局规范

7.1 间距刻度

7.2 栅格

7.3 画布节点间距（原型排布）

8. 图标规范

9. 动效约定（建议）

10. 落地注意事项

8.2 KiB

Raw Blame History