冷胖Axure8.0圖文教程案例分享（京東註冊交互原型）
大家好！很高興冷胖今天和大家見面了！今天給大家分享是Axure8.0電商註冊交互原型
知識點：條件設置、全局變量、函數、多條件判斷
版本系統：Axure版本8.0 系統win
這裡我們以（2017）京東的註冊為模板進行製作，見圖1。（如果大家去體驗天貓和京東的註冊時可以發現，註冊會員時會首先彈出<<用戶註冊協議和隱私政策>>內容，點擊同意後才能進行下一步，見圖2。把以前註冊協議用複選框默認選擇的方式給取代了，吐槽下就是與時俱進、符合國情、避免風險，捎帶手點個贊）
（圖1）
（圖2）
第一步 元件準備
拖拽一個矩形元件與文本框元件到設計區域，複製5組同樣的元件在設計區域，為了方便調整和複製可以進行矩形與文本框的組合，按照我們要做的模板樣式調整元件位置。
接下來我們做各輸入框的提醒元件，這裡我們用動態面板與文本框進行創建。分為以下內容：
用戶名提醒元件
創建動態面板命名為name_error ，給動態面板增加四個State分別命名為：❶“長度只能在4-20個字符之間”、❷“請輸入用戶名”、❸“用戶名不能是純數字，請重新輸入！”、❹“支持中文、字母、數字”，按名稱在每個State中用文本框元件輸入相應內容。
設置密碼提醒元件
創建動態面板命名為pwd_error，給動態面板增加五個State分別命名為：❶“長度只能在6-20個字符之間”、❷“有被盜風險,建議使用字母、數字和符號兩種及以上組合”、❸“安全強度適中，可以使用三種以上的組合來提高安全強度”、❹“你的密碼很安全”、❺“建議使用字母、數字和符號兩種及以上的組合，6-20個字符”。按名稱在每個State中利用文本框元件輸入相應內容。
設置確認密碼提醒元件
創建動態面板命名為pwd_confirm_error，給動態面板增加兩個State分別喝命名為：❶“兩次密碼輸入不一致”、❷“請再次輸入密碼”。按名稱在每個State中利用文本框元件輸入相應內容。
設置手機號提醒元件
創建動態面板命名為mobile_error，給動態面板增加兩個State分別命名為❶“完成驗證後，你可以用該手機登錄和找回密碼”、❷“格式有誤”。按名稱在每個State中利用文本框元件輸入相應內容。
設置驗證碼提醒元件
創建動態面板命名為code_error，給動態面板增加三個State分別命名為❶“請輸入圖片驗證碼”、❷“驗證碼不正確或已過期”、❸“看不清？點擊圖片更換驗證碼”。按名稱在每個State中利用文本框元件輸入相應內容。
完成後我們給所有元件進行命名，見圖3。code元件與login元在上面沒有提到大家不要忘了自己添加上哦，利用矩形元件添加即可。
圖3
第二步 元件調整
首先我們看到模板樣式中，文本輸入框沒有邊框且點擊後獲取焦點，所以我們設置每個文本框屬性為“隱藏邊框”，【隱藏提示觸發】設置為“獲取焦點”。
我們發現註冊時每個邊框內容如果輸入有誤時邊框顏色會變為紅色，所以我們設置每個矩形選中狀態【線段顏色】為紅色FF0000。
默認狀態下所有提示元件是不顯示的，所以我們設置所有提示元件動態面板為隱藏狀態。
同樣默認狀態下所有輸入內容確認的小圖標（confirm），都是不顯示的，我們同樣設置為隱藏狀態。
第三步 交互設置
一、首先我們來做用戶名的交互效果主要效果有以下幾個內容：
鼠標點擊輸入時顯示提示元件內容“支持中文、字母、數字、“-” “_” 的組合，4-20個字符”。
文本框中輸入純數字時顯示提示元件內容“用戶名不能是純數字，請重新輸入！”。
輸入符合條件的內容後顯示確認小圖標confirm。
輸入字符小於4個大於20個時顯示提示元件內容“長度只能在4-20個字符之間”。
輸入用戶名已被註冊時提示已被註冊並給出建議的用戶名（此交互在本次案例中未涉及，冷胖會在以後在案例中給大家分享）
我們知道了要做的交互效果接下來我們開始吧：
設置name_inputf元件獲取焦點事件，選擇name_input元件在元件【屬性】面板中雙擊【獲取焦點時】事件，在彈出的【用例編輯器】點擊【設置面板狀態】在【配置動作中】選擇name_error動態面板，設置選擇狀態為“支持中文、字母、數字、“-” “_” 的組合，4-20個字符”，勾選“如果隱藏則顯示面板”，見圖4。完成後點擊左側，元件【顯示/隱藏】選擇元件name_confirm,設置可見性為隱藏，見圖5。添加動作【取消選中】【配置動作】選擇name_box，值為false點擊確定完成設置，見圖6。
圖4
圖5
圖6
設置name_input文本改變時效果，選擇name_input元件在元件【屬性】面中雙擊【失去焦點時】事件，在彈出的【用例編輯器】單擊【添加條件】設置name_input是數字時條件，見圖7。點擊確認後單擊【設置面板狀態】在右側配置動作選擇name_error動態面板，設置選擇狀態為“用戶名不能是純數字，請重新輸入！”，勾選“如果隱藏則顯示面板”，見圖8。添加動作【選中】【配置動作】選擇name_box，值為true，見圖9。
圖7
圖8
圖9
添加name_input元件【失去焦點時】事件2（Cacs2）,【用例編輯器】中添加條件name_input元件文字長度值<4,條件name_input元件文字長度值>20,注意這裡需要設置符合條件為【任何】，見圖10。點確定設置name_error動態面板選擇狀“長度只能在4-20個字條之間”，勾選“如果隱藏則顯示面板”，見圖11。同樣添加動作【選中】【配置動作】選擇name_box，值為true，見圖12。完成後點擊確認。
圖10
圖11
圖12
添加name_input元件【失去焦點時】事件3（Cacs3）【用例編輯器】中添加條件name_input元件文字長度值>=4,條件name_input元件文字長度值<=20、條件name_input元件文文字不是數字，見圖13。點確定設置元件顯示name_confirm,見圖14。設置隱藏動態面板面板name_error，見圖15。添加動作【取消選中】【配置動作】name_box設置值為false，見圖16。完成後點擊確定。
圖13
圖14
圖15
圖15
圖16
添加name_input元件【失去焦點時】事件4（Cacs4）【用例編輯器】中添加條件name_input元件文字name_input值為空時，見圖17。設置取消選中name_box，值為flase，見圖18。設置隱藏動態面板面板name_error，見圖19。完成後點擊確定。
圖17
圖18
圖19
現在name_input元件【失去焦點時】事件如圖20所示，第一個用例中條件是If語句，而其餘的三個均是Else if語句。區別在於，在Axure中多用例是自上至下按順序執行的。If結構語句是始終執行的。Else if結構語句是它上面一個用例未滿足條件時，則執行該用例；如果滿足條件就不再向下執行。也就是如果Case1滿足條件時，就不再向下執行Case2；如果Case1未滿足條件時，則向下執行Case2。這裡我們四個用例始終執行所以把其餘的三個修改為If語句，右擊case2在彈出的對話框中選最的一項“轉換為<If>或<Else if>”見圖21，將case3、case4均進行修改。
圖20
圖21
上面我們就已經把用戶名輸入文本框的交互效果完成了，點擊預覽來驗證下吧。冷胖子要去喝杯水你也休息下吧！
【簡述】上面我們主要是利用當文本框內容發生變化時動態面板的聯動效果，及利用條件限制文本框輸入內容來與動態面板發生聯動事件的效果。
通過以上的學習相信你已經可以獨立完成設置密碼這個文本框的交互效果了。那麼就自己動手來做下吧。
注意的是設置密碼與確認密碼兩個元件的事件要有聯動，具體事件交互思路如下：
1、設置密碼pwd_input文本改變時事件，
首先考慮添加輸入密碼時，在什麼情況下會提醒“有被盜風險,建議使用字母、數字和符號兩種及以上組合”，即當輸入密碼長度大於5個小於11個且輸入的內容為純文字或純字母時，對是的那麼我就可以添加第一個條件事件了，同時注意錯誤提醒時pwd_box元件應當處於選中狀態，還要考慮一個情況就是如果修改已經填入符合條件的密碼時pwd_confirm元件是顯示的，這裡要進行隱藏。
然後我們來想下輸入密碼時在什麼情況下會提醒“安全強度適中，可以使用三種以上的組合來提高安全強度”，這裡分為兩個情況，一種是純數字或純字母長度大於10個的時候，另一種情況是當輸入內容不是純數字且不是純字母輸入長度大於5個小於11個的時候。根據這兩種情況分別添加條件事件即可，同時不要忘了根據案例來看，密碼安全適中時是允許通過的，那麼這裡需要將pwd_box的選中狀態取消，且顯示pwd_confirm元件。
接下就是在輸入密碼時什麼情況下提示“你的密碼很安全”這個應該屬於高級別了把，即當輸入的密碼長度大於10個，不是純數字也不是純字母。根據這個情況添加條件事件即可，同樣不要忘了將pwd_box的選中狀態取消，且顯示pwd_confirm元件，這樣就會實時的根據我們輸入的內容來判定顯示了。
另外我們這裡不要忽略一個小的細節，那就是當輸入密碼長度小於6個時會提醒“建議使用字母、數字和符號兩種及以上的組合，6-20個字符”那麼我同樣添加一個條件事件即可，同時將pwd_box的設置為選中狀態，且隱藏pwd_confirm元件。這樣我們文本改變時的事件就都添加完成了，將<Else if>語句修改為<If>預覽下看看效果吧。
2、設置密碼pwd_input文本獲取焦點時事件，我們看到當文本框獲取焦點時提示“建議使用字母、數字和符號兩種及以上的組合，6-20個字符”這裡我們添加相應事件即可但要注意的是我們在輸入內容時同樣屬於獲取焦點，那麼事件就會衝突，所有這裡需要添加條件為當pwd_input內容為空時顯示。
3、設置密碼pwd_input文本失去焦點時事件。第一種情況內容為空時取消選中pwd_box、隱藏pwd_confirm、隱藏pwd_error。第二種情況，輸入內容文字長度小於6大於等於1時，我們要提醒用戶“長度只能在6-20個字符之間”同時pwd_box元件為選中狀態。第三種情況，輸入內容長度為大於5個小於11個的純數字或字符時需提示“有被盜風險,建議使用字母、數字和符號兩種及以上組合”案例中提示的文字為紅色，這裡我們給pwd_error添加一個State內容為“有被盜風險,建議使用字母、數字和符號兩種及以上組合”字體為紅色，設置顯示該State即可。
4、設置密碼pwd_input文本失去焦點時事件，與pwd_confirm_input的聯動效果，這裡需要考慮當pwd_confirm_input已經有了內容，這時修改pwd_input後pwd_input元件失去焦點情況有兩種，一種是內容相同一種是內容不同。相同時顯示pwd_confirm_confirm元件，隱藏pwd_confirm_error元件，不同時隱藏pwd_confirm_confirm元件，取消選中pwd_confirm_box，設置pwd_confirm_error顯示“兩次密碼輸入不一致”。
以上我們對設置密碼pwd_input元件的所有交互事件就都完成了，是不是有些小激動預覽看下效果吧。接下來我們來給pwd_confirm_input元件設置交互事件。
5、確認密碼pwd_confirm_input獲取焦點時事件，當pwd_confirm內容為空時需要提示“請再次輸入密碼”，當pwd_confirm內容不為空時需要提示“兩次密碼輸入不一致”，根據以上條件為pwd_confirm_input添加條件事件。
6、確認密碼pwd_confirm_input失去焦點時事件，當pwd_confirm_input內容等於pwd_confirm時，顯示pwd_confirm_confirm元件，隱藏pwd_confirm_error動態面板，同時取消pwd_confirm_box元件選中狀態。當pwd_confirm_input內容不等於pwd_confirm時，顯示pwd_confirm_error動態面板提示兩次密碼輸入不一致，設置pwd_confirm_box元件為選中狀態。當pwd_confirm_input元件值為空時，隱藏pwd_confirm_error動態面板，同時取消pwd_confirm_box元件選中狀態。
以上我們對確認密碼pwd_confirm_input的交互事件也已經完成了。不要忘了要將<Else if>語句修改為<If>。因為涉及的知識點與前面用戶名設置時的大體相同，所以這裡就沒有細緻的截圖講解，如果有操作上的問題歡迎向冷胖諮詢。
二、接下來和大家分享手機號碼驗證的交互效果
首頁我們需要確認的我們要設置的是輸入手機號的對話框，那麼這裡應該只允許用戶輸入11位字符，驗證時需要驗證用戶輸入的值為11位純數字且前三位為手機號段，這裡我們設置的號段為前兩位是13、15、17、18後9位為任何數字的11為數字。
1、設置mobile_input元件屬性最大長度為11，見圖22
圖21
上面我們就已經把用戶名輸入文本框的交互效果完成了，點擊預覽來驗證下吧。冷胖子要去喝杯水你也休息下吧！
【簡述】上面我們主要是利用當文本框內容發生變化時動態面板的聯動效果，及利用條件限制文本框輸入內容來與動態面板發生聯動事件的效果。
通過以上的學習相信你已經可以獨立完成設置密碼這個文本框的交互效果了。那麼就自己動手來做下吧。
注意的是設置密碼與確認密碼兩個元件的事件要有聯動，具體事件交互思路如下：
1、設置密碼pwd_input文本改變時事件，
首先考慮添加輸入密碼時，在什麼情況下會提醒“有被盜風險,建議使用字母、數字和符號兩種及以上組合”，即當輸入密碼長度大於5個小於11個且輸入的內容為純文字或純字母時，對是的那麼我就可以添加第一個條件事件了，同時注意錯誤提醒時pwd_box元件應當處於選中狀態，還要考慮一個情況就是如果修改已經填入符合條件的密碼時pwd_confirm元件是顯示的，這裡要進行隱藏。
然後我們來想下輸入密碼時在什麼情況下會提醒“安全強度適中，可以使用三種以上的組合來提高安全強度”，這裡分為兩個情況，一種是純數字或純字母長度大於10個的時候，另一種情況是當輸入內容不是純數字且不是純字母輸入長度大於5個小於11個的時候。根據這兩種情況分別添加條件事件即可，同時不要忘了根據案例來看，密碼安全適中時是允許通過的，那麼這裡需要將pwd_box的選中狀態取消，且顯示pwd_confirm元件。
接下就是在輸入密碼時什麼情況下提示“你的密碼很安全”這個應該屬於高級別了把，即當輸入的密碼長度大於10個，不是純數字也不是純字母。根據這個情況添加條件事件即可，同樣不要忘了將pwd_box的選中狀態取消，且顯示pwd_confirm元件，這樣就會實時的根據我們輸入的內容來判定顯示了。
另外我們這裡不要忽略一個小的細節，那就是當輸入密碼長度小於6個時會提醒“建議使用字母、數字和符號兩種及以上的組合，6-20個字符”那麼我同樣添加一個條件事件即可，同時將pwd_box的設置為選中狀態，且隱藏pwd_confirm元件。這樣我們文本改變時的事件就都添加完成了，將<Else if>語句修改為<If>預覽下看看效果吧。
2、設置密碼pwd_input文本獲取焦點時事件，我們看到當文本框獲取焦點時提示“建議使用字母、數字和符號兩種及以上的組合，6-20個字符”這裡我們添加相應事件即可但要注意的是我們在輸入內容時同樣屬於獲取焦點，那麼事件就會衝突，所有這裡需要添加條件為當pwd_input內容為空時顯示。
3、設置密碼pwd_input文本失去焦點時事件。第一種情況內容為空時取消選中pwd_box、隱藏pwd_confirm、隱藏pwd_error。第二種情況，輸入內容文字長度小於6大於等於1時，我們要提醒用戶“長度只能在6-20個字符之間”同時pwd_box元件為選中狀態。第三種情況，輸入內容長度為大於5個小於11個的純數字或字符時需提示“有被盜風險,建議使用字母、數字和符號兩種及以上組合”案例中提示的文字為紅色，這裡我們給pwd_error添加一個State內容為“有被盜風險,建議使用字母、數字和符號兩種及以上組合”字體為紅色，設置顯示該State即可。
4、設置密碼pwd_input文本失去焦點時事件，與pwd_confirm_input的聯動效果，這裡需要考慮當pwd_confirm_input已經有了內容，這時修改pwd_input後pwd_input元件失去焦點情況有兩種，一種是內容相同一種是內容不同。相同時顯示pwd_confirm_confirm元件，隱藏pwd_confirm_error元件，不同時隱藏pwd_confirm_confirm元件，取消選中pwd_confirm_box，設置pwd_confirm_error顯示“兩次密碼輸入不一致”。
以上我們對設置密碼pwd_input元件的所有交互事件就都完成了，是不是有些小激動預覽看下效果吧。接下來我們來給pwd_confirm_input元件設置交互事件。
5、確認密碼pwd_confirm_input獲取焦點時事件，當pwd_confirm內容為空時需要提示“請再次輸入密碼”，當pwd_confirm內容不為空時需要提示“兩次密碼輸入不一致”，根據以上條件為pwd_confirm_input添加條件事件。
6、確認密碼pwd_confirm_input失去焦點時事件，當pwd_confirm_input內容等於pwd_confirm時，顯示pwd_confirm_confirm元件，隱藏pwd_confirm_error動態面板，同時取消pwd_confirm_box元件選中狀態。當pwd_confirm_input內容不等於pwd_confirm時，顯示pwd_confirm_error動態面板提示兩次密碼輸入不一致，設置pwd_confirm_box元件為選中狀態。當pwd_confirm_input元件值為空時，隱藏pwd_confirm_error動態面板，同時取消pwd_confirm_box元件選中狀態。
以上我們對確認密碼pwd_confirm_input的交互事件也已經完成了。不要忘了要將<Else if>語句修改為<If>。因為涉及的知識點與前面用戶名設置時的大體相同，所以這裡就沒有細緻的截圖講解，如果有操作上的問題歡迎向冷胖諮詢。
二、接下來和大家分享手機號碼驗證的交互效果
首頁我們需要確認的我們要設置的是輸入手機號的對話框，那麼這裡應該只允許用戶輸入11位字符，驗證時需要驗證用戶輸入的值為11位純數字且前三位為手機號段，這裡我們設置的號段為前兩位是13、15、17、18後9位為任何數字的11為數字。
1、設置mobile_input元件屬性最大長度為11，見圖22
圖22
2、設置mobile_input元件事件。
當mobile_input內容為空獲取焦點時顯示提示內容“完成驗證後，你可以用該手機登錄和找回密碼”這裡我們添加mobile_input【獲取焦點時】事件設置條件mobile_input內容為空時顯示mobile_error動態面板顯示“完成驗證後，你可以用該手機登錄和找回密碼”，見圖23、圖24。
圖23
圖24
當mobile_input內容為失去焦點時事件，失去焦點時需要判定輸入內容是否正確，這裡我們首先設置正確時的情況事件。為mobile_input添加【失去焦點時】事件，設置條件mobile_input是數字 、mobile_input元件長度值為11、前兩位值是13、15、17、18（我們用到字符串函數substr(start,length) 函數公式為：[[this.text.substr(0,2)]]，其中this為當前元件對象，text為文字、substr（0，2）為位置為從0開始的兩位字符，合起來就是獲取當前元件文字中從0開始的前兩位字符）步驟見圖25、26、27、28、29、30。當滿足以上條件後我們設置的是顯示mobile_confirm元件、隱藏mobile_error動態面板，設置mobile_box為取消選中狀態。
設置元件長度和限制為數字
圖25
設置元件值前兩位
圖26
圖27
圖28
圖29
圖30
接下來我們來設置當輸入內容不正確時，那們我只複製正確時的事件只要將條件中的是改為否，等於改為不等於就好了，然後設置mobile_box為選中狀態，設置mobile_error動態面板顯示“格式有誤”。這樣我們就完成手機號的設置。這裡我們閹割了實例中選擇國家的交互，在後面冷胖也會帶給大家的。怎麼突然感覺欠大家好多了呢，O(∩_∩)O哈哈~等等差點忘了我們還有一個交互事件，那就是失去焦點且mobile_input內容為空時mobile_error顯示“完成驗證後，你可以用該手機登錄和找回密碼”，這樣我們就完成了。相信大家通過以上的學習這個就是毛毛雨了。
三、我們來設置驗證碼的交互事件。
首先我沒來設置code獲取4位隨機的數字加字母顯示且點擊後進行變換。
1、我們在設計區域添加一個文本元件並輸入內容“ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz1234567890”這個文本元件就是我們驗證碼的號碼源將其命名為source。
2、給code元件添加頁面載入時顯示驗證碼事件
我們在code元件屬性裡點擊更多事件，找到【載入時】單擊。添加設置文本動作，選擇code元件然後點擊【fx】按鈕，打開【編輯文本】的界面，見圖31。
圖31
我們這裡用到隨機數的函數random()、向下取整函數floor(x)，獲取字符串中指定位置的字符函數charAt(index)。我們首先來看獲取字符的位置指定source的隨機位置的整數。隨機整數我們字符一共為62個字符那麼這裡我們隨機位置就是，隨機數*62，所以我們獲取一個字符的公式為[[LVAR1.charAt(Math.floor(Math.random()*62))]]這們我們如果要獲取4個只要複製四次即可，見圖32
圖32
3、我們在點擊code元件時需要更換驗證碼，就是需要變更隨機獲取的值，這裡我們給code添加鼠標點擊時事件，複製已經設置好的載入時事件到鼠標點擊時即可，複製完成後將 source原件設置為隱藏。這個我們驗證碼的功能就完成了。但是我們還要對code_input輸入的值進行驗證。那麼我們繼續進行。
4、code_input事件包含，
當獲取焦點且內容為空點擊code_input元件輸入內容時，code_error動態面板顯示“看不清？點擊圖片更換驗證碼”
code_input元件內容不等於code元件內容時時點擊Obtain元件提示“驗證碼不正確或已過期”
code_input為空時點擊Obtain元件提示“請輸入圖片驗證碼”
知道了上面在事件，相信通過我們上面的分享你也可以獨立完成了。這裡就不給大家詳細介紹了。就當給大家的作業吧
鳴謝！到這裡本期京東註冊交互原型的所有內容就和大家分享完了，冷胖沒有忘了欠大家的內容哦，下期我會給大家呈現，歡迎大家關注冷胖。冷胖只做最新的案例分享，如果大家有想要學習的可以和冷胖說，我會盡量滿足大家的需求。我們下一期見！
因為這裡不讓放網盤鏈接那麼有想要原型的就評論留言吧
相關推薦
