# 3-ui-style-PCM · 孕产个案管理平台 UI 设计风格指引

> 项目缩写：**PCM**　关联：`1-prd-PCM.md`（PRD）、`2-task-PCM.md`（T-8.1 孕妇端）
> 风格参考：CapCut 新版 AI-first 首页（https://ychenw.github.io/capcut-app-optimization/）
> 定位：借鉴参考页的**布局与交互模式（AI 对话优先 + 意图驱动）**，但配色与语气换为**温暖、柔和、低焦虑**的孕产健康风格。
> 适用范围：**孕妇端 / 家属端（移动端）为主**；医护/运营端（PC）沿用专业后台规范，仅复用品牌色与组件。

---

## 1. 设计原则

1. **对话优先（AI-first）**：孕妇端首页即"和孕期助手聊天"，AI 是主入口，而非功能菜单堆叠。（对应 REQ-7 / REQ-10.1）
2. **意图驱动**：用"你今天想做什么/问什么"引导，而非罗列工具。降低使用门槛。
3. **温暖低焦虑**：健康场景不制造恐慌，视觉柔和、语气有温度、预警分级克制。（对应 NFR-5）
4. **分层递进**：上层放 AI 与关怀，下层才是录入/档案/报告等"功能"。
5. **可及性优先**：大字号、高对比、单手可达、操作路径短（孕妇可能疲惫/视力变化）。

## 2. 借鉴参考页的交互模式（保留）

| 参考页元素 | PCM 孕妇端对应 |
|------------|----------------|
| "Chat to bring ideas alive" 聊天主入口 | "孕期助手"对话作为首页核心 |
| "What are you making today?" 意图卡片 | 孕期场景意图卡片（见 §5）|
| Quick Starts 最近项目缩略图 | "今日健康"：今日待办/打卡/最近指标 |
| "For detailed edits" 专业工具区（下层）| "更多功能"：录入、档案、报告（下层）|
| 底部 5 Tab 导航 | 底部 4 Tab（见 §6）|
| 大圆角卡片、网格、卡片式 CTA | 沿用大圆角卡片式布局 |

## 3. 视觉语言（与参考页的差异：暖而非炫）

> 参考页是深色炫酷风；PCM 改为明亮温暖风。以下为**建议方向**，最终以视觉设计稿为准。

- **基调**：明亮、柔和、亲和。浅色背景为主，避免深色压抑。
- **主色（建议）**：柔和的暖色系——温柔粉/蜜桃、奶绿、暖米白；点缀低饱和的安心蓝/绿。
- **语义色**：
  - 正常/安心：柔和绿
  - 注意/提醒：暖黄（非刺眼）
  - 高风险/红旗：克制的红/橙，**仅用于真正紧急**，避免日常滥用造成焦虑
- **圆角**：大圆角（卡片、按钮、对话气泡），传达柔和。
- **字体**：无衬线、字号偏大、行距宽松，保证可读性。
- **图标/插画**：圆润、亲和的孕育主题插画，弱化"医疗冰冷感"。
- **留白**：充足留白，信息密度低，减少认知负担。

## 4. 语气（Voice & Tone）

- 像一位**温柔、专业、可靠的孕期陪伴者**，不是冷冰冰的系统。
- 鼓励、肯定、非评判（如"今天也记录啦，真棒～"而非"你已 3 天未测量"）。
- 预警措辞分级、克制、给行动指引，不渲染恐慌。
- 中文为主，口语化、亲切。

## 5. 孕妇端首页结构（核心页）

```
┌─────────────────────────────┐
│  问候 + 孕周 + 今日一句关怀          │  ← 顶部：温暖问候，显示孕XX周
├─────────────────────────────┤
│  [ 和孕期助手聊聊… ]  💬           │  ← 聊天主入口（AI-first）
├─────────────────────────────┤
│  今日健康                          │  ← Quick Starts 对应
│  [今日打卡] [血糖趋势] [产检提醒]     │
├─────────────────────────────┤
│  你可能想问 / 想做                  │  ← 意图卡片（意图驱动）
│  ┌──────┐┌──────┐┌──────┐      │
│  │我能吃X吗││记录血糖 ││今天注意啥│     │
│  └──────┘└──────┘└──────┘      │
├─────────────────────────────┤
│  更多功能                          │  ← 下层：录入/档案/报告
│  [手动录入][健康档案][我的报告][调养] │
└─────────────────────────────┘
   首页(助手)   数据   任务/打卡   我      ← 底部 Tab
```

### 意图卡片示例（替代参考页的"Create a vlog"等）
- "我能吃这个吗？" → 触发知识库问答（REQ-7）
- "记录今天的血糖/血压" → 手动录入（REQ-1）
- "今天该注意什么？" → 个性化关怀与计划提醒
- "预约/查看产检" → 计划与提醒
- "孕期不适怎么办" → 知识问答 + 必要时升级

## 6. 底部导航（孕妇端）

| Tab | 内容 |
|-----|------|
| 首页（助手）| 聊天主入口 + 今日健康 + 意图卡片 |
| 数据 | 指标录入、趋势、健康档案 |
| 任务/打卡 | 提醒、打卡、（V2 游戏化）|
| 我 | 个人信息、家属授权、设置、隐私 |

## 7. 关键组件规范（要点）

- **对话气泡**：AI 答复必须**附知识来源**（REQ-7.2 溯源），样式轻量可点开。
- **预警卡片**：分级配色；高风险/红旗用醒目但不惊悚的样式，附"立即就医/联系管理师"明确按钮（REQ-5）。
- **提醒卡片**：温和提示，可一键完成打卡；高风险孕妇运动提醒自动替换为休息（REQ-9.2）。
- **录入控件**：大按钮、少步骤、支持快速重复录入。

## 8. 与医护/运营端（PC）的关系

- PC 端为**专业工作台**（信息密度高、表格/看板/详情），不套用孕妇端的暖萌风。
- 跨端**共享品牌色、字体、核心组件库**，保持品牌一致。
- 设计交付建议：建立统一 Design Token（颜色/间距/圆角/字号）+ 组件库，双端复用。

### 8.1 医护端孕妇详情：两页（胶囊 Tab）
- 详情页用**胶囊式分段控件（segmented pill）**切换两页，默认「工作台」：
  - **工作台**：处置执行台（态势→待处置队列→处置工作区→个案流程/计划/红旗）——行动视角。
  - **健康档案**：数据汇集（指标概览/趋势/全部观测/动态时间线/身心/静态档案）——数据视角。
- 胶囊 Tab 置于孕妇头内，切换不离开当前孕妇；保持专业中性风（非暖萌），高信息密度、可达性字号/对比度达标。
- **终端适配**：医护端移动形态以**平板(iPad)** 为主，按 iPad 适配——iPad 横屏(≥1024px)用左右 master-detail，iPad 竖屏(<1024px)上下堆叠/队列抽屉化；触控友好（点按区≥44px、无悬停依赖）；手机仅轻量查看。
- 规格详见 `6-exec-PCM.md` §5（工作台）与 `7-indicator-PCM.md` §13（健康档案）。

## 9. 待确认 / 下一步
- [ ] 品牌主色与 Logo（待运营方品牌输入）
- [ ] 是否区分 App / 小程序（影响交互与组件选型）
- [ ] 高保真视觉稿（建议先出孕妇端首页 + 对话页 + 预警页）
- [ ] 如有参考页截图，可拖入对话以做更精准的视觉还原

---
> 本文为风格指引，供阶段 5 实现孕妇端（T-8.1）时参考；视觉以后续设计稿为准。