该技能(ux-feedback-patterns)用于在界面中实现用户反馈机制,向用户传达状态变化、成功、错误与进度。据资料,它覆盖视觉、听觉和触觉反馈模式,并给出时序与无障碍要点。
用途与主要能力:内联反馈(操作附近的即时提示);Toast 通知(非阻塞临时消息,以 Web Component 实现,含 role=alert 与自动关闭);确认对话框(用于破坏性或重要操作,基于 dialog 元素);进度指示(determinate 的 progress 元素与 indeterminate 的 spinner);成功反馈(成功色、图标、边框及 successBounce、glow 动画);错误反馈(错误色、aria-invalid、shake 动画、错误消息结构);加载状态(按钮 aria-busy、骨架屏 shimmer、页面加载遮罩);进度指示(线性、步骤、环形进度);实时区域(role=status、role=alert 与 Announcer 实现)。
无障碍与限制:资料给出无障碍清单——成功/错误需向屏幕阅读器播报、操作后聚焦相关元素、用 aria-busy 传达加载、用 ARIA 传达进度、动画需尊重 prefers-reduced-motion、颜色不能作为状态的唯一指示、错误消息需与输入关联。时序建议:微动画 100–200ms,状态切换 200–300ms,Toast 显示 3–5 秒,错误显示直至关闭,加载指示应立即出现。
相关技能:material-symbols-v3(状态图标名,如 check_circle、error、warning)、ux-iconography(图标+文字反馈模式)、ux-animation-motion(反馈效果的 Anime.js 动画)。具体安装方式、收费与平台支持等资料未提供。