起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure RP 8教程：全局變量之賬號登錄驗證
本章主要講解變量的使用方法以及應用場景。
變量是在制作原型過程中不可缺少的內容之一，很多原型效果都是需要結合變量才可以實現。例如，跨頁面的交互以及一些需要獲取的元件文字，狀態，屬性參與的交互。
案例簡介
注冊面板中的用戶名輸入框，在光標進入輸入框以及離開輸入框時，輸入框的邊框都會有相應的變色，并且有相應的文字提示。
案例效果
1. 初始狀態
2. 焦點進入時
3. 輸入為空時
4. 輸入已被注冊的用戶名時
5. 驗證通過時
以下是全部教程，請邊學邊做哦。
Axure RP 8教程：全局變量之賬號登錄驗證
1. 將元件庫拖入一個文半框內嵌在方框矩形內部。
2. 復制粘貼上相同的三個，并且選中文半框在檢查器填寫提示信息。
3. 提示信息按照圖中填寫完畢。
4. 選中文本框，勾選隱藏邊框（四個全部隱藏，美觀簡潔）
5. 選中矩形，把所有矩形的默認初始顏色設置為黃色。
6. 在元件屬性中設置矩形邊框的“禁用”與“選中”的交互樣式。
- 禁用：邊框線條顏色為灰色
- 選中：邊框線條顏色為紅色
7. 設置矩形邊框的“禁用”與“選中”的交互樣式之后，勾選禁用。
8. 創建全局變量“UserName”，并將以及注冊的賬號設置為默認值；為了避免混亂和誤判斷，我們需要把每個用戶名用特殊符號隔開。
用戶名：
?<Arthur><jack><Alice>
9. 選中用戶名文本框設置“獲得焦點”的用例，為了創建用例時便于辨別各個矩形或者文本框建議將各個部件命名（命名如下圖）。
設置動作“啟動”矩形“用戶名”，讓矩形顯示黃色邊框
10. 選中用戶名文本框設置“失去焦點時”的用例
11. 新增失去案例的條件，(if部件文字當前部件=“”),表示輸入為空時。
12. 在設置好條件之后，設置選中值為真，即設置符合判斷條件（輸入為空）時動作為選中矩形“用戶名”讓其呈現紅色邊框。
13. 回到主界面添加一個提示矩形，命名為“提示”。
14. 繼續添加失去焦點的用例1中的設置，設置文本屬性為富文本，并且編輯文字。
15. 在富文本編輯文字中，輸入紅色的”請輸入用戶名”，則用例1編輯完畢。
16. 繼續編輯失去焦點用例，添加新用例“用例2”,設置用例條件 ?“if變量UserName包含部件文字當前部件”。
方法一：
注：如果全局變量里有<Arthur>,那么當輸入A，Ar，Art………到Arthur都會顯示賬號已經存在，但是方法二可以避免這個問題。
方法二：
17. 按照用例1的方法設置用例2中的選中狀態值 用戶名=“真”，即設置符合判斷條件時的動作為“選中”矩形“用戶名”，讓其呈現紅色邊框，并且接著設置紅色文本“賬號已存在”，則用例2編輯完畢。
18. 設置失去焦點時的第三個用例“用例3”，用例3條件自動默認為“Else if True”，此時應該設置禁用用戶名，設置不滿足用例1和用例2的條件的時候，執行動作為“禁用”矩形“用戶名”讓邊框呈現灰色。
19. 設置用例3的文本，內容為綠色的“驗證通過”，用例3編輯完畢。
20. 因為在之前的操作步驟中有選中矩形“用戶名”的操作，所以當驗證未通過后，光標進入文本框還會顯示選中時的樣式；所以，需要在文本框“獲取焦點時”事件的用例1中再添加一個設置，“取消選中”矩形“用戶名”。
21. 最后收工，對比一下用例。
22. 預覽效果如下
本文由 @Arthur 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
符號弄不進去 ??
樓主，你確定16中的方法二可以避免你所說的問題么？為什么我的不行……
這個符號害了我~~~~(>_<)~~~~
搞定了嗎 ??
怎么樣才能聯系上作者捏