情绪可视化规范

字数

4809 字

阅读时间

22 分钟

参考《功能扩展方案》《社区导向整体开发方案》《tab页设计蓝图》《色彩系统》整理的视觉与实现规范，用于MindGuard项目中所有情绪数据可视化组件的统一设计语言。

1. 设计定位

角色：情绪数据的统一可视化语言系统，支持从快速预览到深度分析的多层次情绪数据展示
核心体验：通过直观的图表和数据可视化，帮助用户理解情绪模式、发现变化规律、获得个性化洞察
视觉基调：延续"低扰动"原则，使用柔和的色彩和简洁的图表，避免视觉过度刺激，营造安全的情绪探索环境

2. 应用场景分层

2.1 快速预览层（L1-Preview）

使用场景：随笔页面趋势视图、今天页面情绪摘要
复杂度：简化图表，关键指标突出
时间范围：最近7天，固定时间窗口
交互深度：基础查看，点击跳转深度分析

2.2 标准分析层（L2-Standard）

使用场景：情绪分析页面主视图、周报附图
复杂度：完整图表，多维度数据
时间范围：支持日/周/月/自定义切换
交互深度：完整的数据探索和筛选

2.3 深度洞察层（L3-Insight）

使用场景：情绪分析页面高级功能、专业报告
复杂度：高级图表，AI洞察集成
时间范围：长时间跨度，历史对比分析
交互深度：专业级数据分析和模式识别

3. 数据可视化原则

3.1 色彩运用

情绪色彩：采用情绪轮专用色系，饱和度中低，避免情绪标签化
- 平静 #5AA6A6｜喜悦 #F5A97F｜专注 #7C86FF｜悲伤 #8BA3C7
- 愤怒 #E57A74｜焦虑 #C9A86A｜倦怠 #92A1B0
图表主色：品牌蓝 #3A7BD5 作为主线，辅助色用于多序列对比
背景处理：使用淡填充 EEF5FF + 深描边 3A7BD5，避免大面积色块

3.2 图表风格

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

4. 页面布局结构

4.1 L1-Preview 布局（快速预览）

┌──────────────────────────────────────────┐
│ 标题：情绪趋势（最近7天）
├──────────────────────────────────────────┤
│ 简化折线图：仅显示主趋势线
├──────────────────────────────────────────┤
│ 关键指标：平均分、趋势方向
├──────────────────────────────────────────┤
│ 快速操作：查看详情、记录情绪
└──────────────────────────────────────────┘

4.2 L2-Standard 布局（标准分析）

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

布局规范：

页面总高度：1624rpx（标准手机屏幕）
顶部导航：144rpx 高，白色背景 + 阴影
内容区域：从 y=84 开始，各模块间距 16-48rpx
底部导航：136rpx 高，固定在页面底部
卡片统一宽度：654rpx，左右边距 48rpx

4.3 L3-Insight 布局（深度洞察）

┌──────────────────────────────────────────┐
│ 顶部导航：情绪深度分析
├──────────────────────────────────────────┤
│ 时间范围选择器：支持自定义范围
├──────────────────────────────────────────┤
│ AI洞察报告卡：模式识别与风险预警
├──────────────────────────────────────────┤
│ 多维度对比图表：情绪vs能量vs风险
├──────────────────────────────────────────┤
│ 统计分析面板：分布特征与变化指标
├──────────────────────────────────────────┤
│ 模式识别结果：周期性与异常检测
├──────────────────────────────────────────┤
│ 个性化建议：基于AI分析的行动建议
└──────────────────────────────────────────┘

5. 核心组件规范

5.1 时间范围切换器 `<TimeRangeSwitcher>`

xml

<!-- 时间切换器 -->
<g transform="translate(24, 84)">
  <rect x="0" y="0" width="48" height="28" rx="14" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="24" y="18" font-size="10" fill="#7B8893" text-anchor="middle">日</text>

  <rect x="56" y="0" width="48" height="28" rx="14" fill="#3A7BD5"/>
  <text x="80" y="18" font-size="10" fill="#FFFFFF" text-anchor="middle">周</text>

  <rect x="112" y="0" width="48" height="28" rx="14" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="136" y="18" font-size="10" fill="#7B8893" text-anchor="middle">月</text>
</g>

规格说明：

位置：顶栏下方 y=84，避免重叠
按钮尺寸：48×56rpx，圆角 28rpx
选中态：品牌蓝填充 #3A7BD5 + 白色文字
未选中态：浅灰背景 #F7F9FC + 灰色描边 #E9EDF3

3.2 AI 情绪摘要卡 `<MoodSummaryCard>`

xml

<!-- 情绪摘要卡 -->
<rect x="24" y="128" width="327" height="120" rx="16" fill="url(#trendHero)" filter="url(#cardShadow)" />
<text x="44" y="152" font-size="14" font-weight="700" fill="#2C3640">本周情绪摘要</text>
<text x="44" y="172" font-size="12" fill="#5A6672">平均情绪指数：7.2分 · 较上周 +0.8</text>
<text x="44" y="192" font-size="12" fill="#5A6672">主要情绪：平静(45%) · 专注(25%) · 喜悦(20%)</text>
<text x="44" y="212" font-size="12" fill="#5A6672">高频场景：学业压力 · 社交互动 · 自我提升</text>
<text x="330" y="234" font-size="12" fill="#3A7BD5" text-anchor="end">查看详情</text>

规格说明：

尺寸：327×240rpx，圆角 32rpx
背景：蓝白渐变 url(#trendHero) + 阴影效果
布局：左对齐数据展示，右下角操作入口
交互：点击"查看详情"跳转详细分析页面

3.3 情绪折线图 `<MoodTrendChart>`

xml

<!-- 情绪趋势折线图 -->
<rect x="24" y="264" width="327" height="200" rx="16" fill="#FFFFFF" filter="url(#cardShadow)" />
<text x="44" y="288" font-size="14" font-weight="700" fill="#2C3640">情绪趋势</text>

<!-- 图表区域 -->
<g transform="translate(44, 304)">
  <!-- 背景网格 -->
  <g stroke="#E9EDF3" stroke-width="0.5" opacity="0.1">
    <line x1="0" y1="0" x2="287" y2="0"/>
    <line x1="0" y1="30" x2="287" y2="30"/>
    <line x1="0" y1="60" x2="287" y2="60"/>
    <line x1="0" y1="90" x2="287" y2="90"/>
    <line x1="0" y1="120" x2="287" y2="120"/>
  </g>

  <!-- 阈值区域 -->
  <rect x="0" y="36" width="287" height="48" fill="#EEF5FF" opacity="0.3"/>

  <!-- 阈值线 -->
  <line x1="0" y1="60" x2="287" y2="60" stroke="#BFD6FF" stroke-width="1" stroke-dasharray="5,5" opacity="0.6"/>

  <!-- 区域填充 -->
  <path d="M 0,75 L 48,60 L 96,45 L 144,52 L 192,40 L 240,35 L 287,42 L 287,120 L 0,120 Z"
        fill="url(#areaGradient)" opacity="0.6"/>

  <!-- 主趋势线 -->
  <path d="M 0,75 L 48,60 L 96,45 L 144,52 L 192,40 L 240,35 L 287,42"
        stroke="#3A7BD5" stroke-width="2" fill="none"/>

  <!-- 数据点 -->
  <g fill="#3A7BD5">
    <circle cx="0" cy="75" r="4"/>
    <circle cx="48" cy="60" r="4"/>
    <circle cx="96" cy="45" r="4"/>
    <circle cx="144" cy="52" r="4"/>
    <circle cx="192" cy="40" r="4"/>
    <circle cx="240" cy="35" r="4"/>
    <circle cx="287" cy="42" r="4"/>
  </g>
</g>

规格说明：

图表尺寸：327×400rpx，边距 40rpx
图表区域：287×240rpx（实际绘图区）
数据点：7个（一周数据），半径 8rpx
交互：悬浮显示具体数值和情绪标签

3.4 关键词标签云 `<KeywordCloud>`

xml

<!-- 关键词标签云 -->
<rect x="24" y="480" width="327" height="140" rx="16" fill="#FFFFFF" filter="url(#cardShadow)" />
<text x="44" y="504" font-size="14" font-weight="700" fill="#2C3640">关键词云</text>

<!-- 标签云内容 -->
<g transform="translate(187.5, 567)">
  <!-- 高频词 -->
  <text x="0" y="0" font-size="16" fill="#2C3640" text-anchor="middle" font-weight="600">学习</text>
  <text x="-50" y="-15" font-size="14" fill="#5A6672" text-anchor="middle">考试</text>
  <text x="55" y="10" font-size="14" fill="#5A6672" text-anchor="middle">压力</text>
  <text x="30" y="-20" font-size="12" fill="#7B8893" text-anchor="middle">专注</text>

  <!-- 中频词 -->
  <text x="-70" y="20" font-size="10" fill="#9AA6B2" text-anchor="middle">室友</text>
  <text x="80" y="-25" font-size="10" fill="#9AA6B2" text-anchor="middle">运动</text>
  <text x="-35" y="-35" font-size="10" fill="#9AA6B2" text-anchor="middle">平静</text>

  <!-- 低频词 -->
  <text x="20" y="30" font-size="8" fill="#C5CEDA" text-anchor="middle">睡眠</text>
  <text x="-45" y="30" font-size="8" fill="#C5CEDA" text-anchor="middle">饮食</text>
  <text x="65" y="20" font-size="8" fill="#C5CEDA" text-anchor="middle">娱乐</text>
</g>

规格说明：

卡片尺寸：327×280rpx，圆角 32rpx
标签云区域：中心点 (187.5, 567)
字体大小：8-32rpx，根据词频权重动态调整
颜色深度：#2C3640 → #C5CEDA，权重越高颜色越深
布局：自然分布，避免重叠，保持视觉平衡
交互：点击标签筛选对应内容，支持多选

3.5 场景分类条 `<SceneCategoryBar>`

xml

<!-- 场景分类条 -->
<rect x="24" y="636" width="327" height="76" rx="16" fill="#FFFFFF" filter="url(#cardShadow)" />
<text x="44" y="660" font-size="14" font-weight="700" fill="#2C3640">场景分布</text>

<!-- 场景分类内容 -->
<g transform="translate(44, 676)">
  <!-- 学业 35% -->
  <rect x="0" y="0" width="100" height="24" rx="12" fill="#EEF5FF"/>
  <text x="50" y="16" font-size="10" fill="#3A7BD5" text-anchor="middle">学业 35%</text>

  <!-- 社交 25% -->
  <rect x="108" y="0" width="72" height="24" rx="12" fill="#F4F3FF"/>
  <text x="144" y="16" font-size="10" fill="#8C86FF" text-anchor="middle">社交 25%</text>

  <!-- 健康 20% -->
  <rect x="188" y="0" width="58" height="24" rx="12" fill="#EAFBF5"/>
  <text x="217" y="16" font-size="10" fill="#2AC28D" text-anchor="middle">健康 20%</text>

  <!-- 其他 20% -->
  <rect x="252" y="0" width="55" height="24" rx="12" fill="#F7F9FC"/>
  <text x="279" y="16" font-size="10" fill="#7B8893" text-anchor="middle">其他 20%</text>
</g>

规格说明：

卡片尺寸：327×152rpx，圆角 32rpx
分类条尺寸：总宽度 570rpx，高度 48rpx，圆角 24rpx
颜色分配：学业(Info)、社交(Lavender)、健康(Success)、其他(中性)
等比缩放：根据百分比调整条形宽度，确保总宽度不超过卡片边界
文字：20rpx，居中显示，包含百分比数值

3.6 趋势提示条 `<TrendAlertBar>`

xml

<!-- 趋势提示条 -->
<rect x="24" y="728" width="327" height="48" rx="12" fill="#FFF6E8"/>
<text x="40" y="748" font-size="12" fill="#F2B23D" font-weight="600">情绪波动提醒</text>
<text x="40" y="764" font-size="10" fill="#D9961E">连续3天情绪下降，建议和 ASK 聊聊</text>
<rect x="260" y="740" width="72" height="20" rx="10" fill="#F2B23D"/>
<text x="296" y="754" font-size="9" fill="#FFFFFF" text-anchor="middle">查看建议</text>

规格说明：

尺寸：327×96rpx，圆角 24rpx
背景：Warning浅色 #FFF6E8，营造温和提醒氛围
标题：24rpx，Warning色 #F2B23D，粗体显示
描述：20rpx，Warning深色 #D9961E，具体说明
CTA按钮：72×40rpx，Warning填充色，白色文字18rpx
触发条件：连续情绪下降、异常波动等风险状态

3.7 记录列表组件 `<RecordList>`

xml

<!-- 记录列表 -->
<rect x="24" y="780" width="327" height="200" rx="16" fill="#FFFFFF" filter="url(#cardShadow)" />
<text x="44" y="804" font-size="14" font-weight="700" fill="#2C3640">打卡记录</text>

<!-- 筛选和搜索栏 -->
<g transform="translate(44, 820)">
  <!-- 筛选标签 -->
  <rect x="0" y="0" width="48" height="24" rx="12" fill="#EEF5FF" stroke="#3A7BD5" stroke-width="1"/>
  <text x="24" y="16" font-size="9" fill="#3A7BD5" text-anchor="middle">全部</text>

  <rect x="56" y="0" width="48" height="24" rx="12" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="80" y="16" font-size="9" fill="#7B8893" text-anchor="middle">正向</text>

  <rect x="112" y="0" width="48" height="24" rx="12" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="136" y="16" font-size="9" fill="#7B8893" text-anchor="middle">负向</text>

  <!-- 搜索框 -->
  <rect x="200" y="0" width="100" height="24" rx="12" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="210" y="16" font-size="9" fill="#C5CEDA">搜索记录...</text>
</g>

<!-- 记录项列表 -->
<g transform="translate(44, 856)">
  <!-- 记录项1 -->
  <g transform="translate(0, 0)">
    <!-- 时间和情绪分值 -->
    <text x="0" y="0" font-size="10" fill="#9AA6B2">今天 14:30</text>
    <text x="250" y="0" font-size="11" fill="#F5A97F" font-weight="600" text-anchor="end">85分</text>

    <!-- 情绪标签 -->
    <circle cx="0" cy="12" r="3" fill="#F5A97F"/>
    <text x="8" y="16" font-size="9" fill="#5A6672">喜悦</text>
    <circle cx="40" cy="12" r="3" fill="#7C86FF"/>
    <text x="48" y="16" font-size="9" fill="#5A6672">专注</text>

    <!-- 场景和风险 -->
    <text x="0" y="30" font-size="8" fill="#C5CEDA">学习 · L1</text>
    <text x="280" y="30" font-size="8" fill="#3A7BD5" text-anchor="end">查看详情 →</text>

    <!-- 分割线 -->
    <line x1="0" y1="38" x2="287" y2="38" stroke="#E9EDF3" stroke-width="0.5"/>
  </g>

  <!-- 记录项2 -->
  <g transform="translate(0, 48)">
    <text x="0" y="0" font-size="10" fill="#9AA6B2">昨天 20:15</text>
    <text x="250" y="0" font-size="11" fill="#C9A86A" font-weight="600" text-anchor="end">62分</text>

    <circle cx="0" cy="12" r="3" fill="#C9A86A"/>
    <text x="8" y="16" font-size="9" fill="#5A6672">焦虑</text>
    <circle cx="40" cy="12" r="3" fill="#92A1B0"/>
    <text x="48" y="16" font-size="9" fill="#5A6672">疲惫</text>

    <text x="0" y="30" font-size="8" fill="#C5CEDA">考试 · L2</text>
    <text x="280" y="30" font-size="8" fill="#3A7BD5" text-anchor="end">查看详情 →</text>

    <line x1="0" y1="38" x2="287" y2="38" stroke="#E9EDF3" stroke-width="0.5"/>
  </g>

  <!-- 记录项3 -->
  <g transform="translate(0, 96)">
    <text x="0" y="0" font-size="10" fill="#9AA6B2">前天 09:45</text>
    <text x="250" y="0" font-size="11" fill="#5AA6A6" font-weight="600" text-anchor="end">78分</text>

    <circle cx="0" cy="12" r="3" fill="#5AA6A6"/>
    <text x="8" y="16" font-size="9" fill="#5A6672">平静</text>

    <text x="0" y="30" font-size="8" fill="#C5CEDA">晨间 · L1</text>
    <text x="280" y="30" font-size="8" fill="#3A7BD5" text-anchor="end">查看详情 →</text>
  </g>
</g>

<!-- 查看更多 -->
<text x="187.5" y="966" font-size="10" fill="#3A7BD5" text-anchor="middle">查看全部记录 →</text>

规格说明：

卡片尺寸：327×400rpx，圆角 32rpx
筛选栏：高度48rpx，包含筛选标签和搜索框
记录项：高度96rpx，包含时间、分值、标签、场景、风险等级
标签样式：圆形色点 + 文字，使用情绪标准色系
风险标识：L1-L4等级，使用对应风险色彩
交互：点击记录项查看详情，点击筛选标签过滤内容

4. 交互设计规范

4.1 时间范围切换

默认选中"周"视图，提供日/周/月三种时间粒度
切换时有200ms动画过渡，数据平滑更新
选中的按钮使用品牌蓝填充，未选中使用浅灰背景

4.2 数据交互

折线图数据点支持悬浮显示详细数值
标签云关键词可点击筛选，支持多选
场景分类条点击可筛选对应内容
所有交互元素提供视觉反馈

4.3 异常状态处理

当识别到连续情绪下降或异常波动时，显示趋势提示条
提供明确的CTA按钮引导用户采取行动
使用Warning色系营造提醒但不制造焦虑

xml

<!-- 情绪分布饼图 -->
<g transform="translate(163.5, 100)">
  <!-- 平静 40% -->
  <path d="M 0,0 L 50,0 A 50,50 0 0,1 30.9,39.3 z" fill="#5AA6A6" opacity="0.8"/>

  <!-- 喜悦 30% -->
  <path d="M 0,0 L 30.9,39.3 A 50,50 0 0,1 -15.5,47.6 z" fill="#F5A97F" opacity="0.8"/>

  <!-- 焦虑 20% -->
  <path d="M 0,0 L -15.5,47.6 A 50,50 0 0,1 -50,0 z" fill="#C9A86A" opacity="0.8"/>

  <!-- 其他 10% -->
  <path d="M 0,0 L -50,0 A 50,50 0 0,1 50,0 z" fill="#92A1B0" opacity="0.8"/>

  <!-- 中心文字 -->
  <text y="5" text-anchor="middle" font-size="14" fill="#2C3640" font-weight="600">本周</text>
</g>

规格说明：

半径：100rpx（标准）／60rpx（紧凑）
透明度：80%，避免过于强烈
中心：可显示总计信息或时间范围
交互：悬浮显示具体数值和百分比

6. 交互设计规范

6.1 时间范围切换

默认选中"周"视图，提供日/周/月三种时间粒度
切换时有200ms动画过渡，数据平滑更新
选中的按钮使用品牌蓝填充 #3A7BD5，未选中使用浅灰背景 #F7F9FC + 描边 #E9EDF3

6.2 数据交互

折线图数据点支持悬浮显示详细数值
标签云关键词可点击筛选，支持多选
场景分类条点击可筛选对应内容
所有交互元素提供视觉反馈

4.3 异常状态处理

当识别到连续情绪下降或异常波动时，显示趋势提示条
提供明确的CTA按钮引导用户采取行动
使用Warning色系营造提醒但不制造焦虑

6.4 数据加载状态

加载中：显示骨架屏，使用渐变动画
无数据：显示插画和引导文字"开始记录情绪，查看趋势变化"
加载失败：显示错误提示和重试按钮

7. 响应式适配

手机端：简化图表，优先展示关键数据
横屏模式：扩展图表宽度，增加数据密度
暗色模式：降低整体亮度，保持对比度

8. 可访问性要求

色彩对比：确保文字与背景对比度 ≥ 4.5:1
交互反馈：提供非颜色的状态变化（如边框、阴影）
屏幕阅读器：为图表添加 ARIA 标签和描述

9. 架构整合与页面职责分工

9.1 页面职责明确

随笔页面 - 趋势视图模块

定位：情绪记录的快速洞察
使用层级：L1-Preview（快速预览）
功能范围：
- 最近7天情绪趋势概览
- 关键指标展示（平均分、趋势方向）
- 快速跳转到深度分析的入口
组件使用：
- 简化版折线图组件
- 关键指标卡片
- "查看深度分析"操作按钮

情绪分析页面 - 主功能

定位：专业的情绪数据分析中心
使用层级：L2-Standard + L3-Insight（标准分析+深度洞察）
功能范围：
- 多时间维度情绪分析（日/周/月/自定义）
- 完整的统计分析和对比
- AI驱动的模式识别和洞察
- 个性化建议生成
组件使用：
- 完整的情绪趋势图表套件
- 统计分析面板
- AI洞察报告组件
- 多维度对比图表

9.2 数据流与用户体验路径

数据共享机制：

统一数据源：checkins 集合
分层数据聚合：
- L1：最近7天预聚合数据
- L2：可配置时间范围动态聚合
- L3：全量数据 + AI分析结果

9.3 组件复用策略

核心可视化组件：

<MoodTrendChart>：支持L1/L2/L3三种配置模式
<StatisticsPanel>：可配置的统计面板
<InsightReport>：AI洞察报告组件
<TimeRangeSelector>：时间范围选择器
<RecordList>：记录列表组件，支持筛选和搜索

样式统一：

遵循本规范的设计语言
统一色彩系统和交互模式
响应式适配所有场景

该规范建立了MindGuard项目统一的情绪可视化语言系统，通过分层架构避免了功能重复，为不同场景提供了合适的分析深度，同时确保了用户体验的一致性和连贯性。

贡献者

Cai Hongyu

文件历史

最后编辑于 5 个月前查看完整历史

情绪可视化规范 ​

1. 设计定位 ​

2. 应用场景分层 ​

2.1 快速预览层（L1-Preview） ​

2.2 标准分析层（L2-Standard） ​

2.3 深度洞察层（L3-Insight） ​

3. 数据可视化原则 ​

3.1 色彩运用 ​

3.2 图表风格 ​

4. 页面布局结构 ​

4.1 L1-Preview 布局（快速预览） ​

4.2 L2-Standard 布局（标准分析） ​

4.3 L3-Insight 布局（深度洞察） ​

5. 核心组件规范 ​

5.1 时间范围切换器 <TimeRangeSwitcher> ​

3.2 AI 情绪摘要卡 <MoodSummaryCard> ​

3.3 情绪折线图 <MoodTrendChart> ​

3.4 关键词标签云 <KeywordCloud> ​

3.5 场景分类条 <SceneCategoryBar> ​

3.6 趋势提示条 <TrendAlertBar> ​

3.7 记录列表组件 <RecordList> ​

4. 交互设计规范 ​

4.1 时间范围切换 ​

4.2 数据交互 ​

4.3 异常状态处理 ​

6. 交互设计规范 ​

6.1 时间范围切换 ​

6.2 数据交互 ​

4.3 异常状态处理 ​

6.4 数据加载状态 ​

7. 响应式适配 ​

8. 可访问性要求 ​

9. 架构整合与页面职责分工 ​

9.1 页面职责明确 ​

随笔页面 - 趋势视图模块 ​

情绪分析页面 - 主功能 ​

9.2 数据流与用户体验路径 ​

推荐用户路径： ​

数据共享机制： ​

9.3 组件复用策略 ​

核心可视化组件： ​

样式统一： ​

贡献者 ​

文件历史 ​

情绪可视化规范

1. 设计定位

2. 应用场景分层

2.1 快速预览层（L1-Preview）

2.2 标准分析层（L2-Standard）

2.3 深度洞察层（L3-Insight）

3. 数据可视化原则

3.1 色彩运用

3.2 图表风格

4. 页面布局结构

4.1 L1-Preview 布局（快速预览）

4.2 L2-Standard 布局（标准分析）

4.3 L3-Insight 布局（深度洞察）

5. 核心组件规范

5.1 时间范围切换器 `<TimeRangeSwitcher>`

3.2 AI 情绪摘要卡 `<MoodSummaryCard>`

3.3 情绪折线图 `<MoodTrendChart>`

3.4 关键词标签云 `<KeywordCloud>`

3.5 场景分类条 `<SceneCategoryBar>`

3.6 趋势提示条 `<TrendAlertBar>`

3.7 记录列表组件 `<RecordList>`

4. 交互设计规范

4.1 时间范围切换

4.2 数据交互

4.3 异常状态处理

6. 交互设计规范

6.1 时间范围切换

6.2 数据交互

4.3 异常状态处理

6.4 数据加载状态

7. 响应式适配

8. 可访问性要求

9. 架构整合与页面职责分工

9.1 页面职责明确

随笔页面 - 趋势视图模块

情绪分析页面 - 主功能

9.2 数据流与用户体验路径

推荐用户路径：

数据共享机制：

9.3 组件复用策略

核心可视化组件：

样式统一：

贡献者

文件历史