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

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

案例簡介

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

案例效果

1. 初始狀態(tài)

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

3. 輸入為空時(shí)

4. 輸入已被注冊(cè)的用戶名時(shí)

5. 驗(yàn)證通過時(shí)

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

Axure RP 8教程：全局變量之賬號(hào)登錄驗(yàn)證

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

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

3. 提示信息按照?qǐng)D中填寫完畢。

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

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

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

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

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

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

用戶名：

?<Arthur><jack><Alice>

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

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

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

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

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

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

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

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

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

方法一：

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

方法二：

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

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

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

20. 因?yàn)樵谥暗牟僮鞑襟E中有選中矩形“用戶名”的操作，所以當(dāng)驗(yàn)證未通過后，光標(biāo)進(jìn)入文本框還會(huì)顯示選中時(shí)的樣式；所以，需要在文本框“獲取焦點(diǎn)時(shí)”事件的用例1中再添加一個(gè)設(shè)置，“取消選中”矩形“用戶名”。

21. 最后收工，對(duì)比一下用例。

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

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

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