UX 交互设计规范

本规范基于已完成的设计页面（static/ui/fap/、static/ui/lsp/）提取，参考客户原始需求文档制定。

平台概览

平台	技术栈	设备尺寸	用户角色	设计特点
Family App	UniApp（iOS + Android）	390×844px（iPhone 16 Pro）	子女/家属（中年用户）	传统触控界面，适老化要求：字号 ≥ 16pt
Luma App（Luma 智能音箱）	嵌入式 Linux + Web 前端	1280×800px（音箱屏幕）	老年人（65岁以上）	语音优先 + 触控辅助，适老化要求：字号 ≥ 18pt

1. 设计系统底层变量

1.1 Family App Design Tokens

所有 Family App 页面共享 __design_tokens.css 中的 CSS 变量：

/* 墨色系列（文字） */
--ink: #1A1814;        /* 主文字 */
--ink-mid: #4A4540;    /* 中等文字 */
--ink-soft: #7A7570;   /* 柔和文字 */
--ink-dim: #B0AAA5;    /* 暗淡文字 */

/* 纸张系列（背景） */
--paper: #F8F6F2;      /* 主背景 */
--paper2: #F0EDE8;     /* 次背景 */
--paper3: #E8E4DE;    /* 第三背景 */

/* 状态色 */
--green: #2D6A4F;      /* 安全/平静 */
--green-light: #EAF4EF;
--amber: #92400E;      /* 提醒/警告 */
--amber-light: #FEF3C7;
--red: #991B1B;        /* 紧急/关注 */
--red-light: #FEF2F2;
--blue: #1E3A8A;       /* 家人/信息 */

/* 字体 */
--font-display: 'Fraunces', Georgia, serif;   /* 品牌/标题 */
--font-body: 'DM Sans', system-ui, sans-serif; /* 界面正文 */
--font-mono: 'JetBrains Mono', monospace;     /* 等宽字体 */

/* 动画缓动 */
--ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

1.2 Family App 颜色语义

变量	色值	用途
`--green` / `--green-light`	CALM 安全状态	首页安全、正常消息
`--amber` / `--amber-light`	REMINDER 提醒状态	待确认提醒
`--red` / `--red-light`	ALERT/HELP 紧急状态	预警横幅、紧急 CTA
`--blue` / `--blue-light`	FAMILY 家人状态	老人消息通知
`--ink-dim` / `--paper3`	OFFLINE 离线状态	设备离线状态

1.3 Luma App 颜色语义

状态	背景	强调色	说明
CALM 平静	`#FAFAF7`（暖白）	`#8A6A00`（琥珀）	正常陪伴界面
ALERT 关注	`#0D1117`（深黑）	`#9A5040`（暖红）	跌倒询问，保持克制
HELP 求助	`#0D1117`（深黑）	`#8A3030`（深红）	求助界面
OFFLINE 离线	`#0D1117`（深黑）	`#5A6060`（灰色）	诚实但温和
FAMILY 家人	`#0D1117`（深黑）	`#3D6A9A`（家庭蓝）	语音消息卡片

Luma App 所有深色状态均使用 #0D1117 作为基础背景，配合氛围光渐变。

2. 四大设计铁律（通用）

所有设计决策必须符合以下铁律。

铁律	核心含义	违规示例
Law 1: 冷静技术	界面保持安静，不主动吸引注意力	弹出通知、闪烁动画
Law 2: 解读，而非展示	把数据翻译成温暖的人类语言	展示原始步数图表
Law 3: 在场，而非评判	永远不评判用户行为	"你昨晚没睡好"、过度表扬
Law 4: 克制带来信任	选择不展示什么比展示什么更重要	展示摄像头画面、仪表盘

3. 六状态体系（通用）

3.1 状态定义与颜色

状态	英文	Family App 背景色	Family App 强调色	Luma App 背景	Luma App 强调色	Family App 首页主 CTA
平静	CALM	`#EAF4EF`	`#4A8A5A`	`#FAFAF7`	`#8A6A00`	查看今日摘要
提醒	REMINDER	`#FEF3C7`	`#B45309`	`#FAFAF7`	`#B45309`	查看今天的提醒
家人	FAMILY	`#EFF6FF`	`#1E3A8A`	`#0D1117`	`#3D6A9A`	播放消息
关注	ALERT	`#FEF2F2`	`#9A5040`	`#0D1117`	`#9A5040`	立即联系老人
求助	HELP	`#FEF2F2`	`#8A3030`	`#0D1117`	`#8A3030`	立即联系老人
离线	OFFLINE	`#E8E4DE`	`#5A6060`	`#0D1117`	`#5A6060`	绕过 Luma 直接呼叫

3.2 状态流转

3.3 ALERT 升级链路

时间节点	动作	触发条件
T=30s	通知联系人 #1	App 推送 + SMS（可选）
T=50s	通知联系人 #2	联系人 #1 未确认
T=70s	通知联系人 #3	联系人 #2 未确认
T=90s	广播所有联系人	所有单点联系人均未确认
任意时间	中断升级	收到 `USER_OK` 指令

4. Family App（儿女端）

4.1 页面结构规范

已实现结构（来自实际页面）：

<!-- 固定结构 -->
<div class="app-container">         <!-- 根容器，fadeIn 入场动画 -->
  <header class="header">            <!-- 头部：问候语 + 老人头像 -->
  <main class="content">            <!-- 内容区，slideUp 入场动画 -->
  <nav class="bottom-nav">          <!-- 固定底部导航 -->
</div>

Header 组件：

左侧：greeting-label（小标签）+ greeting-name（老人姓名，Fraunces 字体 30px）
右侧：elder-avatar-wrapper（老人头像 50px 圆形 + 状态环 + 状态点）

状态环动画（CALM）：ringPulse 3.5s ease-in-out infinite 状态环动画（ALERT）：ringPulse 1.5s ease-in-out infinite（更快，更紧迫）

底部导航：

固定定位，backdrop-filter: blur(20px) 毛玻璃效果
3 个 tab：Home / Messages / Profile
激活态：顶部 3px 状态色横条，scaleX(1) 动画

4.2 字号规范

元素	字号	字体	说明
老人姓名	30px	Fraunces display	衬线字体，温暖感
Hero 标题	28px	Fraunces display	状态主标题
正文	≥14px	DM Sans	适老化底线
Section 标签	11px uppercase	DM Sans 600	`letter-spacing: 0.8px`
按钮文字	15px	DM Sans 600	主 CTA 按钮
底部 Tab	10px	DM Sans 600	无障碍支持
徽章文字	9-10px	DM Sans 700	状态徽章

4.3 触控规范

指标	最小值	说明
按钮高度	≥56dp	主 CTA 使用 `padding: 16px 24px`
触控区域	≥44dp × 44dp	卡片最小触控面积
按钮间距	≥8-12dp	避免误触
圆角	≥12px	卡片和按钮统一 `border-radius`

4.4 卡片组件规范

Hero Card（首页状态卡片）：

.hero-card {
  background: var(--green-light);     /* 状态背景色 */
  border: 1.5px solid var(--green-border);
  border-radius: 24px;
  padding: 26px 24px;
  /* 顶部状态色渐变条 */
}
.hero-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), transparent 80%);
}

Recent Card（最近动态卡片）：

.recent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  /* hover: translateX(4px) + border-color 变化 */
}

Quick Send 网格：

.send-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.send-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 14px 6px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

4.5 动画规范

动画	CSS 类	时长	缓动	触发时机
页面入场	`fadeIn`	0.6s	`var(--ease-out)`	页面加载
内容块入场	`slideUp`	0.5s	`var(--ease-spring)`	延迟 0.05-0.3s 依次入场
Hero 脉冲	`cardPulse`	2.5s	ease-in-out	ALERT 状态持续循环
状态环脉冲	`ringPulse`	1.5-3.5s	ease-in-out	老人头像状态环
状态点闪烁	`dotBlink`	1-2.5s	ease-in-out	老人头像状态点
按钮悬停	hover + active	0.25s	`var(--ease-spring)`	悬停/点击反馈

禁止：任何自动播放的装饰性动画（分散注意力）

4.6 状态感知组件

Alert Banner（预警横幅）：

.alert-banner {
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
}

Quick Send 禁用态（ALERT/HELP 状态）：

.send-card {
  opacity: 0.5;
  pointer-events: none;  /* 紧急状态下禁用非紧急操作 */
}

4.7 导航规范

底部 Tab 栏：3 个固定 tab（Home / Messages / Profile）
桌面预览时：底部导航最大宽度 414px，居中显示，上方圆角
首页响应式：桌面时 body 使用渐变背景 #E0DDD8 → #F0EEEB → #E8E6E1

4.8 交互规范

交互元素	规范描述
页面加载	`fadeIn` 入场动画，无骨架屏（轻量页面）
表单提交	按钮 loading 态 + `disabled`，防止重复提交
空状态	插图 + 引导文案 + 行动按钮
错误提示	表单错误在输入框下方；全局错误 Toast 3s 消失
危险操作	删除/解绑等操作需二次确认

4.9 文案红线

禁用表达	替代表达
"已检测到跌倒"	"可能发生了什么，正在确认"
"Missed"、"detected"、"abnormal"	中性温和描述
原始数据值（"步数：3245"）	温暖的人类语言，如"今天活动量正常"

5. Luma App（老人端）

5.1 屏幕结构规范

已实现结构：

<div class="screen">              <!-- 1280×800 固定尺寸，响应式缩放 -->
  <div class="layer-time">        <!-- 时间层：时间 + 日期 -->
  <div class="layer-card">         <!-- 内容层：状态卡片/消息 -->
  <div class="layer-presence">    <!-- 存在感层：底部提示 -->
</div>

屏幕固定尺寸：

.screen {
  width: 1280px;
  height: 800px;
  max-width: 100vw;
  max-height: 100vh;
}

响应式缩放（按屏幕宽度分级）：

≥1280px：原始尺寸居中
900px-1279px：按比例缩放（width: 100vw; height: 56.25vw）
<900px：字号缩小（time 52px→40px→22px，greeting 48px→38px→22px）

5.2 字号规范

元素	字号	字体	说明
时间显示	≥52px	Libre Baskerville 400	远距离可读，衬线字体
日期	18-24px	DM Sans 300	大写字母间距
问候语	≥48px	Libre Baskerville 400	情感连接核心元素
状态信息	26-28px	DM Sans 300	浅色文字
存在感文字	20-22px	DM Sans 400 italic	引导下一步操作
帮助提示	16px	DM Sans 300	最淡层级的提示

5.3 倾听动画规范

Wave 动画（5 根声波条）：

.listening-indicator {
  display: flex; align-items: center; gap: 8-10px;
  margin-top: 36-40px;
}
.wave {
  width: 6-7px;
  border-radius: 3-4px;
  background: var(--accent-primary);
  animation: wave 1.3-1.4s ease-in-out infinite;
}
/* 5 根波条，不同高度 + 不同 delay */
.wave:nth-child(1) { height: 18-22px; animation-delay: 0s; }
.wave:nth-child(2) { height: 30-36px; animation-delay: 0.12-0.13s; }
.wave:nth-child(3) { height: 22-28px; animation-delay: 0.24-0.26s; }
.wave:nth-child(4) { height: 36-40px; animation-delay: 0.36-0.39s; }
.wave:nth-child(5) { height: 18-22px; animation-delay: 0.48-0.52s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.45-0.5; }
  50%       { transform: scaleY(1);    opacity: 1; }
}

5.4 氛围光规范

CALM 状态（暖白背景）：

.screen::before {
  background: radial-gradient(
    ellipse 70% 50% at 20% 40%,
    rgba(138, 106, 0, 0.04) 0%,  /* --surface-warm 氛围光 */
    transparent 60%
  );
}

ALERT 状态（深色背景）：

/* 背景渐变 + 红色氛围光 */
background-image:
  radial-gradient(ellipse 60% 50% at 30% 55%, rgba(154,80,64,0.10) 0%, transparent 70%),
  radial-gradient(ellipse 40% 35% at 70% 40%, rgba(180,83,9,0.06) 0%, transparent 60%);

OFFLINE 状态（深黑 + 颗粒纹理）：

.device-screen {
  background: #0D0D0D;
  box-shadow: 0 0 80px rgba(90,96,96,0.15), 0 0 40px rgba(90,96,96,0.08);
}
.grain-layer {
  /* SVG feTurbulence 颗粒纹理，opacity: 0.045，animation: grainShift 8s */
}
.ambient-glow {
  /* 中心圆形光晕 rgba(90,96,96,0.10) */
}

5.5 动画规范

动画	时长	缓动	延迟规律
`fadeInUp`	1-1.4s	`cubic-bezier(0.22, 1, 0.36, 1)`	依次递增 0.15-0.2s
`softAppear`	1.2-1.4s	`cubic-bezier(0.22, 1, 0.36, 1)`	同上
`cardGlow`（ALERT）	持续	ease-in-out	0.5s 开始
`grainShift`	8s	steps(1)	循环
`spinRing`（OFFLINE）	9s	linear	持续旋转
`opacityPulse`（OFFLINE 图标）	5s	ease-in-out	持续

5.6 布局规范

左对齐布局（常态 Home）：

.layout {
  padding: 60px 100px 60px 160px;  /* 左侧留白更大（屏幕宽广） */
  text-align: left;
  align-items: flex-start;
}

居中布局（Care Card、倾听态）：

/* 居中对齐，适合消息展示 */

5.7 安全与紧急规范

OFFLINE 安全提示条：

.safety-strip {
  background: var(--amber-bg);   /* 琥珀色背景 */
  border-top: 1px solid var(--amber-border);
  padding: 18px 80px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
/* 固定文案："If you need help right now, please call 911" */

存在感文字（最底部，淡色）：

.presence-line {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px; font-weight: 300; font-style: italic;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.6px;
}

5.8 六大不可协商原则

原则	详细说明
老年人是主要用户	设计语言围绕"帮助您保持自己的生活方式"
独立优先	不突出"监控"，强调"在家生活，有安全保障"
无内疚、无羞耻、无幼稚化	避免年龄歧视或过度表扬
Luma 是桥梁，而非障碍	增强家庭联系，而非替代
透明、可控、可逆	老年人能感知、控制并随时停止使用
低认知负荷	一次只处理一个概念

5.9 文案红线

禁用表达（Luma App 端）：

禁用表达	替代表达
"emergency"、"SOS"、"报警"	"need help" / "请说'帮我呼叫'"
"已检测到跌倒"	"可能发生了什么，我来看看你"
"I'm monitoring you"	"我会陪你度过每一天"
"你昨晚没睡好"	"昨晚似乎有点辗转反侧"
"detected"、"abnormal"	温和中性描述

推荐表达示例：

场景	推荐表达
跌倒询问	"Mary, are you okay?"
安静陪伴	"Quiet morning today. I'm right here."
提醒播报	"Almost eleven — I'll let you know when it's time."
家人消息	"Lily sent you a message this morning."
离线状态	"I'm having trouble connecting. But I can still help with your reminders."

5.10 语音 UX 规范

语速：比普通 TTS 慢 15-20%
句间停顿：500-800ms
每次播报：1-3 句话
未识别重试：用不同措辞，不重复同一句话
超时处理：倾听 10s 无响应，温和退出

6. 通用规范

6.1 字体使用规则

字体	用途	Family App	Luma App
Fraunces / Libre Baskerville	品牌标题、时间、问候语	✅	✅
DM Sans	正文、界面文字、标签	✅	✅
JetBrains Mono	等宽数据（极少用）	✅	✅

6.2 禁用颜色

无论 Family App 还是 Luma App，均严格禁用以下颜色：

禁用颜色	色值	原因
医疗蓝	`#007AFF`	与 Apple 系统色冲突，不符合 Reflekt 品牌
亮红	`#FF3B30`	过于刺激，不符合"冷静技术"原则
任何形式的渐变背景（装饰性）	—	分散注意力

6.3 组件复用约定

Family App 全局组件（CSS 类名规范）：

组件	类名	说明
页面根容器	`.app-container`	fadeIn 入场动画
状态 Hero 卡片	`.hero-card`	状态色背景 + 顶部渐变条
CTA 按钮	`.cta-btn`	全宽主操作按钮
Quick Send 网格	`.send-grid` / `.send-card`	三列操作入口
Recent 卡片	`.recent-card`	消息/动态列表项
底部导航	`.bottom-nav`	3-tab 固定导航
状态徽章	`.badge-safe` / `.badge-warning` / `.badge-danger`	圆角药丸形
老人头像包装	`.elder-avatar-wrapper`	头像 + 状态环 + 状态点

Luma App 全局组件（CSS 类名规范）：

组件	类名	说明
屏幕根容器	`.screen`	1280×800 固定尺寸
时间层	`.layer-time`	时间 + 日期
内容层	`.layer-card`	状态内容/消息卡片
存在感层	`.layer-presence`	底部引导文字
倾听动画	`.listening-indicator` + `.wave`	5 根声波条动画
氛围光晕	`.ambient-glow`	径向渐变光晕
颗粒纹理	`.grain-layer`	SVG 噪点叠加（OFFLINE 态）
安全提示条	`.safety-strip`	OFFLINE 态底部警示

7. 设计自查四问

这个设计感觉像监视吗？（答案必须是"否"）
这个设计感觉像医疗产品吗？（答案必须是"否"）
这个设计还能更简单吗？（答案必须是"是"，并持续简化）
我的父母会对此感到舒适吗？（答案必须是"是"）

If something feels impressive, remove it. If something feels quiet, keep it.

8. 参考文档

文档	说明
Family App Design Tokens	Family App CSS 变量全集
Reflekt Home Redesign v2.2	首页设计规范
Family App State Playbook v1.1	Family App 六状态规范
Luma Daily Presence Playbook v1.2	Luma App 六状态规范
颜色选择参考（广州团队）	颜色 token 规范
Phase1屏幕系统	Phase1 屏幕系统
Phase2感官层	动效与音效规范
US文档改进建议 v1.5	禁用/推荐词库

平台概览​

1. 设计系统底层变量​

1.1 Family App Design Tokens​

1.2 Family App 颜色语义​

1.3 Luma App 颜色语义​

2. 四大设计铁律（通用）​

3. 六状态体系（通用）​

3.1 状态定义与颜色​

3.2 状态流转​

3.3 ALERT 升级链路​

4. Family App（儿女端）​

4.1 页面结构规范​

4.2 字号规范​

4.3 触控规范​

4.4 卡片组件规范​

4.5 动画规范​

4.6 状态感知组件​

4.7 导航规范​

4.8 交互规范​

4.9 文案红线​

5. Luma App（老人端）​

5.1 屏幕结构规范​

5.2 字号规范​

5.3 倾听动画规范​

5.4 氛围光规范​

5.5 动画规范​

5.6 布局规范​

5.7 安全与紧急规范​

5.8 六大不可协商原则​

5.9 文案红线​

5.10 语音 UX 规范​

6. 通用规范​

6.1 字体使用规则​

6.2 禁用颜色​

6.3 组件复用约定​

7. 设计自查四问​

8. 参考文档​