用户界面结构设计
平台概览
| 平台 | 技术栈 | 设备尺寸 | 用户角色 | 设计特点 |
|---|---|---|---|---|
| Family App | UniApp（iOS + Android） | 390×844px（iPhone 16 Pro） | 子女/家属（中年用户） | 传统触控界面，适老化要求：字号 ≥ 16pt |
| Luma App（Luma 智能音箱） | 嵌入式 Linux + Web 前端 | 1280×800px（音箱屏幕） | 老年人（65岁以上） | 语音优先 + 触控辅助，适老化要求：字号 ≥ 18pt |
1. Family App（儿女端）页面清单
1.1 认证模块
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 登录页 | /pages/auth/login | __login.html | 手机号 + 密码登录 | logo、表单输入、登录按钮 | P0-用户登录 |
| 注册页 | /pages/auth/register | __register.html | 手机号注册 + 验证码 | 国家区号选择、验证码发送、密码设置 | P0-用户注册 |
| 忘记密码 | /pages/auth/forgot-password | __forgot_password.html | 短信验证码重置密码 | 手机号验证、新密码确认 | P0-忘记密码 |
1.2 首次启动 / Onboarding
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 欢迎页 | /pages/onboarding/welcome | __first_launch_page1.html | App 功能简介 | 插画、特性列表、Get Started CTA | P0-设备安装引导 |
| 功能介绍页 | /pages/onboarding/features | __first_launch_page2.html | 语音留言功能说明 | 录音插画、功能列表 | P0-设备安装引导 |
| 隐私政策同意 | /pages/onboarding/privacy | __first_launch_page3.html | 隐私政策阅读 + 同意 | 隐私说明、合规 toggle、注册入口 | P0-隐私政策同意 |
| 首次发语音引导 | /pages/onboarding/voice-guide | __onboarding_1.html | 引导用户发送第一条语音 | 录音按钮、话题建议、播放预览 | P0-设备安装引导 |
| 7天仪式进度 | /pages/home/setup-progress | __home_setup_progress.html | 展示Luma 7天入驻仪式进度 | 进度条、每日任务卡片 | P1-7天仪式 |
1.3 首页（Home Hub — 多状态合一）
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 首页-家庭状态 | /pages/home（默认） | __home_family.html | 默认首页，展示老人状态和家属消息 | 老人头像、Safe状态卡片、Quick Send操作入口 | P0-预警列表 |
| 首页-安全状态 | /pages/home?state=calm | __home_calm.html | 老人状态正常，无新消息 | Safe状态卡片、Quick Send入口 | P0-预警列表 |
| 首页-预警状态 | /pages/home?state=alert | __home_alert.html | 检测到异常，需关注 | 红色预警横幅、Needs Attention 卡片、紧急呼叫 CTA | P0-预警 PUSH 推送 |
| 首页-离线状态 | /pages/home?state=offline | __home_offline.html | Luma 离线，本地功能仍可用 | 离线横幅、呼叫入口 | P1-离线提醒 |
| 首页-提醒状态 | /pages/home?state=reminder | __home_reminder.html | 提醒已发送待确认 | 提醒状态卡片、查看提醒列表入口 | P1-提醒执行情况 |
| 首页-记忆状态 | /pages/home?state=memory | __home_memory.html | Memory 功能入口 | Memory 话题卡片、Quick Send 入口 | P1-情感陪聊 |
| 首页-紧急帮助 | /pages/home?state=help | __home_help.html | 触发紧急帮助状态 | 红色紧急横幅、呼叫按钮 | P0-应急通话 |
| 首页-无设备 | /pages/home?state=no-devices | __home_noDevices.html | 未绑定任何设备 | 设备引导插 画、添加设备 CTA | P0-设备列表 |
首页-记忆模块子页面
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 提问输入页 | /pages/memory/input | __home_Memory_input.html | 提交本周想让老人回答的话题 | 话题输入框、Luma 表述预览 | P1-情感陪聊 |
| 记忆答案页 | /pages/memory/answer | __home_Memory_answer.html | 展示老人已回答的记忆时刻 | 播放按钮、语音波形、时长/时间戳 | P1-情感陪聊 |
| 等待答案页 | /pages/memory/unanswered | __home_Memory_unanswered.html | 等待老人回答 | 等待动画、3步时间线进度、取消按钮 | P1-情感陪聊 |
| 记忆存储页 | /pages/memory/list | __memory_list.html | 全部语音记忆存档检索 | 搜索栏、分类过滤 Tab（关于过去/家庭/感受等） | P1-情感陪聊 |
1.4 设备管理
| 页面名称 | 路由 | 代码文 件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 设备列表 | /pages/devices/index | __devices.html | 展示全部已绑定设备 | 设备分类卡片（语音伴侣/空间伴侣/健康伴侣）、状态指示 | P0-设备列表 |
| 添加设备向导 | /pages/devices/add | __add_device.html | 扫码 + 蓝牙 + WiFi 多步骤配网 | 设备类型选择、QR扫描、WiFi表单、完成确认 | P0-扫码绑定入口、P0-设备安装引导 |
| 设备详情 | /pages/devices/detail | __device_detail.html | 单设备详情 / 解绑入口 | 设备信息卡（电量/信号/固件/位置）、重命名/解绑按钮 | P0-设备详情 |
1.5 家庭成员
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 家庭团队管理 | /pages/family/collaborators | __collaborators.html | 家庭成员列表与角色管理 | 成员卡片、角色标签（Admin/Member）、邀请入口 | P0-家庭成员管理 |
| 邀请成员 | /pages/family/invite | __family/invite | 通过手机号发送邀请 | 手机号输入、角色选择卡片、成功状态 | P0-家庭成员管理 |
| 家庭档案编辑 | /pages/family/profile | __family_profile.html | 5步创建/编辑被照护者档案 | 步骤进度条（基本信息/健康/作息/性格/确认） | P1-家庭档案编辑 |
1.6 提醒关怀
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 创建提醒 | /pages/reminder/create | __create_reminder.html | 创建文字/语音提醒 | 提醒内容输入、Luma 话术预览、频率/时间选择 | P1-创建提醒 |
| 提醒列表 | /pages/reminder/list | __reminder_list.html | 管理所有提醒 | 分组卡片（Safety/Collaborative/Pending）、快捷操作 | P1-提醒列表 |
1.7 消息中心
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 消息列表 | /pages/messages/index | __messages.html | 家庭消息时间线 | 日期分组（今日/昨日/本周）、消息类型徽章 | P0-普通消息收件箱 |
| 语音消息详情 | /pages/messages/voice | __message_detail.html | 播放语音消息 | 波形播放器、语速控制、文本转录 | P0-普通消息收件箱 |
| 发送语音消息 | /pages/messages/send-voice | __voice_message.html | 录制并发送语音消息 | 录音按钮、播放/丢弃、定时发送 | P1-创建提醒 |
| 发送文字消息 | /pages/messages/send-text | __text_message.html | 文字转语音发送 | 内容预览、定时发送、受委托人卡片 | P1-创建提醒 |
| 电话呼叫 | /pages/messages/phone-call | __phone_call.html | 通过 Luma 拨打语音电话 | 呼叫状态、免提/静音快捷操作 | P0-应急通话 |
| 视频通话 | /pages/messages/video-call | __video_call.html | 发起视频通话 | 视频通话控制面板、静音/翻转/挂断 | P0-应急通话 |
1.8 个人与隐私
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 个人设置 | /pages/profile/index | __profile.html | 账户设置中心 | 家庭成员入口、设备入口、通知/隐私/帮助入口、登出 | P0-操作审计日志 |
| 隐私政策 | /pages/privacy/policy | __privacy_policy.html | 阅读隐私政策全文 | 政策正文、强制滚动至底部、同意/拒绝按钮 | P0-隐私政策同意 |
| 隐私数据管理 | /pages/privacy/data | __privacy_data.html | 数据下载与账户删除 | 活动摘要、下载按钮、注销入口 | P0-隐私同意撤回 |
| 注销账号 | /pages/privacy/withdraw | __privacy_withdraw.html | 账号注销流程 | 注销后果说明、DELETE 确认输入 | P0-隐私同意撤回 |
1.9 通知设置
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 通知偏好 | /pages/settings/notifications | __notification_preferences.html | 各类型通知开关 | 5类通知 Toggle（紧急类默认强制开启） | P0-通知偏好设置 |
| 静默时段 | /pages/settings/quiet-hours | __quiet_hours.html | 免打扰时间段设置 | 时间范围选择器、星期选择、24h 时间轴可视化 | P1-静默时段设置 |
| 联系优先级 | /pages/settings/contact-order | __contact_order.html | 紧急联系人排序 | 拖拽排序、优先级徽章、保存按钮 | P0-通知分发 |
1.10 帮助与报告
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 帮助与支持 | /pages/support/index | __support.html | 客服联系方式和 FAQ | 联系方式卡片、FAQ 手风琴、联系表单 | P1-联系客服 |
| 健康周报 | /pages/report/weekly | __weekly_report.html | AI 生成健康周报 | AI 洞察卡片、4项指标网格、观察记录卡片 | P1-健康周报 |
1.11 内部导航
| 页面名称 | 路由 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|---|
| 页面索引 | /pages/internal/pages | __pages.html | 内部页面导航汇总 | 按分类分组的页面列表（登录/导航/消息/设备等） | 内部工具 |
2. Luma App（老人端）屏幕清单
Luma App 为语音优先设备，屏幕为辅助交互界面。所有屏幕均为独立文件，按状态切换显示。
2.1 首页（Home Hub — 多状态屏幕）
| 屏幕名称 | 代码文件路径 | 触发条件 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 首页-家庭状态 | __home_family.html | 设备激活后默认 | 时间/日期/问候语、家庭消息通知徽章 | P0-语音唤醒 |
| 首页-正常状态 | __home_calm.html | 老人状态平稳 | 时间/日期/问候语、"I'm right here" 提示 | P0-语音唤醒 |
| 首页-预警询问 | __home_alert.html | 检测到异常活动 | "Mary, are you okay?" 询问、语音应答（I'm okay / I need help） | P0-跌倒后主动询问 |
| 首页-离线状态 | __home_offline.html | 网络中断 | 灰色调、"I'm still here" 本地提醒可用 | P0-离线 SOS 缓存 |
| 首页-语音倾听 | __home_listening.html | 唤醒词触发后 | 大型倾听动画 、"I'm listening" | P0-语音唤醒与 ASR |
| 首页-记忆询问 | __home_memory.html | Memory 功能激活 | 记忆话题展示、温暖色调 | P1-情感陪聊 |
| 首页-提醒待播 | __home_reminder.html | 提醒触发前 | 时间/日期、提醒倒计时琥珀色指示 | P1-提醒播报 |
2.2 首次启动引导（First Launch）
| 屏幕名称 | 代码文件路径 | 步骤 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 欢迎页 | __first_launch_page_1.html | Step 1 | Luma 品牌展示、朋友介绍插画、"Let's Be Friends" CTA | P0-配网模式 |
| 功能介绍页 | __first_launch_page_2.html | Step 2 | 语音交互功能展示（自然对话、记忆偏好、音乐） | P0-配网模式 |
| 隐私与安全页 | __first_launch_page_3.html | Step 3 | 隐私保护说明、安全功能列表 | P0-配网模式 |
| 紧急帮助说明页 | __first_launch_page_4.html | Step 4 | SOS 使用说明、"Say 'Hey Luma, I need help'" | P0-SOS 事件缓存 |
2.3 设备配网（Setup）
| 屏幕名称 | 代码文件路径 | 步骤 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 二维码配网 | __setup_qr.html | Step 1 | QR 码展示、配对码、Family App 引导文字 | P0-配网模式与二维码 |
| 设备自检 | __device_check.html | Step 3 | 5项检查清单（摄像头/麦克风/扬声器/屏幕/SOS 服务） | P1-设备自检 |
2.4 设置（Settings）
| 屏幕名称 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 设置中心 | __settings.html | 设置入口聚合 | 亮度/音量/Night Mode/Privacy Mode/设备信息 | P1-一键锁屏 |
| 音量调节 | __volume.html | 音量控制 | 百分比显示、预设按钮（Loud/Normal/Quiet/Mute）、滑块 | P1-一键锁屏 |
| 亮度调节 | __brightness.html | 屏幕亮度 | 百分比 显示、预设按钮（High/Medium/Low/Auto）、滑块 | P1-一键锁屏 |
| 隐私锁屏确认 | __lock_screen.html | Privacy Mode 激活确认 | 隐私说明、"Turn On" 确认按钮 | P1-一键锁屏 |
2.5 安全与紧急（Safety）
| 屏幕名称 | 代码文件路径 | 触发条件 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 跌倒检测询问 | __fall_detection.html | 检测到异常活动 | "Are you okay?" 询问、SOS 按钮 | P0-跌倒后主动询问 |
| 紧急呼叫中 | __emergency_alert.html | 触发紧急呼叫 | 联系人列表、呼叫状态（振铃/已确认/等待中） | P0-语音/按键呼叫家属 |
| SOS 呼叫中 | __sos_calling.html | SOS 激活 | 紧急联系人显示、取消按钮 | P0-离线 SOS 事件缓存 |
| 呼救帮助说明 | __home_help.html | 呼救流程中 | Luma 联系家属提示、倾听动画 | P0-语音/按键呼叫家属 |
2.6 关怀消息（Care Card）
| 屏幕名称 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 家属消息卡片 | __care_card.html | 展示家属发来的语音消息 | 发送者信息、消息内容、语音播放提示 | P0-语音/按键呼叫家属 |
2.7 语音对话（Voice Interaction）
| 屏幕名称 | 代码文件路径 | 主要功能 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 语音对话界面 | __voice_interaction.html | 显示对话内容（ASR+TTS） | 唤醒词显示、对话气泡、倾听动画 | P0-TTS 文本播报 |
2.8 提醒系统（Custom Reminder）
| 屏幕名称 | 代码文件路径 | 状态 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 自定义提醒展示 | __custom_reminder.html | 提醒播放中 | 提醒内容、专属私密度标识、倾听提示 | P1-提醒播报 |
| 创建提醒-倾听 | __custom_reminder_listening.html | 录音倾听中 | 倾听动画、引导文案 | P1-提醒播报 |
| 创建提醒-成功 | __custom_reminder_success.html | 提醒已保存 | 绿色确认图标、提醒时间/内容复述 | P1-老人确认 |
| 全部提醒列表 | __custom_reminder_all.html | 提醒管理 | 提醒列表（名称/时间/隐私标识） | P1-提醒播报 |
| 创建提醒-确认 | __custom_reminder_confirming.html | 保存前二次确认 | 提醒内容复述、"Shall I add it?" | P1-老人确认 |
| 删除提醒确认 | __custom_reminder_confirm_delete.html | 删除前确认 | 删除警告、"Say 'Yes, delete it'" | P1-提醒播报 |
| 分享提醒确认 | __custom_reminder_share.html | 分享给家属确认 | 分享内容预览、"Say 'Yes, share it'" | P1-提醒播报 |
2.9 网络状态（Network States）
| 屏幕名称 | 代码文件路径 | 触发条件 | 主要组件构成 | 关联需求 |
|---|---|---|---|---|
| 网络中断 | __offline.html | 网络断连 | 离线提示、911 安全提示、本地提醒可用 | P0-离线 SOS 缓存 |
| 网络恢复 | __connection_restored.html | 网络重连 | 绿色勾选动画、3秒自动消失 | P1-网络状态检测 |
3. 页面层级关系图
Family App 导航结构
Luma App 屏幕状态流转
4. 页面跳转逻辑（Family App）
| 当前页面 | 触发操作 | 目标页面 | 传递参数 | 跳转方式 |
|---|---|---|---|---|
| 登录页 | 登录成功 | 首页-家庭状态 | token | navigateTo |
| 登录页 | 点击注册 | 注册页 | — | navigateTo |
| 注册页 | 注册成功 | 隐私政策 | — | redirectTo |
| 隐私政策 | 同意 | 欢迎页 | consent=true | redirectTo |
| 欢迎页 | 完成引导 | 7天仪式进度 | — | navigateTo |
| 7天仪式进度 | 点击预览 | 首页-家庭状态 | — | navigateTo |
| 首页-家庭状态 | 点击设备列表 | 设备列表 | family_id | navigateTo |
| 设备列表 | 点击添加 | 添加设备向导 | — | navigateTo |
| 首页-家庭状态 | 点击消息 | 消息列表 | family_id | navigateTo |
| 首页-家庭状态 | 点击个人 | 个人设置 | user_id | navigateTo |
| 首页-家庭状态 | 点击 Quick Send 文字 | 发送文字消息 | target_luma_id | navigateTo |
| 首页-家庭状态 | 点击 Quick Send 语音 | 发送语音消息 | target_luma_id | navigateTo |
| 首页-家庭状态 | 点击 Quick Send 视频 | 视频通话 | target_luma_id | navigateTo |
| 首页-家庭状态 | 点击老人头像 | 电话呼叫 | target_luma_id | navigateTo |
| 消息列表 | 点击消息卡片 | 语音消息详情 | message_id | navigateTo |
| 首页-记忆状态 | 点击提问 | 提问输入 | — | navigateTo |
| 记忆存储 | 点击记忆项 | 记忆答案页 | memory_id | navigateTo |
| 个人设置 | 点击家庭成员 | 家庭团队 | family_id | navigateTo |
| 个人设置 | 点击通知偏好 | 通知偏好 | user_id | navigateTo |
| 通知偏好 | 点击静默时段 | 静默时段 | — | navigateTo |
5. 组件复用约定
Family App 全局组件
| 组件名称 | 文件路径 | 说明 |
|---|---|---|
| 底部导航栏 | components/BottomNav.* | 首页/消息/个人 三 tab，含预警态红色样式 |
| Quick Send 操作面板 | components/QuickSend.* | 文字/语音/视频 三图标操作入口 |
| 设备状态卡片 | components/DeviceCard.* | 设备图标+名称+状态+电量，跨列表和详情页复用 |
| 消息气泡 | components/MessageBubble.* | 语音/文字/提醒类型，跨消息列表和详情页复用 |
| 时间线进度条 | components/ProgressBar.* | 通用进度条，Onboarding 和 7天仪式复用 |
| 表单输入组件 | components/FormInput.* | 通用表单输入，跨登录/注册/忘记密码复用 |
Luma App 全局组件
| 组件名称 | 文件路径 | 说明 |
|---|---|---|
| 倾听动画 | components/ListeningWaves.* | 语音倾听状态动画，所有倾听场景复用 |
| 时间/日期头部 | components/TimeHeader.* | 时间（64px）+ 日期 + 问候语，所有 Home 状态复用 |
| 提醒琥珀色指示 | components/ReminderDot.* | 脉冲琥珀色圆点，提醒临近指示 |
| SOS 紧急呼叫栏 | components/SOSBar.* | 底部紧急操作栏，emergency_alert / sos_calling 共用 |
| 隐私说明浮层 | components/PrivacyCard.* | 隐私模式激活说明，lock_screen 复用 |
6. 适老化设计规范（按端）
| 设计维度 | Family App | Luma App |
|---|---|---|
| 字号最小值 | ≥ 16pt（正文）/ ≥ 20pt（标题） | ≥ 18pt（强制） |
| 字号最大值 | 不设上限 | 不设上限 |
| 触摸目标最小尺寸 | 48×48dp | 不适用（语音优先） |
| 颜色对比度 | WCAG AA（4.5:1） | WCAG AA（4.5:1） |
| 按钮样式 | 高对比度描边按钮 | 大面积图标 + 文字双提示 |
| 导航层级 | ≤ 3 层 | ≤ 2 层（触屏操作） |
| 声音反馈 | 可选 | 强制（语音播报） |
| 状态提示 | Toast + 震动 | 语音播报 + 屏幕文字 |
| 无障碍支持 | TalkBack/VoiceOver 兼容 | TTS 全程支持 |