Axure想要制作手機(jī)話費(fèi)充值的界面，非常的簡單，只需要幾個(gè)元件加上一些交互用例即可以實(shí)現(xiàn)下面我們就來看看詳細(xì)的教程。

軟件名稱：原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)軟件大小：90.5MB更新時(shí)間：2018-05-24

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

2、元件準(zhǔn)備完成后，開始對元件的選中狀態(tài)的樣式進(jìn)行設(shè)置，這里可以對字體顏色和填充顏色進(jìn)行設(shè)置，如下圖所示。

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

4、下一步開始對每個(gè)矩形的鼠標(biāo)單擊時(shí)的交互事件進(jìn)行設(shè)置，如下圖所示。

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

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

7、同樣的方式，將其他矩形的鼠標(biāo)單擊事件的交互進(jìn)行設(shè)置，如下圖所示。

8、這里需要注意，這些矩形需要設(shè)置到同一個(gè)組內(nèi)，否則效果就無法實(shí)現(xiàn)了，如下圖所示。

9、交互事件都設(shè)置完成后，f5預(yù)覽一下效果，點(diǎn)擊充10元，上面的充值金額就會(huì)變成10元，點(diǎn)擊充20元，上面的充值金額就是20元了。

以上就是Axure設(shè)計(jì)手機(jī)話費(fèi)充值頁面的教程，希望大家喜歡，請繼續(xù)關(guān)注錯(cuò)新站長站。

相關(guān)推薦：

Axure怎么制作上下滑動(dòng)的頁面原型?

Axure8頁面內(nèi)容怎么批量查找與替換?

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