SOCIAL PROOF
头像堆叠Avatar Stack
三五个头像叠在一起 + "等 12,000 人"——比任何 Logo 都有人味。
效果预览
林
周
陈
吴
+2.4k
和 12,000 位创作者一起出发
适合用在哪
CTA 按钮旁、注册页、社区产品 Hero、Waitlist 页。
容易踩的坑
- 头像图片未压缩，五张 400px 原图堆在首屏，只为显示 40px 却多出几百 KB。
- 描边颜色写死白色，在深色背景上反而像一圈亮边，应跟随背景色。
- 「+2.4k」圆圈与头像无可读文本说明，读屏用户只听到一串无名图片。
设计提示词 · Prompt
头像堆叠（Avatar Stack）：3-5 个 32-40px 圆形头像横向排列、每个 margin-left:-10px 重叠，白色 2-3px 描边分开层次，最后一个用"+2.4k"深色圆收尾。旁边配文案："和 12,000 位创作者一起"。头像必须真实人脸（用 randomuser.me 或 Unsplash 人像，不要用图标）；不同肤色年龄性别混搭更真实。可加悬停展开效果——悬停时头像散开成完整排列。放在主 CTA 正下方效果最好。
Avatar Stack: 3-5 circular avatars at 32-40px arranged horizontally, each with margin-left:-10px to overlap, separated by a 2-3px white stroke, ending with a dark "+2.4k" circle. Next to it, copy such as "Join 12,000 creators". Avatars must be real faces (use randomuser.me or Unsplash portraits, not icons); mixing skin tones, ages, and genders feels more authentic. Optionally add a hover expand effect — on hover the avatars spread out into a full row. Works best placed directly below the primary CTA.
常见搭配
同一页面里经常和「头像堆叠」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-avstack">
<div class="d-avstack__row">
<span class="d-av d-avstack__grad1">林</span>
<span class="d-av d-avstack__grad2">周</span>
<span class="d-av d-avstack__grad3">陈</span>
<span class="d-av d-avstack__grad4">吴</span>
<span class="d-av d-av--more">+2.4k</span>
</div>
<span class="d-avstack__cap">和 <b>12,000 位创作者</b>一起出发</span>
</div>