本文將為大家介紹如何設計商品購件數的交互設計以及具體步驟。

移動互聯網購物平臺已經成為時代的潮流，以“移動端下單+前置倉配貨+即時配送到家”等模式運營，讓用戶足不出戶即可買到新鮮的蔬菜水果以及優惠的生活日用品。

本期為大家講解購物車列表和商品展示列表頁面購買件數的交互設計。頁面如下所示：

（高保真源文件下載鏈接在下方評論中或公眾號中可見）

列表購物件數的具體實現方法

第一步：元件的實現

1. 需要準備元件為：

一個增加圖標、一個減少圖標以及文本標簽。（圖標也可以運用矩形的布爾運算得到）

如下圖所示：

第二步：交互的實現

1.?原理分析：

1）最初狀態為一個增加圖標；

2）用戶點擊【增加】時，顯示【減少】圖標和一個文本標簽，數值為1，表示已添加一件商品；

3）用戶點擊【增加】，數值遞增為2，即增加一件；點擊減少，又切換為初始狀態，表示已清空該商品。

接下來，可以利用動態面板的切換，實現上述交互效果。

2. 交互步驟實現：

添加一動態面板，再state1中放入【增加】，再添加一個狀態state2，放入【增加】、【減少】圖標和文本標簽。

a 、選中state1中的【增加】，添加鼠標單擊時的交互事件；

設置動態面板【購物件數】切換為state2；

b 、選中state2中的【增加】，添加鼠標單擊時的交互事件；

設置 文本標簽【數值】的文本為[[Target.text+1]]；

c、選中state2中的【減少】，添加鼠標單擊時的交互事件；

當【數值】大于2時，設置 文本標簽【數值】的文本為[[Target.text-1]]；

當【數值】等于1時，設置動態面板【購物件數】切換為state1；

第三步：交互效果預覽

（高保真源文件下載鏈接在下方評論中或公眾號中可見）

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議