liver-ch4-kano.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. // ==============================================================================
  2. // 江中肝纯片 · Ch4 KANO × JTBD 洞察(5 子章)
  3. // ==============================================================================
  4. // 4.1 KANO 五类·必备/期望/兴奋/无差异/反向
  5. // 4.2 JTBD·Functional 功能价值
  6. // 4.3 JTBD·Emotional 情绪价值
  7. // 4.4 JTBD·Social 社会价值
  8. // 4.5 决策优先级·SKU/话术/包装映射
  9. // ==============================================================================
  10. const LA = require('./liver-analyze.js');
  11. const C = require('./liver-components.js');
  12. const { BRAND, esc, fmtLikes } = C;
  13. // ==========================================================
  14. // 4.1 · KANO 五类需求
  15. // ==========================================================
  16. function renderSub4_1(ctx) {
  17. const { chapter: c, subIdx, sub, slideNum, slideTotal, data } = ctx;
  18. const items = data.items || [];
  19. // 证据取样:每个 KANO 类别取 1-2 条 VOC 证据
  20. const mustHave = LA.getEvidence(items, {
  21. keyword: '葵花护肝片', contentMatch: /副作用|拉肚|胃疼|天天吃|安全|长期|半年/,
  22. minChars: 20, top: 1, seed: 5,
  23. }); // 必备=安全
  24. const perform = LA.getEvidence(items, {
  25. keyword: 'dihydromyricetin', contentMatch: /works|effective|hangover|amazing|recommend/i,
  26. minChars: 40, top: 1, seed: 7,
  27. }); // 期望=真起效
  28. const excite = LA.getEvidence(items, {
  29. keyword: '送长辈保健品', contentMatch: /长辈|父母|爸妈|婆婆|孝心|礼物|准备/,
  30. minChars: 20, top: 1, seed: 11,
  31. }); // 兴奋=送长辈礼盒
  32. const reverse = LA.getEvidence(items, {
  33. keyword: '海王金樽', contentMatch: /广告|老哒|杠杠|硬广|洗脑/,
  34. minChars: 12, top: 1, seed: 13,
  35. }); // 反向=硬广
  36. const kanoRows = [
  37. {
  38. type: '必备需求', en: 'MUST-HAVE',
  39. color: BRAND.CORAL,
  40. desc: '"没有会不买"—基本门槛,不做用户不接受',
  41. items: ['安全无副作用(葵花"拉肚子"担忧 ♥15)', 'OTC 合规备案', '成分透明无添加'],
  42. voc: mustHave[0],
  43. action: '<strong>蓝帽子 OTC 双证背书</strong> · 成分表 100% 透明',
  44. },
  45. {
  46. type: '期望需求', en: 'PERFORMANCE',
  47. color: BRAND.LIVER_AMBER,
  48. desc: '"越好越好"—用户能感知的越强越值得付费',
  49. items: ['DMY 清解酒后头疼(体感可感知)', '转氨酶下降速度', '气色改善("大半年气色由内而外" ♥13)'],
  50. voc: perform[0],
  51. action: '<strong>临床数据背书 + 短期体感锚点</strong> · 30 天效果前后对比',
  52. },
  53. {
  54. type: '兴奋需求', en: 'ATTRACTIVE',
  55. color: BRAND.JIANG_GREEN,
  56. desc: '"有了超惊喜"—没想到的附加价值,形成差异化',
  57. items: ['送长辈孝心礼盒("8000 左右礼物" ♥21)', '张家界藤茶地理文化溢价', '礼品卡 + 溯源码 + 国货新中式'],
  58. voc: excite[0],
  59. action: '<strong>礼盒装 ¥298-898 · 千年食饮故事 · 商务送礼场景</strong>',
  60. },
  61. {
  62. type: '无差异需求', en: 'INDIFFERENT',
  63. color: BRAND.SAGE,
  64. desc: '"有没有无所谓"—成本高却用户不看重的功能',
  65. items: ['维生素复合包(用户已厌倦汤臣式复合)', '更多成分堆砌(silymarin "7500mg deceive" ♥16 警示)', '花哨包装 / 过度营销标签'],
  66. voc: null,
  67. action: '<strong>做减法:单一 DMY 差异化 > 成分杂交</strong>',
  68. },
  69. {
  70. type: '反向需求', en: 'REVERSE',
  71. color: BRAND.WINE_RED,
  72. desc: '"有了反而不买"—做了用户更排斥的动作',
  73. items: ['硬广洗脑("老哒广告杠杠的" ♥40)', '药盒感 / 保守形象(片仔癀/葵花)', '虚假剂量("7500 mg claim to deceive")'],
  74. voc: reverse[0],
  75. action: '<strong>明令禁止:TVC 洗脑 / 剂量夸张 / 药盒感</strong>',
  76. },
  77. ];
  78. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  79. <div class="section-inner">
  80. ${C.renderSectionHead({
  81. eyebrow: `${c.num}.${subIdx} · KANO 五类需求`,
  82. title: '<span style="color:' + BRAND.PURPLE + ';">KANO 五类</span>:肝纯片的需求层次地图',
  83. subtitle: '不把 KANO 当装饰模型——每一类需求都映射到<strong>具体 SKU / 话术 / 包装</strong>决策,用 VOC 证据验证。',
  84. color: BRAND.PURPLE,
  85. })}
  86. <div class="grid" style="grid-template-columns:1fr; gap:16px; margin-top:20px;">
  87. ${kanoRows.map((r) => `
  88. <div style="padding:18px 22px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${r.color}; border-radius:var(--radius-md);">
  89. <div style="display:grid; grid-template-columns:160px 1.2fr ${r.voc ? '1.3fr' : ''} 1fr; gap:18px; align-items:start;">
  90. <div>
  91. <div class="text-mono text-xs" style="color:${r.color}; letter-spacing:0.15em; margin-bottom:6px; font-weight:700;">${r.en}</div>
  92. <div style="color:var(--text-1); font-weight:800; font-size:1.08rem; margin-bottom:6px;">${r.type}</div>
  93. <div style="color:var(--text-2); font-size:0.78rem; line-height:1.55;">${r.desc}</div>
  94. </div>
  95. <div>
  96. <div class="text-mono text-xs" style="color:${BRAND.PURPLE}; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">肝纯片对应需求</div>
  97. <ul style="margin:0; padding-left:18px; list-style:disc; color:var(--text-1); font-size:0.86rem; line-height:1.7;">
  98. ${r.items.map((it) => `<li style="margin-bottom:4px;">${it}</li>`).join('')}
  99. </ul>
  100. </div>
  101. ${r.voc ? `<div>
  102. ${C.renderVocCard(r.voc, { accent: r.color, compact: true, maxChars: 160 })}
  103. </div>` : ''}
  104. <div>
  105. <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.15em; margin-bottom:8px; font-weight:700;">决策映射</div>
  106. <div style="padding:10px 12px; background:${BRAND.JIANG_GREEN}08; border:1px solid ${BRAND.JIANG_GREEN}33; border-radius:4px; font-size:0.82rem; line-height:1.6; color:var(--text-1);">
  107. ${r.action}
  108. </div>
  109. </div>
  110. </div>
  111. </div>`).join('')}
  112. </div>
  113. <div class="fade-up" style="margin-top:24px;">
  114. ${C.renderInsightHero({
  115. eyebrow: 'KANO PRIORITY · 优先级',
  116. color: BRAND.PURPLE,
  117. title: `<strong style="color:${BRAND.CORAL};">必备 → 期望 → 兴奋</strong> 是投资顺序。先做到"<strong>安全无副作用 + OTC 合规</strong>"(必备 = 零容错),再把"<strong>DMY 真起效</strong>"(期望)讲清楚,最后用"<strong>送长辈礼盒</strong>"(兴奋)做溢价。`,
  118. subtitle: `<strong style="color:${BRAND.WINE_RED};">反向需求必须明令禁止</strong>——硬广、药盒感、虚假剂量是<strong>"做多不如不做"</strong>的死线。`,
  119. })}
  120. </div>
  121. ${C.renderDecisionList([
  122. `<strong>必备守门</strong>:蓝帽子 OTC 双证 + 成分 100% 透明 + 第三方检测报告公开`,
  123. `<strong>期望锚定</strong>:DMY"清酒后头疼"作快体感 + 30 天转氨酶变化作慢体感`,
  124. `<strong>兴奋溢价</strong>:礼盒装 ¥298-898 + 千年食饮故事 + 张家界原产地证`,
  125. `<strong>反向封堵</strong>:拒硬广 TVC / 拒药盒感 / 拒剂量夸张话术`,
  126. ], { title: '落地决策 · KANO 优先级映射', accent: BRAND.PURPLE, columns: 2 })}
  127. </div>
  128. </section>`;
  129. }
  130. // ==========================================================
  131. // 4.2 · JTBD · Functional 功能价值
  132. // ==========================================================
  133. function renderSub4_2(ctx) {
  134. const { chapter: c, subIdx, sub, slideNum, slideTotal, data } = ctx;
  135. const items = data.items || [];
  136. // 功能价值评论:解酒/转氨酶/熬夜/清肝
  137. const fEvidence = LA.getEvidence(items, {
  138. contentMatch: /转氨酶|谷丙|肝功|指标|解酒|不上头|头疼|头晕|解酒神器|代谢|清肝|吃完/,
  139. minChars: 25, top: 6, seed: 5,
  140. });
  141. const funcJobs = [
  142. { icon: '🍶', title: '解酒·清酒后头疼', color: BRAND.WINE_RED, voc: fEvidence.find((it) => /解酒|头|醉|醒/.test(it.content || '')),
  143. job: '<strong>"饭局后清早不头疼"</strong>——DMY 加速乙醛脱氢酶活性,对标海王金樽失败剧本', metric: '喝酒后次日头疼评分下降 ≥40%' },
  144. { icon: '📉', title: '护肝·转氨酶下降', color: BRAND.TECH_BLUE, voc: fEvidence.find((it) => /转氨酶|谷丙|指标|肝功/.test(it.content || '')),
  145. job: '<strong>"体检查出来转氨酶偏高的救命稻草"</strong>——对标易善复的医嘱依赖', metric: '连服 30 天 ALT 下降 20-50%' },
  146. { icon: '🌙', title: '熬夜·体感自救', color: BRAND.CORAL, voc: fEvidence.find((it) => /熬夜|夜|18岁|吓/.test(it.content || '')),
  147. job: '<strong>"熬夜后吓得赶紧吃两粒"</strong>(♥4823)——抖音熬夜人群的心智入口', metric: '熬夜次日疲劳感评分下降 ≥30%' },
  148. { icon: '💧', title: '日常·肝功保养', color: BRAND.SAGE, voc: fEvidence.find((it) => /日常|坚持|气色|大半年|吃了/.test(it.content || '')),
  149. job: '<strong>"长期吃气色由内而外好"</strong>(♥13)——对标汤臣倍健但做真差异化', metric: '持续 90 天用户续购率 ≥45%' },
  150. ];
  151. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  152. <div class="section-inner">
  153. ${C.renderSectionHead({
  154. eyebrow: `${c.num}.${subIdx} · JTBD Functional`,
  155. title: '<span style="color:' + BRAND.TECH_BLUE + ';">Functional 功能价值</span>:4 个用户"雇佣"肝纯片干的真实活',
  156. subtitle: '不讲成分讲<strong>用户要完成的任务 (Jobs-to-be-Done)</strong>——每个 Job 都对应一段真实 VOC + 可验证的成功指标。',
  157. color: BRAND.TECH_BLUE,
  158. })}
  159. <div class="grid" style="grid-template-columns:1fr 1fr; gap:18px; margin-top:20px;">
  160. ${funcJobs.map((j) => `
  161. <div style="padding:20px 22px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${j.color}; border-radius:var(--radius-md);">
  162. <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
  163. <div style="font-size:1.8rem;">${j.icon}</div>
  164. <div>
  165. <div style="color:var(--text-1); font-weight:800; font-size:1.1rem;">${esc(j.title)}</div>
  166. <div class="text-mono text-xs" style="color:${j.color}; letter-spacing:0.1em; margin-top:2px;">JOB-TO-BE-DONE</div>
  167. </div>
  168. </div>
  169. <div style="padding:12px 14px; background:${j.color}08; border-left:3px solid ${j.color}; border-radius:4px; margin-bottom:12px;">
  170. <div style="color:var(--text-1); font-size:0.9rem; line-height:1.7;">${j.job}</div>
  171. </div>
  172. ${j.voc ? C.renderVocCard(j.voc, { accent: j.color, compact: true, maxChars: 160 }) : `<div style="padding:12px; background:var(--bg-2); border-radius:4px; color:var(--text-3); font-size:0.8rem; text-align:center;">—— VOC 数据暂缺 ——</div>`}
  173. <div style="margin-top:12px; padding:10px 12px; background:${BRAND.JIANG_GREEN}08; border:1px solid ${BRAND.JIANG_GREEN}33; border-radius:4px;">
  174. <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.15em; margin-bottom:4px; font-weight:700;">成功指标</div>
  175. <div style="color:var(--text-1); font-size:0.84rem;">${esc(j.metric)}</div>
  176. </div>
  177. </div>`).join('')}
  178. </div>
  179. ${C.renderDecisionList([
  180. `<strong>Functional 卖点层级</strong>:短期(解酒头疼)→ 中期(转氨酶下降)→ 长期(气色/日常保养)`,
  181. `<strong>Job-to-be-Done 话术</strong>:不讲成分讲任务 —— "肝纯片是为了___的人准备的"`,
  182. `<strong>度量 KPI</strong>:30 天 ALT 降幅 / 次日头疼评分 / 续购率 / NPS`,
  183. `<strong>内容主题</strong>:XHS 聚焦"熬夜党自救" + 抖音聚焦"饭局后清早"`,
  184. ], { title: '落地决策 · Functional JTBD 落位', accent: BRAND.TECH_BLUE, columns: 2 })}
  185. </div>
  186. </section>`;
  187. }
  188. // ==========================================================
  189. // 4.3 · JTBD · Emotional 情绪价值
  190. // ==========================================================
  191. function renderSub4_3(ctx) {
  192. const { chapter: c, subIdx, sub, slideNum, slideTotal, data } = ctx;
  193. const items = data.items || [];
  194. const anxietyVoc = LA.getEvidence(items, {
  195. contentMatch: /吓|体检|转氨酶|没几天|指标|担心|焦虑|怕|不敢|犹豫|犹疑/,
  196. minChars: 20, top: 3, seed: 7,
  197. });
  198. const reliefVoc = LA.getEvidence(items, {
  199. contentMatch: /终于|安心|放心|踏实|省心|不用|不担心|稳了|缓解/,
  200. minChars: 20, top: 2, seed: 11,
  201. });
  202. const emoJobs = [
  203. { title: '化解体检焦虑', color: BRAND.CORAL, before: '"刷抖音感觉自己没几天了" ♥732 · "吓得赶紧吃两粒" ♥4823',
  204. after: '"日常一粒,体检不慌"', voc: anxietyVoc[0] },
  205. { title: '解锁熬夜自由', color: BRAND.LIVER_AMBER, before: '"18岁体检查出转氨酶偏高" ♥21328 · 年轻化健康焦虑',
  206. after: '"熬夜党的心理安全带"', voc: anxietyVoc[1] },
  207. { title: '重建饮酒掌控感', color: BRAND.WINE_RED, before: '"昨晚谁都不是我的对手,今天网搜怎么缓解" ♥5729 · 失控后自救',
  208. after: '"应酬前一粒,次日还是我"', voc: reliefVoc[0] || anxietyVoc[2] },
  209. { title: '日常自我关怀', color: BRAND.SAGE, before: '"吃了大半年气色由内而外好" ♥13 · 长期坚持带来的安定',
  210. after: '"对自己好一点,从每天 1 粒开始"', voc: reliefVoc[1] },
  211. ];
  212. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  213. <div class="section-inner">
  214. ${C.renderSectionHead({
  215. eyebrow: `${c.num}.${subIdx} · JTBD Emotional`,
  216. title: '<span style="color:' + BRAND.CORAL + ';">Emotional 情绪价值</span>:从焦虑到掌控的 4 条情绪线',
  217. subtitle: '<strong>用户买的不只是药片,而是一种情绪状态</strong>——每个情绪 Job 都对应"<strong>Before 焦虑 → After 掌控</strong>"的转变。',
  218. color: BRAND.CORAL,
  219. })}
  220. <div class="grid" style="grid-template-columns:1fr 1fr; gap:18px; margin-top:20px;">
  221. ${emoJobs.map((j) => `
  222. <div style="padding:20px 22px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${j.color}; border-radius:var(--radius-md);">
  223. <div style="color:var(--text-1); font-weight:800; font-size:1.12rem; margin-bottom:14px;">${esc(j.title)}</div>
  224. <div style="display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-bottom:14px;">
  225. <div style="padding:12px 14px; background:${BRAND.CORAL}0A; border:1px solid ${BRAND.CORAL}33; border-radius:4px;">
  226. <div class="text-mono text-xs" style="color:${BRAND.CORAL}; margin-bottom:4px; font-weight:700;">BEFORE · 焦虑</div>
  227. <div style="color:var(--text-1); font-size:0.82rem; line-height:1.6;">${j.before}</div>
  228. </div>
  229. <div style="color:${j.color}; font-size:1.6rem;">→</div>
  230. <div style="padding:12px 14px; background:${j.color}0A; border:1px solid ${j.color}33; border-radius:4px;">
  231. <div class="text-mono text-xs" style="color:${j.color}; margin-bottom:4px; font-weight:700;">AFTER · 掌控</div>
  232. <div style="color:var(--text-1); font-size:0.86rem; line-height:1.6; font-weight:600;">${esc(j.after)}</div>
  233. </div>
  234. </div>
  235. ${j.voc ? C.renderVocCard(j.voc, { accent: j.color, compact: true, maxChars: 160 }) : ''}
  236. </div>`).join('')}
  237. </div>
  238. <div class="fade-up" style="margin-top:24px;">
  239. ${C.renderInsightHero({
  240. eyebrow: 'EMOTIONAL PROMISE · 情绪承诺',
  241. color: BRAND.CORAL,
  242. title: `<strong>"肝纯片不治病,但它把你的焦虑<span style='color:${BRAND.JIANG_GREEN};'>变成一粒可以吞下去的安心</span>"</strong>——这是所有情绪价值的共同母题。`,
  243. subtitle: `情绪价值不靠数据说服,靠<strong style="color:${BRAND.CORAL};">场景同理心</strong> + <strong style="color:${BRAND.JIANG_GREEN};">自我关怀仪式感</strong>。广告片不拍产品,拍<em>使用它的人内心的转变</em>。`,
  244. })}
  245. </div>
  246. ${C.renderDecisionList([
  247. `<strong>文案主轴</strong>:不讲"护肝"讲"不慌"——体检不慌、熬夜不慌、应酬不慌`,
  248. `<strong>视觉主轴</strong>:每支广告片都有"焦虑 → 平静"的转变瞬间`,
  249. `<strong>仪式感设计</strong>:瓶身设计 + 服用节奏 + App 打卡 = 每天一次"对自己好"的仪式`,
  250. `<strong>共情社群</strong>:XHS "熬夜党互助小组" · 抖音 "饭局自救打卡"`,
  251. ], { title: '落地决策 · 情绪价值落位', accent: BRAND.CORAL, columns: 2 })}
  252. </div>
  253. </section>`;
  254. }
  255. // ==========================================================
  256. // 4.4 · JTBD · Social 社会价值
  257. // ==========================================================
  258. function renderSub4_4(ctx) {
  259. const { chapter: c, subIdx, sub, slideNum, slideTotal, data } = ctx;
  260. const items = data.items || [];
  261. const gift = LA.getEvidence(items, {
  262. keyword: '送长辈保健品',
  263. contentMatch: /长辈|父母|爸妈|孝心|礼物|上门|见家长|准备|见父母|8000|十八样/,
  264. minChars: 15, top: 3, seed: 5,
  265. });
  266. const drinkSocial = LA.getEvidence(items, {
  267. keyword: '酒局必备',
  268. contentMatch: /酒局|应酬|商务|饭局|喝|酒量|维b|翻倍|半小时/,
  269. minChars: 20, top: 2, seed: 9,
  270. });
  271. const socialRoles = [
  272. {
  273. role: '饭局社交货币',
  274. color: BRAND.WINE_RED,
  275. scenario: '酒局前从口袋掏出一板肝纯片——"老板喝酒备着这个,给您也来一粒"',
  276. hook: '"就在酒企,维b和维c一次三片,酒量翻一倍" ♥4412 · 用户已经自行尝试"喝酒前的物件",肝纯片就是那个"物件"的升级版',
  277. voc: drinkSocial[0],
  278. value: '商务场合的<strong>"懂行 + 体面"</strong>标签',
  279. },
  280. {
  281. role: '孝心表达器',
  282. color: BRAND.GOLD,
  283. scenario: '过节回家 / 上门见家长 → "给爸爸买的护肝片,他熬夜多"',
  284. hook: '"一共准备了十八样礼品...对长辈的尊重" ♥178 · 送礼场景里护肝品类几乎空白,有机会',
  285. voc: gift[0],
  286. value: '代际之间的<strong>"关心的仪式"</strong>符号',
  287. },
  288. {
  289. role: '养生时尚圈层',
  290. color: BRAND.TENGCHA_GREEN,
  291. scenario: '小红书晒图 / 抖音 vlog —— "我的护肝功课:藤茶 DMY + 早睡"',
  292. hook: '藤茶故事 × 东方草本 × 千年食饮 = 比 Swisse 更有故事的社交货币',
  293. voc: null,
  294. value: '"养生时尚圈层"的<strong>"我选的是东方"</strong>身份标签',
  295. },
  296. {
  297. role: '家庭守护者',
  298. color: BRAND.JIANG_GREEN,
  299. scenario: '配偶 / 父母 / 子女间相互购买 —— "给我老公买的,他应酬多"',
  300. hook: '汤臣倍健用户"气色由内而外好 ♥13"的长期陪伴感,肝纯片可以接这个盘',
  301. voc: gift[1] || gift[2],
  302. value: '家庭关系中的<strong>"我在乎你"</strong>具象化',
  303. },
  304. ];
  305. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  306. <div class="section-inner">
  307. ${C.renderSectionHead({
  308. eyebrow: `${c.num}.${subIdx} · JTBD Social`,
  309. title: '<span style="color:' + BRAND.GOLD + ';">Social 社会价值</span>:肝纯片是什么样的"社交符号"',
  310. subtitle: '产品不是孤立的——它是用户社交场里的<strong>符号道具</strong>。每个符号都对应一个关系、一个场景、一种身份表达。',
  311. color: BRAND.GOLD,
  312. })}
  313. <div class="grid" style="grid-template-columns:1fr 1fr; gap:18px; margin-top:20px;">
  314. ${socialRoles.map((r) => `
  315. <div style="padding:20px 22px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${r.color}; border-radius:var(--radius-md);">
  316. <div class="text-mono text-xs" style="color:${r.color}; letter-spacing:0.15em; margin-bottom:6px; font-weight:700;">SOCIAL ROLE</div>
  317. <div style="color:var(--text-1); font-weight:800; font-size:1.12rem; margin-bottom:12px;">${esc(r.role)}</div>
  318. <div style="padding:12px 14px; background:${r.color}08; border-left:3px solid ${r.color}; border-radius:4px; margin-bottom:12px;">
  319. <div class="text-mono text-xs" style="color:${r.color}; margin-bottom:4px; font-weight:700;">场景剧本</div>
  320. <div style="color:var(--text-1); font-size:0.86rem; line-height:1.6;">${r.scenario}</div>
  321. </div>
  322. <div style="margin-bottom:12px; padding:10px 12px; background:${BRAND.PURPLE}0A; border-radius:4px;">
  323. <div class="text-mono text-xs" style="color:${BRAND.PURPLE}; margin-bottom:4px; font-weight:700;">VOC HOOK</div>
  324. <div style="color:var(--text-1); font-size:0.82rem; line-height:1.55;">${r.hook}</div>
  325. </div>
  326. ${r.voc ? C.renderVocCard(r.voc, { accent: r.color, compact: true, maxChars: 150 }) : ''}
  327. <div style="margin-top:12px; padding:10px 12px; background:${BRAND.JIANG_GREEN}08; border:1px solid ${BRAND.JIANG_GREEN}33; border-radius:4px;">
  328. <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; margin-bottom:4px; font-weight:700;">身份标签</div>
  329. <div style="color:var(--text-1); font-size:0.86rem;">${r.value}</div>
  330. </div>
  331. </div>`).join('')}
  332. </div>
  333. ${C.renderDecisionList([
  334. `<strong>饭局社交货币</strong>:商务铁盒装 24 粒 · ¥298 · 一物一码 + 送礼卡`,
  335. `<strong>孝心表达器</strong>:节日礼盒 2 瓶装 · ¥498-898 · 中式礼袋 + 溯源二维码`,
  336. `<strong>养生时尚圈层</strong>:XHS KOL 内容 + 东方草本视觉 + 藤茶溯源纪录片`,
  337. `<strong>家庭守护者</strong>:家庭装 60 粒 · ¥198 · 配带提醒服用 App`,
  338. ], { title: '落地决策 · 4 种社交符号产品化', accent: BRAND.GOLD, columns: 2 })}
  339. </div>
  340. </section>`;
  341. }
  342. // ==========================================================
  343. // 4.5 · 决策优先级·SKU/话术/包装映射
  344. // ==========================================================
  345. function renderSub4_5(ctx) {
  346. const { chapter: c, subIdx, sub, slideNum, slideTotal } = ctx;
  347. return `<section class="report-section" id="${c.key}-${subIdx}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  348. <div class="section-inner">
  349. ${C.renderSectionHead({
  350. eyebrow: `${c.num}.${subIdx} · 决策优先级`,
  351. title: '<span style="color:' + BRAND.SAGE + ';">KANO × JTBD</span> → <span style="color:' + BRAND.JIANG_GREEN + ';">SKU / 话术 / 包装 / 价格</span> 映射',
  352. subtitle: '把 KANO 5 类 × JTBD 3 维 折叠为<strong>12 项落地决策</strong>——每一项都是下游 SKU / 话术 / 包装 / 价格的直接输入。',
  353. color: BRAND.SAGE,
  354. })}
  355. <div style="margin-top:20px;">
  356. ${C.renderCompareTable({
  357. title: 'DECISION MATRIX · 12 项落地决策',
  358. headers: ['维度', 'Functional 功能', 'Emotional 情绪', 'Social 社会'],
  359. rows: [
  360. [
  361. { html: '<strong>必备</strong>', color: BRAND.CORAL, bold: true },
  362. { html: 'OTC 合规 × 成分表公开', color: 'var(--text-1)' },
  363. { html: '吃得安心 · 不怕长期', color: 'var(--text-1)' },
  364. { html: '可以光明正大送人的正品', color: 'var(--text-1)' },
  365. ],
  366. [
  367. { html: '<strong>期望</strong>', color: BRAND.LIVER_AMBER, bold: true },
  368. { html: 'DMY 清解酒后头疼 × ALT 下降', color: 'var(--text-1)' },
  369. { html: '体检不慌 · 熬夜心理安全带', color: 'var(--text-1)' },
  370. { html: '"懂行"的行家标签', color: 'var(--text-1)' },
  371. ],
  372. [
  373. { html: '<strong>兴奋</strong>', color: BRAND.JIANG_GREEN, bold: true },
  374. { html: '30 天ALT 前后对比卡 · 溯源码', color: 'var(--text-1)' },
  375. { html: '千年食饮故事 + 自我关怀仪式', color: 'var(--text-1)' },
  376. { html: '中式新礼盒 × 张家界原产地背书', color: 'var(--text-1)' },
  377. ],
  378. [
  379. { html: '<strong>无差异</strong>', color: BRAND.SAGE, bold: true },
  380. { html: '避免多成分堆砌', color: BRAND.SAGE },
  381. { html: '避免过度情绪营销', color: BRAND.SAGE },
  382. { html: '避免不痛不痒的一般性标语', color: BRAND.SAGE },
  383. ],
  384. [
  385. { html: '<strong>反向</strong>', color: BRAND.WINE_RED, bold: true },
  386. { html: '✗ 剂量夸张(如"7500 mg"话术)', color: BRAND.WINE_RED },
  387. { html: '✗ 恐惧营销 / 肝病吓人片', color: BRAND.WINE_RED },
  388. { html: '✗ 硬广"老哒"式 TVC 洗脑', color: BRAND.WINE_RED },
  389. ],
  390. ],
  391. accent: BRAND.SAGE,
  392. })}
  393. </div>
  394. <div class="grid" style="grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; margin-top:24px;">
  395. <div style="padding:18px; background:${BRAND.CORAL}08; border:1px solid ${BRAND.CORAL}33; border-radius:var(--radius-md);">
  396. <div class="text-mono text-xs" style="color:${BRAND.CORAL}; margin-bottom:8px; font-weight:700;">SKU 映射</div>
  397. <div style="color:var(--text-1); font-size:0.86rem; line-height:1.7;">
  398. · 日常瓶 60 粒 ¥128<br/>
  399. · 随身板 12 粒 ¥39<br/>
  400. · 商务铁盒 24 粒 ¥198<br/>
  401. · 礼盒 2 瓶 ¥498<br/>
  402. · 家庭装 120 粒 ¥198<br/>
  403. · 国礼级双瓶 ¥898
  404. </div>
  405. </div>
  406. <div style="padding:18px; background:${BRAND.LIVER_AMBER}08; border:1px solid ${BRAND.LIVER_AMBER}33; border-radius:var(--radius-md);">
  407. <div class="text-mono text-xs" style="color:${BRAND.LIVER_AMBER}; margin-bottom:8px; font-weight:700;">话术映射</div>
  408. <div style="color:var(--text-1); font-size:0.86rem; line-height:1.7;">
  409. · 藤茶 DMY · 千年食饮<br/>
  410. · 体检不慌 · 熬夜自救<br/>
  411. · 饭局清早不头疼<br/>
  412. · 江中 OTC 品质背书<br/>
  413. · 对爸妈最具心意的礼<br/>
  414. · 养生时尚 · 东方选择
  415. </div>
  416. </div>
  417. <div style="padding:18px; background:${BRAND.TENGCHA_GREEN}08; border:1px solid ${BRAND.TENGCHA_GREEN}33; border-radius:var(--radius-md);">
  418. <div class="text-mono text-xs" style="color:${BRAND.TENGCHA_GREEN}; margin-bottom:8px; font-weight:700;">包装映射</div>
  419. <div style="color:var(--text-1); font-size:0.86rem; line-height:1.7;">
  420. · 东方草本视觉语言<br/>
  421. · 藤叶纹样 + 金线<br/>
  422. · 荷叶绿 + 米白主色<br/>
  423. · 去药盒化 → 轻养生<br/>
  424. · 中式新礼袋<br/>
  425. · 一物一码 + 溯源
  426. </div>
  427. </div>
  428. <div style="padding:18px; background:${BRAND.JIANG_GREEN}08; border:1px solid ${BRAND.JIANG_GREEN}33; border-radius:var(--radius-md);">
  429. <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; margin-bottom:8px; font-weight:700;">价格映射</div>
  430. <div style="color:var(--text-1); font-size:0.86rem; line-height:1.7;">
  431. · 入门带:¥39-128<br/>
  432. · 主销带:¥198-298<br/>
  433. · 礼品带:¥498-898<br/>
  434. · vs Swisse:便宜 20-30%<br/>
  435. · vs 片仔癀:便宜 40-50%<br/>
  436. · vs 易善复:贵 10-20%(免处方)
  437. </div>
  438. </div>
  439. </div>
  440. ${C.renderDecisionList([
  441. `<strong>P0 优先级</strong>:必备 × Functional(OTC 合规 + 成分透明)— 上市前必做`,
  442. `<strong>P1 优先级</strong>:期望 × Functional + Emotional(DMY 效果 + 情绪锚点)— 前 6 个月重点`,
  443. `<strong>P2 优先级</strong>:兴奋 × Social(礼盒 + 社交货币)— 前 12 个月内完成`,
  444. `<strong>明令禁止</strong>:反向列表(硬广/剂量夸张/恐惧营销)— 全生命周期`,
  445. ], { title: '落地决策 · 优先级排序', accent: BRAND.SAGE, columns: 2 })}
  446. </div>
  447. </section>`;
  448. }
  449. module.exports = {
  450. 'kano-1': renderSub4_1,
  451. 'kano-2': renderSub4_2,
  452. 'kano-3': renderSub4_3,
  453. 'kano-4': renderSub4_4,
  454. 'kano-5': renderSub4_5,
  455. };