用途:rating-input 是表单类交互模式,解决“用星级让用户表达分级意见”的问题,重点是在降低操作摩擦的同时不隐藏状态、规则和恢复路径,并让辅助技术能获知当前评分值。适用产品与内容评价、服务反馈、快速满意度调查。
不宜使用的场景:取值只有二元、范围极小或完全受限时,应改用更简单的原生控件;原生浏览器输入已能很好完成主要任务时,不要自定义行为;产品不需要额外格式或校验时不要添加。
实施流程:先确认该模式与问题和约束匹配,再复制示例;从 references/pattern.md 中的结构与示例出发,选择最小可行变体;先落实无障碍、性能和交互护栏,再叠加视觉修饰;按测试指引验证键盘、屏幕阅读器、响应式和失败场景。
无障碍要点:键盘方面,确保可仅用键盘完成评分,焦点顺序在有 UI 打开、更新或展开时保持合理,并保留高缩放时仍可读的可见焦点态。屏幕阅读器方面,优先使用语义元素,语义不足时再补 ARIA;在正确位置以恰当礼貌级别播报错误、加载、完成等状态变化;必要时用 aria-describedby 或结构标题关联标签、提示和状态文本。视觉方面,不要只靠颜色传达严重程度、完成或选中状态。
常见错误:在输入未完成时立即校验会显得惩罚性和嘈杂,应等信息足够后在失焦、暂停或提交时按规则风险程度校验;标签、提示与错误信息在视觉上分离会让人无法对应,应紧密分组并用 aria-describedby 连接;只做桌面端样式会掩盖移动键盘、自动填充和粘贴流程的差异,完成前应测试自动填充、粘贴、缩放和屏幕键盘。
相关模式可参考无线电组、滑块和点赞按钮。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/forms/rating-input。