用途
Product Card 是一个电商产品展示卡片模式，用于在列表中清晰概括单个商品，使用户能够判断是进一步查看详情、与其他商品比较，还是立即加入购物车。它主要服务于分类页与搜索结果列表、推荐货架以及快速购买类商品陈列等场景。
主要能力
该模式提供了一套可复用的产品卡片结构，帮助团队以可靠方式呈现商品摘要。其核心关注点包括：在不隐藏状态、规则或恢复路径的前提下减少用户操作摩擦；将价格、政策、计数、身份等信任信号纳入卡片的主视觉层级，而非作为微小的次要文本；并覆盖键盘交互、屏幕阅读器支持与视觉可访问性等无障碍要求。
使用方式
实施流程建议如下：首先确认该模式与当前问题及约束条件匹配，再复制示例；从 references/pattern.md 中的结构与示例出发，选择最小可行的变体；在叠加视觉打磨之前，先应用无障碍、性能与交互防护措施；最后使用测试指南验证键盘、屏幕阅读器、响应式及失败场景下的行为。
无障碍防护方面，需验证产品卡片可仅用键盘完成操作，保持焦点顺序在模式打开、更新或显示额外 UI 时仍然合理，并保留在高倍缩放下仍可读的可见焦点状态。屏幕阅读器支持方面，优先使用语义元素，仅在语义不足时添加 ARIA；在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化；必要时用 aria-describedby 或结构化标题连接标签、提示与状态文本。视觉可访问性方面，不要仅依赖颜色传达严重程度、完成状态或选中状态。
适用场景
适用于分类与搜索结果列表、推荐货架、快速购买类商品陈列。当商品、买家与支付状态已经明确时，应使用更简单的购买路径；当用户只需要快速确认步骤时，避免强行套用完整模式；不应以牺牲价格与政策清晰度为代价来优化转化。
限制与常见错误
常见错误包括：将信任信息视为次要 UI，而计数、总额、身份与政策往往是用户行动前主要查看的内容，应将其设计进主层级；过度优化首次点击，激进提示可能增加点击却损害完成质量或长期信任，应衡量包含撤销、退款、举报与隐性不满在内的完整旅程；忽视滥用与欺诈路径，社交与商业界面一旦产生可见价值就可能被滥用，应将速率限制、授权检查、审核与审计追踪作为模式本身的一部分进行规划。
相关模式包括卡片网格、比较表与购物车。完整实施细节、示例与测试说明见 references/pattern.md。模式页面：https://uxpatterns.dev/patterns/e-commerce/product-card