購物車功能已經(jīng)成為各類電商系商品的一個基礎(chǔ)功能，那么關(guān)于購物車頁面的一些交互功能，如何通過原型設(shè)計去完成呢？本文以京東購物車為實例，將重點講述關(guān)于購物車頁面的交互用例設(shè)計。

演示地址：http://ggi20l.axshare.cn/#g=1&p=購物車

觀察交互

通過觀察，不難發(fā)現(xiàn)京東購物車頁面主要有以下交互：

• 全選：點擊全選按妞時，所有商品被選中
• 數(shù)量：點擊加號，數(shù)量+1，點擊減號，數(shù)量減1
• 小計：每個商品的小計價格，隨著數(shù)量的變化而自動計算金額，即小計=商品單價*數(shù)量
• 總數(shù)量（數(shù)量總計）：總計的數(shù)量等于所有選中商品的數(shù)量之和
• 總價（金額總計）：總計金額等于所有商品的小計金額之和
• 刪除：頁面彈出確認信息

設(shè)計思路

前面我們已經(jīng)列出了所有的交互現(xiàn)象，針對上述的交互效果，現(xiàn)在我們逐一進行設(shè)計思路分析，并分解用例中的動作配置。

1. 全選

當(dāng)全選復(fù)選框被選中時，則所有商品前的復(fù)選按鈕被選中；全選按鈕取消選中時，所有商品均取消選中（假設(shè)之前均處于選中狀態(tài)）。

用例配置截圖如下：

2. 數(shù)量

為數(shù)量兩側(cè)的“+”和“-”設(shè)置鼠標(biāo)單擊用例：

• “+”鼠標(biāo)單擊時，數(shù)量文本框內(nèi)容自動+1；
• “-”鼠標(biāo)單擊時，當(dāng)數(shù)量文本內(nèi)容>1時，數(shù)量文本框內(nèi)容自動-1；否則，數(shù)量文本框內(nèi)容為0。

相關(guān)的用例動作配置如下圖所示：

3. 小計金額（單個商品）

為小計文本標(biāo)簽設(shè)置載入時事件用例，小計金額=單價（text文本）*數(shù)量（text文本）。

為數(shù)量文本框設(shè)置文本改變時事件用例，自動觸發(fā)小計金額載入時事件。

相關(guān)的用例動作配置如下圖所示：

4. 數(shù)量總計

案例中購物車有3件商品，為總數(shù)量設(shè)置載入時事件。當(dāng)三件商品都被選中時，總數(shù)量等于3件商品的數(shù)量之和；當(dāng)有其中兩件商品被選中時，則總數(shù)量等于選中的兩件商品數(shù)量之和；如果沒有選中商品，則總數(shù)量等于0。

為數(shù)量文本框設(shè)置文本改變時事件，自動觸發(fā)總數(shù)量載入時事件。

相關(guān)的用例配置示意圖如下：

5. 總價（總金額）

案例中購物車有3件商品，為總價（總金額）設(shè)置載入時事件。當(dāng)三件商品都被選中時，總價等于3件商品的價格之和；當(dāng)有其中兩件商品被選中時，則總價等于選中的兩件商品價格之和；如果沒有選中商品，則總價等于0。

為數(shù)量文本框設(shè)置文本改變時事件，自動觸發(fā)總價載入時事件。

相關(guān)的用例配置示意圖如下：

6. 刪除

為刪除文本設(shè)置鼠標(biāo)單擊事件，顯示確認彈框，顯示時伴有燈箱效果。為確認彈框中的確認、取消和關(guān)閉按鈕，分別設(shè)置鼠標(biāo)單擊事件，隱藏確認彈框（確認彈框默認隱藏）。

相關(guān)用例配置如下圖所示：

結(jié)語

到這里，購物車頁面中所有的交互用例都已經(jīng)完成了設(shè)置，點擊預(yù)覽查看交互效果。訂閱專欄查看更多交互用例。

推薦閱讀

Axure案例：QQ音樂播放界面

Axure教程：和我一起設(shè)計簡書App

Axure教程：騰訊新聞按鈕，如何一鍵上天？

Axure教程：百度搜索提示，你也可以學(xué)會

Axure教程：用Axure實現(xiàn)簡書、微博的下拉刷新效果

原型設(shè)計：如何實現(xiàn)淘寶的五星好評？

#專欄作家#

拼搏的80后，人人都是產(chǎn)品經(jīng)理專欄作家。10年互聯(lián)網(wǎng)從業(yè)經(jīng)歷，具有各類型B端、C端產(chǎn)品的設(shè)計經(jīng)驗，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應(yīng)用場景探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議