产品背景:教师团队协作的痛点

教师办公室是个特殊的协作场景。不同性格的教师聚在一起,常常因为工作方式差异引发误解:有人每天加班做课件到深夜,有人到点就走;有人事事操心,有人划清界限。这些差异不是"谁对谁错"的问题,而是人格特质在职业场景下的表达。

传统的团队管理培训往往强调"统一标准",但教师群体的特点是:高度自主、难以量化考核、情感投入大。如何让教师理解"差异是资源而非问题"?如何用工具化的方式促进团队协作?

拾趣课堂的教师版MBTI就是在这个背景下诞生的产品。它不是一个简单的趣味测试,而是一个基于游戏化设计、用户画像系统和团队协作模型的产品实践。

产品设计:5个维度18种人格的构建逻辑

维度设计:从MBTI到教师场景化维度

传统MBTI的四个维度(E/I、S/N、T/F、J/P)对教师群体来说过于抽象。我们重新设计了5个基于真实课堂场景的维度:

维度	含义	对应场景
圣母心	愿意为学生付出的程度	家长半夜发消息回不回、学生犯错管不管
结界力	对外界要求说"不"的能力	领导临时加任务接不接、家长无理要求拒不拒
强迫值	对教学细节的要求程度	课件有错别字改不改、作业批改到什么程度
脸皮厚度	面对批评和尴尬的抗压力	公开课翻车怎么办、家长投诉顶不顶得住
整活指数	课堂氛围调动能力	班会课搞不搞活动、运动会带不带头吼

每个维度都是一个0-100的连续变量,通过25道场景题计算得分。

人格分类:18种教师人格的命名策略

基于5个维度的得分组合,我们设计了18种教师人格(含2种隐藏人格)。人格命名策略是:

命名公式 = 行为特征 + 职业场景 + 幽默感

例如:

• 课件奴隶(高强迫值+高圣母心):细节控,教案课件精益求精
• 准点逃跑艺术家(低圣母心+高结界力):到点就走,拒绝无效加班
• 职业假笑人(高脸皮厚度+低结界力):擅长应对家长和领导,会说场面话
• 全班静音键(高结界力+低整活指数):课堂掌控力强,学生不敢造次

每个人格都有:人格名称、英文代号、标语、引言、五维详解、适合场景。

隐藏人格与彩蛋设计

为了增加趣味性和社交传播欲,我们设计了2种隐藏人格:

• 体育老师(教师版):特殊条件触发,模拟"体育老师永远有事"的梗
• 全园万能胶(幼教版):幼儿园里什么都会、什么都能顶上的角色

触发条件通过特定题目的选项组合判定,增加测试的不确定性和"抽卡"乐趣。

技术实现:Vue3 + Canvas + localStorage

前端架构

技术栈:Vue 3.5 + TypeScript + Vite + Tailwind CSS
状态管理:Composables模式,不引入Pinia
持久化:localStorage存储答题进度,key格式shiqu:mbti:progress

核心Composables:

// useTeacherMbti.ts
interface TeacherMbtiState {
  currentStep: number        // 当前答题进度
  answers: Record<number, number>  // 答案记录
  scores: Record<string, number>   // 五维得分
  personality: string              // 最终人格
}

// 进度持久化
watch(() => state.answers, (newAnswers) => {
  localStorage.setItem('shiqu:mbti:progress', JSON.stringify(newAnswers))
}, { deep: true })

人格算法:加权计分+阈值判定

每道题的每个选项对应5个维度的分数增量:

interface QuestionOption {
  text: string
  scores: {
    holy: number       // 圣母心
    barrier: number    // 结界力
    ocd: number        // 强迫值
    thickness: number  // 脸皮厚度
    vibe: number       // 整活指数
  }
}

计分逻辑:

1. 累加所有答案的分数增量
2. 归一化到0-100区间
3. 根据五维得分组合,匹配18种人格中的最佳匹配

function calculatePersonality(scores: Record<string, number>): string {
  // 归一化
  const normalized = normalizeScores(scores)
  
  // 匹配人格(基于阈值规则)
  if (normalized.ocd > 80 && normalized.holy > 70) return '课件奴隶'
  if (normalized.barrier > 80 && normalized.holy < 30) return '准点逃跑艺术家'
  // ...其他人格判定逻辑
}

Canvas海报生成

结果页支持一键生成分享海报,使用Canvas API绘制:

海报元素:

• 背景色(与人格对应)
• 人格名称 + 英文代号
• 五维雷达图(SVG转Canvas)
• 二维码(指向结果页URL)
• 品牌水印

关键代码:

function drawTeacherMbtiPoster(personality: string, scores: Record<string, number>) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  
  // 绘制背景
  ctx.fillStyle = getPersonalityColor(personality)
  ctx.fillRect(0, 0, 1080, 1920)
  
  // 绘制雷达图(先转SVG再drawImage)
  const radarSvg = generateRadarChart(scores)
  const img = new Image()
  img.src = 'data:image/svg+xml,' + encodeURIComponent(radarSvg)
  img.onload = () => ctx.drawImage(img, 200, 600)
  
  // 导出PNG
  return canvas.toDataURL('image/png')
}

URL分享机制

结果页可通过URL hash直接分享,无需后端存储:

编码:人格代号 + 五维得分 → Base64 → URL hash
解码:从hash解析出人格和得分,直接渲染结果页

function buildTeacherMbtiHash(personality: string, scores: Record<string, number>): string {
  const data = { p: personality, s: scores }
  return btoa(JSON.stringify(data))
}

function parseTeacherMbtiHash(hash: string): { personality: string, scores: Record<string, number> } {
  const data = JSON.parse(atob(hash))
  return { personality: data.p, scores: data.s }
}

团队协作模型:从测试到实践

黄金组合算法

基于18种人格的五维得分,我们设计了"互补度算法",判断两个教师的协作契合度:

function calculateCompatibility(p1: Personality, p2: Personality): number {
  let score = 0
  
  // 圣母心互补:一高一低最佳
  if (Math.abs(p1.scores.holy - p2.scores.holy) > 40) score += 20
  
  // 结界力互补:避免都是"老好人"或都是"刺头"
  if (Math.abs(p1.scores.barrier - p2.scores.barrier) > 40) score += 20
  
  // 强迫值差异:一个细节控+一个效率派
  if (Math.abs(p1.scores.ocd - p2.scores.ocd) > 30) score += 15
  
  // 整活指数:至少有一个能调动气氛
  if (p1.scores.vibe > 60 || p2.scores.vibe > 60) score += 15
  
  // 脸皮厚度:至少有一个能顶住压力
  if (p1.scores.thickness > 60 || p2.scores.thickness > 60) score += 10
  
  return score  // 满分80
}

职业发展路径推荐

基于五维得分,推荐适合的职业发展方向:

得分特征	推荐方向	原因
高圣母心+高强迫值	班主任、教研组长	责任心强、细节把控到位
高结界力+低圣母心	学科带头人、独立教师	专注教学本身,不被琐事干扰
高整活指数+高脸皮厚度	活动组织者、社团指导	擅长调动气氛,学生喜欢
低脸皮厚度+高强迫值	教学研究、课程开发	专注内容,教学扎实
五维均衡	管理岗位、教育顾问	没有明显短板,适应多场景

教研破冰场景设计

将MBTI测试引入教研活动,设计了3种破冰方案:

方案1:新学期教研会开场(15分钟)

1. 会前10分钟全员测试
2. 主持人统计人格分布并公布
3. 按人格分组讨论困扰
4. 不同人格组互相提建议

方案2:跨学科教师团建(30分钟)

1. 测完生成海报贴白板
2. 找互补人格结成"搭子"
3. 搭子分享互相欣赏的特质
4. 评选"最佳互补组合"

方案3:班主任工作坊(45分钟)

1. 按五维雷达图分类
2. 高圣母心组分享避免burnout经验
3. 高结界力组分享边界管理技巧
4. 高整活指数组分享活动管理心得

数据洞察:传播与留存

传播机制设计

社交传播三要素:

1. 身份认同:人格名称必须让教师"笑着承认"(如"课件奴隶"“准点逃跑艺术家”)
2. 视觉锚点:海报设计精美,五维雷达图视觉冲击力强
3. 社交货币:测完愿意分享,因为"我想看看同事是什么人格"

用户留存路径

测试完成后的留存路径设计:

1. 结果页CTA:引导查看拾趣课堂其他工具(倒计时、点名、排座、积分)
2. 海报水印:分享海报带品牌名和二维码,形成二次传播
3. URL分享:结果页可直接分享给同事,邀请对方测试并比对

产品价值:从娱乐到工具

教师版MBTI的产品定位是"从娱乐切入,到工具留存":

娱乐层:趣味测试,5分钟笑着测完,分享到朋友圈
认知层:理解自己的人格特质,接受"差异是资源"
工具层:用于团队协作分析、职业发展规划、教研破冰
生态层:通过MBTI引流,让用户了解拾趣课堂的其他免费课堂工具

技术栈总结

前端:Vue 3.5 + TypeScript + Vite + Tailwind CSS + shadcn-vue
状态管理:Composables模式
持久化:localStorage
海报生成:Canvas API
分享机制:URL hash编码
部署:Inertia.js(Laravel + Vue SSR)

核心文件:

• pages/Tools/Mbti/Index.vue:测试页面
• composables/useTeacherMbti.ts:状态管理
• lib/mbti.ts:人格算法
• lib/poster.ts:海报生成

写在最后

教师版MBTI不是一个简单的趣味测试,背后是游戏化设计、用户画像系统和团队协作模型的产品实践。

它证明了一个产品理念:好的工具不是"告诉用户应该怎么做",而是"帮用户看清自己是谁、适合做什么、可以和谁配合"。

教师团队协作的核心不是统一标准,而是理解差异、尊重差异、利用差异。教师版MBTI用一个5分钟的测试,让这个理念落地成可操作的工具。

项目开源地址(TODO),技术细节欢迎交流。

关键词:教师版MBTI、人格测试算法、游戏化产品设计、Vue3人格测试开发、Canvas海报生成、教师画像系统、拾趣课堂。