在諸多購物平臺中，包括app端，在下訂單是時基本都需要選擇購買的數量，此處需要有一個數量編輯器。該數量編輯器的主要特點是，可以通過左右兩側的加減號改變數量，也可以通過中間的數字文本框直接填寫。今天，我們一起來學習一下數量編輯器的原型是如何實現的。

預覽：

一、元件準備

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

2、添加一個文本框，取名為“數量”，用來接收通過鍵盤輸入的數字；且該文本框的長度和高度與“數量背景”矩形框保持一致。

二、添加用例

一般情況下，無論是加入進貨單，還是下單購買，最少的數量是1，所以我們這里設置數量的默認值為1，在“數量背景”矩形框中輸入數量“1”。

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

當“背景數量”矩形框的值大于1時，設置“數量背景”矩形框的文字等于它本身的值減去1，具體設置用例如下：

2、給“增加數量”矩形框設置用例，點擊“增加數量”矩形框，達到的效果是一次增加1，具體用例如下圖：

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

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

4、給“數量”文本框設置用例。通過鍵盤輸入數值給“數量”文本框后，在“數量”文本框駛入焦點時，把“數量”文本框置于底層，同時將“數量”文本框的數值賦值給“數量背景”矩形框，具體用例如下：

三、預覽

至此，數量編輯器到此已經完成了，預覽一下吧。

作者：無淚，個人公眾號：楊小貝，一起探討原型設計

本文由 @無淚 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議