HH SaaS電商系統移動端商城,買家選擇商品規格的交互設計

未完整選擇商品規格時

商品圖如何顯示

顯示SPU的主圖,HH SaaS商城系統1應該顯示SPU的營銷主圖,此圖來自於“使用中”的素材模板

庫存如何顯示

顯示SPU的總庫存,即隸屬的全部SKU的銷售庫存總和

價格如何顯示

顯示SKU的最小价格和最大價格,如果全部SKU的價格一樣,就顯示一個價格

選擇規格提示文案如何顯示

未完整選擇規格,就是提示:請選擇規格,如果已完整選擇規格,則將已選的規格顯示出來

原型圖

在這裏插入圖片描述

已選完整選擇商品規格時

商品圖如何顯示

顯示已選規格的商品圖,此圖來自於SKU的營銷圖

庫存如何顯示

顯示已選規格(SKU)的銷售庫存

價格如何顯示

顯示已選規格的售價,這裏是指商品的 現售價

原型圖

在這裏插入圖片描述

SKU下架後如何顯示

舉例說明:
如果規格爲紅色/XXL的商品已下架,那麼根據買家選擇規格的順序,前端要禁用相關的規格值,也就是說買家先選擇“紅色”,那麼規格值“XXL”就不可選,界面通常呈現灰色的禁用視覺效果

原型圖

在這裏插入圖片描述

購買數量如何交互

  • 默認顯示數量1,不論規格是否完整選擇可以任意添加數量
  • 購買數量爲1時,“-”號被禁用
  • 加入購物車,立即購買,發起拼團時需要判斷購買數量是否超過“限購數”,若超過提示:非常抱歉,每人限購5件哦~

  1. 好獲嚴選專屬的SaaS電商系統 ↩︎

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章