# Reflekt Phase 1 屏幕系统
## 广州团队中文执行指南

**适用对象**：广州产品 / UI / 前端 / 客户端 / 测试 / 外包协作团队  
**版本**：1.0  
**重点解决**：状态语气、颜色使用、界面优先级、Luma 显示规则

---

| 这份文件解决什么 | 执行总原则 |
|------------------|------------|
| - 不是把英文稿翻译成中文<br>- 而是变成广州团队可直接执行的规则<br>- 尤其补强颜色、状态、文案和禁止项 | - Reflekt 不是监控台<br>- 不是医院 UI<br>- 不是提醒工具<br>- 而是“家庭安心系统 + 老人尊严感 + 及时行动” |

---

## 一、先给广州团队的结论

1. **默认 80% 场景必须是 Calm / Trust / Quiet 的视觉感受。** 日常不是警报产品。
2. **Family App 首页只回答一个问题：现在需不需要我行动。** 不要把首页做成信息墙。
3. **Luma 屏幕是“远看可读的陪伴界面”，不是可操作的平板界面。** 零按钮、零菜单。
4. **六状态系统必须稳定：** CALM / REMINDER / FAMILY / ALERT / HELP / OFFLINE。不要混色、混语气、混 CTA。
5. **颜色不是装饰，而是状态语言。** 功能色用少一点，反而更高级、更可信。

---

## 二、颜色系统：怎么用，怎么不用

**核心原则**：页面大部分时间要像“安静的家”，不是“控制中心”。因此中性色负责大面积背景，功能色只负责“告诉用户发生了什么”。

### 颜色层级表

| 层级 | 颜色 | Hex | 主要用途 | 禁止做法 |
|------|------|-----|----------|----------|
| 基础背景 | Cloud / Mist | #F4F6F6 / #E8EFEF | App 背景、卡片底、空态 | 不要用纯白把界面打得发亮 |
| 正文文字 | Night / Slate | #141E1E / #5A7070 | 标题、正文、说明文案 | 不要用浅灰正文导致对比不足 |
| 品牌强调 | Teal | #3D9A94 | 品牌点缀、主 CTA、选中态 | 不要全屏刷青色 |
| 状态功能色 | 六状态色 | 见下图 | 状态徽标、轻底色、事件点、关键 CTA | 不要多个状态同时抢主角 |

### 六状态颜色的具体规则

| 状态 | 颜色风格 | 设计意图 |
|------|----------|----------|
| **CALM** | 柔和绿色 | 告诉家属“平稳”，但不要像医院的“通过/合格”系统。 |
| **REMINDER** | 暖棕色 | 表达“生活提醒”，绝不能误导成危险。主标题仍维持“现在一切平稳”。 |
| **FAMILY** | 蓝色 | 表达“连接”，而不是技术消息。让人想到“有人在等你”，不是 IM 软件。 |
| **ALERT** | 柔和砖红/陶土红 | 表达“需要留意”，不要用刺眼大红制造恐慌。 |
| **HELP** | 更深、更重的红色 | 只服务一个最强行动：立即联系老人。 |
| **OFFLINE** | 中性灰 | 表达“不确定”，核心是诚实，而不是装作一切正常。 |

> 图 1 色彩执行总图：中性色做呼吸感，功能色做状态识别。  
> 图 2 Family App 六状态生图示例（方向图，不是最终像素稿）。

---

## 三、Family App：六状态执行表

| 状态 | 首页标题 | 副文案语气 | 主 CTA | 推送 | 禁止项 |
|------|----------|------------|--------|------|--------|
| **平静 CALM** | 现在一切平稳 | 无紧急异常，活动表现正常。 | 查看今日摘要 / 主动问候 | 不推送 | 不要推送；不要塞多条事件；不要像日报后台 |
| **提醒 REMINDER** | 现在一切平稳 | 已发送提醒，但尚未确认。提醒不等于危险。 | 查看今天的提醒 | 不推送 | 不要用“未完成/失败/漏服”作首页核心词 |
| **家人消息 FAMILY** | 现在一切平稳 | 老人给家属留了消息，首页承接 1 条，其余进入消息页。 | 播放消息 / 进入消息页 | 收到老人消息时推送 | 不要做成聊天软件；不要因为老人没回就推送 |
| **关注 ALERT** | 需要你留意一下 | 可能发生跌倒或偏离，需要系统先做现场确认。 | 直接呼叫老人 | 立即推送 | 不要写“已检测到跌倒”；永远先写“可能” |
| **求助 HELP** | 已启动紧急联系 | 老人已明确求助。页面只能保留一个最强 CTA。 | 立即呼叫老人 | 持续推送直到确认 | 不要出现第二 CTA；不要让用户思考 |
| **离线 OFFLINE** | 连接已中断 | 显示最后已知状态与时间，不允许继续说“当前安全”。 | 绕过 Luma 直接呼叫 | 关键断连可推送 | 不要继续显示“当前安全”；不要隐藏最后时间 |

### 首页通用硬规则

- 一屏只表达一个主判断，不要同时放多个危急信息块。
- 状态标题必须是人话，例如“现在一切平稳”“需要你留意一下”，不要写系统词。
- 时间表达要区分：CALM 可用“刚刚更新”；ALERT/HELP/OFFLINE 必须给出精确时间。
- HELP 只允许一个最强 CTA；ALERT 不能有“取消警报”按钮。

---

## 四、Luma 屏幕：广州团队不要做错的地方

- Luma 屏幕不是家属端 App 缩小版。它不是拿在手里的界面，而是放在房间里的“陪伴表面”。
- 因此 Luma 的状态区分主要靠文案、时间、轻标签和音效，不靠复杂色块和按钮。
- 屏幕出现的信息应少而稳：时间、日期、一句关系化文案、一句提示即可。

### Luma 六状态执行表

| 状态 | 建议文案示例 | 可以显示 | 不能显示 | 颜色提示 |
|------|--------------|----------|----------|----------|
| **平静** | 早上好，我在。 | 时间 / 日期 / 一句人话 / 轻提示 | 按钮、菜单、健康数值、Warning、Detected、倒计时警报风格 | 深底 + #3D9A94 轻标签 |
| **提醒** | 快到时间了。 | 时间 / 日期 / 一句人话 / 轻提示 | 按钮、菜单、健康数值、Warning、Detected、倒计时警报风格 | 深底 + #8A7040 轻标签 |
| **家人消息** | 有人给你留了话。 | 时间 / 日期 / 一句人话 / 轻提示 | 按钮、菜单、健康数值、Warning、Detected、倒计时警报风格 | 深底 + #3D6A9A 轻标签 |
| **关注** | 我有点担心。你还好吗？ | 时间 / 日期 / 一句人话 / 轻提示 | 按钮、菜单、健康数值、Warning、Detected、倒计时警报风格 | 深底 + #9A5040 轻标签 |
| **求助** | 我听到了。我现在联系家人。 | 时间 / 日期 / 一句人话 / 轻提示 | 按钮、菜单、健康数值、Warning、Detected、倒计时警报风格 | 深底 + #8A3030 轻标签 |
| **离线** | 我现在网络有点问题，但你仍可以叫我。 | 时间 / 日期 / 一句人话 / 轻提示 | 按钮、菜单、健康数值、Warning、Detected、倒计时警报风格 | 深底 + #5A6060 轻标签 |

### Luma 专属禁止项

- 禁止用“警报”“异常”“已检测到跌倒”等硬机器词。
- 禁止把屏幕做成设置菜单入口；所有操作默认通过语音。
- 禁止显示心率、血氧、血压等医疗数值，Phase 1 不做。
- 禁止把 ALERT/HELP 做成火警或医院监护仪风格。

---

## 五、空状态与安装/首周体验

- **Day 1 空状态**不要做成“暂无数据”。应该告诉家属：Luma 正在认识长辈，并给出一个动作，例如录一段欢迎语。
- **消息页空状态**要把“空”改写成“对话从这里开始”，而不是系统没内容。
- **Quiet Day（安静的一天）**要明确告诉家属：今天平稳、无需操作、可以把手机放下。这个文案本身就是减焦虑。
- **首装逻辑**必须诚实展示 OK / DEGRADED / OFFLINE，并给出原因与一键重试，这一点和广州 SOP 保持一致。

---

## 六、开发交接：前端 / 客户端 / 测试必须落地的点

| 模块 | 必须做 | 可后移 | 验证方式 |
|------|--------|--------|----------|
| **状态系统** | 首页 6 状态、CTA 优先级、精确时间规则、推送策略 | 复杂动画 | 设计稿 + 状态机走查 |
| **颜色系统** | token 命名、状态色轻背景、深底 Luma、禁用红屏 | 主题切换 | 设计评审 + 视觉 QA |
| **安装流程** | OK / DEGRADED / OFFLINE、连接强弱、失败重试 | 高级诊断图表 | 与 SOP 联调 |
| **内容层** | 首页标题、副文案、空状态、Luma 提示语 | LLM 动态文案 | 文案审校 + 回归测试 |
| **可访问性** | 正文 ≥14pt、关键可读性、对比度、减少误触 | 动效微调 | 真机走查（老年人视距） |

### 测试清单（建议直接复制给 QA）

- 切换到 ALERT / HELP / OFFLINE 时，文案、时间格式、CTA 是否正确变化。
- REMINDER 状态首页是否仍保持“安全”主语气，没有误伤用户情绪。
- Luma 页是否出现任何按钮、菜单、复杂 icon；如果有，删掉。
- 断网时是否诚实显示最后时间和本地求助仍可用。
- 弱网/安装失败时是否提供单一 fix tip + 一键 Retest。

---

## 七、禁止做法（这一页很重要）

- 不要把首页做成监控面板：大量图标、数据块、技术状态会毁掉“安心感”。
- 不要在日常状态大量用红/橙高饱和颜色。危险感一旦常态化，真正出事时反而失效。
- 不要把 FAMILY 做成普通 IM/聊天产品；Reflekt 的价值是关系和安心，不是即时通讯。
- 不要让 ALERT 直接跳到“已确认事故”语气；Phase 1 必须保留“可能”和“正在确认”。
- 不要让 HELP 页面出现第二选择，尤其不要出现“稍后处理”“查看详情”等分散动作。
- 不要因为想做高级感而降低中文可读性：小字、浅灰、细字、过多英文都不行。

---

## 附录 A：给前端的 token 对照表（建议直接建变量）

| 变量名 | Hex | 中文说明 | 建议用途 |
|--------|-----|----------|----------|
| `color-bg-cloud` | #F4F6F6 | 云雾白 | 全局背景 / 大面积留白 |
| `color-bg-mist` | #E8EFEF | 薄雾灰 | 次级背景 / 轻分隔 |
| `color-text-primary` | #141E1E | 深夜黑 | 主标题 / 关键文本 |
| `color-text-secondary` | #5A7070 | 石板灰 | 说明文案 / 次级信息 |
| `color-brand-teal` | #3D9A94 | Reflekt 青绿 | 品牌点 / 主 CTA / 激活态 |
| `state-calm` | #4A8A5A | 平静绿 | CALM 徽标 / 轻背景 / 安全确认 |
| `state-reminder` | #8A7040 | 提醒棕 | REMINDER CTA / 事件点 |
| `state-family` | #3D6A9A | 连接蓝 | FAMILY 消息入口 / 蓝色标签 |
| `state-alert` | #9A5040 | 关注陶土红 | ALERT 标签 / 时间线提示 |
| `state-help` | #8A3030 | 求助深红 | HELP 唯一 CTA / 紧急标签 |
| `state-offline` | #5A6060 | 离线灰 | OFFLINE 标签 / 问题状态 |

---

## 附录 B：交付建议

- **设计端**：把本文件的图 1 / 图 2 / 图 3 作为方向板，再出 Figma 组件化规范。
- **前端端**：按附录 A 建 token，避免页面里写死颜色。
- **产品端**：先锁定 P0（六状态首页 + Luma 六状态 + 空状态 + 安装 truth layer），不要一次铺太多花活。
- **测试端**：优先验状态切换、断网诚实性、CTA 唯一性、中文文案气质。

---

**Reflekt Phase 1 屏幕系统**  
广州团队中文执行指南 v1.0