评分与评论 UI 系统
目的
评分与评论 UI 系统提供了一种方法，用于设计用户生成反馈的视觉结构框架。它确保定量数据（星级评分）和定性数据（文字评论）被组织成可扫描、可信赖且易于访问的界面。此系统帮助用户通过展示最相关的反馈来做出明智决策，同时保持与更广泛网站设计的视觉一致性。
使用场景
- 电商产品页面： 展示产品满意度和详细的客户体验。
- 服务/SaaS 市场： 对提供商、工具或应用程序进行评级。
- 内容平台： 允许用户对文章、课程或媒体进行评分。
- 反馈收集表单： 设计评分系统的输入端。
- 评论摘要： 创建“一目了然”的评分分布（例如，5 星级柱状图）。
何时不使用
- 内部质量审核： 反馈是私密的，仅用于内部处理，无需公开 UI。
- 二元反馈： 如果目标是简单的“有帮助/无帮助”或“赞/踩”，请使用
interactive-state-system中更简单的交互模式。 - 低数量内容： 如果一个项目通常只有 0–2 条评论，复杂的分布摘要可能会显得“空旷”或令人沮丧。
- 纯定量数据： 对于性能指标或系统健康（例如“99.9% 正常运行时间”），使用简单的
badge-and-tag-system或数据可视化。
输入
- 反馈模式： 要捕获/显示的数据（评分 1-5、标题、正文、日期、用户 ID、验证状态、照片）。
- 聚合元数据： 总评论数和平均分。
- 分布数据： 每个星级（5、4、3、2、1）的评论数量。
- 交互需求： 排序（最新、最高评分）、筛选（仅已验证、有照片）和“有帮助”投票。
输出
- 评分组件规范： “星行”的视觉设计（包括空、半星和满星状态）。
- 评论摘要结构： 聚合评分和分布柱状图的布局。
- 单个评论蓝图： 单条评论条目的结构布局（用户、评分、内容、操作）。
- 输入交互规范： 评分选择和评论提交表单的设计。
工作流程
1. 设计聚合摘要（快照）
在显示单个评论之前，提供一个思维捷径：
- 平均分： 大号、突出的数字（例如“4.8”）。
- 星级可视化： 一行 5 颗星反映平均分。
- 总数量： “基于 1,240 条评论”。
- 分布柱状图： 一个垂直或水平列表，显示 5、4、3、2、1 星评论的百分比。这些理想情况下应该是可交互的（点击一个柱状图会筛选列表）。
2. 建立单个评论结构
对评论卡片应用 visual-hierarchy-system：
- 头部： 用户名（可选匿名）和“已验证购买”徽章。
- 评分和日期： 星级评分和发布时间。
- 标题和正文： 一个粗体标题用于核心情感，后跟描述性文本。
- 媒体（可选）： 用户上传照片的缩略图。
- 底部/操作： “这有帮助吗？（是/否）”和“举报”按钮。
3. 选择交互与发现模式
使用户能够找到最相关的反馈：
- 排序： 默认为“最相关”（综合新近度和有帮助程度）。允许切换为“最新”或“最高/最低评分”。
- 筛选： 提供快速切换，用于“有图片”、“仅已验证”或特定的星级数量。
4. 设计反馈输入（表单）
确保收集过程无摩擦：
- 初始触发： 使用大号、交互式的星星，悬停时改变状态。使用
:has()选择器（例如label:has(~ input:checked)）样式化的星级输入单选组，无需额外 JavaScript 即可实现悬停/选中填充状态。 - 渐进式披露： 仅在选择星级评分后显示文本输入区域。
- 上下文指导： 使用占位符如“您喜欢或不喜欢什么？”来鼓励有用的反馈。
5. 规划内容变化
- 空状态： 设计“尚无评论——成为第一个评论”的状态。
- 长评论： 对极长的文字反馈实现“阅读更多”截断。
- 响应式堆叠： 在移动设备上，将分布摘要移入可折叠区域或堆叠在评论列表上方。
决策规则
- 星级的“眯眼”测试： 即使尺寸很小，星星也必须可区分。使用高对比度颜色（例如琥珀色/金色）与背景对比。
- 验证优先级： “已验证购买”徽章应在视觉上独特（通常是绿色或带有勾选图标），以立即建立信任。
- 平均精度： 将数字平均值四舍五入到一位小数（例如 4.7），但确保星行正确表示半星。
- 有帮助逻辑： 使用“有帮助”投票来展示最佳评论，但确保 UI 不会因过多的次要操作而变得杂乱。
- 图片宽高比： 对用户上传的评论图片使用方形（1:1）缩略图，以保持评论列表整洁。
约束条件
- 可访问性： 星级评分必须使用
aria-label（例如“4 out of 5 stars”）。交互式星级输入必须可通过键盘访问，并使用role="radiogroup"或类似方式，每颗星至少为 24x24px（WCAG 2.2, 2.5.8）—— 由于小的星星目标极易误触，首选 44x44px。 - 对比度： 空星（背景）必须与页面背景有 3:1 的对比度；填充星必须与背景有 4.5:1 的对比度或具有强边框。
- 响应式： 评论列表必须是流动的。避免在移动设备上使用多列评论卡片；将所有元数据垂直堆叠。
常见失败模式
- “二元星级”错误： 使用仅“开”或“关”的星星而没有半星状态，这会错误表示诸如 4.3 这样的平均值。
- 隐藏分布： 显示平均分但不显示细分，使用户无法看到负面与正面评论的数量。
- 缺乏验证： 未能区分验证购买者和普通用户，降低了整个系统的信任度。
- “评论墙”： 不提供排序或筛选，迫使用户滚动浏览数百条无关的条目。
- 不可访问的输入： 使用仅图标的星级评分输入，键盘用户无法访问或选择。
验证标准
- 平均评分和分布摘要存在且可扫描。
- 单个评论具有清晰的层次结构（用户 -> 评分 -> 内容）。
- “已验证购买”状态在视觉上已标示。
- 对于高数量场景，存在排序和筛选控件。
- 可访问性：星级评分具有描述性的 ARIA 标签。
- 交互式评分输入可通过键盘导航并具有焦点状态。
- 布局是响应式的，在较小屏幕上逻辑地堆叠元素。