页面：资源推送中心
字数
4634 字
阅读时间
18 分钟
页面定位
资源推送中心是MindGuard小程序的"智能资源分发枢纽"，集中展示个性化推荐资源、分类资源库、推送设置和效果反馈。作为AI智能推荐的核心展示页面，承载基于情绪状态、风险等级、行为模式的智能资源分发，为用户提供精准的心理健康资源支持，实现"情绪识别→资源推荐→效果反馈→算法优化"的完整闭环。
核心模块与入口
模块1：风险预警提示条
- 功能描述：根据用户风险等级实时显示安全预警信息，提供紧急求助入口和专业资源引导，确保安全机制的有效触发。参考《功能-风险预警.md》
- 涉及组件：风险预警条组件、SOS按钮、专业求助入口
- 交互说明：
- 低风险(L1)：显示淡黄色提示条，包含"查看资源"和"稍后提醒"选项，用户可主动关闭
- 中风险(R2/R3)：显示橘红色强制提示条，包含"查看资源"、"联系辅导员"和"SOS求助"选项，需用户确认操作
- 高风险(R4)：显示红色强制提示条，占据页面顶部重要位置，包含"SOS紧急求助"、"心理中心"和"辅导员协助"选项，用户无法忽略
- 风险提示条点击"SOS"按钮直接触发紧急求助流程，跳转到SOS页面
- 点击"联系辅导员"发送匿名预警信息到辅导员工作台
- 提示条提供"×"关闭按钮，但高风险提示会在用户进行安全操作后才能关闭
模块2：今日状态卡
- 功能描述：展示用户当前情绪状态和强度指数，为资源推荐提供情绪背景，让用户理解推荐与当前状态的关联性。参考《功能-情绪打卡.md》
- 涉及组件：情绪状态卡组件、情绪指示器、强度条、标签显示
- 交互说明：
- 卡片采用品牌蓝色系背景(
#EEF5FF)，与推荐模块形成视觉区分 - 显示主要情绪标签(如"焦虑·压力较大")和情绪强度(6/10)
- 情绪强度条使用品牌蓝到雾紫的渐变(
#3A7BD5→#8C86FF) - 点击状态卡可跳转到情绪打卡页面，支持重新记录情绪状态
- 情绪数据变化时，卡片内容实时更新，影响推荐算法的计算
- 卡片采用品牌蓝色系背景(
模块3：个性化推荐卡片
- 功能描述：作为页面的核心视觉焦点，展示基于用户情绪状态的AI智能推荐资源，营造"被理解"和"被关怀"的温暖体验。参考《功能-资源推送系统.md》
- 涉及组件：推荐卡片组件、资源缩略图、匹配度标识、推荐标签
- 交互说明：
- 采用暖色渐变背景(
#FEF3C7→#FDE68A)作为视觉破格，传递温暖关怀 - 顶部显示"基于你的焦虑情绪推荐"等个性化推荐理由
- 包含"AI推荐"和"情绪匹配"等轻量化标签，不破坏整体视觉
- 水平滚动展示3个推荐资源卡片，每个卡片包含：
- 资源类型图标(视频/音频/文章/工具/活动)
- 资源标题和简短描述
- 匹配度标识(如"85%匹配")
- 点击资源卡片进入资源详情页，支持立即查看、收藏、分享等操作
- 底部显示推荐原因说明："情绪匹配度高·评价良好·同类用户选择"
- 采用暖色渐变背景(
模块4：资源分类导航
- 功能描述：提供视频、音频、文章、工具、活动等资源类型的分类导航，支持筛选和排序，帮助用户快速找到所需资源。参考《功能-资源推送系统.md》
- 涉及组件：分类标签组件、筛选器、排序器、资源列表
- 交互说明：
- 选中状态的分类标签使用品牌蓝(
#3A7BD5)填充，文字为白色 - 未选中状态的标签使用白色背景配灰色描边(
#E9EDF3) - 每个分类标签包含对应的类型图标和文字说明
- 筛选条件包括：时长筛选(<5分钟/5-15分钟/>15分钟)、难度等级(入门/进阶/专业)、语言偏好、免费筛选
- 排序选项包括：相关度优先、最新发布、热门程度、用户评分
- 点击分类标签即时更新下方资源列表，支持多选筛选条件
- 筛选器支持"清空"和"应用"操作，提供实时预览效果
- 选中状态的分类标签使用品牌蓝(
模块5：资源列表
- 功能描述：展示分类筛选后的资源列表，每个资源项包含详细信息、类型标识、匹配标签和操作按钮，是资源浏览和消费的主要入口。参考《功能-资源推送系统.md》
- 涉及组件：资源卡片组件、类型指示器、匹配标签、CTA按钮
- 交互说明：
- 采用白色背景配浅灰描边(
#E9EDF3)的标准卡片设计 - 每个资源项包含：
- 资源类型图标区域(视频红色、音频紫色、文章蓝色、工具绿色、活动橙色)
- 资源标题和详细描述
- 相关标签(如"情绪匹配"、"热门推荐")
- 主要操作按钮("立即体验"/"立即播放"/"开始阅读")
- 资源项支持"收藏"功能，点击后图标变为实心并添加到个人资源库
- 右上角"查看更多"链接进入完整资源列表页面
- 支持下拉加载更多资源，滚动到底部自动加载下一页
- 采用白色背景配浅灰描边(
模块6：反馈系统
- 功能描述：收集用户对推荐资源的有用性反馈，优化推荐算法精度，提供个性化设置入口，确保推送效果的持续改进。参考《功能-资源推送系统.md》
- 涉及组件：反馈按钮组件、设置入口、反馈确认提示
- 交互说明：
- 提供"有帮助"和"不相关"两个主要反馈按钮
- 选中"有帮助"时，按钮变为绿色填充状态，表示积极反馈
- 选中"不相关"时，按钮变为红色填充状态，表示消极反馈
- 提供"详细反馈"按钮，点击后打开反馈表单页面
- 反馈提交后显示"感谢您的反馈"确认提示
- 包含"推送设置"入口，支持推送偏好管理
- 反馈数据实时同步到推荐算法，影响后续推荐精度
页面交互流程
主要交互路径
- 情绪触发推荐：用户情绪打卡 → 系统分析情绪状态 → 更新推荐卡片内容
- 风险预警推送：检测到风险信号 → 显示风险提示条 → 提供紧急求助和资源引导
- 资源浏览消费：点击资源卡片 → 进入资源详情页 → 进行查看/播放/阅读
- 反馈优化算法：用户评价资源 → 系统记录反馈 → 调整推荐策略
- 个性化设置：进入推送设置 → 调整推送偏好 → 算法按新设置推荐
关键交互状态
- 风险预警状态：根据风险等级显示不同颜色和强制程度的提示条
- 推荐更新状态：情绪或行为数据变化时，推荐内容实时刷新
- 反馈提交状态：用户反馈后显示确认提示，按钮保持选中状态
- 资源消费状态：用户查看/播放资源后，记录消费数据用于算法优化
详细交互说明
风险预警交互流程
风险检测触发：
- 系统监测到用户情绪数据异常或树洞内容风险信号
- 自动计算风险等级(L1-L4)并触发相应预警
- 在页面顶部立即显示对应等级的风险提示条
中风险交互(R2/R3)：
- 显示橘红色提示条："检测到中等风险信号"
- 提供3个操作按钮：
- "查看资源"：跳转到资源列表页面，显示针对性资源
- "联系辅导员"：发送匿名预警到辅导员工作台
- "SOS求助"：跳转到紧急求助页面
- 用户必须选择一个操作才能关闭提示条
高风险交互(R4)：
- 显示红色强制提示条："高风险警告"
- 占据页面顶部重要位置，无法忽略
- SOS按钮带呼吸动画效果，强调紧急性
- 强制用户选择求助方式才能继续使用其他功能
个性化推荐交互流程
推荐生成逻辑：
- 基于用户最近一次情绪打卡数据
- 分析情绪类型、强度、持续时间
- 结合历史偏好和同类用户行为
- 生成个性化推荐理由和资源列表
推荐卡片交互：
- 暖色渐变背景突出AI推荐的关怀感
- 水平滚动的资源卡片支持左右滑动浏览
- 每个资源卡片显示匹配度百分比
- 点击卡片进入资源详情页
推荐更新机制：
- 用户新的情绪打卡触发推荐重新计算
- 用户反馈数据影响后续推荐精度
- 实时更新推荐理由和匹配度
资源分类与筛选交互
分类切换：
- 点击分类标签立即切换资源类型
- 选中状态用品牌蓝高亮显示
- 支持多分类同时选择
- 分类图标随选中状态变化
筛选器操作：
- 时长筛选：支持<5分钟、5-15分钟、>15分钟三档
- 难度筛选：入门、进阶、专业三级选择
- 语言偏好：中文、英文选项
- 免费筛选：仅免费、包含付费选项
- 筛选条件实时生效，无需确认
排序功能：
- 相关度优先：基于用户画像的智能排序
- 最新发布：按资源发布时间排序
- 热门程度：按用户使用量和评分排序
- 用户评分：按平均评分从高到低排序
资源列表交互细节
资源卡片设计：
- 统一白色背景配浅灰描边的卡片样式
- 左侧显示资源类型图标和背景色
- 中间区域显示标题、描述和标签
- 右侧显示主要操作按钮
资源类型标识：
- 视频类：红色图标 + #FEE2E2背景
- 音频类：紫色图标 + #EDE9FE背景
- 文章类：蓝色图标 + #DBEAFE背景
- 工具类：绿色图标 + #D1FAE5背景
- 活动类：橙色图标 + #FEF3C7背景
操作按钮状态：
- 视频资源："立即体验"
- 音频资源："立即播放"
- 文章资源："开始阅读"
- 工具资源："开始使用"
- 活动资源："立即参加"
反馈系统交互设计
快速反馈流程：
- 资源卡片底部提供"有帮助"/"不相关"快速反馈
- 点击后按钮立即变为选中状态(绿色/红色填充)
- 反馈数据实时同步到推荐算法
- 显示"感谢您的反馈"确认提示
详细反馈表单：
- 点击"详细反馈"打开完整反馈页面
- 支持评分(1-5星)、文字描述、改进建议
- 可选择不推荐此类资源的原因
- 提交后显示算法优化说明
反馈效果展示：
- 基于用户反馈调整推荐策略
- 在推荐理由中体现"基于您的反馈优化"
- 提供推荐准确率统计和改进说明
推送设置交互
设置入口：
- 反馈区域提供"推送设置"快捷入口
- 我的Tab中也有完整的推送管理入口
- 支持从推送通知直接进入设置
偏好设置选项：
- 推送频率：每日、每周、仅紧急时
- 推送时段：设置免打扰时间段
- 内容偏好：选择感兴趣的resource类型
- 推送渠道：应用内通知、短信、邮件
隐私控制：
- 数据使用说明和透明度
- 推荐算法解释
- 数据导出和删除选项
特殊场景处理
网络异常场景
- 显示网络错误提示，提供重试按钮
- 自动使用缓存内容展示基本信息
- 网络恢复后自动同步最新数据
- 离线状态下限制部分功能使用
数据异常场景
- 推荐算法异常时显示热门资源兜底
- 资源加载失败时显示友好错误提示
- 用户反馈提交失败时本地缓存并重试
- 重要操作提供确认机制防止数据丢失
权限异常场景
- 未登录用户显示登录引导
- 权限不足时显示相应错误信息
- 敏感操作需要二次确认
- 支持权限申请和授权流程
性能优化策略
加载优化
- 首屏关键资源优先加载
- 图片资源懒加载和压缩
- 推荐算法异步计算
- 支持数据预取和缓存
交互优化
- 分类切换即时响应无延迟
- 筛选操作防抖处理
- 页面滚动保持流畅度
- 反馈提交快速响应
缓存策略
- 推荐结果本地缓存减少重复计算
- 资源详情页预加载提升体验
- 用户偏好设置本地存储
- 网络异常时使用缓存数据
异常处理
主要数据表
push_recommendations：推送记录表，记录推送时间、资源、用户、触发原因user_preferences：用户偏好表，存储用户对资源类型的偏好设置push_feedback：反馈数据表，记录用户对推送的交互和评价resources：资源库表，包含资源ID、类型、标题、描述、内容、标签resource_categories：资源分类表，管理资源类型和层级关系
数据绑定关系
- 风险预警条 ↔
risk_alerts：风险等级、预警内容、操作按钮状态 - 今日状态卡 ↔
user_emotions+checkins：当前情绪状态、强度、标签 - 推荐卡片 ↔
push_recommendations+resources：推荐资源、匹配度、推荐原因 - 资源列表 ↔
resources+user_preferences：筛选后的资源列表、用户偏好 - 反馈系统 ↔
push_feedback+user_feedback：用户评价、反馈内容
性能要求
加载性能
- 首屏加载时间 < 2秒
- 推荐算法响应时间 < 500ms
- 资源图片懒加载，滚动到可视区域再加载
- 支持离线缓存，网络异常时显示缓存内容
交互性能
- 分类切换响应时间 < 200ms
- 筛选操作响应时间 < 300ms
- 页面滚动流畅度 > 50fps
- 反馈提交响应时间 < 400ms
异常处理
网络异常
- 显示网络错误提示，提供重试按钮
- 自动使用缓存内容展示，保证基本功能可用
- 网络恢复后自动同步最新数据
数据异常
- 推荐算法异常时显示热门资源作为兜底
- 资源加载失败时显示占位图和错误提示
- 用户反馈提交失败时本地缓存，网络恢复后重试
权限异常
- 未授权用户显示登录提示
- 权限不足时显示相应错误信息
- 敏感操作需要二次确认
无障碍设计
视觉辅助
- 所有交互元素支持键盘导航
- 色彩编码有备选识别方式
- 文字对比度符合WCAG 2.1 AA标准
- 支持系统字体大小调整
操作辅助
- 提供完整的屏幕阅读器支持
- 重要操作有确认机制防止误操作
- 支持手势操作和触摸反馈
- 提供操作撤销功能
页面特色：通过风险预警与资源推荐的深度整合，在确保用户安全的前提下提供精准的心理健康资源支持。重构后的视觉设计在统一性基础上，通过局部破格传递温暖关怀，完整的反馈系统确保推荐算法的持续优化。
贡献者
Cai Hongyu