FAMILY GUARD · 双端完整方案

让爱
不只是远远地牵挂

家人守护双端原型 · 老人端 9 屏 + 子女端 11 屏 · 统一守护绿主色与圆润形态 · 一键 SOS 与跌倒识别 · 实时地图、健康趋势、告警直达，与家人始终在线。

老人端 · 9 屏启动流程
子女端 · 11 屏完整方案
平台 · iOS
调性 · 安心可靠 · 温暖治愈
触点 · ≥ 44 / 56px
FOR DEV · 交互 / 数据规格
开发同学看这里 · 每个 pin 都有产品说明
在任意页面 URL 后加 ?dev=1 可在真机界面上叠加编号 pin，点击展开「目的 / 交互 / 文案 / 接口 / 状态分支」规格面板。 需要一次性看完？打开右边的完整手册。
完整规格手册 试一下 Dev 模式 ›
01 / FLOW

完整启动流程 · 9 屏

横向滑动查看全部页面。点击每一屏的真机可直接进入交互。

1
启动闪屏SPLASH
2
引导 · 摔倒识别ONBOARDING 1 / 3
3
引导 · 一键求助ONBOARDING 2 / 3
4
引导 · 家人陪伴ONBOARDING 3 / 3
5
手机号登录LOGIN
6
输入验证码VERIFY
7
绑定家人BIND · 扫码 / 邀请码
8
绑定成功SUCCESS
9
首页落地HOME · 老人端
单页直达 · 1 启动 2 摔倒识别 3 一键求助 4 家人陪伴 5 登录 6 验证码 7 绑定家人 8 绑定成功 9 首页
02 / FLOW · 子女端

子女端完整方案 · 11 屏

兼顾远在他乡的年轻子女 + 与老人同住的配偶；沿用守护绿主色 + 大字号 + 圆润形态，但加入实时地图、告警 feed、健康图表等更高密度模块。

1
引导 · 看见家人ONBOARDING 1 / 3
2
引导 · 告警直达ONBOARDING 2 / 3
3
引导 · 全家协同ONBOARDING 3 / 3
4
绑定爸妈BIND · 扫码 / 邀请码
5
首页守护总览HOME · 地图 + 告警 feed
6
老人详情DETAIL · 地图 + 健康 + 通话
7
告警通知ALERTS · SOS / 服药 / 围栏
8
电子围栏GEOFENCE · 安全区编辑
9
健康趋势HEALTH · 心率 / 步数 / 睡眠
10
家庭留言CHAT · 4 人群聊 + AI 转写
11
我的PROFILE · 设置 + 家人列表
单页直达 · 1 看见家人 2 告警直达 3 全家协同 4 绑定爸妈 5 首页 6 老人详情 7 告警 8 围栏 9 健康趋势 10 家庭留言 11 我的
03 / SYSTEM

视觉系统

围绕「安心可靠 + 温暖治愈」搭建的老人友好色彩与文字尺度。

色彩 · 表面

暖白底 oklch(98% .004 80)
纯白卡片 #FFFFFF
分割 / 输入 oklch(93% .008 80)

色彩 · 品牌

守护绿 (主) oklch(48% .085 165)
温暖珊瑚 (强调) oklch(70% .16 35)
绿色软背景 oklch(94% .025 165)

字号尺度 (老人端基准)

44 / 700 大标题
32 / 700 页面标题
22 / 600 按钮主文案
20 / 400 正文 — 老人端基准
18 / 400 次级正文 — 不再小

设计原则

高对比 · 文字与背景对比 ≥ AAA,任何状态都看得清。
大触点 · 所有可点击元素 ≥ 56px,SOS 按钮 156px。
圆润形态 · 卡片 20px、按钮 28px、SOS 全圆,无锐角。
少文字 · 一屏一件事,关键信息靠图标 + 颜色暗示。
真人情绪 · 进度与反馈用动画(脉冲、涟漪),让老人感到「在动 = 在守护」。
家人在场 · 每一屏都看到家人头像,孤独感被持续稀释。