SOCIAL PROOF
客户案例卡Case Study Card
一个客户 + 一个可量化的结果数字 + 一句话方法论，B2B 转化利器。
效果预览
◆ 星野民宿
+214%直订量增长
重构内容架构 + 自动化分销，6 个月摆脱 OTA 依赖。
适合用在哪
B2B 官网案例区、销售跟进材料、行业解决方案页。
容易踩的坑
- 白色反白 Logo 放在浅色客户场景图上，对比度低于 3:1 时 Logo 直接消失。
- 整张卡只有末尾小链接可点，热区太小，移动端点击率明显偏低。
- 三张卡结果数字口径不一（有的百分比、有的绝对值），用户无法横向比较。
设计提示词 · Prompt
客户案例卡（Case Study Card）：上半是客户品牌区（深色底 + 客户 Logo 白色反白，或客户场景图），下半三行结构——核心结果数字（28-40px 品牌色大数字，如"+214%"）+ 指标名（"自然流量增长"）+ 一句怎么做到的（"重构了内容架构并接入自动化分发"）+ "阅读完整案例 →"链接。案例必须有真实数字和可核实细节；写不出数字的案例宁可不放。三张案例卡横排，行业错开。
Case Study Card: the top half is the customer brand area (dark background + the customer logo reversed in white, or a customer scene image); the bottom half is a three-line structure — the core result number (28-40px large number in brand color, e.g. "+214%") + the metric name ("organic traffic growth") + one sentence on how it was achieved ("Rebuilt the content architecture and added automated distribution") + a "Read the full case study →" link. Cases must have real numbers and verifiable details; if you can't write a number, leave the case out. Lay out three case cards side by side, from different industries.
常见搭配
同一页面里经常和「客户案例卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-casecard">
<div class="d-casecard__top">◆ 星野民宿</div>
<div class="d-casecard__bd">
<div class="d-casecard__row"><b>+214%</b><span>直订量增长</span></div>
<span class="d-tiny" style="line-height:1.55">重构内容架构 + 自动化分销，6 个月摆脱 OTA 依赖。</span>
</div>
</div>