327 lines
12 KiB
Markdown
327 lines
12 KiB
Markdown
# 「传承基因」测试网站 — 设计方案
|
||
|
||
> 创建日期：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生成或手绘）
|
||
- [ ] 网站域名和部署方式
|
||
- [ ] 是否需要统计答题数据（如需则需接入简单后端或第三方统计）
|