概述
1. 繪制一個注冊界面
2. 點擊 Verify Now官辈，按鈕進入倒計時狀態(tài)
3. 進入下一步前判斷輸入合法性，如果不合法則給出提示
主要知識點有：
- Axure基礎(chǔ)部件的使用
- 動態(tài)面板創(chuàng)建也使用
- 頁面交互的使用
- 在頁面交互中使用條件判斷
1. 創(chuàng)建一個APP框圖
創(chuàng)建框圖可以用Axure自帶的部件組合找岖，也可以利用現(xiàn)成的框架。Axure官網(wǎng)有付費的部件下載沪编，網(wǎng)上也有不少現(xiàn)成的部件可以下載。
這里就是利用了一個現(xiàn)成的框架作為APP的款圖帖池。
Axure提供的基礎(chǔ)部件比較全面，可以根據(jù)需求在部件庫里面選擇所需的部件吭净。
基礎(chǔ)部件的組合可以滿足絕大多數(shù)原型設(shè)計的需求了睡汹。當(dāng)然網(wǎng)上也有很多已經(jīng)制作好的部件可供使用。
從外部獲得的部件寂殉，在 Widget(All Libraries)里面Load Library 進來就可以了囚巴。
2. 繪制手機號碼和驗證碼輸入框
1. 用基礎(chǔ)部件組成輸入框
- 標(biāo)題用的是部件Label
- 輸入框用的是部件Text Field
2. 設(shè)置輸入框的提示文字
- 在 Hint Text 輸入提示文字
- 在 Hint Style 把文字樣式修改成灰色
3. 設(shè)置輸入框文字長度
- 設(shè)置Max Length為11,電話號碼輸入不能超過11位
3. 繪制發(fā)送短信驗證碼按鈕
1. 繪制按鈕
按鈕用的是部件 Button Shape
Button Shape 可以根據(jù)自己的需要改變成不同的按鈕形狀。
Axure還提供了修改部件樣式的功能友扰，可以設(shè)置部件線條彤叉，填充顏色，修改字體等村怪。
2. 把按鈕轉(zhuǎn)成動態(tài)面板
把按鈕轉(zhuǎn)換成動態(tài)面板秽浇。
轉(zhuǎn)換成動態(tài)面板后，可以在動態(tài)面板管理界面看到新增的動態(tài)面板甚负。
動態(tài)面板是Axure原型制作中使用非常頻繁的一個元件柬焕，主要用途就是實現(xiàn)一些動態(tài)的交互效果∷笥颍可以讓一個部件擁有不同的狀態(tài)斑举，通過不同的觸發(fā)條件可以實現(xiàn)一個部件在各個狀態(tài)之間切換。
3. 為按鈕設(shè)置多個狀態(tài)
雙擊動態(tài)面板進入狀態(tài)模板設(shè)置界面病涨。
- 編輯動態(tài)面板富玷，修改動態(tài)面板的名字。
- 為動態(tài)面板增加5個狀態(tài)并修改名字既穆，分別為Verify Code凌彬，60s，40s循衰，20s铲敛，0s。
4. 繪制按鈕的每個狀態(tài)
進入Verify Code狀態(tài)会钝，可以看到這個狀態(tài)下按鈕的狀態(tài)伐蒋。
進入60s狀態(tài)，從Verify Code狀態(tài)復(fù)制按鈕過來迁酸。并把文字改成60s先鱼。
根據(jù)以上方法，依次設(shè)置40s奸鬓，20s焙畔，0s。
5. 讓按鈕在各個狀態(tài)下切換
1) 選擇鼠標(biāo)點擊按鈕的觸發(fā)條件
在部件交互和通告界面選擇動作的觸發(fā)條件串远。這里選擇OnClick觸發(fā)動作宏多，表示通過鼠標(biāo)點擊按鈕條件來觸發(fā)動作儿惫。
可以為部件設(shè)置的動作很多，可以根據(jù)字面意思猜測出能夠執(zhí)行的動作伸但。
2) 設(shè)置鼠標(biāo)點擊按鈕的動作
雙擊進入動作執(zhí)行設(shè)計界面肾请，依次選擇：
- Set Panel State
- Set Verify Code Button state to
-
Select the State選擇60s
表示鼠標(biāo)點擊后，動態(tài)面板狀態(tài)從Verify Code切換到60s這個狀態(tài)更胖。也就是說铛铁，按鈕點擊后進入60s倒計時階段。
3) 設(shè)置倒計時動作
進入OnPanelStateChange動作設(shè)置界面却妨，選擇Add Condition增加一個判斷條件饵逐。
設(shè)置狀態(tài)切換的動作的條件。增加一個條件彪标，依次設(shè)置如下：
- State of panel
- Verify Code Button
- does not equals
- state
-
Verify Code梳毙。
意思為當(dāng)Vrefiy Code Button這個部件的狀態(tài)不等于Verify Code時，執(zhí)行動作捐下。也就是部件狀態(tài)為Verify Code時即停止執(zhí)行動作。
設(shè)置延時執(zhí)行動作萌业，依次設(shè)置：
- Wait
-
Wati time設(shè)置為1000ms坷襟。
設(shè)置延時1000ms執(zhí)行動作。
依次設(shè)置其他狀態(tài)的變更生年。
3. 繪制下一步按鈕
1. 增加一個按鈕Next
2. 設(shè)置按鈕動作
我們在Next動作執(zhí)行前婴程，增加一個判斷電話號碼是否正確的判斷。
- 增加電話號碼輸入錯誤提示
增加一個動態(tài)面板位于電話號碼輸入框下方抱婉。
編輯錯誤消息狀態(tài)档叔。設(shè)置狀態(tài)Error message，增加一個Label設(shè)置為“請輸入正確的電話號碼”蒸绩。把Error message的Hidden*勾上衙四，一開始沒錯誤時設(shè)置為隱藏的不需要顯示出來。
- 電話號碼合法性判斷
簡單把電話號碼是否合法限定為: * 13000000000 <= 電話號碼 < 20000000000 *
設(shè)置Next按鈕OnClick動作患亿，為動作增加兩個條件:
if text on Phone Text Field is less than "13000000000"
or text on Phone Text Field is greater than or equals "20000000000"
即如果電話號碼不滿足合法性判斷時執(zhí)行動作传蹈。
Phone Text Field 是電話號碼輸入框的名稱，這個是用戶自己設(shè)置的步藕。為部件命名是一個很好的習(xí)慣惦界，當(dāng)頁面組件很多的時候可以快速找到需要的部件。
設(shè)置OnClick執(zhí)行動作咙冗。依次設(shè)置：
- Show/Hide
- Phone Error Message
- 選擇 show
輸入錯誤時沾歪，把Phone Error Message 顯示出來
-
執(zhí)行Next按鈕動作
為Next按鈕的OnClick動作在增加一個Case為Case2。依次選擇： - Open Link
- Open in Current Window
- 選擇 Password界面雾消，進入下一個界面
即點擊按鈕后在原窗口打開Password界面灾搏。
Axure可以為動作增加多個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實現(xiàn)APP注冊(1)-驗證手機頁面
Axure實現(xiàn)APP注冊(2)-設(shè)置密碼頁面
Axure實現(xiàn)APP注冊(3)-歡迎頁面
2015-05-13
深圳
