SOCIAL PROOF
Logo 云Logo Cloud
一排灰度的客户 Logo，"这些公司都在用"是最省字的证明。
效果预览
受到 2,000+ 团队信赖
◆ Nova● Orbit▲ Summit✦ Lumen
适合用在哪
Hero 下方、定价页上方、案例区开头。
容易踩的坑
- Logo 只按宽度统一，方形标和横长标视觉面积差三倍以上，整排看起来参差不齐。
- 灰度后 opacity 低于 0.5，在浅灰背景上对比度不足，Logo 几乎辨认不出。
- Logo 图片没有 alt 文本，读屏用户只听到一串「图片」，背书信息完全丢失。
设计提示词 · Prompt
Logo 云（Logo Cloud）：顶部一行小字标题（如"TRUSTED BY 2,000+ TEAMS"，11px、大写、字距 +0.1em、灰色、居中），下面一排客户 Logo 用网格排列（桌面 5-6 列、移动 2-3 列，格子高 56-72px）。Logo 统一灰度化（filter:grayscale(1) + opacity .6-.7）保证视觉统一，悬停恢复彩色。客户 Logo 用真实品牌要获授权；没有大客户时用"用户数 + 行业"文案代替（"来自 40 个行业的 12,000 个团队"）。Logo 高度必须统一，宽度随比例。
Logo Cloud: a small one-line heading at the top (e.g. "TRUSTED BY 2,000+ TEAMS", 11px, uppercase, letter-spacing +0.1em, gray, centered), followed by a row of customer logos arranged in a grid (5-6 columns on desktop, 2-3 on mobile, cell height 56-72px). Convert all logos to grayscale (filter:grayscale(1) + opacity .6-.7) for visual consistency, restoring full color on hover. Real brand logos require permission; if you don't have big-name customers, replace them with "user count + industries" copy ("12,000 teams across 40 industries"). Logo heights must be uniform, widths follow each logo's aspect ratio.
常见搭配
同一页面里经常和「Logo 云」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-logocloud"> <span class="d-logocloud__cap">受到 2,000+ 团队信赖</span> <span class="d-logocloud__cell">◆ Nova</span><span class="d-logocloud__cell">● Orbit</span><span class="d-logocloud__cell">▲ Summit</span><span class="d-logocloud__cell">✦ Lumen</span> </div>