購物車功能已經成為各類電商系商品的一個基礎功能，那么關于購物車頁面的一些交互功能，如何通過原型設計去完成呢？本文以京東購物車為實例，將重點講述關于購物車頁面的交互用例設計。
觀察交互
通過觀察，不難發(fā)現京東購物車頁面主要有以下交互：
1）全選：點擊全選按妞時，所有商品被選中
2）數量：點擊加號，數量+1，點擊減號，數量減1
3）小計：每個商品的小計價格，隨著數量的變化而自動計算金額，即小計=商品單價*數量
4）總數量（數量總計）：總計的數量等于所有選中商品的數量之和
5）總價（金額總計）：總計金額等于所有商品的小計金額之和
6）刪除：頁面彈出確認信息
設計思路
前面我們已經列出了所有的交互現象，針對上述的交互效果，現在我們逐一進行設計思路分析，并分解用例中的動作配置。
01 全選
當全選復選框被選中時，則所有商品前的復選按鈕被選中；全選按鈕取消選中時，所有商品均取消選中（假設之前均處于選中狀態(tài)），用例配置截圖如下：
02 數量
為數量兩側的“+”和“-”設置鼠標單擊用例
“+”鼠標單擊時，數量文本框內容自動+1
“-”鼠標單擊時，當數量文本內容>1時，數量文本框內容自動-1；否則，數量文本框內容為0
相關的用例動作配置如下圖所示：
03 小計金額（單個商品）
為小計文本標簽設置載入時事件用例，小計金額=單價（text文本）*數量（text文本）
為數量文本框設置文本改變時事件用例，自動觸發(fā)小計金額載入時事件
相關的用例動作配置如下圖所示：
04 數量總計
案例中購物車有3件商品，為總數量設置載入時事件。當三件商品都被選中時，總數量等于3件商品的數量之和；當有其中兩件商品被選中時，則總數量等于選中的兩件商品數量之和；如果沒有選中商品，則總數量等于0。
為數量文本框設置文本改變時事件，自動觸發(fā)總數量載入時事件
相關的用例配置示意圖如下：
05 總價（總金額）
案例中購物車有3件商品，為總價（總金額）設置載入時事件。當三件商品都被選中時，總價等于3件商品的價格之和；當有其中兩件商品被選中時，則總價等于選中的兩件商品價格之和；如果沒有選中商品，則總價等于0。
為數量文本框設置文本改變時事件，自動觸發(fā)總價載入時事件。
相關的用例配置示意圖如下：
06 刪除
為刪除文本設置鼠標單擊事件，顯示確認彈框，顯示時伴有燈箱效果。為確認彈框中的確認、取消和關閉按鈕，分別設置鼠標單擊事件，隱藏確認彈框。（確認彈框默認隱藏）相關用例配置如下圖所示：
到這里，購物車頁面中所有的交互用例都已經完成了設置，點擊預覽查看交互效果。
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。