跳到主要内容
Termlib

UI 组件 · 表单输入

评分

Rate

也叫：星级评分、Rating、打分、五星评价

一排五颗星（或其他图标），点亮几颗表示几分，既能让用户打分，也能只读展示平均分。

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

怎么跟 AI 说

改成你的业务内容再发

评价表单里放一个五星评分：星星 24px，悬停时从左到右预览点亮，点击确定分数，支持半星，右侧显示对应文字「很差 / 较差 / 一般 / 满意 / 超赞」；商品卡片上用只读小星星展示平均分，后面跟「4.8 分 · 1,203 条评价」。

发给

01判断

你的内容是这样吗？

对照两列，确认评分是不是你要找的。

符合这些情况，用评分

  • 评价表单里让用户对商品、服务或内容打一个整体分数
  • 在商品卡片或详情页只读展示平均分
  • 分数有明确的高低顺序，且档位在五档左右

是这些情况，换成别的

  • 选项是互不相关的类别而不是高低程度

    改用单选框

  • 需要精确到很细的数值，比如 0~100 分

    改用滑块数字输入框

  • 要对很多个维度分别细评，一整页星星会让用户疲劳

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

02避坑

常见坏用法

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

  1. 01

    只读展示只画星星不写分数和评价人数，用户看不出具体差别

  2. 02

    星星太小又挨得很近，手机上很难点准

  3. 03

    只读评分做成可以悬停点亮的样子，用户点了以为自己打了分

03识别

怎么认出它

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

结构

由一排可点击的星形或其他图标组成，按分数点亮，常附带分数文字或评价数量。

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

识别特征

  1. 1一排五颗星，其中几颗实心、其余空心或浅色
  2. 2可能有半颗星
  3. 3旁边跟着分数数字或评价数量

04解释

详细解释

评分组件最常见的样子是一排五颗星：鼠标悬停时从左到右预览点亮，点击确定分数，有的还支持半星，比如 4.5 分。它有两种用法：一是 输入，放在评价表单里让用户给商品、服务打分；二是 只读展示，在商品卡片上显示平均分，旁边通常跟着「4.8 分 · 1,203 条评价」这样的文字。

只读展示时，星星本身不够精确，一定要配上数字和评价人数，否则用户分不清 4.2 和 4.6。如果选项不是高低程度，而是「满意 / 一般 / 不满意」这种类别，用 单选框 或表情按钮比星星更清楚。星星要有足够大的点击区域，手机上尤其要注意。

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

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

  • .ant-rate
  • .el-rate
  • [class*="MuiRating-root"]
  • .arco-rate
  • .t-rate
  • .n-rate
类名关键词

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

  • rating
  • star-rating
  • stars
  • rate-stars
组件名

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

  • Rate
  • Rating
  • StarRating
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30