在做輸入框、選擇之類(lèi)的組件時(shí)，我們會(huì)經(jīng)常用到步進(jìn)器這種功能。這篇文章，作者分享的這種簡(jiǎn)單方法，可以快速做一個(gè)步進(jìn)器。

這期內(nèi)容，我們將深入探討Axure中步進(jìn)器設(shè)計(jì)與交互技巧。

先梳理一下步進(jìn)器的流程圖，方便待會(huì)兒做交互。

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

1.打開(kāi)一個(gè)新的 RP 文件并在畫(huà)布上打開(kāi) Page 1。

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

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

4.然后復(fù)制一個(gè)，將文本改成“+”。

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

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

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

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面點(diǎn)擊加號(hào)或減號(hào)按鈕來(lái)遞增或遞減數(shù)值。

一個(gè)基礎(chǔ)的步進(jìn)器即做好了，還可以延展一點(diǎn)。

給步進(jìn)器加上上限和下限的限制。

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

情形1：點(diǎn)擊添加條件，選擇“元件文字”，“當(dāng)前”，“< =”，“文本”“0”的情況下，禁用“-”按鈕，并設(shè)置當(dāng)前文本框?yàn)椤?”。

復(fù)制情形1，將“< =”改成“> =”，“文本”“999”的情況下，禁用“+”按鈕，并設(shè)置當(dāng)前文本框?yàn)椤?”。

2.添加情形，點(diǎn)擊確認(rèn)，反之則啟用“+”，“-”按鈕。

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

同理配置“+”按鈕。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面點(diǎn)擊加號(hào)或減號(hào)按鈕來(lái)遞增或遞減數(shù)值，當(dāng)文本框“< = 0”的時(shí)候，“-”按鈕置灰，當(dāng)文本框“> = 999”的時(shí)候，“+”按鈕置灰。

預(yù)覽地址：https://53fnke.axshare.com

好的， 這期內(nèi)容到這里就結(jié)束了。