文章目錄

• • 未完整選擇商品規(guī)格時(shí)
  • • 商品圖如何顯示
    • 庫(kù)存如何顯示
    • 價(jià)格如何顯示
    • 選擇規(guī)格提示文案如何顯示
    • 原型圖
  • 已選完整選擇商品規(guī)格時(shí)
  • • 商品圖如何顯示
    • 庫(kù)存如何顯示
    • 價(jià)格如何顯示
    • 原型圖
  • SKU下架后如何顯示
  • • 原型圖
  • 購(gòu)買數(shù)量如何交互

未完整選擇商品規(guī)格時(shí)

商品圖如何顯示

顯示SPU的主圖，HH SaaS商城系統(tǒng)¹應(yīng)該顯示SPU的營(yíng)銷主圖，此圖來(lái)自于“使用中”的素材模板

庫(kù)存如何顯示

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

價(jià)格如何顯示

顯示SKU的最小價(jià)格和最大價(jià)格，如果全部SKU的價(jià)格一樣，就顯示一個(gè)價(jià)格

選擇規(guī)格提示文案如何顯示

未完整選擇規(guī)格，就是提示：請(qǐng)選擇規(guī)格，如果已完整選擇規(guī)格，則將已選的規(guī)格顯示出來(lái)

原型圖

已選完整選擇商品規(guī)格時(shí)

商品圖如何顯示

顯示已選規(guī)格的商品圖，此圖來(lái)自于SKU的營(yíng)銷圖

庫(kù)存如何顯示

顯示已選規(guī)格（SKU）的銷售庫(kù)存

價(jià)格如何顯示

顯示已選規(guī)格的售價(jià)，這里是指商品的 現(xiàn)售價(jià)

原型圖

SKU下架后如何顯示

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

原型圖

購(gòu)買數(shù)量如何交互

• 默認(rèn)顯示數(shù)量1，不論規(guī)格是否完整選擇可以任意添加數(shù)量
• 購(gòu)買數(shù)量為1時(shí)，“-”號(hào)被禁用
• 加入購(gòu)物車，立即購(gòu)買，發(fā)起拼團(tuán)時(shí)需要判斷購(gòu)買數(shù)量是否超過(guò)“限購(gòu)數(shù)”，若超過(guò)提示：非常抱歉，每人限購(gòu)5件哦~

---

好獲嚴(yán)選專屬的SaaS電商系統(tǒng) ??

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。