文章目錄

• • 未完整選擇商品規格時
  • • 商品圖如何顯示
    • 庫存如何顯示
    • 價格如何顯示
    • 選擇規格提示文案如何顯示
    • 原型圖
  • 已選完整選擇商品規格時
  • • 商品圖如何顯示
    • 庫存如何顯示
    • 價格如何顯示
    • 原型圖
  • SKU下架后如何顯示
  • • 原型圖
  • 購買數量如何交互

未完整選擇商品規格時

商品圖如何顯示

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

庫存如何顯示

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

價格如何顯示

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

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

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

原型圖

已選完整選擇商品規格時

商品圖如何顯示

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

庫存如何顯示

顯示已選規格（SKU）的銷售庫存

價格如何顯示

顯示已選規格的售價，這里是指商品的 現售價

原型圖

SKU下架后如何顯示

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

原型圖

購買數量如何交互

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

---

好獲嚴選專屬的SaaS電商系統 ??

總結

以上是生活随笔為你收集整理的HH SaaS电商系统移动端商城，买家选择商品规格的交互设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。