跳到主要内容
Termlib

UI 组件 · 营销

Logo 墙

Logo Wall

也叫：客户 Logo、合作伙伴墙、Logo 云、Logo Cloud、Trusted By、Client Logos

官网上一排或几排客户、合作伙伴的公司标志，通常做成灰色，配一句「这些团队在用」，快速说明谁在用这个产品。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在首屏横幅下方加一条 Logo 墙：上面一行 14px 灰色小字「这些团队正在使用」，下面一行 6 个客户 Logo，等间距排开、垂直居中，每个高 28px、宽度自适应，统一灰度（filter: grayscale(1)、opacity: 0.6），悬停时恢复彩色。Logo 用我提供的真实客户 Logo 图片（SVG 或 PNG，alt 写公司名）；我还没提供时先放 6 个灰色圆角占位块并标注「客户 Logo」，不要用知名公司的 Logo 或编造的公司名。手机上改为 3 列两行。

发给

01判断

你的内容是这样吗？

对照两列，确认Logo 墙是不是你要找的。

符合这些情况，用Logo 墙

  • 官网首屏下方，快速告诉访客有哪些真实客户在用
  • 合作伙伴、集成生态页面，列出可以对接的平台
  • 活动页列出主办方、赞助商

是这些情况，换成别的

  • 还没有真实客户，或没有得到对方同意展示 Logo 时

  • 需要讲清客户用了之后的效果，用客户评价或案例

    改用客户评价

  • 可以点进去查看详情的一组应用、插件

    改用卡片网格

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    放了一排知名大公司的 Logo，其实并不是客户，也没有得到授权

  2. 02

    Logo 大小、颜色各不相同，有的彩色有的黑白，看起来很乱

  3. 03

    一次堆了三四十个 Logo，访客一个也记不住

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一行说明标题和一组大小统一的公司 Logo 组成，Logo 排成一行或几行网格，常做灰度处理，也可以做成横向缓慢滚动的一条。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1首屏下方一行灰色的公司标志，大小差不多、等距排开
  2. 2上方有一行小字，例如「这些团队在用」「服务过的客户」
  3. 3标志通常不能点，也没有别的文字说明

04解释

详细解释

Logo 墙常放在首屏横幅正下方，也会出现在客户评价附近：一行小字标题（「部分客户」），下面 5~8 个大小统一的 Logo 排成一行，或者两三行网格；Logo 大多做成灰色或单色，避免抢眼。Logo 多时会做成缓慢横向滚动的一条。

它比普通 图片 具体：是一组同尺寸的标志，目的是背书，不是展示内容。和 客户评价 的区别：Logo 墙只回答「谁在用」，客户评价讲「用了之后怎样」，两者常一起出现。和 轮播图 的区别：Logo 自动滚动只是装饰，不需要点圆点切换，也不需要一张张看。

只放真实客户或正式合作伙伴、并且对方同意展示的 Logo，不要拿知名公司的 Logo 充数，这可能涉及侵权。标题写实（「部分客户」，不要写「世界 500 强都在用」）。Logo 统一高度（例如 28~32px）、统一灰度，每个 img 的 alt 写公司名。还没有客户时，就不做这个区块。

开发者信息
术语 ID
component-logo-wall
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • section:is([class*="logos" i], [class*="logo-cloud" i], [class*="logo-wall" i], [class*="trusted" i], [class*="clients" i], [id*="logos" i], [id*="clients" i], [id*="partners" i])
  • :is(div, ul, section):has(> img[alt*="logo" i] ~ img[alt*="logo" i] ~ img[alt*="logo" i])
  • :is(div, ul):has(> :is(li, div, a) > img[alt*="logo" i]):has(> :nth-child(4)):not(nav *, header *)
  • :is(div, ul, section):has(> :is(img, svg)[class*="grayscale"] ~ :is(img, svg)[class*="grayscale"] ~ :is(img, svg)[class*="grayscale"])
  • :is(div, ul):has(> img.object-contain ~ img.object-contain ~ img.object-contain ~ img.object-contain)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • logos
  • logo-wall
  • logo-cloud
  • logo-grid
  • logo-strip
  • logo-marquee
  • logo-carousel
  • client-logos
  • partner-logos
  • customer-logos
  • brand-logos
  • trusted-by
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • LogoWall
  • LogoCloud
  • LogoGrid
  • Logos
  • LogoMarquee
  • ClientLogos
  • TrustedBy
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
  • 重复子项
  • 网格排列
优先级
4 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30