本章主要講解變量的使用方法以及應用場景。

變量是在制作原型過程中不可缺少的內容之一，很多原型效果都是需要結合變量才可以實現。例如，跨頁面的交互以及一些需要獲取的元件文字，狀態，屬性參與的交互。

案例簡介

注冊面板中的用戶名輸入框，在光標進入輸入框以及離開輸入框時，輸入框的邊框都會有相應的變色，并且有相應的文字提示。

案例效果

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 協議