电商浏览购物车结账漏斗

大理论

零售电商是一个由多个决策面组成的漏斗：入口让用户形成意图，搜索/分类/筛选帮助缩小选择，商品列表决定是否继续查看，PDP 证明商品与价格，购物车让用户最终审阅成本和数量，checkout 负责低摩擦收集身份、地址、履约和支付信息。任何一段断裂，用户都会在还没付款前流失。

小知识点

1. 商品发现不是导航装饰，而是交易入口。分类、站内搜索、筛选、排序、结果数量、已应用筛选 chips、清空和无结果恢复必须共同帮助用户控制列表。

1. 商品列表卡不是品牌海报。至少要展示真实缩略图、商品名、价格、变体线索、评价或信任信号、库存/可用性、配送或自提承诺和详情/加购路径。

1. PDP 决策块要把媒体、标题、价格、变体、库存、配送/退换、评价和主购买按钮放在同一个判断区域；变体限制、缺货和价格变化必须在提交前可见。

1. 加购反馈必须确认具体商品、变体、数量、价格、购物车数量和下一步路径，同时保留搜索、筛选、排序和滚动上下文。

1. 购物车是最终审阅区域，不是简单跳板。每个 line item 需要图片、商品详情链接、选项、单价、数量控件、小计、库存/价格变化、移除或稍后保存和恢复文案。

1. 成本透明要尽早出现：优惠码、税费、配送估算、免费配送门槛、退换政策和履约选择不能全部推迟到付款之后。

1. Checkout 的目标是减少输入和修复成本：访客结账清楚，字段少，保留已输入内容，支持浏览器 autofill、地址 lookup/autocomplete、地址 validator、必填/可选标签、本地化键盘与输入格式。

1. 错误是交易状态。缺货、价格变化、优惠码失败、地址建议、支付授权失败、配送不可用和会话过期都需要保留上下文并给出下一步，而不是只显示通用错误。

1. 移动端要把筛选放进可触达 sheet/drawer，并保留结果数量与已应用筛选；sticky CTA 和订单摘要必须避开 safe-area、键盘和字段错误。

1. 前端状态要覆盖 entry、product-list、product-detail、add-to-cart、cart、checkout、confirmation；URL 保存 query/filter/sort/pagination，cart line 与 checkout step 独立建模。

设计判断

评估一个电商流程时，连续问七个问题：我能找到合适商品吗？我能理解列表差异吗？我知道自己选了哪个变体吗？我能在购物车里检查总价和数量吗？我能不注册也继续吗？地址或支付出错时能修复吗？付款前我知道交付、退换和总成本吗？这些问题中任一项不清楚，漏斗就不完整。

实现建议

建立 CommerceFunnelModel：stage、query、filters、sort、resultCount、products、cartLines、checkout。ProductCardModel 包含 image alt、price、variantSummary、rating、availability 和 fulfillmentPromise；CartLine 包含 product link、selectedOptions、unitPrice、quantity、subtotal、availabilityMessage 和 save-for-later 能力；CheckoutState 包含 guest/account/express mode、step、orderSummaryVisible、addressLookupAvailable、addressValidationStatus、paymentStatus 和 recoverableErrors。筛选、排序和分页进入 URL query；表单使用真实 label/fieldset/error；购物车变化和支付失败用 scoped live region；长 checkout 用错误摘要加字段锚点；金额、税费、配送和货币本地化。

可访问性

筛选、数量控制、变体选择、地址建议、支付错误和订单摘要都必须可键盘操作。库存、折扣、错误和成功不能只靠颜色。数量变更、优惠码结果、地址建议和支付失败用 polite live region 或相关字段错误表达；付款失败后焦点应回到可修复区域。移动 sticky bar 不得遮挡聚焦字段或错误说明。

反例/风险

把商品详情页当成完整电商；列表卡只有漂亮图片没有价格/库存/变体；筛选抽屉关闭后用户看不到已应用筛选；mini cart 直接推进 checkout 但用户无法审阅数量；强制注册先于访客结账；地址错误清空表单；支付失败丢失输入；shipping/tax 直到最后一刻才出现；优惠码失败比主任务更抢眼；移动端底部按钮遮住错误。

案例分析

Baymard 的 cart/checkout 研究长期跟踪结账可用性，并指出大量站点在购物车和结账上仍有明显改进空间；其 2025 结账状态文章强调访客结账、字段选择、履约选择、地址与验证错误等问题会直接影响完成率。NN/g 把 shopping cart 定义为用户最终检查和决策的区域，建议提供完整购物车页、清楚商品细节和返回商品详情的链接；其移动 checkout 文章强调移动表单输入耗时且易错，应该减少字段并利用 autofill。Shopify Polaris 的 Resource List 和 Filters 文档则把列表项、筛选、已应用筛选、键盘可达和长列表分页转成可实现组件模式。组合起来看，优秀电商不是某个绚丽页面，而是从商品发现到付款恢复的连续状态机。

来源链接

Baymard Cart & Checkout Research: https://baymard.com/research/checkout-usability

Baymard Checkout UX Best Practices 2025: https://baymard.com/blog/current-state-of-checkout-ux

Baymard Product List UX Best Practices: https://baymard.com/blog/current-state-product-list-and-filtering

Baymard Product Lists & Filtering Research: https://baymard.com/research/ecommerce-product-lists

Baymard Search UX Query Types: https://baymard.com/blog/ecommerce-search-query-types

Baymard Automatic Address Lookup: https://baymard.com/blog/automatic-address-lookup

Baymard Address Validator: https://baymard.com/blog/address-validator

NN/g Shopping Cart: https://www.nngroup.com/articles/shopping-cart/

NN/g Mobile Checkout Experience: https://www.nngroup.com/articles/mobile-checkout-ux/

Shopify Polaris Resource List: https://polaris-react.shopify.com/components/lists/resource-list

Shopify Polaris Filters: https://polaris-react.shopify.com/components/selection-and-input/filters