优惠券选择怎么设计？门槛、互斥与金额变化

优惠券选择面板应把可用条件、预计优惠和不可用原因放在同一处，让用户先看懂再选择。区分商品金额与参与优惠的金额，明确券能否叠加会员折扣；商品、配送或数量改变后重新计算，并说明原先的券为什么不再生效。推荐优惠不等于替用户完成选择，面板也应保留“不使用优惠”的选项。

下面按一家杯具店的结算场景画选券过程。界面可以在Pixso协同设计中与产品、研发一起对照规则和金额，提前确认同一张券在列表、详情和结算摘要里是否说的是同一件事。

先用一组能算清楚的数字确定规则

演示订单有保温杯120元、杯套40元、清洁刷30元，商品合计190元，运费10元，未优惠总计200元。商家为本例定义了三种互斥方案：杯具券满150减20，仅保温杯和杯套参与；全店券满180减15，三件商品都参与；会员价对保温杯和杯套打九折。两张券不能叠加，券也不与会员折扣叠加，运费不计门槛且不参加优惠。

这组数字表明，券面额、门槛和实际可省金额要分开呈现。杯具券写“满150减20”，但不能仅因为全订单190元就判定可用；成立的原因是参与商品有160元。把清洁刷30元计进杯具门槛，会导致用户删掉杯套后还以为能用券。

适用品类、门槛和叠加条件共同构成本例的优惠约定。像Stripe的优惠券与促销码说明也区分折扣定义和兑换限制。设计时应先拿到本项目的适用品类、门槛及叠加约定，再写金额，不从其他平台界面反推自己的业务规则。

券卡片按决定顺序安排信息

用户最先需要知道的是能不能用于这笔订单、预计少付多少。可用券卡片可以依次显示券名与优惠额、适用范围、门槛、有效期和选择状态。过长条款放进可展开说明，但“仅杯具专区”不能隐藏到详情深处，否则列表上的20元会形成误导。

已选状态除了勾选标记，还应和面板底部的“已选杯具券，预计省20元”对应。推荐标记只说明当前规则下的比较结果，可写“本单预计省20元”；不要把“最优”扩展成包含未领券、未来活动或未确认支付方式的全局保证。

无优惠选项应有明确名称。用户也许打算保留某张快用到别的订单上的券，或者需要比较未优惠的价格；关闭面板不应被当作取消已选优惠，点“不使用优惠”才取消本例的券与会员折扣。若面板使用“确认使用”按钮，临时选择和已提交选择要有区别。

不可用券显示具体原因，而不是只变灰

同一张券不可用可能来自多个条件。优先展示最能解释当前结果的原因，例如“参与商品还差30元”，同时允许查看其他条件。用户点开条款后才发现券已过期，会浪费一次无意义操作。

灰色只是视觉辅助，不能替代文字。不可用券仍应允许用户阅读原因；若整张卡片都禁用且无法聚焦，键盘用户可能无法获得这段信息。把不可用原因作为可读内容，具体查看入口按正常交互实现。

删掉杯套以后，原选择怎样失效

顾客选好杯具券后回购物车删除40元杯套。此时商品剩150元，但杯具专区只有120元，原券不再满足150元门槛；全店券也未达180元。按本例规则，会员方案应付108＋30＋10＝148元，无优惠则是160元。

回到结算页时，保留“此前选择杯具券”的上下文，并说明“杯具商品金额变为120元，还差30元，原券已取消”。如果产品提供改用会员价，应让用户看到优惠方案和应付金额的变化。不能继续显示“已省20元”，等付款时再突然多收。

重新计算期间，页面可保留旧金额作为待更新参考，但应明确标记正在计算，并避免用过期金额完成支付。结果返回时，商品摘要、优惠行与应付金额应一同更新。若顾客又改了数量或配送方式，较早请求的结果不能覆盖最新订单条件；仍在计算的版本也不能被当作可支付金额。若请求失败，提供重试，不把优惠默认为零后继续提交，除非用户已经知晓并主动接受当前无优惠方案。

继续把配送改为免运费的门店自提，会员方案应付108＋30＝138元，无优惠则为150元。运费本就不计入门槛，因此配送变化只减少本例的应付金额，不会让杯具券或全店券重新可用。界面同时更新配送与金额，避免用户以为免运费也是优惠券带来的折扣。

把互斥和失效画成两段不同的操作

在Pixso画布里先做一张200元原始结算页，再放一张选券面板和一张180元确认结果。面板同时展示杯具券、全店券、会员价与不使用优惠，底部用同一组商品明细说明计算。第二排只演示删掉杯套后的变化：原券失效说明、重新选择会员价、148元新结果。

第一段评审让用户从184元会员价切换到180元杯具券，观察他是否理解这两种优惠互斥。第二段让用户删除杯套后返回，检查是否看懂30元差额及148元的来源。两段都有数字变化，但第一段是主动选择，第二段是订单改变后的失效反馈，提示不能完全相同。

可以保留购物车中的商品与结算处理作为前置流程，选券面板只解决当前这笔订单的优惠决策。交付时把参与商品、门槛差额、互斥关系和金额来源放在对应状态旁，研发便能逐项核对：选择变了、订单变了、配送变了，各自应触发哪一处反馈。