概述

1. 繪制一個注冊界面

2. 點擊 Verify Now，按鈕進入倒計時狀態

3. 進入下一步前判斷輸入合法性，如果不合法則給出提示

主要知識點有：

• Axure基礎部件的使用
• 動態面板創建也使用
• 頁面交互的使用
• 在頁面交互中使用條件判斷

1. 創建一個APP框圖

創建框圖可以用Axure自帶的部件組合，也可以利用現成的框架。Axure官網有付費的部件下載，網上也有不少現成的部件可以下載。
這里就是利用了一個現成的框架作為APP的款圖。

Axure提供的基礎部件比較全面，可以根據需求在部件庫里面選擇所需的部件。

基礎部件的組合可以滿足絕大多數原型設計的需求了。當然網上也有很多已經制作好的部件可供使用。
從外部獲得的部件，在 Widget(All Libraries)里面Load Library 進來就可以了。

2. 繪制手機號碼和驗證碼輸入框

1. 用基礎部件組成輸入框

• 標題用的是部件Label
• 輸入框用的是部件Text Field

2. 設置輸入框的提示文字

• 在 Hint Text 輸入提示文字
• 在 Hint Style 把文字樣式修改成灰色

3. 設置輸入框文字長度

• 設置Max Length為11,電話號碼輸入不能超過11位

3. 繪制發送短信驗證碼按鈕

1. 繪制按鈕
按鈕用的是部件 Button Shape

Button Shape 可以根據自己的需要改變成不同的按鈕形狀。

Axure還提供了修改部件樣式的功能，可以設置部件線條，填充顏色，修改字體等。

2. 把按鈕轉成動態面板
把按鈕轉換成動態面板。

轉換成動態面板后，可以在動態面板管理界面看到新增的動態面板。

動態面板是Axure原型制作中使用非常頻繁的一個元件，主要用途就是實現一些動態的交互效果。可以讓一個部件擁有不同的狀態，通過不同的觸發條件可以實現一個部件在各個狀態之間切換。

3. 為按鈕設置多個狀態
雙擊動態面板進入狀態模板設置界面。

• 編輯動態面板，修改動態面板的名字。
• 為動態面板增加5個狀態并修改名字，分別為Verify Code，60s，40s，20s，0s。

4. 繪制按鈕的每個狀態
進入Verify Code狀態，可以看到這個狀態下按鈕的狀態。

進入60s狀態，從Verify Code狀態復制按鈕過來。并把文字改成60s。

根據以上方法，依次設置40s，20s，0s。

5. 讓按鈕在各個狀態下切換
1) 選擇鼠標點擊按鈕的觸發條件
在部件交互和通告界面選擇動作的觸發條件。這里選擇OnClick觸發動作，表示通過鼠標點擊按鈕條件來觸發動作。

可以為部件設置的動作很多，可以根據字面意思猜測出能夠執行的動作。

2) 設置鼠標點擊按鈕的動作
雙擊進入動作執行設計界面，依次選擇：

• Set Panel State
• Set Verify Code Button state to

• Select the State選擇60s
  表示鼠標點擊后，動態面板狀態從Verify Code切換到60s這個狀態。也就是說，按鈕點擊后進入60s倒計時階段。

  
  

3) 設置倒計時動作
進入OnPanelStateChange動作設置界面，選擇Add Condition增加一個判斷條件。
設置狀態切換的動作的條件。增加一個條件，依次設置如下：

• State of panel
• Verify Code Button
• does not equals
• state
• Verify Code。
  意思為當Vrefiy Code Button這個部件的狀態不等于Verify Code時，執行動作。也就是部件狀態為Verify Code時即停止執行動作。

設置延時執行動作，依次設置：

• Wait
• Wati time設置為1000ms。
  設置延時1000ms執行動作。
  

依次設置其他狀態的變更。

3. 繪制下一步按鈕

1. 增加一個按鈕Next

2. 設置按鈕動作

我們在Next動作執行前，增加一個判斷電話號碼是否正確的判斷。

• 增加電話號碼輸入錯誤提示

增加一個動態面板位于電話號碼輸入框下方。

編輯錯誤消息狀態。設置狀態Error message，增加一個Label設置為“請輸入正確的電話號碼”。把Error message的Hidden*勾上，一開始沒錯誤時設置為隱藏的不需要顯示出來。

• 電話號碼合法性判斷

簡單把電話號碼是否合法限定為: * 13000000000 <= 電話號碼 < 20000000000 *

設置Next按鈕OnClick動作，為動作增加兩個條件:
if text on Phone Text Field is less than "13000000000"
or text on Phone Text Field is greater than or equals "20000000000"
即如果電話號碼不滿足合法性判斷時執行動作。

Phone Text Field 是電話號碼輸入框的名稱，這個是用戶自己設置的。為部件命名是一個很好的習慣，當頁面組件很多的時候可以快速找到需要的部件。

設置OnClick執行動作。依次設置：

• Show/Hide
• Phone Error Message
• 選擇 show
  輸入錯誤時，把Phone Error Message 顯示出來

• 執行Next按鈕動作
  為Next按鈕的OnClick動作在增加一個Case為Case2。依次選擇：
• Open Link
• Open in Current Window
• 選擇 Password界面，進入下一個界面
  即點擊按鈕后在原窗口打開Password界面。

Axure可以為動作增加多個Case。默認情況下不同的Case之間是 “ IF Case 1 Else if Case 2 .... Else if Case n ”的關系，Axure先判斷Case 1，滿足就執行Case 1，不滿足繼續判斷Case 2，以此類推。
也可以修改Case之間的關系。

修改后就變成了 “ IF Case 1 If Case 2 .... If Case n ”的關系了。

Axure實現APP注冊(1)-驗證手機頁面
Axure實現APP注冊(2)-設置密碼頁面
Axure實現APP注冊(3)-歡迎頁面

2015-05-13
深圳