axure教程：如何實現數字輸入框效果

雖然AXURE有自帶的數字輸入控制元件，但是axure自帶的互動和樣式可能與我們產品的整體效果不一樣，往往需要自己製作，那如何製作逼真的數字輸入框控制元件呢，來學習一下吧！

如何實現數字輸入框效果具體教程

1、首先拖入一個矩形框，設定好線段顏色，並在右側操作欄設定【互動樣式設定】中的滑鼠懸停和選中效果，這邊我設定了滑鼠懸停和選中時“線段顏色”及“外部陰影”，如下圖所示:

2、再拖入一個矩形框，設定高度與寬度，並設定矩形填充顏色及邊框可見性，只顯示右邊的邊框，如下圖所示：

3、從元件庫拖入“減號”或者從網上下載“－”的圖示，放置“步驟2”中的矩形框中，從元件庫中拖入“－”減號圖示需要按需調整一下大小及顏色，將“步驟2”中的矩形框與減號圖示設定為組合，如下圖所示：

4、接下來按照“步驟2”和“步驟3”製作“＋”號圖示；複製“步驟2”中的矩形框，設定邊框可見性，在拖入“＋”圖示，設定效果如下圖：

5、接著拖入一個文字框放置在中間剩餘區域，設定文字框的名字為“數字輸入”，選中文字框，右鍵【隱藏邊框】

6、最後再拖入一個文字框放置在控制元件的右側，命名為“步長”，文字框中根據你需要自動增加或者減少的數值進行輸入（假設輸入1 ，則點選加號時，文字框自動加1）；我這邊輸入“1”，輸入完成之後，隱藏該控制元件。

7、接下來需要設定互動邏輯，實現數值的自動相加和相減 8、點選“＋”圖示組合，點選【滑鼠點選時】，彈窗中點選【設定文字】，勾選“數字輸入”，再點選“fx”設定公式： 8.1首先點選新增區域性變數，將LVAR1元件文字設定為“數字輸入”； 8.2 再將LVAR2原件文字設定為“步長器”； 8.3 最後在點選上方的公示輸入框中設定公示“[[LVAR1+LVAR2]]”,操作確認後完成設定

9、“＋”圖示公示設定完成之後，在點選“－”圖示組合，點選【滑鼠點選時】設定互動效果，參考“步驟8”中的方式完成設定，有兩種方式： 9.1 方式一： 9.1.1 彈窗中點選【設定文字】，勾選“數字輸入”，再點選“fx”設定公式： 9.1.2首先點選新增區域性變數，將LVAR1元件文字設定為“數字輸入”； 9.1.3 再將LVAR2原件文字設定為“步長器”； 9.1.4 最後在點選上方的公示輸入框中設定公示“[[LVAR1-LVAR2]]”,操作確認後完成設定

9.2 方式二： 9.2.1 點選“＋”圖示，在互動效果-滑鼠單擊時-Case1中右鍵點選【複製】，或者點選Case1按住“Ctrl+C”鍵

9.2.2 再點選“－”圖示，點選【滑鼠點選時】，再右鍵點選【貼上】，將“＋”圖示中的效果複製過來進行修改

9.2.3 貼上成功後，雙擊互動效果，彈窗進行修改公示，將"[[LVAR1+LVAR2]]"修改為“[[LVAR1-LVAR2]]”

10、設定成功後，按住“F5”預覽互動效果；

11 此時矩形框的之前設定的懸停及選中效果並沒有展示出來，還需要最後一步，即選中將所有控制元件設定組合，並勾選“允許觸發滑鼠互動”，

12 最後，預覽檢視效果如下：

三、擴充說明： 1、按照上述方式，也可以設計出上下運算元字自動增加或者減少，只需要修改下圖示即可

2、如果不需要製作逼真的效果，可直接使用axure自帶的控制元件，即拖入一個文字框，在右側設定型別為“Number”即可