SuperAPI AI 工具集

shopping-cart

前端与建站

查看项目

更新于 10-16 08:09

技能介绍

用途:购物车模式为顾客提供一个安全区域,在付款前查看、编辑并校验进行中的购买。最适用于需要结账前购物车复核的场景,例如编辑数量与规格、跨会话持久化购物车。

何时避免:当商品、买家与支付状态已明确时,应使用更简单的购买路径;用户只需快速确认步骤时,不要强行套用完整模式;不要以牺牲价格与政策清晰度为代价优化转化。

实施流程:先确认模式与问题及约束匹配,再复制示例;从 references/pattern.md 的解剖与示例入手,选择最小可行变体;在叠加视觉打磨前先应用无障碍、性能与交互护栏;使用测试指南验证键盘、屏幕阅读器、响应式与失败场景下的行为。

无障碍护栏:键盘方面,确保仅用键盘即可完成购物车操作,模式打开、更新或展开额外 UI 时保持焦点顺序合理,保留在高倍缩放下仍可读的可见焦点状态。屏幕阅读器方面,优先使用语义元素,仅在语义不足时添加 ARIA;在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化;必要时用 aria-describedby 或结构化标题连接标签、提示与状态文本。视觉方面,不要仅靠颜色传达严重程度、完成或选中状态。

常见错误:把信任当作次要 UI——计数、总计、身份与政策常是用户行动前主要查看的内容,应把信任信号设计进主层级而非留作微小次要文本;过度优化首次点击——激进提示可能增加点击却损害完成质量或长期信任,应衡量完整旅程,包括撤销、退款、举报与隐性不满;忽视滥用与欺诈路径——社交与商业界面一旦产生可见价值就会招致滥用,应把速率限制、授权检查、审核与审计追踪作为模式本身的一部分。

相关模式:结账、商品卡片、通知。完整实现细节、示例与测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/e-commerce/shopping-cart