跳到主要内容

原型设计：Luma App

本文档基于以下需求文档整合而成：

  • 《需求洞察》docs/03_design/03_00_requirements.md
  • 《核心流程验收》docs/03_design/03_10_core_process.md
  • 《Reflekt Health UI+UX设计执行手册》raw/Reflekt Health UI+UX设计执行手册_完整版.md
  • 《Luma Daily Presence Playbook v1.2》 raw/ui_design_guide/Luma_Daily_Presence_Playbook_v1.2.html — 所有 Luma 界面设计的上游文件
  • 《Reflekt Reminder System Design Dev Spec v1.1》 raw/ui_design_guide/Reflekt_Reminder_System_Design_Dev_Spec_v1.1.html
  • 《Luma US Onboarding Design Guide》 raw/ui_design_guide/Luma_US_Onboarding_Design_Guide.pdf
  • 《Reflekt Home Redesign v2.2》 raw/ui_design_guide/Reflekt_Home_Redesign_v2.2.html

一、页面交互流程图​

二、全局UI/UX设计要求​

2.1 目标用户特征​

用户类型特征描述设计考量
主要用户75岁以上独居老人，美国市场需要极简交互，每屏关键信息≤3个
典型年龄段75-90岁可能视力下降、听力减退、手指灵活度降低
使用场景日常起居、休息时被动接收信息为主，主动操作极少
情感需求被关怀、不孤独、有尊严反感"监控"感觉，需要温暖、非医疗化语言
痛点学习能力下降、对科技产品陌生需要语音优先，大字体，大触摸目标

2.2 客户端设备能力​

维度规格说明
产品形式带屏音箱（横屏放置）固定位置使用，锁定横屏显示
屏幕尺寸10.1寸适合大字体、大触摸目标
屏幕分辨率800×1280 px（横屏）使用 dp/sp 而非 px 确保不同密度显示一致
安全区域顶部/底部 24-48dp，两侧音箱区域触摸目标≥60×60pt
设备交互语音唤醒 + 触摸屏 + 物理按键三通道交互，语音为主
语言全英文（美国市场）所有文字、语音、TTS均为英文

2.3 六状态系统定义​

来源：《Luma Daily Presence Playbook v1.2》—— 所有 Luma 界面设计的上游文件

状态英文名主题色触发条件老人端表现核心任务
01CALM绿色 #4A7C6F无其他状态条件满足时的默认状态被动陪伴，无主动语音让老人感到"有人在，但不打扰"
02REMINDER琥珀 #7C6B3Freminder_due / reminder_approaching（-30min）主动播报提醒，确认完成帮老人记着事，但不制造压力感
03FAMILY蓝色 #4A5F8Afamily_message_received / call_request / sunday_story展示家人消息卡片维持家人连接感
04ALERT深红 #8A4A3Ffall_detected / inactivity>2h / health_critical"Are you okay?"询问（老人端不显示ALERT字样）系统主动发现，先询问老人再决定是否通知家属
05HELP更深红 #7C3F3Fvoice_help_request / emergency_button / ALERT无回应升级立即联系家属老人主动求助，直接响应支持
06OFFLINE灰色 #5A5A5Adevice_offline / cloud_disconnected / data_stale_timeout离线提示，显示911备用呼叫断网时不能继续显示假安心，必须诚实告知

ALERT vs HELP 关键区分：

维度ALERT（系统主动发现）HELP（老人主动求助）
发起方系统检测到异常，老人尚未主动求助老人说"帮我"或按紧急按钮
老人端话术"Mary, I'm a little worried." / "Are you okay?"立即响应，直接通知家属
语气安抚、确认、不惊慌响应、支持、陪伴
升级流程先询问老人，再决定是否通知家属直接通知家属，不需确认

2.4 核心设计哲学（四大设计铁律）​

源自《Reflekt Health UI+UX设计执行手册》

设计铁律执行要求禁止示例
Law 1: 冷静技术界面视觉保持绝对安静，不主动吸引注意力，除非万不得已闪烁元素、非紧急声音/震动、高饱和警告色块
Law 2: 解读，而非展示把机器数据"翻译"成温暖人类语言，永远不要让用户做数据分析展示"睡眠效率78%"、"心率75bpm"、步数等原始数据
Law 3: 在场，而非评判语气中立、尊重、非指导性"你昨晚没睡好"、"你今天活动不够"
Law 4: 克制带来信任选择不展示什么比展示什么更重要多个卡片、图表、"查看详情"入口

2.5 Luma 屏幕设计五大原则​

源自《Luma Daily Presence Playbook v1.2》使用原则

  1. 先给结论：屏幕只做一件事——帮老人快速理解当前状态，给出下一步
  2. 状态/事件分层：状态（CALM/REMINDER等）与具体事件（消息卡片、提醒）不能混在同一层级
  3. 第一人称陪伴感：Luma 用"我"说话，像人在陪伴，不像设备在报告
  4. 真实有用信息：第二层显示一条真实信息（提醒/家人消息），不空泛安抚
  5. 克制带来信任：不显示数据、不制造焦虑、不给压力

2.6 Luma 首页信息层级结构​

来源：《Reflekt Home Redesign v2.2》— Luma 音箱端首页改版建议

Luma 不是有"首页"的 App，而是一个持续存在的陪伴界面。屏幕被动的，只在有话要说时才说。整体信息层级如下：

层级内容作用备注
01时间 + 日期（去掉情境形容词，让问候语本身承载温度）建立稳定感不需要"A calm morning"这类形容，问候语更重要
02个性化问候 + 一个真实有用的信息体现陪伴与价值动态内容，优先显示最相关信息
03Luma 的存在感声明："I'm here if you need me." / "Just say my name."建立安全感，降低使用门槛不做按钮，是引导文字，被动显示。语气用第一人称，像人，不像设备
04Get help（底部文字）承接求助场景Help 不能是唯一显性入口

三个首页问候版本​

来源：《Reflekt Home Redesign v2.2》— 推荐三个文案版本

版本类型适用场景屏幕文案示例
A提醒型当天有提醒待触发时"Good morning, Mary." / "Almost eleven — I'll let you know when it's time." / "I'm here if you need me."
B家人连接型有家人消息待播放时"Good morning, Mary." / "Lily left you a message this morning. Want to hear it?" / "Just say my name."
C安静陪伴型无待处理信息的平静早晨"Good morning, Mary." / "Quiet morning today. I'm right here." / "I'm here if you need me."

注意：版本 C 中不用"Would you like to start your day?"——那是设备语言。Luma 不需要问老人"要开始了吗"，Luma 已经在陪伴了。问这个问题反而制造距离感。

首页文案替换对照​

当前表达（需替换）建议替换改写理由
"Everything is quiet at home.""Quiet morning today. I'm right here."Luma 用第一人称说话，从"它在报告"变成"它在陪伴"
"All is well."版本 A/B/C 之一空洞，没有内容，不产生安心感
"Your next reminder is at 11:00 — take your morning medication.""Almost eleven — I'll let you know when it's time."去掉药名和命令语气。Luma 告诉 Mary"我在帮你记着"，不是发指令
"Say 'Hey Luma' anytime""I'm here if you need me." / "Just say my name."老人不需要被教操作步骤，需要知道"有人在"
"Would you like to start your day?"（删除，不使用）设备在等待指令，像 Siri 而不是陪伴者
"Help"（孤立按钮）"Need help? Just say 'Luma, help me.'"完整自然语言比孤立按钮更清楚，降低使用门槛

2.7 六状态语音脚本​

来源：《Luma Daily Presence Playbook v1.2》— 每个状态的 Luma 语音脚本

CALM 状态​

类型触发时机语音内容
晨间问候每天一次，起床后检测到活动"Good morning, Mary."
平静状态无主动语音CALM 状态下 Luma 不主动说话。沉默本身是陪伴，不是缺失
低频正面信号每周最多 1-2 次"Lily mentioned she's been thinking of you."

注意：不说"Hope you slept well"——Luma 不评价老人的睡眠，也不做评判。简单、稳定、真实。

REMINDER 状态​

类型触发时机语音内容
提醒预告提醒时间前约30分钟"Mary, it's almost time for your morning tablets."
提醒播报到达提醒时间"Mary, it's time for your morning tablets."
无人回应时提醒发出后无响应"Just checking in, Mary. It's a little past eleven."
Snooze 延迟延迟5分钟后再次提醒同提醒播报内容

重要：说任务类型，用生活语言。"morning tablets"是老人自己会用的词，不是医院用词。不说药名、剂量、医嘱格式。

FAMILY 状态​

类型触发时机语音内容
消息到达家属发送消息后"Mary, Lily left you a message this morning. Would you like to hear it?"
消息已读确认老人确认播放"Good. Lily will be happy you heard it."

ALERT 状态​

类型触发时机语音内容
场景A：可能跌倒fall_detected 触发"Mary, I'm a little worried. Are you okay? You can say 'I'm okay' or 'I need help'."
场景B：长时间不活动inactivity > 2h 触发"Mary, I haven't heard from you for a while. Just checking in — are you okay?"
老人回应"I'm okay"收到确认"Good to hear, Mary. I'll let Lily know you're doing fine."
无回应（30秒后升级）无语音回应"Mary, I'm going to call Lily now just to make sure everything's alright."

注意：语气稳定，不惊慌。"I'm a little worried"是人话，不是系统报告。不说"emergency"。

HELP 状态​

类型触发时机语音内容
立即响应老人说"帮我"或按紧急按钮，或 ALERT 升级"Mary, I hear you. I'm calling Lily right now."
通知已发出联系家属确认中"I'm here with you, Mary. Help is on the way."

OFFLINE 状态​

类型触发时机语音内容
断网检测设备检测到离线"I'm currently offline, but I can still help with your reminders."
SOS 在离线状态离线时按下SOS"I understand you need help. Please call 911."

2.8 Luma 文案语气规则（通用规则）​

来源：《Luma Daily Presence Playbook v1.2》— 适用于所有状态的语言硬性规定

规则说明
第一人称"I'm here" 不是 "System is monitoring"
有关系锚点用家人名字，不说"your family member"
不确定性语言异常时说 "looks like / might be"，不说"detected"
给老人示例，不绑定固定词ASR/NLU 必须接受自然表达，屏幕和语音只做引导示例
只承诺你能确认的事家属未接听前不说"help is on the way"，说"I'm calling Lily now"
REMINDER 用生活语言"morning tablets" 可以说，"Amlodipine 5mg" 不可以说
短句每条语音不超过两句话
时间戳分情况非警报用人性化时间，警报状态精确到分钟

2.9 禁止词汇清单​

来源：《Luma Daily Presence Playbook v1.2》— 在老人端任何界面均不得出现

禁用词/短语原因
Amlodipine / [任何药品名]医疗化语言
Medication due医疗化语言
health医疗化语言
detected设备报告语言
monitoring监控感
alert老人端不显示 ALERT 字样
sensor设备报告语言
status设备报告语言
system设备报告语言
calm内部命名，老人端不显示
pleasant空泛，不产生真实安心感
All is well空洞，没有实际价值
Everything looks great空泛
Help is on the way未确认前禁止承诺
Appointment scheduled医疗化语言

2.10 屏幕与交互规则​

规则说明
被动显示Luma 屏幕无任何可点击按钮或菜单
低频正面信号CALM 状态主动语音每周不超过 2 次
情感收尾每次 ALERT/HELP 解决后，家属端显示一次收尾语
OFFLINE 诚实显示断网时不继续显示 CALM 文案，那是假安心
禁止倒计时器任何状态下均禁止
禁止红色闪烁背景会引发恐慌
禁止"取消警报"按钮误报反馈事后做
禁止任何健康数值、百分比、评分不展示原始数据

2.11 色彩体系​

基础色板（v2.2 更新版）​

来源：《Reflekt Home Redesign v2.2》— 统一的暖色系基础色板，适用于 FAP 预览模板和 LSP 配置界面

:root {
  /* 文字色 */
  --ink: #1A1814;           /* 主文字/标题 */
  --ink-mid: #4A4540;        /* 次要文字 */
  --ink-soft: #7A7570;      /* 辅助文字 */
  --ink-dim: #B0AAA5;        /* 禁用/占位文字 */

  /* 背景色 */
  --paper: #F8F6F2;          /* 全局背景 */
  --paper2: #F0EDE8;         /* 次级背景 */
  --paper3: #E8E4DE;         /* 三级背景/分割线 */
  --white: #FFFFFF;          /* 卡片底色 */

  /* 功能色 */
  --green: #2D6A4F;         /* 安全/确认状态 */
  --green-bg: #EAF4EF;       /* 安全背景 */
  --green-mid: #4A8C6A;      /* 安全次要 */
  --amber: #92400E;          /* 注意/提醒状态 */
  --amber-bg: #FEF3C7;       /* 注意背景 */
  --amber-mid: #B45309;      /* 注意次要 */
  --red: #991B1B;            /* 紧急/危险状态 */
  --red-bg: #FEF2F2;         /* 紧急背景 */
  --blue: #1E3A8A;           /* 链接/互动元素 */
  --blue-bg: #EFF6FF;       /* 链接背景 */
  --teal: #0F766E;           /* 老人自设提醒 */
  --teal-bg: #CCFBF1;       /* 老人自设背景 */

  /* 边框 */
  --border: rgba(26,24,20,0.1);    /* 主边框 */
  --border2: rgba(26,24,20,0.06);  /* 次边框 */

  /* 禁用色 */
  --medical-blue: #007AFF;   /* 医疗蓝 — 禁止 */
  --bright-red: #FF3B30;     /* 亮红 — 禁止 */
}

6 状态色板（与 FAP 一致）​

状态TokenHex用途
平静--state-calm#4A8A5ACALM 徽标、轻背景、安全确认
提醒--state-reminder#8A7040REMINDER CTA、事件点
家人--state-family#3D6A9AFAMILY 消息入口、蓝色标签
警报--state-alert#9A5040ALERT 标签、时间线提示
求助--state-help#8A3030HELP 唯一 CTA、紧急标签
离线--state-offline#5A6060OFFLINE 标签、问题状态

Luma 设备屏幕暗色主题（实际设备显示）​

重要：Luma 设备是暗色背景固定屏，与 FAP 暖色预览模板不同。设备端使用以下暗色配置：

元素颜色值说明
设备背景#0D1117深色背景，夜间不刺眼，适用于房间远距离观看
时钟文字rgba(255,255,255,0.85)高对比度可读，120px Cormorant Garamond
日期文字rgba(255,255,255,0.3-0.45)低对比度辅助，28px
问候语文字rgba(255,255,255,0.85)主体内容，42px Cormorant Garamond
信息文字rgba(255,255,255,0.6)次要信息，1.5倍行高
存在感声明rgba(255,255,255,0.4)斜体，屏幕底部被动提示
SOS 按钮渐变 #9B4444 → #8B3A3A → #7A3030紧急求助，柔和深红，不闪烁

预览模板 vs 实际设备​

场景背景色说明
FAP 预览模板（fap/home.html）--paper: #F8F6F2暖白底，深色文字，移动端预览
LSP 预览模板（lsp/home.html）--paper: #F8F6F2暖白底，用于开发调试时的预览
Luma 设备屏幕（实际显示）#0D1117深底暗屏，房间远距离可读

LSP 预览模板中的 .device-screen 背景色由 [data-state="*"] CSS 选择器控制，动态切换为对应的 --state-*-bg（深底变体）。设备端实际运行时使用原生暗色背景。

设计禁止色​

禁用色Hex禁用原因
医疗蓝#007AFF会让产品像医疗器械
亮红#FF3B30会引发强烈恐慌

Luma 屏幕暗色主题（设备实际显示）​

元素颜色值说明
背景#0D1117深色背景，夜间不刺眼
时钟Fraunces 32px, rgba(255,255,255,0.85)高对比度可读
日期10px, rgba(255,255,255,0.3-0.45)低对比度辅助信息
问候语Fraunces 16px, rgba(255,255,255,0.85)主体内容
信息文字12px, rgba(255,255,255,0.6)次要信息，1.5倍行高
存在感声明10px, 斜体, rgba(255,255,255,0.4)屏幕底部提示

2.12 字体规范​

字体家族​

字体属性规范解释
西文字体Publico Text / Source Sans Pro / Fraunces笔画有轻微粗细变化，更自然温暖
中文字体苹方-常规体(PingFang SC) / 思源黑体-常规体与西文风格匹配，确保易读性
字重常规体(Regular) / 中等(Medium)禁止使用细体(Light/Thin)或特黑体(Black/Heavy)
等宽字体JetBrains Mono用于时间戳、状态代码等

字号Token（工程落地版）​

Token用途字号说明
ls-timeLuma时钟显示32px, Fraunces, -1px字间距必须一屏读完
ls-greetingLuma问候语16px, Fraunces第一人称温暖表达
ls-infoLuma信息文字12px, 60%透明度, 1.5倍行高次要说明信息
ls-presenceLuma存在感声明10px, 斜体, 40%透明度屏幕底部被动提示
S-H1老人端大标题/确认问句28-48px必须一屏读完，不换行优先
S-Body老人端正文/提示22-26px≥1.35倍行高
S-CTA老人端主按钮24-30px按钮高度≥60dp

工程规则：开启系统字体缩放（Dynamic Type / Font Scale），用户放大字体时页面保持不截断

2.13 间距与圆角​

元素数值说明
页面左右边距24dp标准内容区域边距
卡片内边距16-24dp卡片内容与边缘的距离
卡片圆角12-16dp卡片整体圆角
按钮圆角8-12dp按钮圆角
列表项间距12-16dp垂直列表项之间的间距
卡片间距16dp卡片之间的垂直间距
阴影0 0 0 1px rgba(26,24,20,0.09)微阴影，不喧宾夺主

2.14 图标设计​

风格要求说明设计要点
圆润所有尖角处理成半径≥2px圆角尖角带来攻击性，圆角更安全友好
实心优先使用实心图标实心更具"存在感"和"稳定性"
表意具体表示"睡眠"用床或月亮，而非脑电波用户不需要猜测图标含义，必须一望即知
无按钮Luma老人端不做可点击图标所有交互通过语音触发，屏幕被动显示

2.15 交互设计规范​

规范项要求
语音优先大部分操作通过语音完成，屏幕仅作为辅助入口
被动显示老人端屏幕无按钮、无菜单，被动展示信息
点击反馈所有可点击元素有点击态（背景色变化或轻微缩放）
过渡动画页面切换使用平滑过渡 (300ms ease-in-out)
骨架屏数据加载时显示骨架屏占位
空状态列表为空时显示友好提示+引导操作
人性化时间"Just now" / "A little while ago" / "Earlier this morning"
第一人称Luma 用"我"说话，像人在陪伴，不像设备在报告
不主动打扰CALM状态下 Luma 不主动说话，沉默本身是陪伴

2.16 FAMILY 状态控频硬规则​

规则说明
同一时段有未播放消息时，不重复打断以"待播放状态"停留在屏幕，不反复语音播报
消息播报后进入等待老人没有回应时，不再催促，不升级为提醒
Sunday Story 每周最多触发一次老人拒绝后，本周不再询问
禁止同一条消息播报超过一次
禁止"Lily sent you 3 messages"堆积消息通知
禁止因为老人没有回复而向家属发送"Mary hasn't replied"不制造内疚感

FAMILY 是一等公民，但不是高频打扰。Luma 是桥梁，不是消息机。陪伴感来自存在，不来自频繁提醒。

三、Onboarding 用户体验设计​

来源：《Luma US Onboarding Design Guide》

3.1 欢迎页面​

元素内容
LogoLuma 图标和名称（位于页面顶部）
主标题"Welcome to Luma"
副标题"Your voice companion for a healthy life"
主CTA"Get Started"
次级链接"Already have an account? Sign In"

3.2 核心功能展示（3页轮播）​

页码图标标题描述
1心形/脉搏"Monitor Your Health""Luma tracks your daily activity, sleep, and vital signs to help you stay on top of your wellness goals."
2麦克风"Voice-First Experience""Use simple voice commands to check your health metrics, set reminders, and get personalized insights."
3闹钟"Smart Reminders""Never miss a dose or appointment. Luma sends gentle reminders tailored to your schedule."

3.3 首次使用指导​

  • 标题："Let's set up your Luma experience"
  • 内容说明 Luma 智能音箱的功能
  • 提示用户需要准备 Luma 设备
  • 提供"Learn More"链接了解 Luma 设备信息

3.4 语音设置​

设置项说明
语音唤醒词默认"Hey Luma"，支持自定义
语音训练简短语音样本录制，帮助设备更好识别用户声音
语音反馈音量调节、开关选项、语速选择（慢速/正常/快速）

3.5 应用权限​

权限类型权限名用途拒绝后果
必需麦克风语音命令和语音输入无法使用语音功能
必需通知健康提醒和重要更新无法接收提醒
可选位置提供本地化健康建议功能受限
可选健康数据同步与 Apple Health / Google Fit 同步功能受限

四、提醒系统设计​

来源：《Reflekt Reminder System Design Dev Spec v1.1》

4.1 默认提醒库（六大生活维度）​

默认提醒库围绕老年人真实生活场景设计。分六个生活维度，共 30+ 条默认提醒。老人可以从这里选择，也可以完全自定义。

类别优先级说明
🚪 出门安全高频带钥匙、带手机、关煤气、关电器、带伞、多穿衣
💊 健康节奏安全级用药提醒、医生预约、多喝水、活动提醒、准备休息
💬 家庭连接温暖级给儿女打电话、家人生日、回复消息、记录今天的事
🌅 生活仪式日常级看新闻、给植物浇水
🌤️ 季节/天气系统自动雨天带伞、天冷多穿衣等，系统根据天气自动触发
✏️ 自定义自设老人和儿女均可完全自定义内容

出门安全类提醒（示例）​

提醒内容语音文案示例类型
出门带钥匙"Mary, don't forget your keys on your way out."自设
出门带手机"Your phone — make sure you have it before you head out."自设
出门前关煤气"Before you go — did you turn off the stove?"协作
出门关电器"TV and lights — everything's off?"自设
雨天带伞"Rain's coming. Grab an umbrella on your way out."自设
天冷多穿衣"It's chilly out. An extra layer would feel good."自设

健康节奏类提醒（示例）​

提醒内容语音文案示例类型
早间用药"Mary, almost eleven. Your morning tablets are on the table."安全
晚间用药"Almost bedtime. Don't forget tonight's tablets."安全
多喝水"Haven't had water in a while. A glass would feel nice."自设
起身活动一下"You've been sitting for a while. A little stretch would feel good."自设
医生预约提醒"You have a doctor's visit tomorrow morning. Leave a little early."协作
准备休息"Getting close to ten. Ready to wind down?"自设

家庭连接类提醒（示例）​

提醒内容语音文案示例类型
给儿女打电话"It's Sunday. Lily might be waiting to hear from you."协作
家人生日提醒"Tomorrow's Lily's birthday. Have you thought of something nice to say?"协作
回复消息"Lily left you a message. Want to hear it?"系统自动
记录今天的事"Anything you'd like to tell Lily about today?"自设

生活仪式类提醒（示例）​

提醒内容语音文案示例类型
看新闻"Six o'clock news is starting soon."自设
给植物浇水"The plants on the balcony — have they been watered?"自设

类型说明​

类型标签说明
自设老人自己设置，儿女看不到内容
协作儿女建议，老人确认后生效
安全系统自动触发，老人可暂停但不可永久删除

4.2 提醒设计规则​

规则说明
最多 5 条活跃提醒单个老人同一时间活跃提醒不超过 5 条，超出提示老人清理
安全提醒可暂停不可删除安全类提醒（如用药）老人可暂停但不可永久删除
"Missed"不显示给家属家属端不显示"Missed"状态，不制造内疚感
生活语言"morning tablets"可以说，"Amlodipine 5mg"不可以说
关系锚点"Lily suggested this reminder"而非"Family reminder"
不用感叹号语气平和，避免紧迫感
不用"必须"/"应该"建议而非命令

4.3 提醒状态流转​

REMINDER PENDING → REMINDER DUE → REMINDER ACK（完成）→ CALM
                              ↘ REMINDER SNOOZE（延后5分钟）→ REMINDER DUE
                              ↘ REMINDER MISSED（未响应）→ 升级处理（不通知家属）

4.4 Luma 提醒屏幕规格​

元素规格
DONE 按钮绿色 #4A7C6F，尺寸≥80×80pt，圆角 8-12dp
SNOOZE 按钮琥珀色 #7C6B3F，尺寸≥80×80pt，圆角 8-12dp
提醒图标💊用药 / 📅日程 / 💧喝水 / 📞通话，用实心图标
文案第一人称，带关系锚点，如"Mary, it's time for your morning tablets."

五、页面清单​

一、设备初始化阶段​

序号页面名称交互入口界面排版描述前端交互描述接口交互描述对应需求
1配网/绑定二维码页首次上电自动进入屏幕中央显示设备绑定二维码（尺寸≥200×200dp），下方显示"Please use family app to scan and pair"文字说明，底部显示简易指引步骤（1.Open App 2.Scan QR 3.Wait for connection）。顶部显示设备名称/型号首次上电自动进入此页面；二维码包含设备唯一码（UUID）；支持点击"Skip"跳过（用于已绑定设备）。等待App扫描连接时显示"Waiting for scan..."动画通过BLE接收App下发的WiFi信息；WebSocket长连接与后端通信；每5秒发送心跳包US-05：设备开箱绑定
2WiFi连接引导页自动进入：配网成功后自动进入屏幕显示连接进度动画（大号圆形加载动画），文字提示"Connecting to your WiFi..."，成功后提示"Connected!"并显示已连接WiFi名称。失败时显示错误图标和可操作指引接收App通过BLE传入的WiFi SSID和密码；尝试连接WiFi；连接结果实时上报后端。提供"Try Again"和"Change Network"按钮通过BLE接收WiFi配置；HTTP/WebSocket上报连接状态US-05：设备开箱绑定
3设备自检页自动进入：WiFi连接成功后自动进入屏幕显示自检进度列表，每项一行：Microphone、Speaker、Screen。每项通过后显示静谧绿对勾(✓)+"Passed"（#4A7C6F），失败显示深灰叉(✗)+"Needs attention"（#5A5A5A）。自检完成后显示汇总结果自检程序自动启动；检测结果实时更新；支持单个项目"Retry"；全部通过后显示"Setup Complete"进入下一步。任一关键项失败则阻止进入主界面WebSocket上报自检结果到后端US-05：设备开箱绑定
4绑定成功与SOS测试引导页自动进入：自检全部通过后自动进入屏幕显示"Congratulations!"成功提示，下方显示"Testing your emergency call"文字。显示SOS测试步骤说明：1.Press the SOS button 2.Say "Call my family"。底部显示"Start Test"大按钮（静谧绿#4A7C6F，≥60×60pt）点击"Start Test"后触发SOS模拟事件；显示"Calling..."动画；测试完成后显示"Test Successful"并提示已保存紧急联系人顺序。提供"Done"按钮进入主界面WebSocket上报SOS测试事件到后端；后端触发模拟通知流程US-05：设备开箱绑定

二、六状态系统核心交互​

序号页面名称状态界面排版描述前端交互描述接口交互描述对应需求
5主界面/CALM待机页CALM遵循首页四大层级原则：时间（32px Fraunces）+ 日期（10px）+ 问候语（第一人称）+ 真实有用信息（版本A/B/C之一）+ 存在感声明（"I'm here if you need me."）。禁止：不显示任何数据、指标或健康数值显示温暖问候语；点击屏幕进入语音交互模式接收后端下发的主动问候（Magic Morning）并TTS播报；接收后端下发的提醒/关怀指令；WebSocket保持长连接心跳(30秒/次)US-16：老人日常与Luma互动
6REMINDER提醒页面REMINDER全屏提醒卡片：顶部显示提醒类型图标（💊用药/📅日程/💧喝水），中部显示提醒内容文字（≥24pt），底部显示"DONE"大按钮（绿色#4A7C6F，≥80×80pt）和"Snooze"按钮（琥珀色#7C6B3F）。遵循Reminder文案规则：使用第一人称，带关系锚点收到后端下发的提醒播报指令后立即显示；启动TTS播报提醒内容；用户点击DONE上报确认结果；点击Snooze则延迟5分钟后再次提醒WebSocket接收提醒播报指令；上报用户确认/延后/未确认结果US-16：仪式感与提醒
7FAMILY家人消息页FAMILY家人消息卡片：顶部显示发送人姓名（24pt）+ 消息类型图标（文字/语音/视频通话），中部显示消息内容，底部显示"Thank you"确认按钮。禁止：不做滚动列表，不显示多条消息收到后端下发的家人消息后显示提醒；老人可语音或点击播放；确认后关闭卡片WebSocket接收家人消息指令；上报播放状态US-16：连接功能
8ALERT询问页面ALERT遵循Law 1冷静技术原则：全屏大浮窗显示"Are you okay?"（48pt大号文字），配有"YES"和"LATER"两个大触摸按钮（绿色YES≥80×80pt、琥珀色LATER≥80×80pt）。注意：老人端不显示"ALERT"字样收到雷达跌倒事件后自动弹出；启动麦克风监听；用户无回应时自动升级为HELP状态；点击"YES"则上报"用户确认安全"并结束事件WebSocket接收后端下发的跌倒事件；上报用户回应结果US-16：老人日常与Luma互动
9HELP求助确认页HELP屏幕显示柔和深红色背景（#7C3F3F），顶部显示"I hear you, Mary."（36pt），中部显示"I'm calling Lily right now. Help is on the way."。底部显示"I understand"确认按钮（深红边框#7C3F3F+白字）和"Call 911"备用按钮自动进入（老人主动求助或ALERT升级）；显示紧急求助已发送确认；提供直接拨打911按钮作为最后兜底WebSocket上报HELP事件到后端；接收后端确认US-11：老人主动发起SOS呼叫
10OFFLINE离线提示页OFFLINE遵循诚实告知原则：屏幕中央显示"Offline Mode"图标（灰色云朵+断开线，≥80×80dp）和文字"I'm currently offline, but I can still help with your reminders"（24pt）。底部显示"If you need immediate help, please call 911"安全指引（琥珀色#7C6B3F背景条，18pt）持续检测网络连接（每10秒检测一次）；断网时立即切换到此页面；TTS播报离线提示；恢复在线时自动返回之前状态本地状态检测，无需API；SOS事件本地缓存；离线期间本地存储的定时提醒仍能通过TTS播报US-22：离线状态下的安全兜底

三、SOS与紧急流程​

序号页面名称交互入口界面排版描述前端交互描述接口交互描述对应需求
11SOS紧急呼叫界面主要：Call my family语音 / SOS物理按键
辅助：点击屏幕紧急按钮		屏幕显示呼叫中动画（柔和渐变动画，非脉冲式扩散）和文字"Contacting your family..."（36pt），下方显示紧急联系人姓名。禁止："Cancel"按钮语音触发或按下SOS键后立即显示；SOS事件通过WebSocket上报后端；显示呼叫倒计时；用户确认后返回但不中断SOS流程WebSocket上报SOS事件到后端；接收后端确认；SOS事件生成紧急预警US-11：老人主动发起SOS呼叫
12跌倒检测询问弹窗自动触发：雷达检测到跌倒后自动弹出遵循Law 1冷静技术原则：全屏大浮窗形式显示，屏幕中央显示"Are you okay?"（48pt大号文字），配有"YES"和"LATER"两个大触摸按钮（静谧绿#4A7C6F"YES"≥80×80pt、琥珀色#LATER"≥80×80pt）收到雷达跌倒事件后自动弹出；启动麦克风监听；用户无回应时自动升级为HELP状态；点击"YES"则上报"用户确认安全"并结束事件WebSocket接收后端下发的跌倒事件；上报用户回应结果US-16：老人日常与Luma互动
13离线SOS兜底界面自动触发：断网状态下按下SOS键遵循OFFLINE诚实告知：断网状态下触发SOS时，屏幕显示柔和深红色#7C3F3F背景，顶部显示大号911图标和"Please call 911 for emergency help"文字（36pt）。中部显示"Call 911"大按钮（深红#7C3F3F边框+白字，≥100×100pt）断网时按下SOS立即显示；TTS本地播报；点击911按钮调用系统电话拨打；本地记录SOS_OFFLINE事件+时间戳本地事件缓存SQLite；联网后自动补发缓存事件到后端US-22：离线状态下的安全兜底
14网络恢复提示界面自动触发：检测到网络恢复时自动显示屏幕显示"Connection Restored"（静谧绿#4A7C6F勾图标+文字，24pt），显示"Back online"提示（18pt）。3秒后自动返回之前页面或待机页。TTS播报："Connection restored. Everything is working now."检测到网络从离线恢复在线时显示；自动消失返回之前页面本地状态检测；恢复后自动补传离线期间缓存的数据和事件US-22：离线状态下的安全兜底

四、主动问候与仪式感​

序号页面名称交互入口界面排版描述前端交互描述接口交互描述对应需求
15Magic Morning主动问候界面自动触发：每日固定时间（如早上8点）后端下发遵循低频正面信号原则：屏幕显示问候内容卡片：顶部"Good morning"（48pt）+ 日期（24pt）+ 天气（图标+温度，24pt），中部显示当日首要提醒（琥珀色#7C6B3F标签），底部显示一句关怀语（如"Your daughter Emily called last night, she loves you"）。使用第一人称每日固定时间收到后端指令后显示；TTS播报组合信息；用户确认后返回待机页；未操作时5分钟后自动返回待机页但不中断问候语音WebSocket接收后端下发的Magic Morning指令；上报用户确认状态US-16：仪式感设计
16晚安问候界面自动触发：每日固定时间（如晚上9点）后端下发屏幕显示晚安问候卡片：顶部"Good evening"（48pt）+ 日期（24pt），中部显示一句温暖关怀语，底部显示"Thank you"确认按钮（静谧绿#4A7C6F）每日固定时间收到后端指令后显示；TTS播报问候语；用户确认后返回待机页WebSocket接收后端下发的晚安问候指令US-16：仪式感设计
17Weekly Check-in每周关怀界面自动触发：每周日固定时间（如上午10点）后端下发遵循身份反转原则：屏幕显示Weekly Check-in内容卡片：顶部"This Week"标题（36pt），中部显示上周亮点简述（如"You had 3 great conversations with family"）和本周安排，底部显示鼓励语（如"You're doing great, keep it up!"）每周日固定时间收到后端指令后显示；TTS播报组合信息；使用非医疗化、鼓励性语言WebSocket接收后端下发的Weekly Check-in指令US-16：仪式感设计

五、家庭互动功能​

序号页面名称交互入口界面排版描述前端交互描述接口交互描述对应需求
18家庭留言播放界面自动触发：家属发送留言后音箱端提醒
辅助：语音"Play messages"		屏幕显示留言卡片：顶部显示发送人姓名（24pt）+ 留言类型图标（文字/语音），中部显示留言内容（语音留言显示波形+播放按钮，≥24pt），底部显示"DONE"确认按钮收到后端下发的留言后显示提醒；老人可语音或点击播放；播放完成后可语音回复；确认后关闭卡片WebSocket接收留言指令；上报播放状态第四步：家庭留言互动
19实时视频通话界面主要：家属从App端发起
辅助：老人语音"Hey Luma, call my family"		遵循Law 1冷静技术：通话中界面显示对方画面（横屏适配），顶部显示通话状态和对方姓名（24pt），底部显示操作按钮区：静音按钮、扬声器按钮、结束通话按钮家属从App发起通话后，音箱端显示来电提醒；老人可接听或忽略；通话过程中支持切换静音/扬声器WebSocket接收通话状态推送；通话记录保存第十步：实时语音和视频通话

六、语音交互​

序号页面名称交互入口界面排版描述前端交互描述接口交互描述对应需求
20语音交互界面主要：Hey Luma唤醒
辅助：点击屏幕/物理按键		屏幕显示"Luma is listening..."等待状态（大号文字，36pt），下方显示声波动画。识别到语音后显示识别文本（24pt），处理中显示转圈动画，返回结果时显示文字（24pt）并TTS播报。底部显示被动提示文字语音唤醒词"Hey Luma"唤醒后进入交互；遵循Law 2解读原则：健康数据查询改为解读式回复（"How many steps?"→"You've been moving around quite well today."）；支持物理按键唤醒ASR转文本上传后端；接收后端返回的TTS文本；调用TTS服务播报；支持打断US-16：老人日常与Luma互动

七、设置与辅助功能​

序号页面名称交互入口界面排版描述前端交互描述接口交互描述对应需求
21锁屏/隐私模式界面主要：Hey Luma, enable privacy mode语音
辅助：物理静音按钮长按		屏幕显示固定图案（时钟界面或风景图片）或完全变暗，隐藏所有隐私信息。提供物理按钮或屏幕右下角小按钮解锁。解锁时显示友好提示提供物理静音按钮长按进入；屏幕右下角小图标点击进入；再次点击或滑动解锁；锁屏期间不显示任何健康数据、SOS记录、对话内容无需API交互；本地状态检测US-16：透明、可控、可逆
22设备设置页主要：Hey Luma, open settings语音遵循Law 4克制原则：简化为仅保留Volume（音量）选项，可通过语音"Hey Luma, turn up the volume"直接调节仅支持语音进入设置，音量可通过语音直接调节本地设置，无需实时后端APIUS-16：透明、可控、可逆

八、扩展功能（已简化/删除）​

原设计原描述调整后说明
健康数据查询响应页显示具体健康数据数值已删除改为纯解读式语音回复
网络设置页提供WiFi配置入口已删除网络配置由家属通过App完成
音量调节页独立页面已删除改为纯语音调节

附录：6 状态颜色速查表（CSS Token）​

:root {
  /* 6 状态色 */
  --state-calm: #4A8A5A;       /* 平静绿 */
  --state-reminder: #8A7040;   /* 提醒棕 */
  --state-family: #3D6A9A;     /* 连接蓝 */
  --state-alert: #9A5040;      /* 关注陶土红 */
  --state-help: #8A3030;        /* 求助深红 */
  --state-offline: #5A6060;     /* 离线灰 */

  /* 6 状态深底背景变体（Luma 设备使用） */
  --state-calm-bg: #2D3D2D;
  --state-reminder-bg: #3D3520;
  --state-family-bg: #1D2D3D;
  --state-alert-bg: #3D2018;
  --state-help-bg: #3D1010;
  --state-offline-bg: #2D2D2D;
}
状态英文名前景色深底背景说明
平静CALM#4A8A5A#2D3D2D默认状态，绿色系
提醒REMINDER#8A7040#3D3520待处理提醒，琥珀色系
家人FAMILY#3D6A9A#1D2D3D家人消息，蓝色系
警报ALERT#9A5040#3D2018系统检测异常，深红色系
求助HELP#8A3030#3D1010老人主动求助，更深红色系
离线OFFLINE#5A6060#2D2D2D设备离线，灰色系

本文档整合自 Luma Daily Presence Playbook v1.2、Reflekt Reminder System Design Dev Spec v1.1、Luma US Onboarding Design Guide 及 Reflekt Home Redesign v2.2