更新时间：2026年10月09日

商品规格选择器要以“可购买的规格组合”为准：先区分未选、已选、不兼容与缺货，再联动价格、库存和购买数量。不要把所有不可用选项都置灰，也不要悄悄替换用户的选择。设计时可在Pixso 中组织规格与反馈状态，把颜色、尺寸、价格和按钮对应到同一份组合表。

先有组合表，再画规格按钮

以下练习商品是一款通勤包，规格为颜色和适配尺寸。案例规则规定：不接受超卖，不做预售；价格按具体 SKU 计算；单次加购数量不超过可售库存。这里的库存是本练习的状态数据，不代表真实商店库存。

“墨色、15 英寸”是存在但缺货的 SKU，与“产品从未提供这个组合”不同。若某商品根本不提供某组合，可标为“不提供该组合”；缺货则说明当前无货，并按真实业务能力决定是否有到货提醒。不能为了让界面完整而设计实际无法兑现的提醒服务。

未选完时，让用户知道还差什么

初始状态不强行替用户选好颜色和尺寸。价格可以显示“¥229 起”，并明确未选完整规格；按钮提示“请选择颜色和尺寸”。只选沙色后，提示变为“请选择尺寸”；只有得到完整且可售的组合，才把主操作变为“加入购物车”。

选择顺序应双向成立：先选尺寸，也能判断可搭配颜色。已选 15 英寸时，沙色可售，墨色显示“缺货”；已选墨色时，13 英寸可售，15 英寸显示“缺货”。不要只实现从颜色到尺寸的联动，另一种操作顺序却留下可点击的错误组合。

缺货选项可以保留可见，帮助用户了解规格范围。它与已选项的区别不能只靠浅灰色；通过文字、边框和状态说明表达。颜色选项除了色块，也写“沙色”“墨色”，避免用户只凭屏幕色差猜测商品。

假设用户已选“沙色、15 英寸”，数量为 2，随后点击墨色。若界面直接改成“墨色、13 英寸”，用户可能买错尺寸。更合适的处理是保留 15 英寸的选择，明确显示“墨色 15 英寸暂时缺货”，同时禁用加购并给出“改选 13 英寸”或“返回沙色”的可见选择。

若业务要求不能选中缺货组合，也可以在点击前阻止切换，但要说明原因并保留原选择；这与自动替换是不同策略。一款产品应选择一致规则，不能颜色切换自动重置尺寸、尺寸切换却保留颜色。

选项变化时，同步更新 SKU 图片、价格、库存提示、数量上限和主按钮。图片只是辅助确认，不能替代“已选：沙色 / 15 英寸”的文字摘要；截图、订单和售后都需要准确的规格名称。

选择“沙色、15 英寸”后，单价显示 ¥249。数量为 2 时，商品小计为 ¥498；本例不包含优惠与运费，必须把“小计”与最终结算金额区分开。加号到数量 3 后不可继续增加，并说明库存上限，不要仍允许点到 99 再在提交时统一报错。

如果用户原先选“沙色、13 英寸”数量 5，再改选库存只有 3 的 15 英寸，应提示“当前规格仅可购买 3 件”。可以把数量调整为 3 并让变化醒目，也可以保留 5 供用户修正；无论采用哪种，都不能在用户未察觉时按不同数量下单。设计说明里写清这项业务约定。

数量输入还需要处理空值、非整数和超过上限。不要把输入中的暂时空值立即显示为错误，导致用户无法从 2 改成 1；在失焦或提交时按约定验证，并把错误放在数量附近。

选择期间库存可能变化。提交时由服务端重新校验具体 SKU、可售库存与价格，界面等待结果后再确认加购成功；仅靠之前展示的库存不能保证交易结果。

加购后的选择、失效与结算关系，继续看购物车页面的勾选与金额设计。规格选择器只负责决定“买哪一个”，购物车还要回答“这次结算哪些”。

在同一 Pixso 文件中保留组合表和状态画板，逐条串起：什么也没选就加购；先尺寸后颜色；从可售切到缺货；从高库存切到低库存；提交时价格变化；结果未知后返回购物车。每条路线都要能判断用户最终选择了哪个 SKU、几件、什么价格。

如果这三个答案在某个状态里不明确，优先修正文字和状态联动，再考虑动效。一个易读的规格摘要和明确的变化提示，比复杂动画更能避免买错商品。