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

文章目录

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

未完整选择商品规格时

商品图如何显示

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

库存如何显示

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

价格如何显示

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

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

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

原型图

HH SaaS电商系统移动端商城,买家选择商品规格的交互设计_第1张图片

已选完整选择商品规格时

商品图如何显示

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

库存如何显示

显示已选规格(SKU)的销售库存

价格如何显示

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

原型图

HH SaaS电商系统移动端商城,买家选择商品规格的交互设计_第2张图片

SKU下架后如何显示

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

原型图

HH SaaS电商系统移动端商城,买家选择商品规格的交互设计_第3张图片

购买数量如何交互

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

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

你可能感兴趣的:(HH SaaS电商系统移动端商城,买家选择商品规格的交互设计)