VISUAL_GUIDE.md 23 KB
长者档案功能 - 视觉演示指南
📱 界面演示
1. 老人列表界面
┌─────────────────────────────────────────────────────────────────┐
│ 老人列表 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [头像] 王奶奶 [长者档案] [添加设备] │ ← 档案按钮
│ │ 72岁 • 女 │ │
│ │ ● 身体状态良好 │ │
│ │ 📍 北京市朝阳区建国路1号 │ │
│ │ 3 个设备 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [头像] 李爷爷 [长者档案] [添加设备] │ │
│ │ 78岁 • 男 │ │
│ │ ● 需要关注 │ │
│ [object Object]海市浦东新区世纪大道100号 │ │
│ │ 2 个设备 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [头像] 张奶奶 [长者档案] [添加设备] │ │
│ │ 68岁 • 女 │ │
│ │ ● 身体状态良好 │ │
│ │ 📍 广州市天河区珠江新城 │ │
│ │ 4 个设备 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
2. 点击档案按钮后的弹窗
┌────────────────────────────────────────────────────┐
│ 长者档案 [×] │ ← 标题和关闭按钮
├────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ [王] 姓名：王奶奶 │ │ ← 基本信息卡片
│ │ 年龄：72岁 │ │
│ │ 性别：女 │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 联系方式 │ │ ← 联系方式卡片
│ │ 长者电话：13800138000 │ │
│ │ 家属电话：13900139000 │ │
│ │ 地址：北京市朝阳区建国路1号 │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 预警历史 (3) │ │ ← 预警历史卡片
│ │ ┌────────────────────────────────────────┐ │ │
│ │ │ [跌倒预警] 2024-01-15 10:30 │ │ │
│ │ │ 检测到长者跌倒，请立即查看 │ │ │
│ │ └────────────────────────────────────────┘ │ │
│ │ ┌────────────────────────────────────────┐ │ │
│ │ │ [心率异常] 2024-01-14 14:20 │ │ │
│ │ │ 心率过高，建议就医检查 │ │ │
│ │ └────────────────────────────────────────┘ │ │
│ │ ┌────────────────────────────────────────┐ │ │
│ │ │ [血压偏高] 2024-01-13 09:15 │ │ │
│ │ │ 血压偏高，请注意休息 │ │ │
│ │ └────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────┘
🎨 颜色方案
主要颜色
┌─────────────────────────────────────────────────┐
│ 主色 (Primary) │
│ #1a73e8 │
│ RGB(26, 115, 232) │
│ ████████████████████████████████████████████ │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ 辅色 (Secondary) │
│ #7b61ff │
│ RGB(123, 97, 255) │
│ ████████████████████████████████████████████ │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ 强调色 (Accent) │
│ #fd9644 │
│ RGB(253, 150, 68) │
│ ████████████████████████████████████████████ │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ 背景色 (Background) │
│ #1a1f2e │
│ RGB(26, 31, 46) │
│ ████████████████████████████████████████████ │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ 文字色 (Text) │
│ #ffffff │
│ RGB(255, 255, 255) │
│ ████████████████████████████████████████████ │
└─────────────────────────────────────────────────┘
📐 布局尺寸
弹窗尺寸
┌──────────────────────────────────┐
│ │
│ 弹窗宽度: 600px │
│ │
│ ┌────────────────────────────┐ │
│ │ │ │
│ │ 内容区域 │ │
│ │ 最大高度: 600px │ │
│ │ 支持滚动 │ │
│ │ │ │
│ └────────────────────────────┘ │
│ │
└──────────────────────────────────┘
卡片尺寸
┌──────────────────────────────────┐
│ 基本信息卡片 │
│ 高度: 120px │
│ 内边距: 20px │
│ 边框: 1px solid rgba(255,255,255,0.1) │
│ 圆角: 12px │
└──────────────────────────────────┘
┌──────────────────────────────────┐
│ 预警项目 │
│ 高度: 80px │
│ 内边距: 12px │
│ 边框左: 3px solid #fd9644 │
│ 圆角: 6px │
└──────────────────────────────────┘
头像尺寸
┌────────────┐
│ │
│ [王] │ 80px × 80px
│ │ 圆形
│ │ 字体: 32px
│ │
└────────────┘
🎭 状态演示
加载状态
┌────────────────────────────────────────────────────┐
│ 长者档案 [×] │
├────────────────────────────────────────────────────┤
│ │
│ │
│ ⟳ 加载中... │
│ │
│ │
└────────────────────────────────────────────────────┘
空状态
┌────────────────────────────────────────────────────┐
│ 长者档案 [×] │
├────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 预警历史 │ │
│ │ │ │
│ │ 暂无预警记录 │ │
│ │ │ │
│ └──────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────┘
错误状态
┌────────────────────────────────────────────────────┐
│ 长者档案 [×] │
├────────────────────────────────────────────────────┤
│ │
│ 加载失败，请重试 │
│ │
└────────────────────────────────────────────────────┘
🎬 交互动画
弹窗打开
时间轴:
0ms ─────────────────────────────────────
弹窗从中心缩放出现
透明度: 0 → 1
缩放: 0.8 → 1
300ms ─────────────────────────────────────
动画完成
弹窗完全显示
弹窗关闭
时间轴:
0ms ─────────────────────────────────────
弹窗开始缩小
透明度: 1 → 0
缩放: 1 → 0.8
300ms ─────────────────────────────────────
动画完成
弹窗完全隐藏
预警列表滚动
滚动条样式:
┌─────────────────────────────────┐
│ 内容 │█
│ 内容 │█
│ 内容 │█
│ 内容 │
│ 内容 │
└─────────────────────────────────┘
宽度: 6px
颜色: rgba(26, 115, 232, 0.5)
悬停: rgba(26, 115, 232, 0.7)
📊 响应式设计
桌面版 (1920px)
┌─────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────┐ ┌─────────────────────────────────┐ │
│ │ 老人列表 │ │ 详情区域 │ │
│ │ │ │ │ │
│ │ [长者卡片] │ │ [长者档案弹窗] │ │
│ │ [长者卡片] │ │ │ │
│ │ [长者卡片] │ │ │ │
│ │ │ │ │ │
│ └──────────────────┘ └─────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
平板版 (768px)
┌──────────────────────────────────┐
│ │
│ ┌────────────────────────────┐ │
│ │ 老人列表 │ │
│ │ │ │
│ │ [长者卡片] │ │
│ │ [长者卡片] │ │
│ │ │ │
│ └────────────────────────────┘ │
│ │
│ ┌────────────────────────────┐ │
│ │ [长者档案弹窗] │ │
│ │ │ │
│ └────────────────────────────┘ │
│ │
└──────────────────────────────────┘
手机版 (375px)
┌──────────────────┐
│ │
│ ┌────────────┐ │
│ │ 老人列表 │ │
│ │ │ │
│ │[长者卡片] │ │
│ │[长者卡片] │ │
│ │ │ │
│ └────────────┘ │
│ │
│ ┌────────────┐ │
│ │档案弹窗 │ │
│ │ │ │
│ └────────────┘ │
│ │
└──────────────────┘
🎯 用户交互流程
完整交互流程图
┌─────────────────────────────────────────────────────────┐
│ 用户界面 │
├─────────────────────────────────────────────────────────┤
│ │
│ 1. 用户看到老人列表 │
│ ↓ │
│ 2. 点击"长者档案"按钮 │
│ ↓ │
│ 3. 弹窗打开，显示加载状态 │
│ ↓ │
│ 4. 调用接口获取数据 │
│ ├─ 成功 → 显示真实数据 │
│ └─ 失败 → 显示假数据 │
│ ↓ │
│ 5. 用户查看长者信息 │
│ ├─ 查看基本信息 │
│ ├─ 查看联系方式 │
│ └─ 查看预警历史（支持滚动） │
│ ↓ │
│ 6. 用户关闭弹窗 │
│ ├─ 点击关闭按钮 │
│ └─ 按 ESC 键 │
│ ↓ │
│ 7. 弹窗关闭，返回列表 │
│ │
└─────────────────────────────────────────────────────────┘
🎨 样式细节
按钮样式
档案按钮
┌──────────────┐
│ 长者档案 │ 背景: #909399
│ │ 颜色: 白色
└──────────────┘ 圆角: 4px
内边距: 10px
悬停: 背景变深
添加设备按钮
┌──────────────┐
│ 添加设备 │ 背景: #1a73e8
│ │ 颜色: 白色
└──────────────┘ 圆角: 4px
内边距: 10px
悬停: 背景变深
文本样式
标题:
字体大小: 18px
字体粗细: 600
颜色: 白色
标签:
字体大小: 14px
字体粗细: 500
颜色: 灰色
内容:
字体大小: 14px
字体粗细: 400
颜色: 白色
时间:
字体大小: 12px
字体粗细: 400
颜色: 灰色
📱 移动端适配
触摸目标大小
按钮最小高度: 44px
按钮最小宽度: 44px
间距: 最少 8px
弹窗适配
最小宽度: 320px
最大宽度: 90% 屏幕宽度
最大高度: 80% 屏幕高度
本指南提供了长者档案功能的完整视觉演示和设计规范。