Star rating 星级评分

/STAR RAY-ting/ · noun · 输入类模式 · #126

一排五颗星:要么显示一个分数,比如“4.5 星,1,280 条评价”,要么让你点一颗星来打分。用来显示时,它汇总所有人的评分,星星按半颗填充;用来输入时,它其实是一组五个单选按钮,点第四颗星就是五分里打四分。

Star rating(星级评分) UI 模式示例:CatchUI 图鉴标本

别名:星星评分。

你可能会这样叫它

  • “点星星打分”
  • “商品下面的评价星星”
  • “五分制评分”
  • “4.5 星和评价人数”

……它的名字是 星级评分(Star rating)。

常见问题

星级评分怎么算?

界面上的星级一般是所有评分的平均值:把每个人打的星数加起来,除以评分人数,再四舍五入到一位小数或半颗星,比如 4.46 显示成 4.5 星。有的平台会加权,比如亚马逊说它更看重近期和已购买用户的评分。旁边最好写上评分人数:1,000 人打出的 4.6 星比 3 个人打出的 5 星更可信。

代码里叫什么

Web (HTML)<fieldset> <legend> <input type="radio">
React (MUI)Rating
Ant DesignRate
Android (Views)RatingBar
SwiftUI / UIKitstar star.fill star.leadinghalf.filled 没有评分控件:用这几个 SF Symbols 做一排按钮(半星图标需要 iOS 15)
Jetpack Compose 没有评分组件:用一排带 selectable 语义的星星图标

复制给 AI 编程工具

给这个评价表单加上星级评分:五颗星用一组单选按钮实现,放在 fieldset 里,legend 写“你的评分”,每颗星标为“1 星”到“5 星”,让方向键和读屏软件都能用。悬停和聚焦时预览填充,点击或轻点确定;选好后用文字再说一遍(“5 分里打 4 分”)。显示平均分时,星星按半颗填充,旁边写出分数和评价数,比如 4.5(1,280),不要只放星星。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)