192 lines
9.8 KiB
HTML
192 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>小红书种草→投放转化 漏斗路径图</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif; background: #f8f9fa; padding: 40px 20px; }
|
||
.container { max-width: 1000px; margin: 0 auto; }
|
||
h1 { text-align: center; font-size: 22px; color: #1a1a1a; margin-bottom: 8px; }
|
||
.subtitle { text-align: center; font-size: 13px; color: #666; margin-bottom: 40px; }
|
||
|
||
/* Funnel Section */
|
||
.funnel-wrapper { display: flex; align-items: flex-start; justify-content: center; gap: 40px; margin-bottom: 50px; }
|
||
.funnel { display: flex; flex-direction: column; align-items: center; gap: 0; }
|
||
.funnel-step { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; text-align: center; position: relative; }
|
||
.funnel-step .label { position: absolute; font-size: 12px; color: #555; white-space: nowrap; }
|
||
|
||
/* Platform sections */
|
||
.platform-section { display: flex; gap: 60px; justify-content: center; align-items: flex-start; margin-top: 30px; }
|
||
.platform { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); width: 420px; }
|
||
.platform h3 { font-size: 15px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
|
||
.platform h3 .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #fff; }
|
||
|
||
/* Flow diagram */
|
||
.flow { display: flex; flex-direction: column; gap: 0; }
|
||
.flow-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
|
||
.flow-step .icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||
.flow-step .text { flex: 1; }
|
||
.flow-step .text .name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||
.flow-step .text .desc { font-size: 11px; color: #888; margin-top: 2px; }
|
||
.flow-arrow { text-align: center; color: #ccc; font-size: 18px; padding: 2px 0; margin-left: 18px; }
|
||
|
||
/* Connector */
|
||
.connector { text-align: center; margin: 30px 0; font-size: 13px; color: #666; }
|
||
.connector .arrow-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
|
||
.connector .arrow-line span { font-size: 20px; color: #4CAF50; }
|
||
|
||
/* Legend */
|
||
.legend { display: flex; gap: 20px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
|
||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; }
|
||
.legend-item .dot { width: 10px; height: 10px; border-radius: 50%; }
|
||
|
||
/* SVG Funnel */
|
||
.svg-funnel { display: block; margin: 0 auto; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>小红书种草 → 最终投放转化 全链路漏斗</h1>
|
||
<p class="subtitle">AIPS 人群资产模型 × 跨平台转化路径 | Makee Interactive</p>
|
||
|
||
<!-- SVG Funnel -->
|
||
<svg class="svg-funnel" width="800" height="420" viewBox="0 0 800 420">
|
||
<!-- Funnel layers -->
|
||
<polygon points="150,30 650,30 610,100 190,100" fill="#FF6B6B" opacity="0.9"/>
|
||
<text x="400" y="72" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">A — Awareness 认知人群</text>
|
||
<text x="720" y="72" text-anchor="start" fill="#666" font-size="11">看到笔记/广告曝光</text>
|
||
|
||
<polygon points="190,108 610,108 570,178 230,178" fill="#FFA06B" opacity="0.9"/>
|
||
<text x="400" y="150" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">I — Interest 兴趣人群</text>
|
||
<text x="720" y="150" text-anchor="start" fill="#666" font-size="11">点赞/收藏/评论/关注</text>
|
||
|
||
<polygon points="230,186 570,186 530,256 270,256" fill="#FFD06B" opacity="0.9"/>
|
||
<text x="400" y="228" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">TI — True Interest 深度兴趣</text>
|
||
<text x="720" y="228" text-anchor="start" fill="#666" font-size="11">搜索品牌词/多次互动/私信</text>
|
||
|
||
<polygon points="270,264 530,264 500,334 300,334" fill="#6BCF7F" opacity="0.9"/>
|
||
<text x="400" y="306" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">P — Purchase 购买/线索人群</text>
|
||
<text x="720" y="306" text-anchor="start" fill="#666" font-size="11">点击商品链接/留资/加企微</text>
|
||
|
||
<polygon points="300,342 500,342 470,400 330,400" fill="#4B7BEC" opacity="0.9"/>
|
||
<text x="400" y="378" text-anchor="middle" fill="#fff" font-size="13" font-weight="bold">S — Share 分享人群</text>
|
||
<text x="720" y="378" text-anchor="start" fill="#666" font-size="11">UGC产出/口碑裂变</text>
|
||
|
||
<!-- Left labels -->
|
||
<text x="80" y="72" text-anchor="end" fill="#FF6B6B" font-size="12" font-weight="bold">公域曝光</text>
|
||
<text x="80" y="150" text-anchor="end" fill="#FFA06B" font-size="12" font-weight="bold">互动蓄水</text>
|
||
<text x="80" y="228" text-anchor="end" fill="#FFD06B" font-size="12" font-weight="bold">深度种草</text>
|
||
<text x="80" y="306" text-anchor="end" fill="#6BCF7F" font-size="12" font-weight="bold">转化线索</text>
|
||
<text x="80" y="378" text-anchor="end" fill="#4B7BEC" font-size="12" font-weight="bold">口碑裂变</text>
|
||
|
||
<!-- Efficiency arrows between layers -->
|
||
<text x="135" y="95" text-anchor="middle" fill="#999" font-size="10">流转率①</text>
|
||
<text x="135" y="173" text-anchor="middle" fill="#999" font-size="10">流转率②</text>
|
||
<text x="135" y="251" text-anchor="middle" fill="#999" font-size="10">流转率③</text>
|
||
<text x="135" y="329" text-anchor="middle" fill="#999" font-size="10">流转率④</text>
|
||
</svg>
|
||
|
||
<!-- Connector: XHS to Conversion -->
|
||
<div class="connector">
|
||
<div class="arrow-line">
|
||
<span>⬇️</span> <strong>进入私域 / 抖音千川投放承接转化</strong> <span>⬇️</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Two platform cards -->
|
||
<div class="platform-section">
|
||
<!-- XHS side -->
|
||
<div class="platform">
|
||
<h3><span class="badge" style="background:#FF4757">小红书</span> 种草侧（蓄水 & 线索）</h3>
|
||
<div class="flow">
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#FFE8E8">📝</div>
|
||
<div class="text">
|
||
<div class="name">达人笔记 / 品牌内容投放</div>
|
||
<div class="desc">KOC测评 + 品牌号内容 + 聚光加热</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#FFF3E0">🔍</div>
|
||
<div class="text">
|
||
<div class="name">用户搜索 & 互动行为</div>
|
||
<div class="desc">品牌词搜索↑ / 收藏 / 评论 / 私信咨询</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#E8F5E9">📊</div>
|
||
<div class="text">
|
||
<div class="name">灵犀平台 — AIPS 人群资产沉淀</div>
|
||
<div class="desc">A→I→TI→P 各层级人群量化管理</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#E3F2FD">🔗</div>
|
||
<div class="text">
|
||
<div class="name">线索外溢 → 私域/电商平台</div>
|
||
<div class="desc">小红星 / 红猫计划数据回传</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Douyin side -->
|
||
<div class="platform">
|
||
<h3><span class="badge" style="background:#1DA1F2">抖音/千川</span> 转化侧（收割 & 成交）</h3>
|
||
<div class="flow">
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#E3F2FD">📡</div>
|
||
<div class="text">
|
||
<div class="name">千川投放承接种草人群</div>
|
||
<div class="desc">被种草用户进入投放池，CTR/CVR显著高于冷启动</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#F3E5F5">🎬</div>
|
||
<div class="text">
|
||
<div class="name">直播间 / 短视频转化</div>
|
||
<div class="desc">达播场均GMV + 品牌自播</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#E8F5E9">💰</div>
|
||
<div class="text">
|
||
<div class="name">成交 & 留资</div>
|
||
<div class="desc">下单 / 加企微 / 领试听课</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step">
|
||
<div class="icon" style="background:#FFF8E1">🔄</div>
|
||
<div class="text">
|
||
<div class="name">私域运营 & 复购</div>
|
||
<div class="desc">企微社群 / 正价课转化 / 续费</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legend -->
|
||
<div class="legend" style="margin-top:40px;">
|
||
<div class="legend-item"><div class="dot" style="background:#FF6B6B"></div>A 认知</div>
|
||
<div class="legend-item"><div class="dot" style="background:#FFA06B"></div>I 兴趣</div>
|
||
<div class="legend-item"><div class="dot" style="background:#FFD06B"></div>TI 深度兴趣</div>
|
||
<div class="legend-item"><div class="dot" style="background:#6BCF7F"></div>P 购买/线索</div>
|
||
<div class="legend-item"><div class="dot" style="background:#4B7BEC"></div>S 分享裂变</div>
|
||
</div>
|
||
|
||
<p style="text-align:center; margin-top:30px; font-size:11px; color:#999;">
|
||
度量工具：灵犀平台（人群资产）+ 聚光（投放数据）+ 小红星/红猫（跨平台归因）+ 巨量云图（抖音侧）<br>
|
||
核心分析：各层流转率的月度对比 → 定位漏斗瓶颈 → 优化种草策略
|
||
</p>
|
||
</div>
|
||
</body>
|
||
</html>
|