一只level1的產品汪凄杯，找一個地方错洁，有日記本，有輸入鍵盤盾舌，有思想墓臭。開始記錄自己的學習過程蘸鲸，加深對內容的理解妖谴，更期待通過分享交流，自己學會更多方位地思考酌摇。

?????????????????????????????????????????????????? ? ? ? ? 分割線 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

登錄注冊作為app最基礎的一步膝舅，所以Axure8.0的學習從這里開始，打開Axure8.0：

Step1：新建一個文件窑多，在站點地圖里分別添加各個頁面的名稱仍稀。因為我是事先做好了各個頁面的大致設計，所以我在sitemap里依次添加并命名好各個頁面埂息。

Step2：雙擊“登錄頁”技潘，進入該頁面的編輯模式。從右側的元件庫中拖入兩個個文本框元件千康，一個標簽文本享幽；

文本框元件1：作為手機號碼輸入框，將其命名為phone_login, 然后調整樣式至去除邊框拾弃，填充色吸取背景底色值桩；調整輸入框屬性：類型為手機號碼，輸入暗文“請輸入手機號碼”豪椿，設置當獲取焦點時暗文消失奔坟。

文本框元件2：作為密碼輸入框携栋，調整樣式同上，命名為psd_login;

標簽文本1：作為錯誤提示的文本顯示區(qū)域咳秉，在樣式里設置文本左對齊顯示婉支，字體大小調整為12，顏色為紅色澜建，并將其設置為隱（Hidden)磅摹；

Step3：從元件庫拖出熱區(qū)元件，調整大小正好覆蓋在下一步按鈕上霎奢，將其命名為btn_login; 同樣的方式將“快速注冊”和“忘記密碼”轉化為熱區(qū)操作户誓，分別命名為btn_register，btn_forgetpsd;

Step4：接下來就依次添加登錄頁面一些常見的交互操作：

test case：手機號碼：18811112222幕侠；密碼：12345678

（1）當正確輸入手機號碼和密碼時帝美，點擊下一步，跳轉至app首頁晤硕；點擊熱區(qū)“btn_login”悼潭，選擇右側交互面板中的“鼠標單擊時”，會出現(xiàn)如下圖的用例編輯對話框舞箍。此時可以開始編輯用例舰褪。

點擊“添加條件”，如下圖疏橄，該操作表示添加的條件為：

用戶名==“18811112222” 同時密碼==“12345678”（符合test case的條件）

點擊左側“添加動作”中的“打開鏈接”占拍，在右側的“配置動作”中選擇“app首頁”，如下圖捎迫，點擊“確定”后成功登錄的case就完成了晃酒。

（2）當輸入的手機號碼不正確時，提示“請輸入正確的手機號碼窄绒！” 簡單把正確的手機號碼格式應該是介于13000000000和20000000000間的數列并不能為空贝次。當鼠標焦點移至密碼輸入框時，判斷手機號碼輸入是否正確彰导。

點擊密碼輸入框“psd_login”,選擇右側交互面板中的”獲取焦點“時蛔翅，

點擊”添加條件”如下圖，該操作表示的添加條件為位谋，輸入的手機號碼的文本序列小于等于13000000000山析，或大于等于20000000000，或為空時倔幼，滿足以下任一條件即可, 選擇滿足“Any”即表示滿足以下任一條件盖腿，

點擊“添加動作”中的“顯示/隱藏”，“配置動作”勾選“wrong_tip”, 再在“添加動作”中選擇“設置文本”，“配置動作”中選擇“wrong_tip”翩腐，設置其值為“請輸入正確的手機號碼鸟款！”

（3）當焦點回到手機號碼輸入框時，上述提示消失茂卦。

點擊密碼輸入框“psd_login”,選擇右側交互面板中的”獲取焦點“時何什，點擊“添加動作”中的“顯示/隱藏”，“配置動作”勾選“wrong_tip”, 隱藏提示即可等龙。

（4）當密碼輸入為空時或密碼輸入不正確時处渣，點擊“下一步”，提示“請輸入正確的密碼!”蛛砰，同時焦點回到密碼輸入框里罐栈。添加條件步驟同上，添加的具體條件如圖（下圖為密碼為空的狀態(tài)）：

（5）當輸入的手機號碼和密碼都為空時點擊“下一步”提示“手機號和密碼輸入不能為空泥畅！”荠诬。并設置焦點回到手機號碼輸入框，case如下圖：

Step5：接下來是注冊頁面的一些相關交互位仁，輸入手機號碼和驗證碼的交互及輸入判斷提示和登錄的處理方法類似柑贞，在此頁面不再重復。主要列舉一下注冊常見的發(fā)送驗證碼聂抢，驗證碼倒計時及重新發(fā)送的3個交互钧嘶。

首先在驗證碼的對應區(qū)域添加一個“發(fā)送驗證碼”的按鈕，然后將其裝換為動態(tài)面板琳疏，然后在該動態(tài)面板上添加“倒計時”“重新發(fā)送”兩個狀態(tài)有决。

雙擊進入各個狀態(tài)進行編輯，在面板區(qū)域添加按鈕重新發(fā)送轿亮；“倒計時”狀態(tài)需做特別的處理疮薇，在按鈕上加入一個文本框元件，將其命名為“time” ,并處理其樣式和按鈕一致我注。PS: time元件主要用于處理倒計時數秒的處理（以10s倒計時為例）。

(1）點擊”發(fā)送驗證碼“按鈕迟隅，選擇”單擊“時但骨，進入用例編輯對話框。選擇”添加條件“下的設置面板狀態(tài)智袭，將發(fā)送驗證碼的狀態(tài)切換至倒計時奔缠，并將倒計時妞按鈕里的”time”值設置，等待1000ms, 設置time的值為29（設置為29可以觸發(fā)倒計時交互）吼野。

（2）倒計時交互設置：進入到“倒計時”面板中校哎，選中“time”文本框，雙擊“當文本改變時”，進入用例編輯對話框闷哆，添加條件腰奋，如果time的值大于等于1時，等待1000ms抱怔，添加條件劣坊，設置“time>=1”的文本值。

然后添加每過1秒屈留，數字減1局冰。在這里需要用到局部變量的概念，點擊fx, 添加局部變量LVAR1, 設置函數[[LVAR1-1]]灌危，點擊確認康二。

添加條件，當“time”部件文字等于0時勇蝙，動態(tài)面板切換至”重新發(fā)送“狀態(tài)赠摇。

（3）設置重新發(fā)送的觸發(fā)交互，選擇“重新發(fā)送”按鈕浅蚪，設置“點擊”時藕帜，設置time的值為10時，設置面板狀態(tài)切換至倒計時惜傲。

倒計時效果參考：http://www.woshipm.com/rp/220599.html

我的原型下載地址： http://pan.baidu.com/s/1slw3FZ3 密碼: p3xm

歡迎大家的吐槽和指導洽故，小女子拜謝了！