更新时间：2026年10月09日

购物车页面要把“哪些商品会结算、为什么是这个金额、哪些问题必须先处理”同时说清。按店铺或履约范围分组，只对勾选且可售的商品计算合计；规格、数量、优惠和库存变化要在相关位置反馈，再进入结算。可用Pixso 的页面布局与交互设计能力把这些状态连成一条购物路径，而不是只画一张满购物车。

先写清这辆购物车的计算规则

本例采用单店练习场景：旅行杯单价 ¥80、数量 2；替换杯盖单价 ¥20、数量 1。两项都参与“勾选商品金额满 ¥150 减 ¥20”，优惠不叠加；运费在确认收货地址后计算。因此购物车显示的是商品合计，不冒充最终实付款。

这些规则先确定，设计师才能解释为什么改一个数量会同时改变合计和优惠提示。真实产品如果采用跨店优惠、会员价或不同运费规则，需要分别说明适用范围，不能沿用一条含糊的“已优惠”文案。

勾选状态与结算对象保持一一对应

商品勾选控制本次结算，不等于收藏或删除。店铺层的选择只影响该店可售商品；页面全选只覆盖当前购物车中可结算的商品，不把失效商品一起勾上。部分选中时显示中间状态，避免看起来像全部没选。

底部明确写“结算（3 件）”或“结算（2 种商品）”，选择一种口径并贯穿使用。本例全选时是 3 件、2 种商品；如果按钮只写“结算（2）”，读者就无法判断数字指什么。

离开页面再回来时是否保留勾选，应由产品规则确定，并处理库存与价格变化。不能仅恢复上一次复选框外观，却继续使用已失效的金额。若本次需要重新勾选，说明原因并保留原有商品，不把结算选择丢失误呈现成购物车清空。

商品图、名称与规格负责确认身份；数量控件与单价负责修改；失效原因和价格变化提示靠近对应商品。颜色、尺寸等规格需要可读文字，不能只写“默认款”。尤其是同款不同规格同时存在时，图片相似不足以识别差异。

修改数量后，行小计、店铺优惠、底部合计应同步更新。等待服务端确认时可显示处理中，并避免用户连续点击生成多个互相覆盖的请求；失败则恢复有依据的数量与金额，不留下数量为 2、金额却按 1 件计算的混合状态。

修改规格可以打开清楚的选择面板，保留当前商品上下文。新规格与已有一行完全相同时，是合并数量还是保留两行，要写明规则并反馈结果；相关组合状态可参考SKU 选择器的规格与库存联动。

两项全选时，可写“已满 ¥150，减 ¥20”；旅行杯改为 1 件时，商品金额降到 ¥100，提示变为“还差 ¥50 可减 ¥20”。不要只用红色显示“优惠失效”，却不说明是数量修改导致门槛变化。

“还差 ¥50”不是“再花 ¥50 就省 ¥20”的全部结论。购物车的主要任务是完成已有购买意图，凑单入口应从属于金额解释，不要挤走结算按钮或自动添加商品。没有勾选的商品也不应参与门槛，否则读者看到的优惠到结算时会再次消失。

优惠明细至少能看出适用商品、门槛和实际扣减。若运费尚未确定，紧邻合计注明“运费在结算页计算”，而不是在用户付款前突然增加费用。涉及地区、活动时间等限制时，在相应优惠入口准确说明。

失效分区与正常商品之间有明确边界，但不必用大面积灰色降低所有文字的可读性。“清理失效商品”需要说明范围，不能连同只是未勾选的商品一起删除。删除后提供短暂撤销时，还要处理撤销期间价格或库存已经变化的情况。

点击结算后，由服务端再次确认选中商品、价格、库存和优惠。若杯盖缺货，把问题定位到这一行，保留旅行杯的选择；可以让用户返回调整，也可以明确提供“仅结算可售商品”，但不能不经说明就删除杯盖并继续付款。

金额变化应给出变化前后的依据。例如旅行杯数量改动导致优惠不再适用，展示新的商品金额与优惠结果，让用户确认。处理失败时保留购物车内容与可恢复选择；结果未知时先查询订单或结算状态，避免重复提交。

在 Pixso 中至少演练“全选—减少旅行杯数量—优惠变化—杯盖缺货—仅结算可售商品”这一条连续路径。每一步都问：现在买什么、买几件、合计多少？如果必须靠设计师口头补充，说明页面还没有把规则说清。