在諸多購(gòu)物平臺(tái)中，包括app端，在下訂單是時(shí)基本都需要選擇購(gòu)買(mǎi)的數(shù)量，此處需要有一個(gè)數(shù)量編輯器。該數(shù)量編輯器的主要特點(diǎn)是，可以通過(guò)左右兩側(cè)的加減號(hào)改變數(shù)量，也可以通過(guò)中間的數(shù)字文本框直接填寫(xiě)。今天，我們一起來(lái)學(xué)習(xí)一下數(shù)量編輯器的原型是如何實(shí)現(xiàn)的。

預(yù)覽：

一、元件準(zhǔn)備

1、添加三個(gè)矩形框，分別取名為“減少數(shù)量”、“數(shù)量背景”、“增加數(shù)量”?！皽p少數(shù)量”矩形框中輸入“-”號(hào)，“增加數(shù)量”矩形框中輸入“+”號(hào)，待用；

2、添加一個(gè)文本框，取名為“數(shù)量”，用來(lái)接收通過(guò)鍵盤(pán)輸入的數(shù)字；且該文本框的長(zhǎng)度和高度與“數(shù)量背景”矩形框保持一致。

二、添加用例

一般情況下，無(wú)論是加入進(jìn)貨單，還是下單購(gòu)買(mǎi)，最少的數(shù)量是1，所以我們這里設(shè)置數(shù)量的默認(rèn)值為1，在“數(shù)量背景”矩形框中輸入數(shù)量“1”。

1、首先，給“減少數(shù)量”矩形框添加用例，點(diǎn)擊“減少數(shù)量”矩形框，達(dá)到的效果是一次減少1，且要求在數(shù)量為1的時(shí)候，不能再減小，所以要判斷“數(shù)量背景”矩形框的值是否大于1，只有“數(shù)據(jù)背景”矩形框的值大于1時(shí)，才能減小數(shù)值，具體用例如下圖：

當(dāng)“背景數(shù)量”矩形框的值大于1時(shí)，設(shè)置“數(shù)量背景”矩形框的文字等于它本身的值減去1，具體設(shè)置用例如下：

2、給“增加數(shù)量”矩形框設(shè)置用例，點(diǎn)擊“增加數(shù)量”矩形框，達(dá)到的效果是一次增加1，具體用例如下圖：

設(shè)置“數(shù)量背景”矩形框的文字等于它本身的值增加1，具體設(shè)置用例如下：

3、將“數(shù)量背景”矩形框放置到“數(shù)量”文本框上，在點(diǎn)擊“數(shù)量背景”矩形框時(shí)，將“數(shù)量背景”矩形框的文字賦值給“數(shù)量”文本框，并且將“數(shù)量”文本框置于頂層，同時(shí)讓“數(shù)量”文本框獲取焦點(diǎn)，具體用例如下圖：

4、給“數(shù)量”文本框設(shè)置用例。通過(guò)鍵盤(pán)輸入數(shù)值給“數(shù)量”文本框后，在“數(shù)量”文本框駛?cè)虢裹c(diǎn)時(shí)，把“數(shù)量”文本框置于底層，同時(shí)將“數(shù)量”文本框的數(shù)值賦值給“數(shù)量背景”矩形框，具體用例如下：

三、預(yù)覽

至此，數(shù)量編輯器到此已經(jīng)完成了，預(yù)覽一下吧。

作者：無(wú)淚，個(gè)人公眾號(hào)：楊小貝，一起探討原型設(shè)計(jì)

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

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