HH SaaS电商系统移动端商城，买家选择商品规格的交互设计

文章目录

• • 未完整选择商品规格时
  • • 商品图如何显示
    • 库存如何显示
    • 价格如何显示
    • 选择规格提示文案如何显示
    • 原型图
  • 已选完整选择商品规格时
  • • 商品图如何显示
    • 库存如何显示
    • 价格如何显示
    • 原型图
  • SKU下架后如何显示
  • • 原型图
  • 购买数量如何交互

未完整选择商品规格时

商品图如何显示

显示SPU的主图，HH SaaS商城系统¹应该显示SPU的营销主图，此图来自于“使用中”的素材模板

库存如何显示

显示SPU的总库存，即隶属的全部SKU的销售库存总和

价格如何显示

显示SKU的最小价格和最大价格，如果全部SKU的价格一样，就显示一个价格

选择规格提示文案如何显示

未完整选择规格，就是提示：请选择规格，如果已完整选择规格，则将已选的规格显示出来

原型图

已选完整选择商品规格时

商品图如何显示

显示已选规格的商品图，此图来自于SKU的营销图

库存如何显示

显示已选规格（SKU）的销售库存

价格如何显示

显示已选规格的售价，这里是指商品的 现售价

原型图

SKU下架后如何显示

举例说明：
如果规格为红色/XXL的商品已下架，那么根据买家选择规格的顺序，前端要禁用相关的规格值，也就是说买家先选择“红色”，那么规格值“XXL”就不可选，界面通常呈现灰色的禁用视觉效果

原型图

购买数量如何交互

• 默认显示数量1，不论规格是否完整选择可以任意添加数量
• 购买数量为1时，“-”号被禁用
• 加入购物车，立即购买，发起拼团时需要判断购买数量是否超过“限购数”，若超过提示：非常抱歉，每人限购5件哦~

---

好获严选专属的SaaS电商系统 ↩︎

总结

以上是生活随笔为你收集整理的HH SaaS电商系统移动端商城，买家选择商品规格的交互设计的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。