跳到主要内容

原型设计:Family App

本文档基于以下最新客户反馈文件整合而成,是设计所有 HTML 页面的全局参考:

  • 《首页改版建议稿 v2.2》raw/ui_design_guide/Reflekt_Home_Redesign_v2.2.html
  • 《Family App State Playbook v1.1》raw/ui_design_guide/Family App State Playbook v1_1.pdf
  • 《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
  • 状态机 raw/ui_design_guide/状态机.txt
  • 《颜色选择参考 v1.0》raw/颜色选择参考_Reflekt_Guangzhou_Screen_Guide_CN.docx

说明:Luma 老人端的设计要求参考 docs/03_design/03_04_luma_app_pages.md。本文件仅包含家属端/儿女端相关内容。两端共享的设计系统(色彩、字体、六状态颜色体系、设计原则)在本文档中保留,供两端参考。


一、用户画像与使用场景

1.1 目标用户

维度描述
主要用户子女/亲属(美国市场),30-55岁
使用场景通勤时、午休时、晚间放松时,碎片化时间,30秒以内
情感需求减少焦虑、获得安心。不需要更多数据,而是需要被"解读"后的结论
核心痛点担心父母独自在家发生意外。对"监控"敏感,反对将父母"物化"为数据来源
设计定位不做监控台,不做医院UI,不做提醒工具,做"家庭安心系统 + 老人尊严感 + 及时行动"

1.2 美国文化设计准则(US Market)

核心价值设计对策
独立(Independence)语气是"平等的助手",不是"居高临下的看护者";Luma 是来"帮忙"的,不是来"管理"的
隐私(Privacy)绝不展示功能大全或医疗十字;定位为"陪伴者";禁止任何类似监控的暗示
赋能(Empowerment)老人是系统的主人;家属只是协作方;系统遇到情况会透明告知(先确认→等待→通知)
家庭纽带(Family Connection)让 Luma 成为家庭连接媒介;首启流程中尽早引入"家人欢迎消息",建立情感纽带

1.3 用户自检四问(设计完成后必查)

  1. 这个设计感觉像监视吗? → 答案必须是"否"
  2. 这个设计感觉像医疗产品吗? → 答案必须是"否"
  3. 这个设计还能更简单吗? → 答案必须是"是"
  4. 我的父母会对此感到舒适吗? → 答案必须是"是"

二、设备适配要求

2.1 屏幕尺寸

平台设计分辨率说明
iOS390×844 ptiPhone 12/13/14/15系列
Android360×800 dp主流Android设备

2.2 安全区域

  • 避开刘海屏/灵动岛,确保内容在 Safe Area 内
  • iPhone X+ 底部预留 34pt Home Indicator 安全区
  • 触摸目标最小 44×44pt,符合iOS人机界面指南

2.3 设备能力

能力说明
网络支持WiFi和蜂窝网络,支持弱网环境降级
推送支持本地推送+远程推送(ALERT/HELP 持续推送直到确认)
音频支持语音消息播放、实时通话
相机支持扫描设备二维码
通讯录支持发起系统电话
生物识别支持Face ID/Touch ID快捷登录

三、设计原则与价值观

3.1 家属端五项设计原则(v2.2核心)

序号原则
01首页只做一件事:帮用户快速理解当前状态,给出下一步
02状态/事件/操作入口必须分层,不能混在同一层级
03家属端优先"判断 + 行动",老人端优先"陪伴 + 引导"
04文案克制、清楚、有边界,避免空泛安抚和营销式表达
05以MVP可落地为前提,不引入不必要的复杂模块

核心准则:"首页先把职责做对,比做满更重要。"

3.2 首页信息层级结构(v2.2强制规范)

层级内容作用备注
01Safe right now / Needs attention / Emergency response active首页先给结论,只有一个主判断状态文案随实际状态动态切换
02一句话解释 + 最后更新时间把结论说清楚,避免空泛安抚时间用人性化表达:just now / a little while ago
031个主CTA(动态切换)+ 最多1-2个次动作告诉用户下一步紧急状态CTA变为"Call Now"
04Recent update — 最高优先级1条承接近况,点击进Messagesv2.1校正:不做列表,只展示1条,禁止滚动

3.3 禁止词汇(在所有界面均不得出现)

禁止词汇原因
medication / health / monitoring / detected / sensor / alert / status / system / calm / pleasant医疗感、设备感、冷漠
"Everything looks great" / "All is well" / "Everything looks fine"空泛安抚,无实际价值
"已检测到跌倒" / "ALERT" / "FALL DETECTED"硬机器词,制造恐慌
"取消警报" / "标记为误报"分散用户注意力
Missed / Not confirmed / Overdue(提醒类)制造焦虑,提醒≠危险

3.4 文案替换对照(v2.2强制规范)

当前表达(需替换)建议替换为
Everything looks fine / All Good / Everything looks greatSafe right now
Lily has been quiet today. No alerts. Just a peaceful morning at home.No urgent concerns detected. Activity appears normal.
Recent Messages(同质流水账列表)Recent update — 最高优先级1条,标注状态(Action needed / In progress / Resolved)
Call / Text / Voice / Video 四个按钮同时平铺1个主动作(随状态动态切换),其余收为次级

四、色彩系统

4.1 基础色板

色彩类别Hex Code用途说明
主色:暖灰色#F5F5F3App背景、卡片底色,营造柔软无压力的画布
辅色:软米色#EAE6E1次要背景、分割线,增加层次感和温暖感
点缀色:静谧绿#A3B3A1表示"正常"、"一切都好"状态
点缀色:大地色#D4C6B3用于次要信息、图标,保持自然感
文字主色#5A5A5A用于所有主要文本,避免纯黑高对比度刺激
警报色:琥珀#F2AD5C仅用于"注意"级别状态,比红色柔和
紧急色:深红#8B3A3A仅用于"紧急"级别状态,避免大面积闪烁
禁用色#007AFF医疗蓝,禁止 — 会让产品像医疗器械
禁用色#FF3B30亮红色,禁止 — 引发强烈恐慌

4.2 六状态颜色体系(两端共享)

状态英文名主色 Hex背景色 Hex用途
平静CALM#4A8A5A(柔绿)#EDF4F2安全确认、徽标、轻背景
提醒REMINDER#8A7040(暖棕)#FBF4E6提醒CTA、事件点
家人FAMILY#3D6A9A(连接蓝)#EEF2FA消息入口、蓝色标签
关注ALERT#9A5040(陶土红)#FAF0EE标签、时间线提示
求助HELP#8A3030(求助深红)#FAF0F0唯一CTA、紧急标签
离线OFFLINE#5A6060(离线灰)#F0F0EE问题状态、标签

4.3 Token变量对照表(前端直接建变量)

变量名Hex中文说明建议用途
color-bg-cloud#F4F6F6云雾白全局背景/大面积留白
color-bg-mist#E8EFEF薄雾灰次级背景/轻分隔
color-text-primary#141E1E深夜黑主标题/关键文本
color-text-secondary#5A7070石板灰说明文案/次级信息
color-brand-teal#3D9A94Reflekt青绿品牌点缀/主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标签/问题状态

4.4 动态主题应用

元素绿色(CALM)黄色(REMINDER)红色(ALERT/HELP)
底部导航选中态#4A8A5A#8A7040#8A3030
顶部状态栏白色浅黄 tint浅红 tint
主按钮绿色渐变琥珀渐变深红渐变
首页状态指示绿色对勾棕色提示图标红色警报图标
卡片边框无/绿细线黄色细线红色粗线

五、字体规范

5.1 字体家族

字体属性规范解释
西文字体Source Sans 3 或人文主义无衬线体笔画有轻微粗细变化,更自然温暖,不像Helvetica那样冰冷
中文字体苹方-常规体(PingFang SC)、思源黑体-常规体与西文风格匹配,确保易读性
字重常规体(Regular)/中等(Medium)禁止使用细体(Light/Thin)或特黑体(Black/Heavy)

5.2 字号Token

Token用途iOS (pt)Android (sp)
C-H1家属端状态标题20-2220-22
C-Body家属端正文16-1716-17
Meta时间/脚注13-1413-14

5.3 可访问性要求

  • 正文字号 >= 14pt
  • 关键信息对比度符合 WCAG AA 标准
  • 老年人视距可读性测试(真机走查)
  • 开启系统字体缩放(Dynamic Type / Font Scale)时页面保持不截断

六、间距与圆角

元素数值说明
页面左右边距16pt标准内容区域边距
卡片内边距16pt卡片内容与边缘的距离
卡片圆角12-14pt卡片整体圆角(Family App 用 14pt)
按钮圆角8pt按钮圆角
列表项间距8pt垂直列表项之间的间距
卡片间距12pt卡片之间的垂直间距

七、状态系统

7.1 六状态定义

状态机流转:CALM → REMINDER → ALERT/HELP → RESOLVED → CALM;OFFLINE(独立状态)

状态ID状态名优先级状态说明
01CALM(平静)默认无任何待处理事项,设备在线,数据新鲜
02REMINDER(提醒)2有待触发的提醒事项(Luma正在执行中)
03FAMILY(家人连接)3有来自老人的消息、通话或Sunday Story
04ALERT(关注)4系统检测到异常,Luma正在向老人确认中
05HELP(求助)5老人主动求助,或ALERT确认后升级
06OFFLINE(离线)6设备断网、连接中断或数据超时未更新

7.2 状态优先级

HELP > ALERT > OFFLINE > FAMILY > REMINDER > CALM

首页只显示最高优先级状态。次优先级状态进入 Recent update(1条)或消息列表。

7.3 六状态首页完整文案(State Playbook v1.1强制规范)

状态01 · CALM(平静)

核心任务:建立每日安心感,让子女不需要频繁打开 App 确认。

字段内容
主状态文案Safe right now
解释文案No urgent concerns detected. Activity appears normal.
时间戳Updated just now / a little while ago / earlier this morning(人性化,不用精确分钟)
主CTACheck in with Mary
推送策略无推送(CALM 状态不主动打扰;可每周1-2次推送"Lily had a quiet week."正面摘要)
消息列表可为空或只有每日摘要;禁止展示原始传感器数据

禁止项

  • 每天推送"今日正常"——会被当作噪音忽略,真正警报也被忽视
  • 展示任何健康评分、趋势图、百分比
  • 使用"Everything looks great" / "All Good" / "Everything looks fine"等空话

状态02 · REMINDER(提醒)

核心任务:让子女知道提醒发出了,不制造不必要的焦虑。提醒未确认不等于出了问题。

字段内容
主状态文案Safe right now
解释文案11:00 reminder sent. Not yet confirmed.(陈述事实,不判断)
时间戳Updated a little while ago
主CTASee today's reminders
推送策略不主动推送(提醒未确认不等同于危险)
消息列表可显示"Lily confirmed her morning reminder."(提醒完成后的静默记录)

禁止项

  • "Lily hasn't confirmed her reminder"——不制造焦虑
  • 把提醒未确认显示为黄色警告或"需要关注"
  • 展示"Missed" / "Not confirmed" / "Overdue"等负面状态
  • 老人取消/跳过某次提醒时,推送给家属

状态03 · FAMILY(家人连接)

核心任务:让子女感到"妈妈在想我",而不是"我在监视妈妈"。

字段内容
主状态文案Safe right now
解释文案Lily left you a voice message this morning.("left you"比"sent"更有亲情)
时间戳Updated just now
主CTA▶ Play Lily's message
推送策略有老人回复时推送(这是正向互动,值得打扰)

禁止项

  • "Lily hasn't replied to your message"——不制造内疚
  • 老人多条消息只推送第1条,不推送"N条"
  • 同一个时间窗口内多次打扰(控频规则:4小时窗口内只推1条)

状态04 · ALERT(关注)

核心任务:创造感知而非制造恐慌。告知三件事:发生了什么、系统在做什么、你能做什么。

字段内容
主状态文案Needs attention
解释文案Possible fall in the living room at 2:30 PM. We're checking in with Lily now.(三件事全部说清)
时间戳2:30 PM(警报状态必须精确到分钟)
主CTA📞 Call Lily directly
次级动作Notify Family
推送策略立即推送,持续直到家属打开 App
推送标题Lily may need attention(用"may"保留不确定性,不误判制造恐慌)

禁止项

  • "Fall detected" / "ALERT" / "FALL DETECTED"——硬机器词
  • "取消警报"按钮——不允许单方面取消安全流程
  • 倒计时器——制造额外压力
  • 单一30秒计时升级——必须多信号组合判断

状态05 · HELP(求助)

核心任务:让家属立刻知道需要行动,给出唯一清晰的下一步。不要让家属在这一刻做任何额外判断。

字段内容
主状态文案Emergency response active
解释文案Lily triggered a help request at 2:32 PM. We're calling you now.("Lily"为主语,动作是需要帮助)
时间戳2:32 PM(精确到分钟,说明触发方式)
主CTA📞 Call Lily Now(唯一主动作,颜色最深,最高优先)
推送策略持续推送直到家属打开 App 并确认

禁止项

  • "取消警报"或"标记误报"按钮——事后反馈另做
  • 倒计时器
  • 第二个CTA

误报反馈(事后独立流程)

  • 状态结束后出现:"Was this alert helpful?" [ Yes ] [ Not really ]
  • 点"Not really"后显示:"Thank you. We'll learn from this to be quieter in the future."

解决后情感收尾(仅出现一次):"Glad this worked out. We'll keep watching quietly."——给家属一个"可以松一口气了"的信号,自动出现自动消失。


状态06 · OFFLINE(离线)

核心任务:诚实告知,给出绕过 Luma 直接联系老人的方法。不维持假安心。

类型场景说明
OFFLINE-A云断开,本地可用Luma 本地语音和 SOS 仍可用;主 CTA 变为直接拨打
OFFLINE-B设备整体失联更高优先级通知,说明"最后已知状态"
字段OFFLINE-A 内容OFFLINE-B 内容
主状态文案Connection lostConnection lost
解释文案Luma lost connection. Local help still available.Luma is not responding. Last known: Lily was safe at 10:28 AM.
时间戳最后在线时间(精确)最后在线时间(精确)
主CTACall Lily directlyCall Lily directly
推送策略立即推送立即推送(措辞比OFFLINE-A更重)

禁止项

  • 继续显示"Safe right now"——状态已过期,诚实是信任的基础
  • 隐藏最后已知状态和时间
  • 推送标题用"Emergency"——这是设备问题,不是老人问题

恢复后推送:"Connection restored. Lily is safe."


7.4 "Safe right now"数据新鲜度规则

数据时效显示文案
0–N 分钟(新鲜)Safe right now + Updated just now
N–M 分钟(可接受)Safe as of [时间]
> M 分钟(过期)Connection lost → 触发 OFFLINE 状态

核心原则:"Safe right now"必须是对当前时刻有效的陈述,不能是对过去某个时刻的描述。N和M的具体阈值由工程团队根据设备心跳间隔定义(建议 N=5分钟,M=15分钟)。

7.5 状态优先级冲突处理

场景首页显示次优先级处理
FAMILY 消息 + REMINDER 未确认FAMILY(更高优先级)REMINDER 进 Recent update
ALERT 触发 + FAMILY 消息存在ALERT(更高优先级)FAMILY 消息静默,事后可查
OFFLINE + ALERTOFFLINE(更高优先级)说明"Alert was pending when connection was lost"
多个低优先级状态同时存在只显示最高优先级其余在消息列表分组显示,不在首页堆叠

八、通用文案规则(Universal Rules)

首页文案规则

规则说明
✓ 解读,不展示把传感器数据翻译成人话,不罗列数值
✓ 一句话解释首页解释文案不超过两句
✓ 时间戳区分正常状态人性化;警报/OFFLINE 状态精确到分钟
✓ 主语是老人"Lily needs help"比"ALERT triggered"更温暖
✓ CTA 动态切换不同状态主按钮不同,不平铺所有动作
✓ 状态一致性主状态和消息列表不能互相矛盾(P0,必须修复)
✗ 空泛安抚话"Everything looks great" / "All Good" 等禁用
✗ 医疗/监控感词汇medication / health / monitoring / detected 等禁用

推送通知规则

规则说明
✓ 只在值得打扰时推送CALM 和 REMINDER 不推送;ALERT/HELP/OFFLINE 立即推送
✓ 主语是老人"Lily needs help now"比"Emergency Alert"更好
✓ 说明系统在做什么减少家属的无力感和焦虑
✓ 正向互动才推送老人发消息时推送;老人没回复不推送(不制造内疚)
✗ 每天"今日正常"推送会被当作噪音忽略,真正警报也被忽视
✗ 任何健康评分/趋势图/百分比禁止
✗ 老人取消/跳过提醒的推送不打扰家属

CTA 动态切换规则

状态主CTA说明
CALMCheck in with Mary非紧急,鼓励连接
REMINDERSee today's reminders不制造焦虑
FAMILY▶ Play Lily's message鼓励连接,不制造压力
ALERT📞 Call Lily directly系统正在确认中,家属可主动打电话
HELP📞 Call Lily Now最高优先,唯一主动作,颜色最深
OFFLINECall Lily directly绕过 Luma 直接联系

九、导航模式

9.1 底部导航栏

3个Tab:Home、Messages、Profile。图标+文字组合,选中态颜色随预警级别动态变化。

Tab功能描述
Home未初始化时显示设备绑定和家庭档案创建引导;已初始化时显示老人最新状态、快捷操作、最新消息
MessagesAI护工时间轴,展示AI护工帮助家庭成员照看老人的所有任务执行记录
Profile家庭管理(家庭档案、紧急联系人、协作者)、消息中心、系统设置、联系客服等

9.2 首页快捷操作区(大图标入口)

状态主CTA次级操作
CALMCheck in with MaryText / Voice Message
REMINDERSee today's remindersText
FAMILY▶ Play messageText
ALERT📞 Call Mary directly(最高优先)Notify Family
HELP📞 Call Mary Now(最强行动)
OFFLINECall Mary directly

十、Reminder提醒系统

说明:Reminder系统在Family App端体现为管理界面,在Luma端体现为执行与交互。家属通过App创建/建议提醒,Luma通过语音执行和传递。以下为Family App端的设计要求。

10.1 核心设计理念(三大原则)

原则说明
老人是主人老人自设的提醒家属看不到内容;家属建议需老人确认;老人可随时取消自己的提醒
Luma 是伴侣提醒通过 Luma 语音传递,不依赖 App 操作界面;语气是朋友提醒,不是系统通知
围绕生活,不围绕医疗出门安全、钥匙、手机、煤气、关电器与"吃药"同等重要;"带钥匙"和"关煤气"是真正容易忘、真正出过事的事情

10.2 设计红线(强制规范)

红线说明
不显示"未完成"状态给家属"妈妈今天没有确认她的提醒"绝对不能出现;家属只看到 Confirmed,看不到 Missed;提醒不是考勤系统
活跃提醒上限 5 条超过 5 条时,Luma 建议老人考虑是否真的需要这么多;提醒越多,每条价值越低
安全提醒不可删除,只能暂停老人说"今天不用提醒了"可以接受;永久删除安全提醒需要家属确认

10.2 提醒库(Reminder Library)

围绕老年人真实生活场景设计的 6 大类别。老人可从库中选择,也可完全自定义。

类别说明示例
🚪 出门安全最高频、最重要;老人最容易忘的核心事项"Mary,出门的时候记得带钥匙哦。"
💊 健康节奏安全级提醒;可暂停不可永久删除"Mary,快到十一点了,你的药在厨房柜子里。"
💬 家庭连接温暖级提醒;增强家人情感纽带"今天是周日,Lily 可能在等你的电话。"
🌅 生活仪式日常级提醒;帮助建立生活节奏感"下午三点了,出去走走?"
🌤 季节·天气系统动态触发;根据天气自动生成"今天有雨,带把伞出去。"
✏️ 自定义两种路径:家属建议(需确认)/ 老人语音自设(私人)完全自定义

提醒语气规则:统一用 Luma 第一人称、生活化语言。不说"请记得服药",说"Mary,快到十一点了,你的药在厨房柜子里"。

10.3 提醒 Badge 类型说明

Badge含义说明
自设老人自己设置儿女看不到内容
协作儿女建议,老人确认后生效协作类
安全系统默认或儿女设置可暂停不可永久删除
天气系统动态触发根据天气自动生成

10.4 Luma 文案自动生成规则(家属端可修改)

当家属在 App 创建自定义提醒时,Luma 自动生成语音文案,家属可修改:

规则说明
从内容提取动作 + 时间,生成口语化句子
句子开头必须是老人名字
语气用提醒,不用命令:说"记得"而非"请立刻"
背景说明影响语气软硬,不影响内容(背景说"温和"→句子更轻柔)
药品名称、剂量、医嘱术语出现在文案里
用医嘱格式("请服用降糖药 X 毫克")

背景说明字段:儿女可写"妈妈最近忘事多,要温柔地提醒"。这句话 Luma 不会说出来,但会在触发时语气更合适。这是儿女对 Luma 的授权,不是对老人的标注。

10.5 提醒类型权限

操作老人(语音)家属(App)系统
创建自定义提醒✓ 语音创建
家属自定义(带背景说明)✓ 需老人确认
查看私人提醒内容✓ 问 Luma
分享私人提醒给家属✓ 语音操作
建议一条提醒✓ 需老人确认
设置安全级提醒△ 只能暂停✓ 可设置✓ 系统默认
删除自设提醒✓ 随时
删除安全提醒△ 只能今日暂停✓ 需确认

10.6 活跃提醒上限

每人最多 5 条活跃提醒。超过时系统拒绝创建,Luma 告知老人考虑是否真的需要这么多。提醒越多,每条价值越低。

10.7 Family App 提醒页结构

分区内容可见性
安全级家属设置的安全提醒(Luma 执行)家属可见
协作已接受家属建议并被老人接受的提醒家属可见
待确认家属已提交,等待老人确认的提醒家属可见状态
老人私有老人自设的提醒(只显示数量,不显示内容)内容不可见

状态只显示:✓ 已确认 / On / Pending / Private 禁止显示:未完成 / 漏服 / 已过期等负面状态

10.8 Family App 提醒创建流程

  1. 家属在 App 提醒页选择"建议一条提醒"
  2. 从模板库选择或完全自定义填写
  3. 填写内容、时间、频率,以及可选的背景说明(Luma 不向老人播放,仅供 Luma 调整语气)
  4. 提交后立即显示"Pending Lily's confirmation"
  5. Luma 在适当时间(老人主动说话后或下午 14:00–16:00 平静时段)询问老人
  6. 老人接受 → 提醒激活,App 显示"Accepted by Lily";老人拒绝 → App 显示"Lily preferred not to"

10.9 Family App 端推送策略

事件是否推送
CALM状态不推送
提醒已发送但未确认不推送
老人听了消息有回复推送(正向互动,值得打扰)
ALERT/HELP事件立即/持续推送直到家属确认
OFFLINE断连关键断连可推送
老人取消/跳过某次提醒不推送

十一、主要业务场景与注意事项

11.1 首页设计(家属端主屏幕)

目标:3秒内了解全局,获得安心 原则:一瞥即懂,无需探索(One glance, no exploration)

固定结构

  1. 总体状态(Overall Status):一句完整的话,用人性化语言描述
  2. 一句话解释(One-line Explanation):对状态的补充
  3. 最后更新时间(Last Update Time)
  4. 1个主CTA(动态切换)+ 最多1-2个次动作
  5. Recent update:1条最高优先级事件,不做滚动列表

正确示例

  • 正常:"Safe right now" · "No urgent concerns detected." · "Updated just now"
  • 紧急:"Needs attention" · "Possible fall detected in the living room at 2:30 PM." · "2:30 PM"(警报状态精确到分钟)

禁止元素

  • 滚动条
  • 多个卡片或模块(Multiple Cards)
  • 任何形式的图表或数据值
  • "查看更多"或"详情"链接
  • 多个CTA按钮同时平铺
  • 倒计时器(任何状态下均禁止)
  • 红色闪烁背景

11.2 P0逻辑修复(必须先修,再做其他)

问题:主状态显示"Safe right now",但消息列表里同时出现SOS和跌倒记录。家属无法在3秒内判断情况。

修复要求:首页Recent update区域只展示1条最高优先级事件(不做滚动列表),点击后进入独立Messages页。主状态与Recent update必须保持逻辑一致。

11.3 警报屏幕设计

目标:创造感知,而非制造恐慌,老人的尊严永远优先 原则:清晰告知三件事——发生了什么、系统在做什么、你能做什么

固定结构

  1. 发生了什么:e.g., "A possible fall was detected in the living room."
  2. 系统在做什么:e.g., "We are trying to reach Mary via voice check-in."
  3. 你能做什么:提供清晰有限的下一步操作

允许操作:Acknowledge / Notify another family member / Call Mom directly 禁止操作:Cancel Alert / Mark as False Alarm(误报反馈在事后独立流程完成)

11.4 空状态设计

场景正确做法禁止做法
Day 1无设备告诉家属"Luma正在认识长辈",并给出录欢迎语的动作"暂无数据"
消息页空状态"对话从这里开始""系统暂无内容"
Quiet Day明确告诉家属"今天平稳、无需操作、可以把手机放下"不展示任何信息

11.5 禁止UI元素

  • 倒计时器(任何状态下均禁止)
  • 红色闪烁背景
  • "取消警报"按钮
  • 任何健康数值、百分比、评分
  • 多个CTA按钮同时平铺
  • 滚动列表作为首页主要信息展示

11.6 交互设计规范

规范项要求
点击反馈所有可点击元素有点击态(背景色变化或轻微缩放)
过渡动画页面切换使用平滑过渡 (300ms ease-in-out)
骨架屏数据加载时显示骨架屏占位
空状态列表为空时显示友好提示+引导操作
人类时间感"Just now" / "A little while ago" / "Earlier this morning"
时间戳规则非警报状态用人性化时间;警报/OFFLINE状态精确到分钟

十二、图标设计规范

风格要求说明设计要点
圆润所有尖角处理成半径≥2px圆角尖角带来攻击性,圆角更安全友好
实心优先使用实心图标实心更具"存在感"和"稳定性"
表意具体表示"睡眠"用床或月亮,而非脑电波用户不需要猜测图标含义,必须一望即知

十三、错误处理规范

13.1 错误码

错误码错误名称严重级别建议处理方式
E1001NetworkError检查网络连接后重试
E1002TimeoutError等待后重试
E1003AuthError重新登录
E1004PermissionError联系管理员
E1005ResourceNotFound刷新后重试
E1006ResourceConflict等待后重试或联系客服
E1007ValidationError检查输入后重试
E1008ServerError稍后重试或联系客服
E1009DeviceOffline检查设备网络
E1010DeviceBindError解绑后重新绑定

13.2 错误日志规范

每个错误必须记录:errorCode / errorMessage / timestamp / userId / deviceId(如适用)/ context / stackTrace(如适用)/ networkInfo


十四、页面清单

一、认证与账户模块

序号页面名称交互入口界面排版描述前端交互描述接口交互描述
1隐私协议弹窗App首次启动进入全屏弹窗,顶部标题"Privacy Policy",正文可滚动,底部两个等宽按钮:"Disagree"(灰)和"Agree"(主色)强制弹出;用户必须滚动阅读到底部才能点击;点击Agree记录状态进入下一步POST /api/privacy/consent
2登录页首次启动无Token时进入顶部居中Logo;手机号+密码输入框(带显示/隐藏密码切换);底部"Forgot Password?"链接+登录按钮+注册入口支持生物识别快捷登录;验证失败返回具体错误码POST /api/auth/login
3注册页登录页点击"Sign Up"进入顶部标题"Create Account";手机号+"Send Code"按钮;6位验证码输入;密码输入(显示强度指示器);确认密码;创建按钮Send Code倒计时60秒防刷;验证码有效期5分钟;注册成功自动登录POST /api/auth/sendCodePOST /api/auth/register
4忘记密码页登录页点击"Forgot Password?"进入顶部返回按钮;手机号+"Send Code";验证码;新密码(显示强度)+确认密码;"Reset Password"按钮重置成功后使其他设备Token失效,跳转登录页POST /api/auth/sendCodePOST /api/auth/resetPassword

二、首页模块

序号页面名称状态首页文案主CTA备注
5首页-CALM平静Safe right now · No urgent concerns detected. · Updated just nowCheck in with Mary不推送
5首页-REMINDER提醒Safe right now · 11:00 reminder sent. Not yet confirmed.See today's reminders不推送;提醒≠危险
5首页-FAMILY家人Safe right now · Lily left you a voice message this morning.▶ Play Lily's message收到老人消息时推送
5首页-ALERT关注Needs attention · Possible fall in the living room at 2:30 PM. We're checking in with Lily now.📞 Call Lily directly立即推送;精确时间
5首页-HELP求助Emergency response active · Lily triggered a help request at 2:32 PM.📞 Call Lily Now持续推送直到确认;唯一CTA
5首页-OFFLINE离线Connection lost · Luma lost connection at 10:28 AM. Last known status: Safe.📞 Call Lily directly显示最后状态+时间

首页架构要求

  • 顶部区域:老人姓名+头像(圆形)+预警状态指示条(根据当前预警级别显示对应颜色状态条)
  • 主内容区:状态概览卡片(根据预警级别显示不同颜色主题+人性化关怀文案)
  • 快捷操作区:大图标(随状态动态切换主CTA)
  • Recent update区域:仅展示1条最高优先级事件,禁止滚动列表
  • 底部导航栏:Home、Messages、Profile(选中态颜色随预警级别动态变化)
  • 动态主题:整个页面的主题色随预警级别自动切换

三、设备管理模块

序号页面名称交互入口界面排版描述前端交互描述接口交互描述
6设备详情页首页点击设备卡片进入顶部返回按钮+设备名称;设备图片区域;卡片显示Device ID(可复制)、设备类型、在线状态、最后在线时间;底部"Contact Support to Unbind"按钮点击Device ID可复制;点击Contact Support跳转客服页并自动填充设备ID和家庭IDGET /api/device/listGET /api/device/:id/detail
7设备绑定/配网引导页首页点击"Add Device"进入全屏步骤引导:Step 1/5扫描→Step 2/5 BLE连接→Step 3/5 WiFi配置→Step 4/5设备设置→Step 5/5 SOS测试每步配有图示、说明文字和操作按钮;每步失败显示具体错误码和解决建议POST /api/device/bindGET /api/device/bind/status

四、家庭留言模块

序号页面名称交互入口界面排版描述前端交互描述接口交互描述
8创建文字留言页首页点击"文字留言"大图标进入顶部标题+返回按钮+发送按钮;接收人显示区;多行文本输入框(支持Emoji);定时发送开关+时间选择器;底部快捷短语按钮输入文字后可点击发送;点击快捷短语自动填充;发送成功后Toast提示并返回首页POST /api/reminder/text
9创建语音留言页首页点击"语音留言"大图标进入顶部标题+返回按钮+发送按钮;接收人显示区;大圆形录音按钮+计时器;录音波形可视化;录音完成可播放预览长按录音按钮开始录音,松开结束;录音完成可播放预览;点击发送上传语音POST /api/reminder/voice

五、家庭消息模块

序号页面名称交互入口界面排版描述前端交互描述接口交互描述
10消息列表页底部导航进入顶部标题"Messages"+筛选按钮;消息卡片列表(按时间倒序);每条显示类型图标+内容预览+时间+状态标签支持按类型(语音/文字/系统)/时间筛选;点击进入详情GET /api/messages/list
11消息详情页点击消息卡片进入顶部返回按钮+消息类型标签;消息内容展示(文字/语音波形/图片);底部回复输入区或操作按钮语音消息可播放;可发起通话;可标记已处理GET /api/messages/:id
12通话页面消息页点击通话按钮进入全屏通话界面;顶部显示通话对象头像+姓名;通话计时器;底部静音/扬声器/挂断按钮支持免提;支持后台通话;来电可接听/拒接/静音POST /api/call/initiate

六、个人中心模块

序号页面名称交互入口界面排版描述前端交互描述接口交互描述
13个人中心页底部导航进入顶部用户头像+姓名;家庭信息卡片;功能列表(邀请成员/紧急联系人/设备管理/隐私设置等)功能列表支持跳转;头像可更换GET /api/user/profile
14邀请成员页个人中心点击"邀请成员"进入顶部说明文字;手机号输入+权限选择下拉框;"发送邀请"按钮;已发送邀请列表(Pending状态)权限选项:管理权限/查看处理权限POST /api/family/invite
15紧急联系人页个人中心点击"紧急联系人"进入紧急联系人列表(显示姓名+关系+电话号码);添加/编辑/删除按钮;排序拖拽最多支持5个紧急联系人;拖拽排序;支持系统电话直接拨打GET /api/emergency/contacts
16勿扰时间页个人中心点击"勿扰时间"进入勿扰开关;开始时间+结束时间选择器;重复日期多选(周一至周日)开启勿扰时,ALERT/HELP仍可推送POST /api/settings/quiet-hours
17推送通知设置页个人中心点击"通知设置"进入通知开关总开关;分类通知开关(安全提醒/日常消息/系统通知);声音/震动开关每种通知类型独立控制POST /api/settings/notifications
18隐私与数据页个人中心点击"隐私与数据"进入隐私政策链接;数据导出按钮;账号注销按钮数据导出为JSON格式;注销需二次确认POST /api/privacy/exportPOST /api/privacy/withdraw

十五、执行优先级

P0(必须先完成)

  1. 修正 Family App 首页状态冲突——主状态、解释文案、Recent update 重新分层
  2. 首页 Recent update 只展示 1 条最高优先级事件,不做滚动列表
  3. 主状态与消息列表保持逻辑一致

P1

  1. 统一两端首页文案风格,替换所有空泛安抚表达
  2. Reminder 提醒系统管理界面(4分区)
  3. 提醒创建流程

P2

  1. 每日摘要生成(AI生成温暖语言)
  2. 系统推送频率优化(CALM 状态低频正面摘要)

十六、设计团队自查清单(提交稿前必查)

  • Family App 首页:主状态是否与 Recent update 保持一致?(主状态说 Safe,Recent update 不能出现 SOS)
  • Family App 首页:Recent update 是否只展示 1 条最高优先级事件,没有滚动列表?
  • Family App:主 CTA 是否随状态动态切换?(Safe → Call / Emergency → Call Now)
  • 所有页面:是否使用了禁止词汇?(空泛安抚话、医疗感词汇、监控感词汇)
  • ALERT/HELP 状态:文案是否用了不确定性语言?("may need attention"而非"FALL DETECTED")
  • OFFLINE 状态:是否诚实显示"Connection lost"而非继续显示"Safe right now"?
  • HELP 状态:是否只有一个最强 CTA,没有第二选择?
  • 提醒系统:是否禁止了"Missed" / "Not confirmed" / "Overdue"等负面状态词?
  • 字体字号:正文是否 >= 14pt?
  • 触摸目标:是否 >= 44×44pt?
  • 首页是否出现了任何倒计时器?

文档版本:v1.3 更新内容:整合 Home Redesign v2.2 + Family App State Playbook v1.1 + Reminder System v1.1 + US Onboarding Design Guide 核心更新:提醒系统核心设计理念(三大原则+三大红线)、六大提醒库类别、Badge类型说明、Luma文案自动生成规则、提醒权限/上限/推送策略规范化、首页信息层级4层规范、6状态完整文案、"Safe right now"数据新鲜度规则