跳到主要内容

用户界面结构设计

平台概览

平台技术栈设备尺寸用户角色设计特点
Family AppUniApp(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.htmlApp 功能简介插画、特性列表、Get Started CTAP0-设备安装引导
功能介绍页/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 卡片、紧急呼叫 CTAP0-预警 PUSH 推送
首页-离线状态/pages/home?state=offline__home_offline.htmlLuma 离线,本地功能仍可用离线横幅、呼叫入口P1-离线提醒
首页-提醒状态/pages/home?state=reminder__home_reminder.html提醒已发送待确认提醒状态卡片、查看提醒列表入口P1-提醒执行情况
首页-记忆状态/pages/home?state=memory__home_memory.htmlMemory 功能入口Memory 话题卡片、Quick Send 入口P1-情感陪聊
首页-紧急帮助/pages/home?state=help__home_help.html触发紧急帮助状态红色紧急横幅、呼叫按钮P0-应急通话
首页-无设备/pages/home?state=no-devices__home_noDevices.html未绑定任何设备设备引导插画、添加设备 CTAP0-设备列表

首页-记忆模块子页面

页面名称路由代码文件路径主要功能主要组件构成关联需求
提问输入页/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.html5步创建/编辑被照护者档案步骤进度条(基本信息/健康/作息/性格/确认)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.htmlAI 生成健康周报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.htmlMemory 功能激活记忆话题展示、温暖色调P1-情感陪聊
首页-提醒待播__home_reminder.html提醒触发前时间/日期、提醒倒计时琥珀色指示P1-提醒播报

2.2 首次启动引导(First Launch)

屏幕名称代码文件路径步骤主要组件构成关联需求
欢迎页__first_launch_page_1.htmlStep 1Luma 品牌展示、朋友介绍插画、"Let's Be Friends" CTAP0-配网模式
功能介绍页__first_launch_page_2.htmlStep 2语音交互功能展示(自然对话、记忆偏好、音乐)P0-配网模式
隐私与安全页__first_launch_page_3.htmlStep 3隐私保护说明、安全功能列表P0-配网模式
紧急帮助说明页__first_launch_page_4.htmlStep 4SOS 使用说明、"Say 'Hey Luma, I need help'"P0-SOS 事件缓存

2.3 设备配网(Setup)

屏幕名称代码文件路径步骤主要组件构成关联需求
二维码配网__setup_qr.htmlStep 1QR 码展示、配对码、Family App 引导文字P0-配网模式与二维码
设备自检__device_check.htmlStep 35项检查清单(摄像头/麦克风/扬声器/屏幕/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.htmlPrivacy Mode 激活确认隐私说明、"Turn On" 确认按钮P1-一键锁屏

2.5 安全与紧急(Safety)

屏幕名称代码文件路径触发条件主要组件构成关联需求
跌倒检测询问__fall_detection.html检测到异常活动"Are you okay?" 询问、SOS 按钮P0-跌倒后主动询问
紧急呼叫中__emergency_alert.html触发紧急呼叫联系人列表、呼叫状态(振铃/已确认/等待中)P0-语音/按键呼叫家属
SOS 呼叫中__sos_calling.htmlSOS 激活紧急联系人显示、取消按钮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)

当前页面触发操作目标页面传递参数跳转方式
登录页登录成功首页-家庭状态tokennavigateTo
登录页点击注册注册页navigateTo
注册页注册成功隐私政策redirectTo
隐私政策同意欢迎页consent=trueredirectTo
欢迎页完成引导7天仪式进度navigateTo
7天仪式进度点击预览首页-家庭状态navigateTo
首页-家庭状态点击设备列表设备列表family_idnavigateTo
设备列表点击添加添加设备向导navigateTo
首页-家庭状态点击消息消息列表family_idnavigateTo
首页-家庭状态点击个人个人设置user_idnavigateTo
首页-家庭状态点击 Quick Send 文字发送文字消息target_luma_idnavigateTo
首页-家庭状态点击 Quick Send 语音发送语音消息target_luma_idnavigateTo
首页-家庭状态点击 Quick Send 视频视频通话target_luma_idnavigateTo
首页-家庭状态点击老人头像电话呼叫target_luma_idnavigateTo
消息列表点击消息卡片语音消息详情message_idnavigateTo
首页-记忆状态点击提问提问输入navigateTo
记忆存储点击记忆项记忆答案页memory_idnavigateTo
个人设置点击家庭成员家庭团队family_idnavigateTo
个人设置点击通知偏好通知偏好user_idnavigateTo
通知偏好点击静默时段静默时段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 AppLuma App
字号最小值≥ 16pt(正文)/ ≥ 20pt(标题)≥ 18pt(强制)
字号最大值不设上限不设上限
触摸目标最小尺寸48×48dp不适用(语音优先)
颜色对比度WCAG AA(4.5:1)WCAG AA(4.5:1)
按钮样式高对比度描边按钮大面积图标 + 文字双提示
导航层级≤ 3 层≤ 2 层(触屏操作)
声音反馈可选强制(语音播报)
状态提示Toast + 震动语音播报 + 屏幕文字
无障碍支持TalkBack/VoiceOver 兼容TTS 全程支持