跳到主要内容
Termlib

UI 组件 · 营销

客户评价

Testimonial

也叫：用户评价、客户证言、用户心声、Testimonials、Customer Quotes、Customer Stories

官网上展示真实客户原话的区域，每条是一段引用加上说话人的头像、姓名、职位和公司，用别人的口碑让新访客相信产品。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在特性网格后面加一个客户评价区块：h2 标题下面 3 张等宽评价卡片（桌面 3 列，手机横向滑动），卡片白底、圆角 16px、内边距 28px。卡片上部是客户原话（16px、行高 1.7，最多 5 行），下部一行是 40px 圆形头像、姓名（粗体）和「职位 · 公司」（14px 灰色）。评价内容只用我提供的真实客户评价：［原话、姓名、职位、公司、头像图片］；还没拿到的位置先放灰色文字「客户评价占位」，不要编造姓名、公司和评分，也不要加五星图标。

发给

01判断

你的内容是这样吗？

对照两列，确认客户评价是不是你要找的。

符合这些情况，用客户评价

  • 官网、落地页需要用真实客户的说法证明产品有效
  • 价格表或行动号召区前面，打消访客「真的有用吗」的疑虑
  • 行业解决方案页，展示同行业客户的使用效果

是这些情况，换成别的

  • 还没有真实客户或拿不到授权时，不要用编的评价凑数

  • 用户自己发表、可以回复的大量评价，用评论列表

    改用评论列表

  • 只想说明「哪些公司在用」

    改用Logo 墙

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

02避坑

常见坏用法

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

  1. 01

    编造客户姓名、头像和五星评分，一看就是模板里的假评价

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    评价只有「非常好用」「强烈推荐」，说不出具体解决了什么问题

  3. 03

    署名只有「张先生」「某公司 CEO」，看不出是谁，没有可信度

反例示意，对应第 01 条

03识别

怎么认出它

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

结构

由区块标题和一组评价组成，每条评价是一段客户原话和署名（头像、姓名、职位、公司），可带公司 Logo、评分或案例链接，多条时并排或做成轮播。

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

识别特征

  1. 1几张并排的卡片，每张里是一段带引号的文字
  2. 2文字下方有一个圆形头像，旁边是姓名和职位、公司
  3. 3有时带五颗星或公司 Logo，常在页面中后部

04解释

详细解释

客户评价区块通常是 2~3 张并排的评价卡片，或者一条大号引用配一张客户照片。每条评价有两部分：一段客户的原话（说清用了之后具体改善了什么），以及说话人的头像、姓名、职位和公司，有时再加公司 Logo、评分或「阅读完整案例」链接。评价多时会做成可以左右滑动的轮播。

它和 评论 不同：评论是用户在商品、文章下面自己发的，数量多、可以回复；客户评价是官网挑出来、经过客户同意展示的几条。它和 引用 的区别：引用只是排版上的一段引文，客户评价还必须有说话人的身份。和 Logo 墙 的区别：Logo 墙只放客户的标志，说明「谁在用」；客户评价是具体的人说了什么。

评价必须是真实客户说过、同意你使用的话，不能编造姓名、职位或评分；拿不到真实评价时，宁可先不放这个区块。原话要具体（「每天对账从两小时缩短到十分钟」），比「非常好用」有说服力。署名写全姓名、职位和公司，头像用本人照片；只写「张先生」看起来就像编的。

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

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

  • section:is([class*="testimonial" i], [id*="testimonial" i])
  • figure:has(> blockquote):has(> figcaption :is(img, [class*="avatar" i]))
  • :is(div, section, ul):has(> figure > blockquote + figcaption, > li > figure > blockquote + figcaption):has(> :nth-child(2))
类名关键词

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

  • testimonials
  • testimonial
  • testimonial-grid
  • testimonials-grid
  • testimonial-card
  • testimonial-slider
  • customer-stories
  • customer-quotes
  • success-stories
  • wall-of-love
组件名

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

  • Testimonial
  • Testimonials
  • TestimonialCard
  • TestimonialSection
  • TestimonialGrid
  • CustomerQuote
结构特征

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

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