Like Button 是一个点赞与反应按钮的 UX 模式,属于面向开发者的 UX 模式集合。它的核心目标是帮助团队在社交或内容场景中,提供一种可靠的方式来捕获快速、轻量的用户反应,同时让当前状态、计数以及撤销路径保持清晰可见。
用途 该模式适用于社交或内容反应、轻量级认可信号,以及类似收藏式的赞赏时刻。它最有用的时候,是团队需要社交或内容反应机制的场景。与相邻模式相比,它应当在降低操作摩擦的同时,不隐藏用户继续操作所需的状态、规则或恢复路径。
何时避免使用 资料明确指出,当社交或参与机制不能创造真实用户价值时应避免使用;在不理解信任影响的情况下,不要添加公开计数或可见性状态;在没有审核、滥用处理或撤销规划之前,不要上线该界面。
实现流程
- 在复制示例之前,先确认该模式与问题和约束条件相匹配。
- 从 references/pattern.md 中的结构与示例入手,然后选择最小可行的变体。
- 在叠加视觉打磨之前,先应用无障碍、性能和交互护栏。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏 键盘交互:验证点赞按钮可以仅用键盘完成操作;当模式打开、更新或显示额外 UI 时,保持焦点顺序合乎逻辑;保留在高倍缩放时仍然可读的可见焦点状态。 屏幕阅读器支持:优先使用语义元素,仅在语义不足时添加 ARIA;在正确的位置以正确的礼貌程度播报错误、加载或完成等状态变化;在有用时通过 aria-describedby 或结构化标题连接标签、提示和状态文本。 视觉无障碍:不要仅依靠颜色来传达严重程度、完成状态或选中状态。
常见错误
- 把信任当作次要 UI。问题在于计数、总数、身份和政策往往是用户行动前主要查看的内容。修复方式是将信任信号设计进主层级,而不是留作微小的次要文本。
- 过度优化首次点击。问题在于激进的提示可能增加点击量,却损害完成质量或长期信任。修复方式是衡量完整旅程,包括撤销、退款、举报和隐藏的不满。
- 忽视滥用与欺诈路径。问题在于社交和商业界面一旦产生可见价值,就会招致滥用。修复方式是将速率限制、授权检查、审核和审计追踪作为模式本身的一部分来规划。
相关模式 资料列出了以下相关模式链接: https://uxpatterns.dev/patterns/ai-intelligence/response-feedback https://uxpatterns.dev/patterns/forms/rating-input https://uxpatterns.dev/patterns/user-feedback/notification
更多细节 完整实现细节、示例和测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/social/like-button