概述
1. 繪制一個(gè)注冊(cè)界面
2. 點(diǎn)擊 Verify Now，按鈕進(jìn)入倒計(jì)時(shí)狀態(tài)
3. 進(jìn)入下一步前判斷輸入合法性，如果不合法則給出提示
主要知識(shí)點(diǎn)有：
- Axure基礎(chǔ)部件的使用
- 動(dòng)態(tài)面板創(chuàng)建也使用
- 頁(yè)面交互的使用
- 在頁(yè)面交互中使用條件判斷
1. 創(chuàng)建一個(gè)APP框圖
創(chuàng)建框圖可以用Axure自帶的部件組合，也可以利用現(xiàn)成的框架。Axure官網(wǎng)有付費(fèi)的部件下載，網(wǎng)上也有不少現(xiàn)成的部件可以下載。
這里就是利用了一個(gè)現(xiàn)成的框架作為APP的款圖。
Axure提供的基礎(chǔ)部件比較全面，可以根據(jù)需求在部件庫(kù)里面選擇所需的部件。
基礎(chǔ)部件的組合可以滿足絕大多數(shù)原型設(shè)計(jì)的需求了。當(dāng)然網(wǎng)上也有很多已經(jīng)制作好的部件可供使用。
從外部獲得的部件，在 Widget(All Libraries)里面Load Library 進(jìn)來(lái)就可以了。
2. 繪制手機(jī)號(hào)碼和驗(yàn)證碼輸入框
1. 用基礎(chǔ)部件組成輸入框
- 標(biāo)題用的是部件Label
- 輸入框用的是部件Text Field
2. 設(shè)置輸入框的提示文字
- 在 Hint Text 輸入提示文字
- 在 Hint Style 把文字樣式修改成灰色
3. 設(shè)置輸入框文字長(zhǎng)度
- 設(shè)置Max Length為11,電話號(hào)碼輸入不能超過(guò)11位
3. 繪制發(fā)送短信驗(yàn)證碼按鈕
1. 繪制按鈕
按鈕用的是部件 Button Shape
Button Shape 可以根據(jù)自己的需要改變成不同的按鈕形狀。
Axure還提供了修改部件樣式的功能，可以設(shè)置部件線條，填充顏色，修改字體等。
2. 把按鈕轉(zhuǎn)成動(dòng)態(tài)面板
把按鈕轉(zhuǎn)換成動(dòng)態(tài)面板。
轉(zhuǎn)換成動(dòng)態(tài)面板后，可以在動(dòng)態(tài)面板管理界面看到新增的動(dòng)態(tài)面板。
動(dòng)態(tài)面板是Axure原型制作中使用非常頻繁的一個(gè)元件，主要用途就是實(shí)現(xiàn)一些動(dòng)態(tài)的交互效果。可以讓一個(gè)部件擁有不同的狀態(tài)，通過(guò)不同的觸發(fā)條件可以實(shí)現(xiàn)一個(gè)部件在各個(gè)狀態(tài)之間切換。
3. 為按鈕設(shè)置多個(gè)狀態(tài)
雙擊動(dòng)態(tài)面板進(jìn)入狀態(tài)模板設(shè)置界面。
- 編輯動(dòng)態(tài)面板，修改動(dòng)態(tài)面板的名字。
- 為動(dòng)態(tài)面板增加5個(gè)狀態(tài)并修改名字，分別為Verify Code，60s，40s，20s，0s。
4. 繪制按鈕的每個(gè)狀態(tài)
進(jìn)入Verify Code狀態(tài)，可以看到這個(gè)狀態(tài)下按鈕的狀態(tài)。
進(jìn)入60s狀態(tài)，從Verify Code狀態(tài)復(fù)制按鈕過(guò)來(lái)。并把文字改成60s。
根據(jù)以上方法，依次設(shè)置40s，20s，0s。
5. 讓按鈕在各個(gè)狀態(tài)下切換
1) 選擇鼠標(biāo)點(diǎn)擊按鈕的觸發(fā)條件
在部件交互和通告界面選擇動(dòng)作的觸發(fā)條件。這里選擇OnClick觸發(fā)動(dòng)作，表示通過(guò)鼠標(biāo)點(diǎn)擊按鈕條件來(lái)觸發(fā)動(dòng)作。
可以為部件設(shè)置的動(dòng)作很多，可以根據(jù)字面意思猜測(cè)出能夠執(zhí)行的動(dòng)作。
2) 設(shè)置鼠標(biāo)點(diǎn)擊按鈕的動(dòng)作
雙擊進(jìn)入動(dòng)作執(zhí)行設(shè)計(jì)界面，依次選擇：
- Set Panel State
- Set Verify Code Button state to
-
Select the State選擇60s
表示鼠標(biāo)點(diǎn)擊后，動(dòng)態(tài)面板狀態(tài)從Verify Code切換到60s這個(gè)狀態(tài)。也就是說(shuō)，按鈕點(diǎn)擊后進(jìn)入60s倒計(jì)時(shí)階段。
3) 設(shè)置倒計(jì)時(shí)動(dòng)作
進(jìn)入OnPanelStateChange動(dòng)作設(shè)置界面，選擇Add Condition增加一個(gè)判斷條件。
設(shè)置狀態(tài)切換的動(dòng)作的條件。增加一個(gè)條件，依次設(shè)置如下：
- State of panel
- Verify Code Button
- does not equals
- state
-
Verify Code。
意思為當(dāng)Vrefiy Code Button這個(gè)部件的狀態(tài)不等于Verify Code時(shí)，執(zhí)行動(dòng)作。也就是部件狀態(tài)為Verify Code時(shí)即停止執(zhí)行動(dòng)作。
設(shè)置延時(shí)執(zhí)行動(dòng)作，依次設(shè)置：
- Wait
-
Wati time設(shè)置為1000ms。
設(shè)置延時(shí)1000ms執(zhí)行動(dòng)作。
依次設(shè)置其他狀態(tài)的變更。
3. 繪制下一步按鈕
1. 增加一個(gè)按鈕Next
2. 設(shè)置按鈕動(dòng)作
我們?cè)贜ext動(dòng)作執(zhí)行前，增加一個(gè)判斷電話號(hào)碼是否正確的判斷。
- 增加電話號(hào)碼輸入錯(cuò)誤提示
增加一個(gè)動(dòng)態(tài)面板位于電話號(hào)碼輸入框下方。
編輯錯(cuò)誤消息狀態(tài)。設(shè)置狀態(tài)Error message，增加一個(gè)Label設(shè)置為“請(qǐng)輸入正確的電話號(hào)碼”。把Error message的Hidden*勾上，一開(kāi)始沒(méi)錯(cuò)誤時(shí)設(shè)置為隱藏的不需要顯示出來(lái)。
- 電話號(hào)碼合法性判斷
簡(jiǎn)單把電話號(hào)碼是否合法限定為: * 13000000000 <= 電話號(hào)碼 < 20000000000 *
設(shè)置Next按鈕OnClick動(dòng)作，為動(dòng)作增加兩個(gè)條件:
if text on Phone Text Field is less than "13000000000"
or text on Phone Text Field is greater than or equals "20000000000"
即如果電話號(hào)碼不滿足合法性判斷時(shí)執(zhí)行動(dòng)作。
Phone Text Field 是電話號(hào)碼輸入框的名稱，這個(gè)是用戶自己設(shè)置的。為部件命名是一個(gè)很好的習(xí)慣，當(dāng)頁(yè)面組件很多的時(shí)候可以快速找到需要的部件。
設(shè)置OnClick執(zhí)行動(dòng)作。依次設(shè)置：
- Show/Hide
- Phone Error Message
- 選擇 show
輸入錯(cuò)誤時(shí)，把Phone Error Message 顯示出來(lái)
-
執(zhí)行Next按鈕動(dòng)作
為Next按鈕的OnClick動(dòng)作在增加一個(gè)Case為Case2。依次選擇： - Open Link
- Open in Current Window
- 選擇 Password界面，進(jìn)入下一個(gè)界面
即點(diǎn)擊按鈕后在原窗口打開(kāi)Password界面。
Axure可以為動(dòng)作增加多個(gè)Case。默認(rèn)情況下不同的Case之間是 “ IF Case 1 Else if Case 2 .... Else if Case n ”的關(guān)系，Axure先判斷Case 1，滿足就執(zhí)行Case 1，不滿足繼續(xù)判斷Case 2，以此類推。
也可以修改Case之間的關(guān)系。
修改后就變成了 “ IF Case 1 If Case 2 .... If Case n ”的關(guān)系了。
Axure實(shí)現(xiàn)APP注冊(cè)(1)-驗(yàn)證手機(jī)頁(yè)面
Axure實(shí)現(xiàn)APP注冊(cè)(2)-設(shè)置密碼頁(yè)面
Axure實(shí)現(xiàn)APP注冊(cè)(3)-歡迎頁(yè)面
2015-05-13
深圳
