![Axure案例:電商購物車](http://p2.ttnews.xyz/loading.gif)
購物車
購物車功能已經成為各類電商系商品的一個基礎功能,那麼關於購物車頁面的一些交互功能,如何通過原型設計去完成呢?本文以京東購物車為實例,將重點講述關於購物車頁面的交互用例設計。
觀察交互
通過觀察,不難發現京東購物車頁面主要有以下交互:
1)全選:點擊全選按妞時,所有商品被選中
2)數量:點擊加號,數量+1,點擊減號,數量減1
3)小計:每個商品的小計價格,隨著數量的變化而自動計算金額,即小計=商品單價*數量
4)總數量(數量總計):總計的數量等於所有選中商品的數量之和
5)總價(金額總計):總計金額等於所有商品的小計金額之和
6)刪除:頁面彈出確認信息
設計思路
前面我們已經列出了所有的交互現象,針對上述的交互效果,現在我們逐一進行設計思路分析,並分解用例中的動作配置。
01 全選
當全選複選框被選中時,則所有商品前的複選按鈕被選中;全選按鈕取消選中時,所有商品均取消選中(假設之前均處於選中狀態),用例配置截圖如下:
![Axure案例:電商購物車](http://p2.ttnews.xyz/loading.gif)
全選用例動作
02 數量
為數量兩側的“+”和“-”設置鼠標單擊用例
“+”鼠標單擊時,數量文本框內容自動+1
“-”鼠標單擊時,當數量文本內容>1時,數量文本框內容自動-1;否則,數量文本框內容為0
相關的用例動作配置如下圖所示:
+和-控制商品數量
03 小計金額(單個商品)
為小計文本標籤設置載入時事件用例,小計金額=單價(text文本)*數量(text文本)
為數量文本框設置文本改變時事件用例,自動觸發小計金額載入時事件
相關的用例動作配置如下圖所示:
載入時自動計算金額
數量文本改變自動觸發小計載入時
04 數量總計
案例中購物車有3件商品,為總數量設置載入時事件。當三件商品都被選中時,總數量等於3件商品的數量之和;當有其中兩件商品被選中時,則總數量等於選中的兩件商品數量之和;如果沒有選中商品,則總數量等於0。
為數量文本框設置文本改變時事件,自動觸發總數量載入時事件
相關的用例配置示意圖如下:
載入時,數量自動求和
商品數量文本改變觸發總數量載入
05 總價(總金額)
案例中購物車有3件商品,為總價(總金額)設置載入時事件。當三件商品都被選中時,總價等於3件商品的價格之和;當有其中兩件商品被選中時,則總價等於選中的兩件商品價格之和;如果沒有選中商品,則總價等於0。
為數量文本框設置文本改變時事件,自動觸發總價載入時事件。
相關的用例配置示意圖如下:
載入時,價格自動求和
商品數量文本改變觸發總價載入
06 刪除
為刪除文本設置鼠標單擊事件,顯示確認彈框,顯示時伴有燈箱效果。為確認彈框中的確認、取消和關閉按鈕,分別設置鼠標單擊事件,隱藏確認彈框。(確認彈框默認隱藏)相關用例配置如下圖所示:
顯示刪除確認彈框
隱藏確認彈框
結語
到這裡,購物車頁面中所有的交互用例都已經完成了設置,點擊預覽查看交互效果。如果你對原型設計或交互設計感興趣,不妨查看以下文章。
閱讀更多 努力拼搏的80後 的文章