selfrelease
118 lines
7.3 KiB
Markdown
118 lines
7.3 KiB
Markdown
# 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）时参考；视觉以后续设计稿为准。
|