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