RainbowRain

切换主题

功能：情绪趋势分析 ​

字数
3245 字
阅读时间
13 分钟

功能简介 ​

情绪趋势分析页面提供用户情绪状态的时间序列可视化，通过多维度数据分析帮助用户了解情绪变化规律。支持日/周/月三种时间维度切换，展示情绪趋势图表、关键词云、场景分布等核心分析内容，为用户提供情绪自我觉察的数字化工具。

所在页面 ​

  • Tab：心情随笔
  • 位置：Segmented控件右侧的"情绪趋势"选项卡
  • 模块：时间范围切换器、AI情绪摘要卡、趋势图表、关键词云、场景分布、趋势提示

交互说明 ​

页面切换与加载 ​

  1. 用户在"心情随笔"页面点击Segmented控件的"情绪趋势"选项，切换到趋势分析视图。
  2. 页面默认加载周维度数据，显示近7天的情绪趋势。
  3. 数据加载过程中显示骨架屏，加载完成后平滑展示各分析组件。

时间范围切换 ​

  1. 用户点击顶部的日/周/月切换按钮，切换不同时间维度的数据展示。
  2. 切换时有200ms动画过渡效果，数据更新无闪烁。
  3. 日视图：显示24小时情绪变化，适合分析单日内情绪波动。
  4. 周视图：显示7天情绪趋势，默认视图，适合分析周内情绪规律。
  5. 月视图：显示30天情绪变化，适合分析长期情绪趋势。

数据查看与交互 ​

  1. AI情绪摘要卡：点击右下角"查看详情"跳转详细分析页面。
  2. 趋势折线图：鼠标悬浮在数据点上显示具体数值和情绪标签，点击可查看当日详细打卡记录。
  3. 关键词云：点击标签可筛选包含该关键词的打卡记录，支持多标签组合筛选。
  4. 场景分类条：点击场景分类可查看对应场景的详细情绪分析。
  5. 趋势提示条：点击"查看建议"按钮跳转到ASK对话或任务推荐页面。

异常状态处理 ​

  1. 无数据状态：显示引导插画和文字"开始记录情绪，查看趋势变化"，提供跳转到打卡页面的入口。
  2. 加载失败：显示错误提示和重试按钮，支持手动刷新数据。
  3. 网络异常：显示缓存数据（如有）并提示网络状态，恢复正常后自动同步最新数据。

界面组件 ​

页面结构 ​

┌──────────────────────────────────────────┐
│ 顶部导航：情绪趋势标题
├──────────────────────────────────────────┤
│ 时间范围切换器：日 / 周 / 月
├──────────────────────────────────────────┤
│ AI 情绪摘要卡：本周统计数据和趋势概览
├──────────────────────────────────────────┤
│ 情绪趋势折线图：时间序列变化曲线
├──────────────────────────────────────────┤
│ 关键词标签云：高频词汇可视化
├──────────────────────────────────────────┤
│ 场景分类条：情绪触发场景分布
├──────────────────────────────────────────┤
│ 趋势提示条：异常波动提醒（条件显示）
└──────────────────────────────────────────┘
底部导航：今天 / 任务 / 树洞 / 随笔 / 我的

核心组件规格 ​

1. 时间范围切换器 ​

  • 位置：顶栏下方 y=84，避免重叠
  • 按钮尺寸：48×28px，圆角 14px
  • 选中态：品牌蓝填充 #3A7BD5 + 白色文字
  • 未选中态：浅灰背景 #F7F9FC + 灰色描边 #E9EDF3
  • 动画：切换时200ms过渡效果

2. AI情绪摘要卡 ​

  • 尺寸：327×120px，圆角 16px
  • 背景：蓝白渐变 + 阴影效果
  • 数据内容：
    • 平均情绪指数（如：7.2分）
    • 周环比变化（如：较上周 +0.8）
    • 主要情绪分布（如：平静45% · 专注25% · 喜悦20%）
    • 高频场景标签（如：学业压力 · 社交互动 · 自我提升）
  • 交互入口：右下角"查看详情"链接

3. 情绪趋势折线图 ​

  • 卡片尺寸：327×200px，圆角 16px
  • 图表区域：287×120px（实际绘图区）
  • 数据点：7个（周视图），半径 4px
  • 视觉元素：
    • 背景网格：0.5px细线，透明度10%
    • 阈值区域：淡蓝色填充，标记正常情绪范围
    • 阈值线：虚线样式，标记情绪基准线
    • 区域填充：渐变填充，营造层次感
    • 主趋势线：2px宽度，平滑曲线
    • 坐标轴：Y轴(4-10分)，X轴(时间标签)
  • 交互：悬浮显示详细数值，点击查看记录

4. 关键词标签云 ​

  • 卡片尺寸：327×140px，圆角 16px
  • 布局：中心点分布，自然排列避免重叠
  • 字体大小：8-16px，根据词频权重动态调整
  • 颜色深度：#2C3640 → #C5CEDA，权重越高颜色越深
  • 分类显示：
    • 高频词：16px，深色 #2C3640
    • 中频词：10-14px，中等色 #5A6672/#7B8893
    • 低频词：8px，浅色 #9AA6B2/#C5CEDA
  • 交互：点击标签筛选，支持多选

5. 场景分类条 ​

  • 卡片尺寸：327×76px，圆角 16px
  • 分类条尺寸：总宽度285px，高度24px，圆角12px
  • 颜色分配：
    • 学业：Info蓝 #EEF5FF 背景，#3A7BD5 文字
    • 社交：Lavender紫 #F4F3FF 背景，#8C86FF 文字
    • 健康：Success绿 #EAFBF5 背景，#2AC28D 文字
    • 其他：中性灰 #F7F9FC 背景，#7B8893 文字
  • 等比缩放：根据百分比调整条形宽度
  • 文字显示：10px，居中显示，包含百分比数值

6. 趋势提示条 ​

  • 尺寸：327×48px，圆角 12px
  • 背景：Warning浅色 #FFF6E8
  • 触发条件：连续情绪下降、异常波动等风险状态
  • 内容布局：
    • 左侧：标题"情绪波动提醒"（12px，Warning色）
    • 中间：具体说明文字（10px，Warning深色）
    • 右侧：CTA按钮"查看建议"（72×20px，Warning填充色）
  • 交互：点击按钮跳转对应建议页面

数据需求 ​

基础数据表 ​

  • mood_trends：趋势分析主表，存储聚合后的情绪数据
  • trend_keywords：关键词统计表，用于标签云生成
  • scene_stats：场景统计表，用于分类条展示
  • user_emotion_summary：用户情绪摘要表，用于AI摘要卡

时间维度数据 ​

  • 日维度：24小时数据点，每小时聚合一次
  • 周维度：7天数据点，每天聚合一次
  • 月维度：30天数据点，每天聚合一次

数据聚合规则 ​

  • 情绪分数：平均值、最大值、最小值、标准差
  • 情绪类型：各类型情绪的分布比例
  • 关键词提取：从打卡备注、标签中提取，按词频排序
  • 场景分布：各场景的打卡次数和占比
  • 趋势指标：变化率、波动幅度、连续趋势

异常检测算法 ​

  • 连续下降检测：连续N天情绪分数下降超过阈值
  • 波动幅度检测：情绪分数标准差超过正常范围
  • 风险等级变化：风险等级显著恶化的情况
  • 周期性异常：与历史同期相比的异常波动

设计规范 ​

视觉设计原则 ​

  • 低扰动原则：使用柔和色彩和简洁图表，避免视觉过度刺激
  • 情绪色彩系统：采用情绪轮专用色系，饱和度中低，避免情绪标签化
    • 平静 #5AA6A6 ｜喜悦 #F5A97F ｜专注 #7C86FF ｜悲伤 #8BA3C7
    • 愤怒 #E57A74 ｜焦虑 #C9A86A ｜倦怠 #92A1B0
  • 品牌一致性：主色系使用品牌蓝 #3A7BD5，辅助色用于多序列对比
  • 对比度要求：确保文字与背景对比度 ≥ 4.5:1

布局规范 ​

  • 页面总高度：812px（标准手机屏幕）
  • 顶部导航：72px高，白色背景 + 阴影
  • 内容区域：从 y=84 开始，各模块间距 16-24px
  • 底部导航：68px高，固定在页面底部
  • 卡片统一宽度：327px，左右边距 24px
  • 内容边距：卡片内部内容与边框保持20px边距

图表风格规范 ​

  • 折线图：线条宽度 2px，数据点直径 6px，平滑曲线过渡
  • 区域图：渐变填充，透明度从 20% 到 5%，营造层次感
  • 阈值线：虚线样式 stroke-dasharray="5,5"，使用 Info-200 #BFD6FF
  • 网格线：极细网格 0.5px，透明度 10%，提供参考但不喧宾夺主

技术实现 ​

前端页面结构 ​

javascript
// 页面文件
pages/journal/trend/
├── trend.wxml     # 页面结构
├── trend.wxss     # 样式文件
├── trend.js       # 页面逻辑
└── trend.json     # 页面配置

// 组件化设计
components/trend/
├── time-switcher/    # 时间范围切换器组件
├── summary-card/     # AI摘要卡组件
├── trend-chart/      # 趋势图表组件
├── keyword-cloud/    # 关键词云组件
├── scene-bar/        # 场景分类条组件
└── alert-bar/        # 趋势提示条组件

数据流管理 ​

javascript
// 页面状态
data: {
  timeRange: 'week',        // 当前时间范围
  summaryData: {},          // AI摘要数据
  chartData: {             // 图表数据
    points: [],           // 数据点数组
    threshold: 7,         // 阈值线
    maxY: 10, minY: 4     // Y轴范围
  },
  keywords: [],            // 关键词数组
  sceneData: [],           // 场景分布数据
  showAlert: false,        // 是否显示提示条
  loading: true,          // 加载状态
  hasData: true           // 是否有数据
}

// 数据获取流程
1. 页面加载 → 获取默认周维度数据
2. 时间切换 → 重新请求对应时间范围数据
3. 数据聚合 → 云函数处理原始打卡数据
4. 本地缓存 → 相同时间范围数据缓存
5. 实时更新 → 新打卡数据触发增量更新

图表渲染技术 ​

  • Canvas绘制：使用微信小程序Canvas API绘制折线图
  • 平滑曲线：使用贝塞尔曲线算法实现平滑过渡
  • 渐变填充：线性渐变创建区域填充效果
  • 交互响应：通过事件监听实现悬浮和点击交互
  • 动画效果：CSS transition + JavaScript实现切换动画

性能优化策略 ​

  • 数据预计算：云函数预先计算常用时间范围数据
  • 图片懒加载：图表组件按需渲染，避免资源浪费
  • 缓存策略：本地缓存常用数据，减少网络请求
  • 内存管理：及时清理Canvas实例和事件监听器
  • 骨架屏：数据加载时显示骨架屏提升用户体验

测试要点 ​

功能测试 ​

  • 时间切换测试：验证日/周/月切换数据正确性
  • 图表渲染测试：验证数据点位置、连线、填充准确性
  • 交互功能测试：悬浮显示、点击跳转、筛选功能
  • 异常检测测试：各种异常场景的提示条触发条件

性能测试 ​

  • 加载性能：各时间范围数据加载时间<1s
  • 渲染性能：图表绘制流畅，无卡顿现象
  • 内存占用：页面运行时内存增长在合理范围
  • 网络优化：弱网环境下的降级策略

兼容性测试 ​

  • 设备兼容：不同屏幕尺寸的适配效果
  • 系统兼容：iOS/Android不同版本的兼容性
  • 数据兼容：不同数据量的处理能力

成功指标 ​

用户体验指标 ​

  • 页面加载时间：<1.5秒
  • 交互响应时间：<200ms
  • 功能使用率：情绪趋势页面周访问率>40%
  • 用户停留时长：平均>90秒

业务价值指标 ​

  • 自我觉察提升：用户对情绪模式认知准确度提升
  • 预警效果：趋势提示的点击率和转化率
  • 数据完整性：用户连续打卡数据的质量

技术质量指标 ​

  • 系统可用性：功能可用率>99%
  • 数据准确性：趋势分析算法准确率>85%
  • 错误率：功能使用错误率<2%

贡献者 ​

The avatar of contributor named as Cai Hongyu Cai Hongyu

文件历史 ​

用 ♥ 撰写

CC BY-SA 4.0 © 2022-PRESENT Nólëbase 的创作者们