Axure想要制作手機話費充值的界面，非常的簡單，只需要幾個元件加上一些交互用例即可以實現下面我們就來看看詳細的教程。

1、首先創建一個空白的頁面，在工作區域拖入幾個矩形元件，并對矩形元件的文字描述和樣式簡單調整一下，如下圖所示。

2、元件準備完成后，開始對元件的選中狀態的樣式進行設置，這里可以對字體顏色和填充顏色進行設置，如下圖所示。

3、按照上述方法，將其他的矩形元件的選中狀態也設置一下，這里可以全部選中一起設置，如下圖所示。

4、下一步開始對每個矩形的鼠標單擊時的交互事件進行設置，如下圖所示。

5、為了達到演示效果，上面的充值金額會根據你選擇充值的金額而變化，因此在做交互事件時需要定義一個局部變量用于控制金額的變化，如下圖所示。

6、剛剛的交互事件已經把矩形的值賦給了變量值，下面這個交互事件是將變量值賦給充值金額，如下圖所示。

7、同樣的方式，將其他矩形的鼠標單擊事件的交互進行設置，如下圖所示。

8、這里需要注意，這些矩形需要設置到同一個組內，否則效果就無法實現了，如下圖所示。

9、交互事件都設置完成后，f5預覽一下效果，點擊充10元，上面的充值金額就會變成10元，點擊充20元，上面的充值金額就是20元了。

以上就是Axure設計手機話費充值頁面的教程，希望大家喜歡，請繼續關注武林網。

相關推薦：

Axure怎么制作上下滑動的頁面原型?

Axure8頁面內容怎么批量查找與替換?

Axure8頁面怎么添加元件說明字段與配置?