报告样式优化方案
杂志风格报告 UI 规范，CoverSlide / RadarSlide 等各类型 Slide 布局设计
by 于成季
·
报告样式优化方案
1. 背景与目标
优化"自我"页面中点击打开报告展示部分的样式，采用杂志风格设计，与 App 整体风格（温暖的米白背景 #FAF6F0、自然成长的主题）统一。
2. 设计方案：杂志风格
2.1 整体视觉风格
| 属性 | 当前值 | 优化后 |
|---|---|---|
| 背景色 | #F9FAFB (浅灰) |
#FAF6F0 (米白，与 App 统一) |
| 强调色 | #6366F1 (紫色) |
#4F46E5 (靛蓝，更沉稳) |
| 卡片背景 | #FFFFFF |
#FFFFFF |
| 文字主色 | #111827 |
#1F2937 |
| 文字次色 | #6B7280 |
#6B7280 |
2.2 页面结构
┌─────────────────────────────────┐
│ ✕ 1/8 │ ← 顶部栏（关闭按钮 + 页码）
├─────────────────────────────────┤
│ │
│ [类型标签] │ ← 报告类型标签（如 "MBTI"）
│ │
│ ╔═══════════════════════════╗ │
│ ║ ║ │
│ ║ 报告主标题 ║ │ ← 大标题（如 "你的 MBTI 人格类型"）
│ ║ ║ │
│ ╚═══════════════════════════╝ │
│ │
│ 副标题/描述文字 │ ← 副标题（如 "外向 · 直觉 · 思维 · 判断"）
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │数据1 │ │数据2 │ │数据3 │ │ ← 维度数据卡片（雷达图/柱状图）
│ └─────┘ └─────┘ └─────┘ │
│ │
│ ● ○ ○ ○ ○ ○ ○ ○ │ ← 分页指示器
└─────────────────────────────────┘
3. Slide 类型与布局规范
3.1 封面页 (CoverSlide)
适用场景: 所有报告的第一页
布局结构:
┌─────────────────────────────────┐
│ │
│ [理论类型标签] │ ← 圆角标签，如 "MBTI" / "Ikigai"
│ │
│ ╔═══════════════════════╗ │
│ ║ ║ │
│ ║ 报告主标题 ║ │ ← 36pt, 加粗, 居中
│ ║ ║ │
│ ╚═══════════════════════╝ │
│ │
│ 副标题描述文字 │ ← 16pt, 居中, 灰色
│ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │ 4 │ │ 30 │ │ 86 │ │ ← 关键数据：维度数/天数/条目数
│ │维度│ │ 天 │ │ 条 │ │
│ └────┘ └────┘ └────┘ │
│ │
└─────────────────────────────────┘
设计要点:
- 标题区高度占页面的 50%
- 关键数据用小卡片展示（3个）
- 整体居中，有呼吸感
3.2 雷达图页 (RadarSlide)
适用场景: MBTI、大五人格、Schwartz价值观等有多维度的报告
维度数量差异:
| 理论类型 | 维度数 | 维度名称示例 |
|---|---|---|
| MBTI | 4 | E/I, S/N, T/F, J/P |
| 大五人格 | 5 | 开放性, 尽责性, 外倾性, 宜人性, 神经质 |
| Schwartz价值观 | 10 | 权力, 成就, 友善... |
| Ikigai | 4 | 热爱, 擅长, 世界需要, 报酬 |
布局结构:
┌─────────────────────────────────┐
│ 维度分析 │ ← 页面标题
│ 你的性格特质在四维度上的分布 │ ← 页面副标题
├─────────────────────────────────┤
│ │
│ ┌─────────┐ │
│ / \ │
│ / 雷达图 \ │ ← 雷达图（根据维度数自适应大小）
│ / \ │
│ / \ │
│ └───────────────────┘ │
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ ← 维度标签 + 数值
│ │E 65│ │S 72│ │T 58│ │J 81│ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
└─────────────────────────────────┘
设计要点:
- 雷达图大小根据维度数自适应
- 4-5 维度：雷达图较大，标签在下方
- 10 维度：雷达图较小，可考虑改为柱状图
3.3 统计摘要页 (SummarySlide)
适用场景: 所有报告的核心发现
布局结构:
┌─────────────────────────────────┐
│ 核心发现 │ ← 页面标题
│ 基于你的行为数据分析得出 │ ← 页面副标题
├─────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ │
│ │ 高开放性│ │ 中尽责性│ │ ← 关键发现卡片
│ │ 得分 78 │ │ 得分 62 │ │
│ └─────────┘ └─────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ │ │
│ │ 详细分析文字内容... │ │ ← 段落文字
│ │ │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────┘
设计要点:
- 关键发现用 2 列卡片展示
- 详细分析用带背景色的文本框
- 卡片带微弱阴影，增加层次感
3.4 洞察卡片页 (InsightSlide)
适用场景: 建议、洞察点、行为模式等
布局结构:
┌─────────────────────────────────┐
│ 探索建议 │ ← 页面标题
├─────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ │
│ │ 📌 │ │
│ │ 高开放性意味着... │ │ ← 洞察卡片 1
│ │ │ │
│ │ 你倾向于接受新事物和想法... │ │
│ └─────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ 🔄 │ │
│ │ 建议尝试... │ │ ← 洞察卡片 2
│ │ │ │
│ │ 建议你每周尝试... │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────┘
设计要点:
- 卡片垂直排列，可滚动
- 每张卡片有图标标识类型
- 优先级高的建议用醒目颜色
3.5 词云页 (WordCloudSlide)
适用场景: 情绪分析、关键词分析等
布局结构:
┌─────────────────────────────────┐
│ 你的关键词 │ ← 页面标题
│ 从你的记录中提取的高频主题 │ ← 页面副标题
├─────────────────────────────────┤
│ │
│ 研究 成长 │
│ 家庭 工作 │ ← 词云
│ 社交 深度 休息 │
│ 健康 创造 │
│ │
└─────────────────────────────────┘
设计要点:
- 词语大小根据频率自适应
- 颜色可使用主题色渐变
4. 页面导航优化
4.1 顶部栏
当前:
- 位置：absolute 定位在顶部
- 内容：关闭按钮
- 样式：白色圆形按钮带阴影
优化后:
┌─────────────────────────────────┐
│ ✕ 3 / 8 │ ← 左：关闭按钮 右：当前页/总页数
└─────────────────────────────────┘
设计要点:
- 背景：透明或极淡的白色毛玻璃
- 关闭按钮：保持原样
- 页码：右侧显示 "当前 / 总数"
4.2 底部导航
当前:
- 位置：absolute 定位在底部
- 内容：上一页、播放/暂停、下一页、分页指示器
- 样式：白色毛玻璃背景
优化后:
┌─────────────────────────────────┐
│ │
│ (内容区域) │
│ │
├─────────────────────────────────┤
│ ◀ ▶ ● ○ ○ ○ ○ ○ ○ ○ │ ← 左：导航按钮组 右：分页指示器
└─────────────────────────────────┘
设计要点:
- 导航按钮组：紧凑的圆角矩形容器
- 分页指示器：当前页为宽条，其他为圆点
- 保持与 App 底部 tab 栏风格一致
5. 分类型展示策略
每个理论类型根据其维度数量和数据特性，选择最适合的可视化方式。
5.1 MBTI 报告
| 属性 | 值 |
|---|---|
| 维度数 | 4 |
| 推荐图表 | 雷达图 |
| 理由 | 4 维度正好适合雷达图展示，各维度对比清晰 |
Slide 顺序:
- 封面页（显示四字母类型，如 "INTJ"）
- 雷达图页（4 维度分布）
- 核心发现页（每维度解读）
- 建议页
布局示例:
┌─────────────────────────────────┐
│ 人格类型分析 │
│ 你的 MBTI 四维度分布 │
├─────────────────────────────────┤
│ │
│ ┌─────────┐ │
│ / ●─● \ │ ← 雷达图
│ / ● ● \ │
│ / ●─●─● \ │
│ └─────────────────┘ │
│ │
│ E:外向 S:实感 T:思维 J:判断 │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ 35 │ │ 72 │ │ 81 │ │ 65 │ │ ← 数值标签
│ └────┘ └────┘ └────┘ └────┘ │
│ │
└─────────────────────────────────┘
封面特殊处理:
- 大标题直接显示四字母类型（如 "INTJ"），36pt 加粗
- 副标题显示维度字母含义（如 "外向 · 直觉 · 思维 · 判断"）
5.2 大五人格报告
| 属性 | 值 |
|---|---|
| 维度数 | 5 |
| 推荐图表 | 柱状图 |
| 理由 | 5 维度用柱状图比雷达图更易读，数值对比更直观 |
Slide 顺序:
- 封面页
- 柱状图页（5 维度得分）
- 核心发现页（每维度解读）
- 建议页
布局示例:
┌─────────────────────────────────┐
│ 人格特质分析 │
│ 大五人格模型五维度评估 │
├─────────────────────────────────┤
│ │
│ 开放性 ████████████░░ 78 │
│ 尽责性 ██████████░░░░ 62 │
│ 外倾性 ████████░░░░░ 55 │ ← 水平柱状图
│ 宜人性 ███████████░░░ 71 │
│ 神经质 ████░░░░░░░░░ 32 │
│ │
│ 注：神经质为反向计分，低分更积极 │
│ │
└─────────────────────────────────┘
设计要点:
- 使用水平柱状图，标签在左侧
- 柱状图颜色使用主题色
- 可添加参考线（如平均值）
5.3 Ikigai 报告
| 属性 | 值 |
|---|---|
| 维度数 | 4 |
| 推荐图表 | 饼图 |
| 理由 | Ikigai 强调四个领域的平衡与交汇，饼图展示比例关系更直观 |
Slide 顺序:
- 封面页
- 饼图页（四领域分布）
- 核心发现页（每个领域分析）
- 建议页
布局示例:
┌─────────────────────────────────┐
│ Ikigai 分析 │
│ 你的生命热情与人生意义 │
├─────────────────────────────────┤
│ │
│ ┌─────────┐ │
│ / 热爱 \ │
│ / 45% 热爱+擅长 \ │
│ │ ●───────● │
│ │ │ 交汇 │ │
│ \ │ 25% │ │
│ \ ●───────● / │
│ \ │ / │
│ └─────┘───── │
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │热爱│ │擅长│ │需要│ │报酬│ │
│ │45% │ │30% │ │15% │ │10% │ │
│ └────┘ └────┘ └────┘ └────┘ │
│ │
└─────────────────────────────────┘
设计要点:
- 饼图可考虑用环形图（donut），中心显示"交汇度"
- 四个小卡片展示各领域得分
5.4 Schwartz 价值观报告
| 属性 | 值 |
|---|---|
| 维度数 | 10 |
| 推荐图表 | 分组柱状图 |
| 理由 | 10 维度太多，雷达图过于拥挤；按价值观类别分组更易理解 |
Slide 顺序:
- 封面页
- 分组柱状图页（10 维度按类别分组）
- 核心发现页（主导价值观解读）
- 建议页
Schwartz 价值观分类:
| 类别 | 包含的价值观 |
|---|---|
| 开放性 | 自我导向、刺激 |
| 保守性 | 安全、顺从、传统 |
| 超越 | 善良、普遍主义 |
| 自我超越 | 成就、权力 |
布局示例:
┌─────────────────────────────────┐
│ 价值观分析 │
│ 你的核心驱动力与人生方向 │
├─────────────────────────────────┤
│ │
│ 【开放性】 │
│ 自我导向 ████████████░░ 82 │
│ 刺激 ████████░░░░░ 58 │
│ │
│ 【保守性】 │
│ 安全 ██████████░░░░ 71 │
│ 传统 ████████░░░░░ 55 │
│ │
│ 【超越】 │
│ 善良 ███████████░░░ 76 │
│ 普遍主义 ██████░░░░░░░ 45 │
│ │
│ ...（其他类别） │
│ │
└─────────────────────────────────┘
设计要点:
- 按 Schwartz 理论的四类价值观分组
- 每组用不同深浅的主题色
- 突出显示得分最高和最低的价值观
5.5 其他报告类型
| 理论类型 | 维度数 | 推荐图表 | 说明 |
|---|---|---|---|
| 正念认知 (MBCT) | 5 | 柱状图 | 觉察力、接纳度等五维度 |
| 情绪粒度 | 3-5 | 雷达图 | 情绪识别、调节、表达 |
| 心流体验 | 3 | 雷达图 | 挑战-技能平衡、专注度等 |
| 注意力恢复 | 2-4 | 柱状图 | Directed vs Fascination |
| Bowen 家庭 | 3-4 | 雷达图 | 自我分化、三角关系等 |
| 代际传递 | 2-3 | 柱状图 | 传承程度、觉察水平 |
5.6 图表选择决策树
维度数量
│
├── 2-5 个维度
│ │
│ ├── 维度是对比关系（如 MBTI）──→ 雷达图
│ ├── 维度是比例关系（如 Ikigai）──→ 饼图/环形图
│ └── 维度是连续分数（如 大五）──→ 柱状图
│
├── 6-10 个维度
│ │
│ └── 按类别分组 ──→ 分组柱状图
│
└── 10+ 个维度或无固定维度
│
└── 词云 / 洞察卡片
5.7 图表组件需求
| 组件 | 状态 | 说明 |
|---|---|---|
AnimatedRadarChart |
已有 | 支持多维度雷达图 |
SimplePieChart |
已有 | 支持饼图/环形图 |
WordCloud |
已有 | 支持词云 |
BarChart |
需新增 | 水平/垂直柱状图，支持分组 |
DistributionSlide |
已有 | 支持 pie/bar 类型 |
TODO:
- 新增
BarChart组件，支持水平柱状图和分组功能
6. 动画与交互
6.1 翻页动画
当前问题:
- 同时使用了 scale + opacity + 横向滑动，过于花哨
优化方案:
- 仅保留横向滑动 + 轻微的 opacity 变化
- 禁用 scale 动画
const opacity = scrollX.interpolate({
inputRange,
outputRange: [0.6, 1], // 简化：只做轻微的透明度过渡
extrapolate: 'clamp',
});
6.2 内容加载动画
- 使用骨架屏（Skeleton）占位
- 数据加载后使用 fadeIn 动画
7. 技术实现要点
7.1 组件结构
ReportViewer (主容器)
├── TopBar (顶部栏: 关闭按钮 + 页码)
├── FlatList (横向分页)
│ ├── CoverSlide (封面)
│ ├── RadarSlide | BarChartSlide | PieChartSlide (图表页)
│ ├── SummarySlide (摘要页)
│ └── InsightSlide (建议页)
└── BottomNav (底部导航)
7.2 数据映射
// 根据 report_type 确定使用哪种图表
function getChartType(reportType: string): 'radar' | 'bar' | 'pie' {
switch (reportType) {
case 'mbti': return 'radar' // 4 维度用雷达图
case 'big-five': return 'bar' // 5 维度用柱状图
case 'ikigai': return 'pie' // 4 领域用饼图
case 'values': return 'bar' // 10 维度用柱状图
default: return 'radar'
}
}
7.3 关键文件修改
| 文件 | 修改内容 |
|---|---|
ReportViewer.tsx |
背景色、顶栏、底栏、动画优化 |
SlideContainer.tsx |
背景色、标题样式、内边距 |
CoverSlide.tsx |
新布局设计 |
RadarSlide.tsx |
雷达图自适应大小、柱状图支持 |
SummarySlide.tsx |
卡片样式优化 |
InsightSlide.tsx |
图标、优先级颜色 |
report.ts (types) |
新增图表类型定义 |
8. 待确认事项
- 封面页是否需要显示理论类型的特色图形（如 Ikigai 的四圆图）？
- 10 维度价值观报告是否改为柱状图展示？
- 是否需要支持"自动播放"功能（3秒翻页）？
- 是否需要添加"分享"功能按钮？
9. 参考资料
- 当前实现:
zhiyuxing-app/src/components/report/ - 理论配置:
zhiyuxing-app/src/config/theories.ts - 类型定义:
zhiyuxing-app/src/types/report.ts