本章主要講解變量的使用方法以及應(yīng)用場景。

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

案例簡介

注冊面板中的用戶名輸入框，在光標(biāo)進(jìn)入輸入框以及離開輸入框時，輸入框的邊框都會有相應(yīng)的變色，并且有相應(yīng)的文字提示。

案例效果

1. 初始狀態(tài)

2. 焦點(diǎn)進(jìn)入時

3. 輸入為空時

4. 輸入已被注冊的用戶名時

5. 驗證通過時

以下是全部教程，請邊學(xué)邊做哦。

Axure RP 8教程：全局變量之賬號登錄驗證

1. 將元件庫拖入一個文半框內(nèi)嵌在方框矩形內(nèi)部。

2. 復(fù)制粘貼上相同的三個，并且選中文半框在檢查器填寫提示信息。

3. 提示信息按照圖中填寫完畢。

4. 選中文本框，勾選隱藏邊框（四個全部隱藏，美觀簡潔）

5. 選中矩形，把所有矩形的默認(rèn)初始顏色設(shè)置為黃色。

6. 在元件屬性中設(shè)置矩形邊框的“禁用”與“選中”的交互樣式。

• 禁用：邊框線條顏色為灰色
• 選中：邊框線條顏色為紅色

7. 設(shè)置矩形邊框的“禁用”與“選中”的交互樣式之后，勾選禁用。

8. 創(chuàng)建全局變量“UserName”，并將以及注冊的賬號設(shè)置為默認(rèn)值；為了避免混亂和誤判斷，我們需要把每個用戶名用特殊符號隔開。

用戶名：

?<Arthur><jack><Alice>

9. 選中用戶名文本框設(shè)置“獲得焦點(diǎn)”的用例，為了創(chuàng)建用例時便于辨別各個矩形或者文本框建議將各個部件命名（命名如下圖）。

設(shè)置動作“啟動”矩形“用戶名”，讓矩形顯示黃色邊框

10. 選中用戶名文本框設(shè)置“失去焦點(diǎn)時”的用例

11. 新增失去案例的條件，(if部件文字當(dāng)前部件=“”),表示輸入為空時。

12. 在設(shè)置好條件之后，設(shè)置選中值為真，即設(shè)置符合判斷條件（輸入為空）時動作為選中矩形“用戶名”讓其呈現(xiàn)紅色邊框。

13. 回到主界面添加一個提示矩形，命名為“提示”。

14. 繼續(xù)添加失去焦點(diǎn)的用例1中的設(shè)置，設(shè)置文本屬性為富文本，并且編輯文字。

15. 在富文本編輯文字中，輸入紅色的”請輸入用戶名”，則用例1編輯完畢。

16. 繼續(xù)編輯失去焦點(diǎn)用例，添加新用例“用例2”,設(shè)置用例條件 ?“if變量UserName包含部件文字當(dāng)前部件”。

方法一：

注：如果全局變量里有<Arthur>,那么當(dāng)輸入A，Ar，Art………到Arthur都會顯示賬號已經(jīng)存在，但是方法二可以避免這個問題。

方法二：

17. 按照用例1的方法設(shè)置用例2中的選中狀態(tài)值 用戶名=“真”，即設(shè)置符合判斷條件時的動作為“選中”矩形“用戶名”，讓其呈現(xiàn)紅色邊框，并且接著設(shè)置紅色文本“賬號已存在”，則用例2編輯完畢。

18. 設(shè)置失去焦點(diǎn)時的第三個用例“用例3”，用例3條件自動默認(rèn)為“Else if True”，此時應(yīng)該設(shè)置禁用用戶名，設(shè)置不滿足用例1和用例2的條件的時候，執(zhí)行動作為“禁用”矩形“用戶名”讓邊框呈現(xiàn)灰色。

19. 設(shè)置用例3的文本，內(nèi)容為綠色的“驗證通過”，用例3編輯完畢。

20. 因為在之前的操作步驟中有選中矩形“用戶名”的操作，所以當(dāng)驗證未通過后，光標(biāo)進(jìn)入文本框還會顯示選中時的樣式；所以，需要在文本框“獲取焦點(diǎn)時”事件的用例1中再添加一個設(shè)置，“取消選中”矩形“用戶名”。

21. 最后收工，對比一下用例。

22. 預(yù)覽效果如下

本文由 @Arthur 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議