SOS-主页高保真样式规范
字数
2435 字
阅读时间
10 分钟
参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦紧急求助、资源联系和稳定化功能的视觉呈现。
1. 设计定位与体验目标
- 页面主任务：提供紧急求助快速通道，显示关键联系资源，提供心理稳定化工具，确保用户在紧急情况下能够快速获得帮助。
- 体验关键词：紧急可用、清晰直观、稳定可靠、安全温暖。通过简洁明了的界面和醒目的行动按钮降低用户焦虑。
- 视觉策略：整页基底使用
--color-ink-0，关键联系区域使用强调色，稳定化工具使用舒缓色调，保持紧急情况下界面的可用性。
2. 页面结构框架
┌──────────────────────────────────────────┐
│ 顶部导航栏：返回按钮 + 标题"紧急求助" │
├──────────────────────────────────────────┤
│ 风险评估条：当前风险等级 + 紧急程度 │
├──────────────────────────────────────────┤
│ 紧急联系区：紧急联系人 + 专业热线 + 校内资源 │
├──────────────────────────────────────────┤
│ 稳定化工具：呼吸练习 + 正念冥想 + 安抚音频 │
├──────────────────────────────────────────┤
│ 求助引导：求助步骤说明 + 注意事项 │
├──────────────────────────────────────────┤
│ 事件记录：当前状态记录 + 自动保存 │
├──────────────────────────────────────────┤
│ 安全确认：取消求助 + 确认联系 │
└──────────────────────────────────────────┘3. 模块规格详解
3.1 顶部导航栏
- 容器：高度 88rpx，背景白色，阴影
0 4rpx 16rpx rgba(15,20,26,0.08)。 - 返回按钮：左侧箭头图标，品牌蓝
--color-brand-500。 - 标题：居中显示"紧急求助"，字号 32rpx，字重 700，颜色
--color-ink-800。
3.2 风险评估条
- 容器：高度 120rpx，左右边距 32rpx，圆角 24rpx，根据风险等级显示不同背景色。
- 风险等级显示：
- R1 观察：背景
--color-info-50，文字--color-info-600 - R2 关注：背景
--color-warning-50，文字--color-warning-600 - R3 警戒：背景
--color-risk-r3，文字白色 - R4 升级：背景
--color-risk-r4，文字白色，添加脉冲动画
- R1 观察：背景
- 紧急程度：
- 文字描述："需要关注"、"需要帮助"、"紧急情况"、"危急情况"
- 倒计时显示：R3/R4级别显示建议联系时间倒计时
- 风险来源：
- 显示触发SOS的来源：情绪状态、社区内容、手动触发等
3.3 紧急联系区
- 容器：背景白色，圆角 32rpx，内边距 40rpx。
- 紧急联系人：
- 联系人卡片：头像、姓名、关系、联系方式
- 联系按钮：电话图标、短信图标、视频通话图标
- 快速拨号：长按拨号按钮2秒直接拨号
- 专业热线：
- 热线列表：心理热线、危机干预热线、自杀防治热线
- 服务时间：显示热线服务时间
- 一键拨打：点击直接拨打热线电话
- 校内资源：
- 心理中心：显示地址、电话、在线状态
- 辅导员：辅导员姓名、联系方式、紧急联系方式
- 校医院：校医院急诊联系方式
3.4 稳定化工具
- 容器：背景
--color-success-50，圆角 32rpx，内边距 40rpx。 - 工具列表：
- 呼吸练习：4-7-8呼吸法，引导式呼吸动画
- 正念冥想：5分钟紧急冥想，引导语音
- 安抚音频：白噪音、自然声音等安抚音频
- 工具卡片：
- 每个工具显示图标、名称、时长
- 开始按钮：圆形，品牌蓝背景
- 进度显示：工具使用时的进度条
3.5 求助引导
- 容器：背景
--color-info-50，圆角 24rpx，内边距 32rpx。 - 求助步骤：
- 步骤1：确认当前状态和需求
- 步骤2：选择合适的联系方式
- 步骤3：与专业人员沟通
- 步骤4：后续跟进和照顾
- 注意事项：
- 强调当前感受是暂时的
- 鼓励寻求专业帮助
- 提供自我照顾建议
3.6 事件记录
- 容器：背景白色，圆角 24rpx，内边距 32rpx。
- 状态记录：
- 当前情绪状态：情绪选择器
- 身体感觉：身体症状记录
- 思维状态：思维模式记录
- 行为表现：行为反应记录
- 自动保存：
- 保存状态：显示"已自动保存"
- 保存时间：显示保存时间戳
- 加密状态：显示"数据已加密"
3.7 安全确认
- 容器：底部固定区域，高度 160rpx，背景白色，上边框 2rpx solid
--color-ink-100。 - 取消求助：
- "我现在感觉好多了"按钮：描边样式
--color-ink-500 - 点击后显示二次确认对话框
- "我现在感觉好多了"按钮：描边样式
- 确认联系：
- "我需要帮助"按钮：危险色
--color-danger-500 - 点击后确认联系选择的联系人或机构
- "我需要帮助"按钮：危险色
4. 交互与状态要求
4.1 紧急联系
- 快速拨号：长按联系按钮2秒直接拨号，避免误触
- 联系人优先级：根据风险等级和联系可用性排序联系人
- 联系状态：显示联系人在线状态和最后联系时间
- 备用联系：主要联系人无法联系时显示备用联系人
4.2 稳定化工具
- 即时可用：工具点击即可使用，无需额外设置
- 中断处理：工具使用过程中可随时中断，优先处理紧急联系
- 进度保持：工具使用进度在页面切换后保持
- 效果反馈：工具使用后收集效果反馈
4.3 事件记录
- 自动保存：状态变化时自动保存，防止数据丢失
- 加密保护：敏感信息本地加密存储
- 同步保护：在用户确认后同步给专业人员
- 隐私保护：记录信息仅用于专业帮助，不用于其他用途
5. 响应式与实现提示
5.1 屏幕适配
- 基准宽度 750rpx，最大内容宽度 686rpx（左右边距 32rpx）
- 紧急联系按钮尺寸不小于 44x88rpx，确保可点击
- 小屏幕时优先显示关键联系人，次要联系人可滚动查看
5.2 性能优化
- 页面秒开，关键资源预加载
- 联系人信息本地缓存，确保无网络时可用
- 稳定化工具音频文件预加载，减少等待时间
6. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 | 样式影响 |
|---|---|---|---|
| 风险评估 | risk_assessment | 风险等级、触发来源 | 背景色、文字内容、动画 |
| 紧急联系 | emergency_contacts | 联系人状态、优先级 | 排序、状态标识、可用性 |
| 稳定化工具 | stabilization_tools | 工具状态、使用进度 | 进度显示、完成状态 |
| 事件记录 | incident_records | 记录状态、完整性 | 保存状态、完成度指示 |
| 安全确认 | safety_confirmation | 用户选择、确认状态 | 按钮状态、对话框显示 |
7. 色彩映射表
| 页面元素 | HEX值 | Token映射 | 说明 |
|---|---|---|---|
| 主背景 | #F7F9FC | --color-ink-0 | 页面基底色 |
| 卡片背景 | #FFFFFF | #FFFFFF | 内容区域背景 |
| 品牌蓝主色 | #3A7BD5 | --color-brand-500 | 主要交互元素 |
| 风险色R1 | #3A7BD5 | --color-risk-r1 | 低风险背景 |
| 风险色R2 | #F59E0B | --color-risk-r2 | 中等风险背景 |
| 风险色R3 | #F97316 | --color-risk-r3 | 高风险背景 |
| 风险色R4 | #DC2626 | --color-risk-r4 | 严重风险背景 |
| 稳定化背景 | #EAFBF5 | --color-success-50 | 稳定化工具区域 |
| 引导背景 | #EEF5FF | --color-info-50 | 求助引导区域 |
| 危险操作 | #E24C4B | --color-danger-500 | 确认求助按钮 |
| 中性文本 | #5A6672 | --color-ink-500 | 次要文本 |
| 边框色 | #E9EDF3 | --color-ink-100 | 分隔线边框 |
8. 特殊交互要求
- 防误触设计：关键操作需要长按或二次确认
- 紧急优先：任何操作都可被紧急联系中断
- 状态保持：页面状态在切换后保持，确保用户可以继续操作
- 离线可用：核心功能在无网络情况下仍可使用
- 隐私保护：所有记录本地加密，仅在用户授权后同步
这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：
- 风险等级视觉系统：四级风险色阶，R4级别添加脉冲动画强调紧急性
- 紧急联系优先级：联系人和资源按风险等级和可用性智能排序
- 稳定化工具集成：集成了呼吸练习、正念冥想等专业心理稳定化工具
- 事件自动记录：自动记录用户状态，用于专业帮助参考
- 多重安全确认：关键操作需要多重确认，防止误触
- 离线可用性：确保在无网络情况下核心功能仍可使用
- 防误触设计：长按操作和二次确认机制，适合紧急情况下的使用
贡献者
Cai Hongyu