未完整选择商品规格时

商品图如何显示

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

库存如何显示

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

价格如何显示

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

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

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

原型图

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

已选完整选择商品规格时

商品图如何显示

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

库存如何显示

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

价格如何显示

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

原型图

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

SKU下架后如何显示

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

原型图

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

购买数量如何交互

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

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

相关文章: