在做輸入框、選擇之類的組件時，我們會經常用到步進器這種功能。這篇文章，作者分享的這種簡單方法，可以快速做一個步進器。

這期內容，我們將深入探討Axure中步進器設計與交互技巧。

先梳理一下步進器的流程圖，方便待會兒做交互。

01 步進器：創(chuàng)建步進器所需的元件

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

2.將“文本框”元件拖到畫布上，在樣式窗格中將寬度設置為90，高度設置為40，線段寬度設置為0，輸入文本“1”，字號16，居中。

3.將“矩形”元件拖到畫布上，在樣式窗格中將寬高度設置為40，輸入文本“-”字號16，字體顏色白色，居中，藍色填充（#0052D9）。

4.然后復制一個，將文本改成“+”。

02 創(chuàng)建交互：創(chuàng)建“加，減”按鈕的交互狀態(tài)

1.選擇“-”元件，在交互窗格點擊新建交互，單擊時，設置文本，添加變量，添加局部變量，插入變量[[LVAR1 – 1]]；

2.將“-”元件的交互復制粘貼到“+”元件交互中，變量[[LVAR1 – 1]]改成[[LVAR1 + 1]]，點擊完成。

預覽交互

點擊預覽，在預覽頁面點擊加號或減號按鈕來遞增或遞減數值。

一個基礎的步進器即做好了，還可以延展一點。

給步進器加上上限和下限的限制。

1.選擇“文本框”元件，在交互窗格點擊新建交互，選文本改變時，啟用情形判斷：

情形1：點擊添加條件，選擇“元件文字”，“當前”，“< =”，“文本”“0”的情況下，禁用“-”按鈕，并設置當前文本框為“0”。

復制情形1，將“< =”改成“> =”，“文本”“999”的情況下，禁用“+”按鈕，并設置當前文本框為“0”。

2.添加情形，點擊確認，反之則啟用“+”，“-”按鈕。

3.給“+”，“-”按鈕添加元件禁用填充顏色（#D7D7D7）。

同理配置“+”按鈕。

預覽交互

點擊預覽，在預覽頁面點擊加號或減號按鈕來遞增或遞減數值，當文本框“< = 0”的時候，“-”按鈕置灰，當文本框“> = 999”的時候，“+”按鈕置灰。

預覽地址：https://53fnke.axshare.com

好的， 這期內容到這里就結束了。