init

传承基因测试网站-设计方案.md

@@ -0,0 +1,326 @@
+# 「传承基因」测试网站 — 设计方案
+
+> 创建日期：2026-04-24
+> 状态：设计已完成，待开发
+
+---
+
+## 一、项目概述
+
+### 1.1 项目目标
+
+构建一个类似 MBTI 风格的静态测试网站，通过 18 道场景化测试题，分析用户在"代继传承"方面的 6 个核心维度，最终给出一个类型标签和详细分析，并推荐「代继传承」课程。
+
+### 1.2 目标用户
+
+- **核心人群**：有孩子的中年父母（30-55岁）
+- **用户画像**：带着各种家庭困惑而来——孩子躺平、亲子关系紧张、夫妻关系问题、婆媳矛盾、财富传承焦虑等
+- **使用场景**：微信朋友圈/群分享 → 手机打开 → 3-5分钟完成测试 → 查看结果 → 分享海报
+
+### 1.3 核心约束
+
+- 纯静态网站（HTML + CSS + JS），无需后端服务
+- 手机优先，同时适配电脑端
+- 课程推荐以链接/二维码形式呈现
+- 最终生成可分享的结果海报
+
+---
+
+## 二、设计风格
+
+### 2.1 视觉风格：简约专业风
+
+- **主色调**：蓝紫渐变（#667eea → #764ba2）
+- **辅助色**：白色、浅灰背景
+- **字体**：系统默认无衬线字体（-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif）
+- **设计语言**：干净利落、专业感强，类似 16personalities / MBTI 官方风格
+- **圆角**：按钮和卡片使用大圆角（30px 按钮，16px 卡片）
+- **装饰**：几何圆形装饰元素，半透明，增加层次感
+
+### 2.2 情感调性
+
+- 专业但不冰冷
+- 有深度但不晦涩
+- 让用户感到"被理解"而非"被评判"
+- 避免负面标签，所有类型名称都是正向或中性的
+
+---
+
+## 三、用户流程
+
+```
+首页（吸引点击）
+    ↓ 点击"开始测试"
+答题页（18题，逐题展示）
+    ↓ 最后一题提交
+计算页（动画过渡，2-3秒）
+    ↓ 自动跳转
+结果页（类型分析 + 课程推荐）
+    ↓ 点击"分享我的结果"
+海报页（生成结果海报图片）
+    ↓ 长按保存/截图
+分享到朋友圈/微信群
+```
+
+---
+
+## 四、页面设计
+
+### 4.1 首页
+
+| 元素 | 内容 |
+|------|------|
+| 主标题 | "你的传承基因是什么？" |
+| 副标题 | "3分钟测试，发现你的家族传承类型" |
+| 按钮 | "开始测试 →" |
+| 装饰 | 蓝紫渐变背景 + 半透明几何圆形 |
+| 底部 | 简短说明："基于心理学理论，已帮助 XXX 人发现自我"（可选） |
+
+### 4.2 答题页
+
+| 元素 | 内容 |
+|------|------|
+| 顶部 | 进度条（当前题号/总题数） |
+| 题目区 | 场景化描述文字 |
+| 选项区 | 5级李克特量表：非常不符合 / 比较不符合 / 一般 / 比较符合 / 非常符合 |
+| 交互 | 选择后自动跳转下一题（0.3秒延迟，给用户反馈感） |
+| 返回 | 允许返回上一题修改 |
+
+### 4.3 计算页
+
+| 元素 | 内容 |
+|------|------|
+| 动画 | "正在分析你的传承基因..." + 脉冲/呼吸动画 |
+| 时长 | 2-3秒，营造"认真分析"的感觉 |
+
+### 4.4 结果页
+
+| 元素 | 内容 |
+|------|------|
+| 类型图标 | 每种类型配一个简笔画/图标 |
+| 类型标签 | 大字展示，如"觉醒者" |
+| 一句话描述 | 该类型的核心特征 |
+| 雷达图 | 6个维度的得分可视化 |
+| 详细分析 | 200字左右，包含优势和成长方向 |
+| 课程推荐 | 推荐语 + 课程链接/二维码 |
+| 按钮 | "分享我的结果" / "重新测试" |
+
+### 4.5 海报页
+
+| 元素 | 内容 |
+|------|------|
+| 背景 | 蓝紫渐变 |
+| 内容 | 类型图标 + 类型名称 + 一句话描述 + 雷达图（简化版） |
+| 底部 | "扫码测测你的传承基因" + 网站二维码 |
+| 交互 | 提示"长按保存图片"或"截图分享" |
+
+---
+
+## 五、测试维度设计
+
+### 5.1 六大维度
+
+| # | 维度名称 | 高分特征（觉醒端） | 低分特征（惯性端） | 对应课程理论 |
+|---|---------|-------------------|-------------------|-------------|
+| 1 | 自我觉察力 | 能看见自己的情绪和念头，对自己真实 | 习惯性压抑或忽视内在感受 | "我看见我的XX"、内在诚信 |
+| 2 | 情绪驾驭力 | 能在情绪升起时停住，选择回应方式 | 容易被情绪带着走，事后后悔 | 知止、0.0001秒的间隙 |
+| 3 | 关系修复力 | 能识别共生剧本，主动修复关系 | 在重复的关系模式中打转 | 亲民、共生剧本 |
+| 4 | 传承意识 | 意识到家族模式在影响自己和孩子 | 没想过家族对自己的影响 | 代际传承、冰山模型 |
+| 5 | 内在驱动力 | 行动来自内在力量和清晰意图 | 在惯性中生活，感觉被动 | 内驱力 vs NPC/空心人 |
+| 6 | 成长信念 | 相信人可以持续改变，愿意长期投入 | 觉得"我就是这样了"，难以改变 | 日拱一卒、止于至善 |
+
+### 5.2 计分规则
+
+- 每题 1-5 分（非常不符合=1，非常符合=5）
+- 每个维度 3 题，维度得分 = 3题总分（3-15分）
+- 维度得分 ≥ 10 为"觉醒端"，≤ 9 为"惯性端"
+- 根据6个维度的觉醒/惯性组合，匹配到8种类型之一
+
+---
+
+## 六、8种传承类型
+
+| # | 类型标签 | 核心特征 | 维度组合特征 | 课程推荐切入点 |
+|---|---------|---------|-------------|--------------|
+| 1 | **觉醒者** | 已走在自我成长路上，觉察力和情绪力都很强 | 觉察力高 + 情绪力高 | 深化修炼，止于至善 |
+| 2 | **破冰人** | 正在打破家族旧模式，传承意识和关系修复力突出 | 传承意识高 + 关系修复力强 | 系统学习冰山模型 |
+| 3 | **知止行者** | 情绪驾驭力突出，能在关键时刻停住，但自我觉察还需提升 | 情绪力高 + 觉察力待提升 | 从"知止"到"看见" |
+| 4 | **传承守护者** | 传承意识强、成长信念坚定，但行动力还不足 | 传承意识高 + 成长信念强 + 驱动力待提升 | 从意识到行动，日拱一卒 |
+| 5 | **寻道者** | 成长信念强、内在驱动力高，但方向还不够清晰 | 成长信念强 + 驱动力高 + 觉察力待提升 | 格物致知，找到内在卡点 |
+| 6 | **沉睡者** | 多维度偏低，但成长信念还在，是觉醒的起点 | 多维度偏低 + 成长信念尚可 | 从最基础的"我看见我"开始 |
+| 7 | **关系困者** | 关系是最大痛点，情绪驾驭和关系修复都较弱 | 关系修复力低 + 情绪力弱 | 从"我看见我的妈妈"开始 |
+| 8 | **惯性行者** | 在惯性中运转，内在驱动力和自我觉察都较弱 | 驱动力低 + 觉察力弱 | 看见即觉察，觉察即涨心 |
+
+### 6.1 类型匹配逻辑
+
+```
+IF 觉察力≥10 AND 情绪力≥10 → 觉醒者
+ELSE IF 传承意识≥10 AND 关系修复力≥10 → 破冰人
+ELSE IF 情绪力≥10 AND 觉察力≤9 → 知止行者
+ELSE IF 传承意识≥10 AND 成长信念≥10 AND 驱动力≤9 → 传承守护者
+ELSE IF 成长信念≥10 AND 驱动力≥10 AND 觉察力≤9 → 寻道者
+ELSE IF 关系修复力≤9 AND 情绪力≤9 → 关系困者
+ELSE IF 驱动力≤9 AND 觉察力≤9 → 惯性行者
+ELSE → 沉睡者（兜底）
+```
+
+---
+
+## 七、测试题目（18题）
+
+### 维度1：自我觉察力（题1-3）
+
+| # | 题目 |
+|---|------|
+| 1 | 当我感到烦躁时，我能说出自己真正在气什么，而不是只觉得"烦" |
+| 2 | 我经常反思自己的行为模式，而不是只看到别人的问题 |
+| 3 | 面对冲突时，我能觉察到自己身体的变化（心跳加速、肌肉紧绷等） |
+
+### 维度2：情绪驾驭力（题4-6）
+
+| # | 题目 |
+|---|------|
+| 4 | 在和孩子吵架后，我能让自己冷静下来再去沟通，而不是冷战或翻旧账 |
+| 5 | 当情绪上来时，我能让自己暂停几秒再回应，而不是脱口而出 |
+| 6 | 我很少因为一时冲动说出让自己后悔的话 |
+
+### 维度3：关系修复力（题7-9）
+
+| # | 题目 |
+|---|------|
+| 7 | 我发现自己和父母的相处方式，正在不知不觉中复制到我和孩子的关系上 |
+| 8 | 当关系出现问题时，我愿意主动去修复，而不是等对方先改变 |
+| 9 | 我能分辨哪些情绪是自己的，哪些是"替别人承担的" |
+
+### 维度4：传承意识（题10-12）
+
+| # | 题目 |
+|---|------|
+| 10 | 我想过自己的某些性格特点或反应模式，可能是从祖辈那里继承来的 |
+| 11 | 我注意到家族里有些模式在一代代重复（比如某种情绪、某种关系模式） |
+| 12 | 我相信了解家族的历史和故事，对理解和教育孩子有帮助 |
+
+### 维度5：内在驱动力（题13-15）
+
+| # | 题目 |
+|---|------|
+| 13 | 我清楚自己为什么要做现在做的事，而不是随大流或被外界推着走 |
+| 14 | 我觉得自己的人生是自己主动选择的，而不是被安排好的 |
+| 15 | 遇到困难时，我能找到继续前行的内在力量，而不是只靠外部压力 |
+
+### 维度6：成长信念（题16-18）
+
+| # | 题目 |
+|---|------|
+| 16 | 我相信不管现在是什么状态，人都可以改变和成长 |
+| 17 | 我愿意为了长远的目标，每天坚持做一点小事 |
+| 18 | 我觉得"慢慢来"不是放弃，而是一种智慧 |
+
+---
+
+## 八、技术方案
+
+### 8.1 技术栈
+
+| 项目 | 方案 |
+|------|------|
+| 结构 | HTML5 |
+| 样式 | CSS3 + 响应式设计（Mobile First） |
+| 交互 | 原生 JavaScript（无框架依赖） |
+| 图表 | Canvas 绘制雷达图 |
+| 海报 | html2canvas 库生成图片 |
+| 部署 | 任意静态托管（GitHub Pages / Vercel / 阿里云 OSS 等） |
+
+### 8.2 文件结构
+
+```
+/
+├── index.html          # 首页
+├── quiz.html           # 答题页
+├── result.html         # 结果页
+├── css/
+│   └── style.css       # 全局样式
+├── js/
+│   ├── quiz.js         # 答题逻辑
+│   ├── result.js       # 计分 + 类型匹配
+│   ├── radar.js        # 雷达图绘制
+│   └── poster.js       # 海报生成
+└── assets/
+    └── icons/          # 8种类型的简笔画图标
+```
+
+### 8.3 响应式断点
+
+| 断点 | 适配设备 |
+|------|---------|
+| < 480px | 小屏手机 |
+| 480-768px | 大屏手机 |
+| 768-1024px | 平板 |
+| > 1024px | 电脑 |
+
+---
+
+## 九、课程推荐策略
+
+### 9.1 推荐逻辑
+
+每种类型的结果页底部，根据该类型的"薄弱维度"推荐对应的课程内容：
+
+| 类型 | 推荐切入点 | 推荐话术方向 |
+|------|-----------|-------------|
+| 觉醒者 | 深化修炼 | "你已经走在觉醒的路上，课程将帮你从'看见'走向'止于至善'" |
+| 破冰人 | 冰山模型 | "你已开始打破旧模式，课程将带你系统理解冰山下的家族数据" |
+| 知止行者 | 从知止到看见 | "你已能在情绪中停住，课程将帮你看见情绪背后的根源" |
+| 传承守护者 | 从意识到行动 | "你对传承有深刻意识，课程将帮你把意识转化为每天的功课" |
+| 寻道者 | 格物致知 | "你有强大的成长动力，课程将帮你找到内在卡点，明确方向" |
+| 沉睡者 | 基础功课 | "觉醒的第一步，是看见。课程将从最基础的'我看见我'开始" |
+| 关系困者 | 关系修复 | "关系是你的突破口，课程将教你从'我看见我的妈妈'开始修复" |
+| 惯性行者 | 看见即觉察 | "看见即觉察，觉察即涨心。课程将帮你走出惯性，找回内在力量" |
+
+### 9.2 推荐展示形式
+
+- 推荐语（2-3句）
+- 课程链接按钮
+- 课程二维码（图片）
+
+---
+
+## 十、分享海报设计
+
+### 10.1 海报内容
+
+```
+┌─────────────────────────┐
+│                         │
+│     [类型简笔画图标]      │
+│                         │
+│      你的传承基因是       │
+│       「 觉醒者 」        │
+│                         │
+│   "已走在自我成长路上，    │
+│    觉察力和情绪力都很强"   │
+│                         │
+│    ┌─────────────┐      │
+│    │  简化雷达图   │      │
+│    └─────────────┘      │
+│                         │
+│  扫码测测你的传承基因     │
+│       [网站二维码]        │
+│                         │
+└─────────────────────────┘
+```
+
+### 10.2 海报规格
+
+- 尺寸：750 × 1334px（适合手机屏幕分享）
+- 背景：蓝紫渐变
+- 字体：白色为主，类型标签加大加粗
+
+---
+
+## 十一、后续待确认事项
+
+- [ ] 课程链接/二维码素材
+- [ ] 8种类型的简笔画图标设计（可用AI生成或手绘）
+- [ ] 网站域名和部署方式
+- [ ] 是否需要统计答题数据（如需则需接入简单后端或第三方统计）