跳到主要内容
界面图谱Interface Atlas
☰
EN
组件Feedback

评分

Rating

别名:点星星评分五颗星评价满意度打分star rating

这是什么

用有限等级收集主观评价的输入组件,常见形式是星级或带文字的满意度选项。悬停表示候选分值,点击或键盘选择才提交当前值。应提供每一档的文字含义,区分尚未评分与最低分;只读平均分则应明确标注统计数量,避免让用户误以为可以操作。

交互实验室

试一试,再决定怎么用

悬停预览分数,再点击或用键盘选择。移开鼠标后确认所选分值,再提交。

正在加载实验室…

使用时关注什么

  • 01悬停只预览,移开后恢复已选分数。
  • 02零分值代表未选择,提交后有明确反馈。

✓ 适用场景

  • 收集一次服务或产品体验的满意度。
  • 有明确等级定义的轻量反馈。

✕ 不适用场景

  • 需要解释问题原因时还应提供文本反馈。
  • 精确的数量或测量值应使用数字输入。

常见形式

星级评分

Stars

五级星标,每档带文字说明。

感受评分

Sentiment

用表情或符号表达满意程度。

实现要点

:checked:focus-visibletransform: scale()

单选评分可使用同名 radio。每档设置可访问名称,悬停预览不能覆盖已确认分值。未评分时禁用提交;尊重 reduced-motion。只读星级不要使用可交互角色。

相关概念

单选框Radio

用一组圆形按钮表示互斥选项,同组内只能选中一个且不可取消。 与复选框的核心区别是多选与单选;选中圆点用填充动画反馈, 选项少(2~5 个)时平铺展示比下拉选择效率更高。

组件相似概念
滑块Slider

用轨道上可拖动的手柄在连续区间内取值,拖动时数值与已填充轨道实时跟随。 适合调音量、亮度、价格区间等量级选择,比输入框更直观; 可带刻度标记、步进与双端区间形态。

组件相似概念
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件相似概念

可搭配的风格

参考来源

Markdown 版(给 Agent) · JSON