智糖健康 · 全产品设计系统

01

Foundations · 基础

文字标识、色彩、字体、间距、圆角、阴影、图标、动效、三端栅格与断点。

文字标识 · Wordmark

智糖健康

智糖 · 以 AI 陪伴式健康管理，帮助用户平稳控糖。

主标识 = 青绿渐变圆角方块 + 心电波图标；不使用紫色渐变、不使用 emoji 作为标识。

色彩 · 主色与辅助色

主色青绿

oklch(0.585 0.082 170)

主色浅底

--primary-soft

辅助低饱和蓝

oklch(0.585 0.05 235)

背景暖白

oklch(0.984 0.0045 95)

卡片表面

--bg-surface

主文本

oklch(0.255 0.014 200)

主色「青绿」用于主操作、强调与品牌；每屏最多出现两次强主色块。辅助蓝仅用于次要交互与规则类信息。

字体 · 中文系统字体栈

字体栈var(--font-sans)PingFang SC / Microsoft YaHei / Source Han Sans / system-ui

Display 32

平稳控糖

H1 22

健康概览

H2 18

指标趋势

Body 14

生活方式干预辅助

Caption 12

辅助说明文本

数据 26 (tnum)

7.8 %

字重仅用 400 / 500 / 600 / 700（中文不用 300 细体）；数值统一 .num 等宽，提升数据密度与对齐。

间距 / 圆角 / 阴影

间距 (4px 基线)

4

8

12

16

24

32

48

圆角 (克制)

xs 4

sm 6

md 10

lg 14

pill

避免过度圆角；卡片用 lg(14)，按钮用 md(10)，输入用 md(10)。

阴影 (Elevation)

sm

md

lg

浮层/弹窗用 lg；卡片悬浮用 md；分割靠边框与背景层级，不滥用阴影。

图标 · 2px 线性，统一笔触

血糖

血脂

血压

体重

腰围

目标

需关注

重要风险

转人工

AI

医生

事实/规则

完成

报告

随访

打卡

时间线

脱敏

禁用 emoji 作为功能图标；风险图标与颜色成对出现，颜色从不单独承担语义。

动效 · Motion

标准缓动--ease-standardcubic-bezier(0.2, 0, 0, 1)

强调缓动--ease-emphasizedcubic-bezier(0.3, 0, 0, 1)

快--dur-fast120ms（hover/press）

基础--dur-base200ms（状态切换）

慢--dur-slow320ms（弹窗/抽屉）

遵循 prefers-reduced-motion；动效服务于状态反馈，不堆砌装饰。

三端栅格 · 断点

专业端

1280–1440

12 列 · 槽 24px · 侧栏 232 · 顶栏 60

1

2

3

4

5

6

7

8

9

10

11

12

患者端

375–430

4 列 · 槽 16 · 触控 ≥44 · 单列优先

1

2

3

4

企微侧边栏

360–420

单列 · 紧凑 · 嵌入式 · 信息折叠

侧边栏单列 · 宽 360–420

02

语义令牌 · Semantic Tokens

组件统一引用语义名，而非裸色值；改色只需改令牌。

类别令牌名用途

背景--bg-app / --bg-surface / --bg-elevated应用底 / 卡片 / 浮层

文本--fg-primary / --fg-secondary / --fg-muted主/次/辅助文本

边框--border-subtle / --default / --strong分割线/默认/强调

交互--ring-focus / --overlay-hover / --selected聚焦环/悬停/选中

趋势--trend-improve / --decline / --flat向好/向差/持平（配图标）

风险--risk-normal/attention/important/escalate四级安全（配图标+文案）

03

核心组件 · Core Components

按钮、输入、选择、搜索、标签、分页、Tabs、表格、卡片、抽屉、弹窗、步骤条、时间线、上传、编辑器、通知。

按钮 · Button

注：破坏性/阻断操作用橙色(--risk-important)；红色仅留给「必须转人工」。

输入 / 选择 / 搜索

姓名 *

阶段

搜索患者

备注

校验 / 错误

联系电话

请输入有效的 11 位手机号

UI 校验错误使用橙色（重要风险色调），不占用红色。

标签 · Tag / Badge

普通提示需关注重要风险必须转人工主色中性描边

事实数据规则判断 AI 建议医生结论

Tabs · 分页 · 步骤条 · 时间线

健康概览面板内容。

指标趋势面板内容。

报告面板内容。

2

3

AI 报告生成08-17 09:24

AI 基于数据与规则生成草案。

医师审核08-17 11:00

专业人员逐节核对与编辑。

表格 · 卡片 · 上传

指标	当前	目标	状态
空腹血糖	8.4	4.4–7.0	偏高
HbA1c	7.8%	<7.0%	偏高
血压	118/74	<130/80	达标

点击或拖拽上传检验报告 / 病历照片

支持 PDF / JPG / PNG · 单文件 ≤ 20MB · 上传后自动 OCR

抽屉 · 弹窗 · 通知

操作成功

报告已发布。

04

业务组件 · Business Components

患者摘要、健康指标、趋势图、完整度、风险、服务阶段、随访、打卡、报告章节、证据引用、AI 状态、审核记录。

空腹血糖事实

8.4mmol/L

目标 4.4–7.0偏高

HbA1c事实

7.8%

目标 <7.0%↓0.1

血压事实

138/86mmHg

目标 <130/80偏高

患者摘要 · 完整度 · 风险

张

张明华脱敏

P-2024-0142 · 58岁/男

资料完整度86%

重要风险强化干预负责王晓婷

报告章节 · 证据引用 · AI 状态

血糖分析事实

空腹均值 8.4 mmol/L①，达标率 58%②。

干预建议 AI

建议增加监测频次。

AI 草案，须专业人员审核。

随访 · 打卡

电话随访 · 强化期第4周14:00

用药打卡提醒完成

审核记录 · 服务阶段

王

通过 · 方案延续

王晓婷 · 08-03 10:12

医生

评估期强化干预巩固期维持期

05

数据可视化 · Data Visualization

趋势线 · 目标区间带 · 异常点 · 数据缺口 · 周期比较。颜色仅为辅助，搭配图标与文字。

空腹血糖 · 12 周趋势（含目标带 / 异常点 / 缺口）

目标区间达标异常缺口

周期比较（本周 vs 上周）

阶段分布

06

医疗安全四级 · Safety Levels

每级 = 图标 + 色彩 + 文案 + 允许操作 + 升级路径。红色专属「必须转人工」。

L1 普通提示

中性信息 · 蓝色

文案示例本周打卡完成率 86%

允许操作查看 / 继续流程 / 自动记录

升级路径无需升级

L2 需关注

琥珀色

文案示例HbA1c 7.8% 高于目标，建议关注

允许操作提示患者 / 纳入随访 / 可发布

升级路径纳入随访关注列表

L3 重要风险

深橙色（非红）

文案示例血糖波动幅度大，控制未达标

允许操作人工复核 / 不可自动发布

升级路径转主管医生复核后发布

L4 必须转人工

红色（专属）

文案示例疑似低血糖事件，需立即医生介入

允许操作仅查看 / 禁止发布 / 立即通知

升级路径强制转医生/专家，阻断自动流程

07

内容规范 · Content

患者端温和易懂；专业端区分事实/规则/AI/医生。给正确与错误示例。

专业端 · 四类来源区分

事实

客观测量/上传值（FBG 8.4）· 不可改写、作为分析基础。

规则

基于知识规则阈值的判断（「未达标」）· 可追溯规则版本。

AI

模型生成草案（建议、文案）· 可编辑、必须审核、不作处方。

医生

专业人员确认结论 · 最高优先级、可覆盖 AI 草案。

正确 · 患者端文案

「本周血糖比上周更平稳啦，继续保持餐后散步 💪（AI 建议，仅供参考）」

错误 · 患者端文案

「您的病情已确诊为控制不良，请立即增加二甲双胍剂量。」— 含诊断、处方、疗效承诺，违规。

正确 · 风险表达

重要风险图标+色+文字三重表达，色盲可读。

错误 · 风险表达

仅用红色圆点标记异常，无图标无文字。— 仅靠颜色，违规。

08

状态矩阵 · State Matrix

default / hover / focus / pressed / disabled / loading / error / readonly / permission-denied · 键盘与焦点规则。

Default

Hover

Focus

Pressed

Disabled

Loading

Error

Readonly

Permission denied

键盘与焦点规则

所有可交互元素 Tab 可达，3px 青绿聚焦环可见
Esc 关闭弹窗 / 抽屉
Enter / Space 触发主操作

方向键在 Tabs / 表格行 / 列表项间移动
禁用元素 tabindex=-1 且 aria-disabled=true
弹窗打开后焦点落入首个输入，关闭后归还触发元素

09

患者移动端组合示例 · 375–430

温和陪伴；关键信息前置；触控 ≥44px；不出现诊断/处方语气。

打开完整患者端原型

390 × 844

早上好，张明华

今日控糖陪伴

张

今晨空腹血糖事实

8.4mmol/L · 目标 4.4–7.0

略高于目标，建议餐后散步 30 分钟

今日打卡

血糖监测

✓ 已记录

运动

待打卡

AI 健康助手

本周血糖更平稳啦！晚餐可试试把白米饭换成杂粮，餐后散步效果更好哦～（AI 仅供参考，不作医疗建议）

首页

趋势

打卡

我的

设计要点

4 列栅格、槽 16px、触控目标 ≥44px
关键指标卡置顶，大数值 + 目标 + 一句温和提示
风险用图标+文字，不只用颜色
AI 助手文案口语化、鼓励式、附「仅供参考」
底部 Tab ≤4 项；不出现诊断/处方/疗效承诺

10

企微侧边栏组合示例 · 360–420

嵌入企微会话侧边栏：患者摘要 + AI 回复建议，健康管理师一键发送。

380 × 720

智糖健康 · 患者助手

张

张明华

P-2024-0142

重要风险

空腹血糖

8.4

HbA1c

7.8%

达标率

58%

完整度

86%

王医生，我最近空腹血糖有点高，要紧吗？

别担心，我们一起来找原因～

AI 回复建议（可编辑）待人工确认

张先生您好，您近 7 日空腹血糖均值 8.4，略高于目标（4.4–7.0）。建议先记录这几天的饮食与睡眠，我们下次沟通时一起看看，先不要自行调整用药哦。

AI 建议须健康管理师确认后发送；不含诊断与处方。

设计要点

单列窄屏（360–420），信息折叠为摘要 + 会话 + AI 建议
患者摘要含脱敏身份、关键指标、风险标签
AI 回复建议可编辑，「采用并发送」前须人工确认
严格不带诊断/处方语气；高风险自动提示转医生
嵌入企微原生外观，标题栏 + 内容区

— 设计系统结束 · 令牌与组件定义见 tokens.css / tokens.json，规范与映射见 DESIGN-SYSTEM.md / COMPONENT-DATA-MAPPING.md —