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