什么是步進(jìn)器
當(dāng)我們需要對(duì)數(shù)值進(jìn)行小幅度調(diào)整時(shí)闸盔，我們就可以使用步進(jìn)器家破。步進(jìn)器最初流行于電商產(chǎn)品的設(shè)計(jì)韭寸，用于用戶(hù)輸入購(gòu)買(mǎi)商品的數(shù)量抚垃，后來(lái)這一設(shè)計(jì)形式逐漸被廣泛運(yùn)用到互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)當(dāng)中喷楣。本節(jié)課，我們講解如何使用Axure制作步進(jìn)器的交互效果鹤树。
快速繪制元件線框圖
下面這張圖拆解了步進(jìn)器的組成結(jié)構(gòu)铣焊，步驟器元件由中間的文本輸入框和兩側(cè)的加減號(hào)按鈕組成。文本輸入框用于顯示當(dāng)前的數(shù)值罕伯，兩側(cè)的加減號(hào)用來(lái)控制數(shù)值的遞增或遞減的變化曲伊。
分析完了步進(jìn)器的結(jié)構(gòu)，接下來(lái)我們可以利用Axure提供的系統(tǒng)元件庫(kù)捣炬，快速完成線框圖的準(zhǔn)備工作熊昌。
數(shù)值顯示：從系統(tǒng)元件庫(kù)拖動(dòng)文本框绽榛，設(shè)置填充色為灰色#F2F2F2湿酸，無(wú)邊框，文本框中輸入默認(rèn)值1灭美。
加減按鈕：從系統(tǒng)的icon元件庫(kù)找到加號(hào)與減號(hào)圖標(biāo)推溃，如果你覺(jué)得這里的圖標(biāo)線條太粗，也可以從阿里媽媽的Iconfont圖標(biāo)庫(kù)網(wǎng)站獲取SVG圖標(biāo)素材届腐，這里的圖標(biāo)支持自定義修改铁坎。在加減號(hào)圖標(biāo)的外圍套上一個(gè)無(wú)邊框矩形，分別將兩個(gè)矩形與加減號(hào)圖標(biāo)各自設(shè)置為一個(gè)組合犁苏。矩形和圖標(biāo)就構(gòu)成了控制數(shù)值變化的加減按鈕硬萍。
觀察分析交互效果
我們以京東購(gòu)物車(chē)的步進(jìn)器為例，仔細(xì)觀察有以下幾個(gè)交互現(xiàn)象
遞增：每點(diǎn)擊1次加號(hào)围详，數(shù)量加1
遞減：每點(diǎn)擊1次減號(hào)朴乖，數(shù)量減1
最小值：當(dāng)數(shù)值為1時(shí)祖屏，減號(hào)按鈕置灰，不能點(diǎn)擊买羞，數(shù)值不再減少
最大值：當(dāng)數(shù)值為10時(shí)袁勺，加號(hào)按鈕置灰，不能點(diǎn)擊畜普，數(shù)值不再增加（這里假設(shè)商品限購(gòu)數(shù)量為10）
分享交互制作的思路與方法
01 有上限的遞增
如何實(shí)現(xiàn)點(diǎn)擊加號(hào)按鈕實(shí)現(xiàn)數(shù)值的遞增效果期丰？選中加號(hào)按鈕（這里是一個(gè)組合），添加鼠標(biāo)單擊事件吃挑，添加“設(shè)置文本”動(dòng)作钝荡，動(dòng)作的對(duì)象為中間的文本輸入框，文本框的值自動(dòng)+1舶衬，可以利用函數(shù)表達(dá)式[[Target.text+1]]實(shí)現(xiàn)遞增+1的效果化撕。變量Target.text為目標(biāo)元件的文本，即文本框的數(shù)值约炎。交互設(shè)置如下植阴。
剛才我們分析了數(shù)值的遞增是有上限的，所以還需要為加號(hào)按鈕的單擊事件添加一個(gè)前提條件圾浅，即當(dāng)數(shù)值＜10時(shí)掠手，方可執(zhí)行遞增+1的動(dòng)作。加號(hào)按鈕的完整交互配置如下圖所示狸捕。
02 有下限的遞減
有了剛才遞增制作的經(jīng)驗(yàn)喷鸽，制作遞減效果也就不難了。選中減號(hào)按鈕灸拍，添加鼠標(biāo)單擊事件做祝，添加“設(shè)置文本”動(dòng)作，動(dòng)作對(duì)象為中間的文本框鸡岗，文本框的數(shù)值自動(dòng)-1混槐，可以利用函數(shù)表達(dá)式[[Target.text-1]]實(shí)現(xiàn)遞減-1的效果。變量Target.text為目標(biāo)元件的文本數(shù)值轩性，即文本框的數(shù)值声登。交互設(shè)置如下。
同樣遞減也有一個(gè)最低值的限制揣苏，當(dāng)數(shù)值為1時(shí)悯嗓，就不能繼續(xù)減少了。為減號(hào)按鈕的鼠標(biāo)單擊事件添加一個(gè)前提條件卸察，當(dāng)文本框的數(shù)值＞2時(shí)脯厨，方可執(zhí)行遞減的動(dòng)作。減號(hào)按鈕完整的交互配置如下圖所示坑质。
03 增減按鈕的啟用與禁用
到這里合武，數(shù)值的遞增个少、遞減效果總算實(shí)現(xiàn)了，但似乎和京東相比較眯杏，從操作過(guò)程當(dāng)中的效果來(lái)看夜焦，還有一些差距。我們?cè)谧杏^察一遍京東步進(jìn)器的完整交互岂贩，我們發(fā)現(xiàn)當(dāng)數(shù)值達(dá)到最大值或最小值時(shí)茫经，對(duì)應(yīng)的加號(hào)和減號(hào)按鈕都變灰了，從視覺(jué)上來(lái)看變灰是一種不可點(diǎn)擊的禁用狀態(tài)萎津。所以卸伞，我們還需要為加號(hào)、減號(hào)按鈕設(shè)置一個(gè)禁用狀態(tài)锉屈。選中加號(hào)荤傲、減號(hào)圖標(biāo)，鼠標(biāo)右鍵單擊颈渊，選擇“交互樣式”命令遂黍，找到禁用樣式設(shè)置面板，禁用時(shí)設(shè)置填充色為#D7D7D7俊嗽。禁用樣式的設(shè)置如下圖所示雾家。
按鈕什么時(shí)候禁用，取決于數(shù)值是否達(dá)到了上限或下限绍豁。所以交互事件的對(duì)象為中間的文本框芯咧，為顯示數(shù)值的文本框添加“文本改變時(shí)”事件，為第一個(gè)情形添加條件竹揍，當(dāng)文本框≤1時(shí)敬飒，執(zhí)行動(dòng)作禁用減少按鈕；添加第二個(gè)情形芬位，當(dāng)文本框＞1時(shí)无拗，啟用減少按鈕。通過(guò)這兩個(gè)情形晶衷，控制了減號(hào)按鈕的啟用與禁用蓝纲。
接著，我們利用相同的方法實(shí)現(xiàn)加號(hào)按鈕的啟用與禁用晌纫。為剛才的“文本改變”事件添加第三個(gè)情形，添加情形條件永丝，如果文本框≥10锹漱，執(zhí)行動(dòng)作禁用加號(hào)按鈕；添加第4個(gè)情形慕嚷，如果文本框＜10哥牍，執(zhí)行動(dòng)作啟用加號(hào)按鈕毕泌。
需要引起注意的是，需要將情形2和情形4切換為否則的邏輯關(guān)系嗅辣，即情形1和情形2位一組如果/否則的關(guān)系撼泛；情形3和情形4為一組如果/否則的關(guān)系。顯示數(shù)值的文本框的完整交互如下圖所示澡谭。
好了愿题，到這里步進(jìn)器的交互配置已經(jīng)完成，可以點(diǎn)擊預(yù)覽按鈕蛙奖，驗(yàn)證你的學(xué)習(xí)成果潘酗。
小結(jié)
步進(jìn)器的實(shí)現(xiàn)效果其實(shí)很簡(jiǎn)單，只要找到遞增和遞減的方法雁仲。利用[[Target.text-1]]仔夺、[[Target.text+1]]這兩個(gè)函數(shù)表達(dá)式就可以輕松實(shí)現(xiàn)數(shù)值的遞減和遞增。接下來(lái)攒砖，我們?cè)诮换ヅ渲玫倪^(guò)程中缸兔，要根據(jù)當(dāng)前文本框的數(shù)值，來(lái)掌握什么時(shí)候執(zhí)行遞減吹艇、遞增的動(dòng)作灶体。增加和減少按鈕的禁用、啟用時(shí)機(jī)掐暮，也是通過(guò)文本框的數(shù)值控制的蝎抽。
下面給大家留一個(gè)思考題，如何實(shí)現(xiàn)通過(guò)兩側(cè)加減按鈕路克，實(shí)現(xiàn)數(shù)值自動(dòng)-0.01樟结，數(shù)值自動(dòng)+0.01，數(shù)值的變化范圍在0.01~1之間精算。如果有興趣學(xué)習(xí)的同學(xué)瓢宦，可以自己動(dòng)手制作。
完成以下操作灰羽，可以免費(fèi)獲取案例源文件
1.關(guān)注本賬號(hào)《Axure原型設(shè)計(jì)》
2.點(diǎn)贊本節(jié)課
3.發(fā)送簡(jiǎn)信關(guān)鍵字 【步進(jìn)器】
【Axure原型設(shè)計(jì)】專(zhuān)注分享Axure基礎(chǔ)教程驮履、交互案例以及經(jīng)驗(yàn)技巧，并不定期贈(zèng)送各種資源福利廉嚼，包含：系統(tǒng)組件庫(kù)玫镐、頁(yè)面模板、實(shí)戰(zhàn)案例等怠噪。
