DATA VISUALIZATION
漏斗图Funnel Chart
从宽到窄一层层收窄，每层之间的跌幅就是每一步的流失率。
效果预览
访问 10,000
↓ -42%
注册 5,800
↓ -55%
激活 2,610
↓ -38%
付费 1,618
适合用在哪
注册转化分析、销售管道、电商下单流程、招聘流程。
容易踩的坑
- 梯形宽度按绝对值线性缩放，末层只剩 2% 时窄到写不下文字，应设最小宽度。
- 跌幅标注只用红色小字，在深浅同色系的层间对比度不足，很容易被忽略。
- 层与层的统计口径不同（会话 vs 用户），算出的流失率失真，误导优化方向。
设计提示词 · Prompt
漏斗图（Funnel Chart）：每层一个居中的梯形/圆角条，宽度按留存比例递减，层间放跌幅标注（"-42%" 红色小字）。颜色从深到浅同色系。层内写步骤名 + 数量 + 占首层百分比。重点在流失标注——看漏斗的人真正关心的是"哪一步漏得最多"。客单价高的步骤可在 hover 时显示改进建议。层数 4-6 层为宜。居中对称漏斗更美观，但左对齐条形递减版（funnel bar）数值更易比较，二选一保持全站统一。
Funnel Chart: each layer is a centered trapezoid/rounded bar whose width decreases by retention ratio, with drop-off labels between layers ("-42%" in small red text). Colors go from dark to light within one color family. Each layer shows the step name + count + percentage of the first layer. The emphasis is on drop-off labels — what funnel viewers really care about is "which step leaks the most". For high-value steps, show improvement suggestions on hover. 4-6 layers is ideal. A centered symmetrical funnel looks nicer, but a left-aligned decreasing bar version (funnel bar) makes values easier to compare; pick one and keep it consistent site-wide.
常见搭配
同一页面里经常和「漏斗图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-funnel"> <div class="d-funnel__stage" style="width:100%;background:#4f46e5">访问 10,000</div> <span class="d-funnel__drop">↓ -42%</span> <div class="d-funnel__stage" style="width:76%;background:#7c3aed">注册 5,800</div> <span class="d-funnel__drop">↓ -55%</span> <div class="d-funnel__stage" style="width:52%;background:#c026d3">激活 2,610</div> <span class="d-funnel__drop">↓ -38%</span> <div class="d-funnel__stage" style="width:36%;background:#f472b6">付费 1,618</div> </div>