评分Rate

你可能会说

想让用户给商品打个分,用星星就行。

评分控件是让用户在有顺序的等级中选择评价分值的表单控件商品评价常用五颗星表示满意程度,并应同时显示“4 分”等可读文字。星数、是否允许半分必须与实际评价规则一致。
半星 · 3.5 4.8只读展示

什么时候用

  • 订单、商品评价:交易后的标准动作
    蓝牙耳机4.0
  • 满意度调查:用一次点击收集反馈
    请为本次服务评分
  • 半星表达更细的程度
    3.5 分
  • 只读展示综合评分和评分人数
    评分样本量与统计口径

什么时候不用

  • 只需收集赞 / 不赞:使用点赞或点踩按钮
    ♥ 赞同只有正负反馈时,使用点赞或点踩更合适
  • 0~10 分推荐度(NPS):使用与量表一致的数字选择
    推荐意愿评分
    选项较多且需要逐一计数时,应使用更适合的控件
  • 需要了解低分原因:配合 多行文本框 Textarea 收集文字反馈
    请说明评分原因……
  • 购买数量等精确数值:使用 数字输入框 Number Input
    购买数量
    数量应使用数字输入控件
组成结构 · Anatomy
4 分 · 满意
通常五颗,数量和图标都可换
实心已选、空心未选,支持半颗
分值和对应感受,如“4 分 · 满意”
常见变体 · Variants
默认Default
五星制打分,表达几分满意
半星Half Star
3.5
想要更细的分数粒度时
只读展示Readonly
4.8
展示综合评分,不让用户改
自定义图标Custom Icon
想要品牌感,用爱心等图形替换星星
典型使用场景
电商订单评价
无线蓝牙耳机
交易成功 · 7 月 18 日
商品评价 满意
课程内容评分
前端入门 · HTML 第一课
4.8
评分样本量与统计口径
“步骤和前置知识说明得很清楚” —— 评价示例
客服满意度
本次服务满意吗?
客服小蜜 · 会话已结束
非常满意
餐厅打卡评分
山丘咖啡 · 南山店 3.5
点评摘要与样本量应标注来源