「传承基因」测试网站 — 设计方案
创建日期：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 情感调性
- 专业但不冰冷
- 有深度但不晦涩
- 让用户感到"被理解"而非"被评判"
- 避免负面标签，所有类型名称都是正向或中性的
三、用户流程
四、页面设计
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 类型匹配逻辑
七、测试题目（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 文件结构
8.3 响应式断点
| 断点 |
适配设备 |
| < 480px |
小屏手机 |
| 480-768px |
大屏手机 |
| 768-1024px |
平板 |
| > 1024px |
电脑 |
九、课程推荐策略
9.1 推荐逻辑
每种类型的结果页底部，根据该类型的"薄弱维度"推荐对应的课程内容：
| 类型 |
推荐切入点 |
推荐话术方向 |
| 觉醒者 |
深化修炼 |
"你已经走在觉醒的路上，课程将帮你从'看见'走向'止于至善'" |
| 破冰人 |
冰山模型 |
"你已开始打破旧模式，课程将带你系统理解冰山下的家族数据" |
| 知止行者 |
从知止到看见 |
"你已能在情绪中停住，课程将帮你看见情绪背后的根源" |
| 传承守护者 |
从意识到行动 |
"你对传承有深刻意识，课程将帮你把意识转化为每天的功课" |
| 寻道者 |
格物致知 |
"你有强大的成长动力，课程将帮你找到内在卡点，明确方向" |
| 沉睡者 |
基础功课 |
"觉醒的第一步，是看见。课程将从最基础的'我看见我'开始" |
| 关系困者 |
关系修复 |
"关系是你的突破口，课程将教你从'我看见我的妈妈'开始修复" |
| 惯性行者 |
看见即觉察 |
"看见即觉察，觉察即涨心。课程将帮你走出惯性，找回内在力量" |
9.2 推荐展示形式
- 推荐语（2-3句）
- 课程链接按钮
- 课程二维码（图片）
十、分享海报设计
10.1 海报内容
10.2 海报规格
- 尺寸：750 × 1334px（适合手机屏幕分享）
- 背景：蓝紫渐变
- 字体：白色为主，类型标签加大加粗
十一、后续待确认事项
