本文將為大家介紹如何設(shè)計(jì)商品購(gòu)件數(shù)的交互設(shè)計(jì)以及具體步驟。

移動(dòng)互聯(lián)網(wǎng)購(gòu)物平臺(tái)已經(jīng)成為時(shí)代的潮流，以“移動(dòng)端下單+前置倉(cāng)配貨+即時(shí)配送到家”等模式運(yùn)營(yíng)，讓用戶足不出戶即可買(mǎi)到新鮮的蔬菜水果以及優(yōu)惠的生活日用品。

本期為大家講解購(gòu)物車(chē)列表和商品展示列表頁(yè)面購(gòu)買(mǎi)件數(shù)的交互設(shè)計(jì)。頁(yè)面如下所示：

（高保真源文件下載鏈接在下方評(píng)論中或公眾號(hào)中可見(jiàn)）

列表購(gòu)物件數(shù)的具體實(shí)現(xiàn)方法

第一步：元件的實(shí)現(xiàn)

1. 需要準(zhǔn)備元件為：

一個(gè)增加圖標(biāo)、一個(gè)減少圖標(biāo)以及文本標(biāo)簽。（圖標(biāo)也可以運(yùn)用矩形的布爾運(yùn)算得到）

如下圖所示：

第二步：交互的實(shí)現(xiàn)

1.?原理分析：

1）最初狀態(tài)為一個(gè)增加圖標(biāo)；

2）用戶點(diǎn)擊【增加】時(shí)，顯示【減少】圖標(biāo)和一個(gè)文本標(biāo)簽，數(shù)值為1，表示已添加一件商品；

3）用戶點(diǎn)擊【增加】，數(shù)值遞增為2，即增加一件；點(diǎn)擊減少，又切換為初始狀態(tài)，表示已清空該商品。

接下來(lái)，可以利用動(dòng)態(tài)面板的切換，實(shí)現(xiàn)上述交互效果。

2. 交互步驟實(shí)現(xiàn)：

添加一動(dòng)態(tài)面板，再state1中放入【增加】，再添加一個(gè)狀態(tài)state2，放入【增加】、【減少】圖標(biāo)和文本標(biāo)簽。

a 、選中state1中的【增加】，添加鼠標(biāo)單擊時(shí)的交互事件；

設(shè)置動(dòng)態(tài)面板【購(gòu)物件數(shù)】切換為state2；

b 、選中state2中的【增加】，添加鼠標(biāo)單擊時(shí)的交互事件；

設(shè)置 文本標(biāo)簽【數(shù)值】的文本為[[Target.text+1]]；

c、選中state2中的【減少】，添加鼠標(biāo)單擊時(shí)的交互事件；

當(dāng)【數(shù)值】大于2時(shí)，設(shè)置 文本標(biāo)簽【數(shù)值】的文本為[[Target.text-1]]；

當(dāng)【數(shù)值】等于1時(shí)，設(shè)置動(dòng)態(tài)面板【購(gòu)物件數(shù)】切換為state1；

第三步：交互效果預(yù)覽

（高保真源文件下載鏈接在下方評(píng)論中或公眾號(hào)中可見(jiàn)）

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

題圖來(lái)自Unsplash，基于CC0協(xié)議