跳到正文

评分

Rate

初级通用

评分(Rate)是表单中让用户按固定等级表达评价的控件,常见形式是点选一到五颗星。它把“觉得怎么样”变成可提交的数值,方便产品收集反馈,也让用户不用写一段话就能表达大致感受。

你可能会说:「我想让用户给刚生成的图片打个一到五分,点一下就能选好。」

动手看看

这次配送体验怎么样?订单 #10582 已送达,请为配送服务评分。
1分
2分
3分
4分
5分
1分 很不满意 · 3分 一般 · 5分 很满意
已选 3 分,待提交表单评分值:3。悬停或聚焦不会改写这个值。
尚未评分还没有可提交的评分;未评分不等于给了最低分。

悬停星星看候选反馈,按住看按下反馈,也可用 Tab 聚焦。本沙盒用下方“已选评分”模拟点击后的选中结果,点击星星不会保存分数。

连续亮起的星星表示已选等级,不是多个独立选项。选到第几颗,表单就得到几分;移开鼠标后,已选结果仍然保留。

悬停上浮告诉你“可以选这里”,按下缩小表示正在操作,聚焦描边告诉键盘用户当前所在位置;这些反馈本身都不等于已选或已提交。

三颗星对应“一般”,把模糊感受变成固定等级。文字锚点能帮用户理解分值方向,避免把一星误认为最好。

要点

  1. 1

    先说清每一档代表什么

    你做 AI 图片生成工具时,可以让用户给结果选一到五分。界面用星星呈现,提交给后台的通常是数字。因为不同人对分数的理解可能不同,所以要说明低分和高分分别代表什么。

  2. 2

    选中的等级要一眼可见

    用户点到第四颗星后,我们让前四颗星都显示为选中状态,并允许重新选择。这样用户提交前能核对自己的选择;用键盘操作或读屏的人,也需要知道当前分值。

  3. 3

    分清未评分和最低评分

    表单刚打开时,没有选择不等于给了零分。如果评分是必填项,你可以在提交时提示用户补选;如果允许跳过,就把未评分单独保存。否则统计时会把没评价的人误算成低分。

容易混淆的地方

评分和单选框都只能选一个结果,但评分表达的是有顺序的等级,例如一到五分;单选框更适合“原因是速度、价格还是功能”这类类别选择。它也不同于滑块:评分让用户选预设档位,滑块更适合调节音量这类需要在范围内连续改变的数值。

什么时候用

适合用

  • 在 AI 工具的生成结果下,让用户用一到五分反馈这次结果是否有用。
  • 在课程完成页,让学员给本节内容选一个满意度等级。
  • 在商品评价表单里,先收集星级,再让愿意补充的人填写文字评价。

不适合用

  • 让用户选择投诉原因时,用单选框或复选框;原因是类别,不是高低等级。
  • 让用户精确设置音量大小时,用滑块或数字输入框;几颗星无法表达具体数值。
  • 只是展示已有商品均分时,用只读的数值和图形展示;这里没有待填写的评分。

练一练

你在做 AI 摘要工具,想知道用户觉得这次摘要有多有用,同时允许用户不评价就继续使用。下面哪种设计更合适?

让 AI 帮你做

请在 AI 摘要结果下添加一到五分的评分(Rate)控件。初始状态为未评分,允许跳过;选中后显示当前分值并可修改。提交时区分未评分和一分,同时提供键盘操作及可读的分值名称。

接下来学什么