Rating Stars:评分星级
Rating Stars 用一排星形图标表达一个有量表的评分。它有两种用法:只读展示(告诉访客别人给了多少分)与可选择输入(让访客自己打分),两者的语义、交互与风险完全不同。它与 Progress Bar 的区别是:星级表达一个分数,而不是任务完成度。
适合与不适合
只读展示适合商品卡、商品标题旁的评分摘要与评价列表的单条评分。输入型适合“写评价”表单中的整体评分。不适合没有评价系统支撑的商品、来源不明的分数,以及把星级当作装饰性信任符号。
与相邻模式的区别
| 对比对象 | 判据 |
|---|---|
| 只读星级与输入星级 | 只读是图像加文字,读者不能操作;输入是一组表单控件,有焦点、选中态、校验和提交 |
| 数字评分(“4.5 / 5”) | 数字精确,星级直观;星级不能替代数字,二者同时出现时数值一致 |
| Progress Bar 的评分分布条 | 分布条表示各档占比,星级只表示一个平均分或一条评价的分数,不混用 |
| Badge | Badge 是短标签;星级带量表、评分和评价数,缺任一项就不完整 |
优点与缺点
| 优点 | 缺点 |
|---|---|
| 小空间内快速传达口碑 | 图形取整会掩盖真实分数 |
| 熟悉度高,输入成本低 | 只靠图标对读屏与颜色识别不友好 |
| 可与评价数、评价列表联动 | 评价很少时容易被误读为有统计意义 |
| 输入型可以用原生 radio 实现 | 自绘输入控件若不做语义,键盘与读屏不可用 |
内容与交互要求
展示必须同时给出:分数、量表上限、评价数。例如“4.5 / 5,共 128 条评价”(虚构示例)。分数与评价数来自评价系统同一时点,是运行时数据,见评价展示;聚合口径与取整规则见数据证明。第三方平台的星级须与自有评价分开,不合并、不平均,见第三方评价。
半星与取整:图形可以按半星绘制,文字必须给出真实值,不把 4.4 写成 4.5。本站对 Dawn v15.3.0 的解读指出其星级用 CSS 计算填充,小数部分 0.3 至 0.7 记半星、大于 0.7 记一星(Dawn 邮件订阅、商品徽章与评分星);按此规则,4.4 会被画成 4.5 颗星、4.75 会画成满 5 颗。因此图形只是近似,精确值以文字为准,取整方向不得偏向有利。
输入:用原生 radio 组,每个选项有文字(“5 分,共 5 分”),不预选任何分值,避免未评分被提交。半星输入取决于评价系统的量表,需要时改为更细的选项或数字输入。提交失败时在表单中说明缺少评分,不只把星标标红。
来源:星级不承载没有来源的分数。没有评价数据时不画星星,也不用其他商品、渠道或平台的分数代替。
响应式与无障碍
星图是非文本内容,需有文字等价(WCAG 2.2 SC 1.1.1 Non-text Content)。MDN 的 role="img" 页给出星级示例:把整组星标为一个图像并用 aria-label 提供名称(如“Rating: 4 out of 5 stars”),其内部元素被视为装饰。若旁边已有可见文字“4.5 / 5,共 128 条评价”,星图可对辅助技术隐藏,避免重复播报。本站对 Dawn 的分析显示其容器带 role="img" 与 aria-label,而“4.5 / 5”文字默认不可见;对 Horizon 的分析显示其评分块只有 aria-label 而无 role,且标签文案把满分固定为 5、未随 scale_max 变化(Horizon 徽章、评分与订阅),读屏是否读出未核验。
满星与空星除颜色外须有形状或填充差异(SC 1.4.1 Use of Color),并对必要图形信息达到 3:1 的对比(SC 1.4.11 Non-text Contrast)。
输入型使用原生 <input type="radio">,同一组共享 name,外层用 <fieldset> 加 <legend> 给出组名(“你的评分”),这样无需自建语义。APG Radio Group 页:Tab 进入组并聚焦已选项(无选中时聚焦第一项),方向键移动焦点并同时选中,Space 选中当前项,到头会循环。radio 是 radiogroup 的原生形态;若自绘,组与每个选项都需要名称,并补全 aria-checked。相关分组语义见 SC 1.3.1 Info and Relationships。悬停预览只是增强,不作为唯一反馈;触屏与键盘都要能得到同样结果。
状态与退化
零评价:不显示星星与分数,写“暂无评价”,并保留写评价入口(有资格时)。少量评价:显示真实分数与数量(“4.0 / 5,共 2 条评价”),不写“广受好评”,也不画分布图。多评价:可加分布与筛选。加载:占位与最终尺寸一致;加载失败:隐藏星级,不沿用旧值。跨市场:分数与评价集合随市场可能不同,取同一集合。无 JavaScript:只读星级是纯文字加图形,输入型是普通表单,提交后刷新。结构化数据只影响搜索结果展示资格,口径与限制见评价展示。
常承载的内容与模块
评价展示的评分汇总与单条评价;顾客评价的列表;商品卡与商品标题旁的评分摘要;写评价表单。
发布前检查
- 分数、量表、评价数是否来自同一时点的运行时数据?
- 文字是否给出真实值,图形取整是否没有偏向有利?
- 星图是否有文字等价,是否不只靠颜色区分?
- 输入型是否是原生 radio 组,有组名、无预选,键盘可完成?
- 零评价与少量评价是否如实退化?
待继续完善
- 各评价应用的半星取整与聚合口径未核对。
- 读屏对
role="img"星组与 radio 星级的实际播报未实测。