AxureRP9互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)變量與表達(dá)式

使用變量

全局變量是一個(gè)數(shù)據(jù)容器,就像一個(gè)硬盤,可以把需要地內(nèi)容存入,能隨身攜帶。在需要地時(shí)候讀取出來(lái)使用。全局變量地作用范圍為一個(gè)頁(yè)面,即在"頁(yè)面"面板一個(gè)節(jié)點(diǎn)（不包含子節(jié)點(diǎn)）內(nèi)有效,而"全局"也不是指整個(gè)原型文件內(nèi)地所有頁(yè)面,所以有一定地局限性。全局變量

使用變量

在"交互編輯器"對(duì)話框單擊"設(shè)置變量值"動(dòng)作選項(xiàng),彈出下圖所示面板。默認(rèn)情況下該面板只包含一個(gè)全局變量:OnLoadVariable。勾選OnLoadVariable復(fù)選框,用戶可以在對(duì)話框地右側(cè)設(shè)置全局變量值。全局變量

使用變量

全局變量值變量值變量值長(zhǎng)度元件文字焦點(diǎn)元件文字元件文字長(zhǎng)度

使用變量

全局變量被選項(xiàng)禁用狀態(tài)選狀態(tài)面板狀態(tài)

使用變量

全局變量單擊"交互編輯器"對(duì)話框右側(cè)地"設(shè)置動(dòng)作"下地"目的"下拉列表,單擊彈出地下拉列表地"添加變量"選項(xiàng),即可創(chuàng)建一個(gè)新地全局變量。在彈出地"全局變量"對(duì)話框單擊"添加"按鈕,即可新建一個(gè)全局變量。

使用變量

全局變量用戶可以重新對(duì)變量命名,以便于查找與使用。用戶可以通過單擊"上移"與"下移"按鈕實(shí)現(xiàn)調(diào)整全局變量順序地操作。單擊"刪除"按鈕將刪除選地全局變量。單擊"確定"按鈕,即可完成全局變量地創(chuàng)建。

課堂操作

使用全局變量新建一個(gè)AxureRP9文檔。分別將"一級(jí)標(biāo)題"元件與"主要按鈕"元件拖曳到頁(yè)面。分別將兩個(gè)元件命名為"標(biāo)題"與"提交",修改元件文本。

課堂操作

使用全局變量在"交互編輯器"對(duì)話框選擇"頁(yè)面載入時(shí)"事件。選擇"設(shè)置變量值"動(dòng)作。

課堂操作

使用全局變量單擊"添加變量"選項(xiàng),在彈出地"全局變量"對(duì)話框單擊"添加"按鈕,新建一個(gè)名為"wenzi"地全局變量。單擊"確定"按鈕,設(shè)置動(dòng)作地各項(xiàng)參數(shù)如下圖所示。

課堂操作

使用全局變量單擊"確定"按鈕,"交互"面板如下圖所示。選擇按鈕元件,在"交互編輯器"對(duì)話框添加"單擊時(shí)"事件,再添加"設(shè)置文本"動(dòng)作,選擇"提交"按鈕。

課堂操作

使用全局變量在"交互編輯器"對(duì)話框右側(cè)設(shè)置各項(xiàng)參數(shù)。單擊"確定"按鈕,再單擊"預(yù)覽"按鈕,頁(yè)面預(yù)覽效果如下圖所示。

課堂操作

局部變量—添加局部變量用戶可以在"交互編輯器"對(duì)話框"設(shè)置動(dòng)作"下添加局部變量。單擊"值"文本框右側(cè)地圖標(biāo),彈出"編輯文本"對(duì)話框。

課堂操作

局部變量—添加局部變量單擊"添加局部變量"選項(xiàng),即可添加一個(gè)局部變量。局部變量由3部分組成,由左到右分別是變量名稱,變量類型與添加變量地目的文件。

課堂操作

局部變量—編輯局部變量添加局部變量時(shí),系統(tǒng)默認(rèn)設(shè)置局部變量名稱為"LVAR1",用戶可以根據(jù)個(gè)地習(xí)慣自定義局部變量地名稱。局部變量名稱需要是字母,數(shù)字,不允許包含空格。用戶可以在變量類型下拉列表選擇局部變量地類型,也可以在目的元件下拉列表選擇添加變量地元件。

課堂操作

局部變量—插入局部變量完成局部變量地添加后,單擊"編輯文本"對(duì)話框上方地"插入變量或函數(shù)"選項(xiàng),在下拉列表單擊添加地局部變量,即可插入局部變量。單擊"移除"按鈕,即可刪除當(dāng)前局部變量。

設(shè)置條件

用戶可以為動(dòng)作設(shè)置條件,實(shí)現(xiàn)控制動(dòng)作發(fā)生地時(shí)機(jī)。單擊"交互"面板事件選項(xiàng)后面地"啟用情形"按鈕或者單擊"交互編輯器"對(duì)話框事件選項(xiàng)后地"啟用情形"按鈕。

設(shè)置條件

彈出"情形編輯"對(duì)話框。單擊"添加條件"按鈕,即可為事件添加一個(gè)條件。

設(shè)置條件

添加地條件包括用來(lái)進(jìn)行邏輯判斷地值,確定變量或元件名稱,邏輯判斷地運(yùn)算符,用來(lái)選擇被比較地值與文本框5部分。

設(shè)置條件

單擊"情形編輯"對(duì)話框右側(cè)地"匹配以下全部條件"選項(xiàng),彈出下圖所示地列表。確定條件邏輯匹配以下全部條件:需要同時(shí)滿足所有條件編輯器地條件,用例交互才有可能發(fā)生。匹配以下任何條件:只要滿足所有條件編輯器地任何一個(gè)條件,用例就會(huì)發(fā)生。

設(shè)置條件

值:自定義變量值。變量值:能夠根據(jù)一個(gè)變量地值來(lái)進(jìn)行邏輯判斷。例如,可以添加一個(gè)變量,將其命名為"日期"并且判斷只有當(dāng)日期為3月18日地時(shí)候,才出現(xiàn)"HappyBirthday"地用例。變量值長(zhǎng)度:在驗(yàn)證表單地時(shí)候,要驗(yàn)證用戶選擇地用戶名或者密碼長(zhǎng)度。元件文字:用來(lái)獲取某個(gè)輸入文本框內(nèi)文本地值。焦點(diǎn)元件文字:當(dāng)前獲得焦點(diǎn)地元件文字。用來(lái)進(jìn)行邏輯判斷地值

設(shè)置條件

元件文字長(zhǎng)度:與變量值長(zhǎng)度相似,只是它判斷地是某個(gè)元件地文本長(zhǎng)度。被選項(xiàng):可以根據(jù)頁(yè)面某個(gè)復(fù)選框元件地選與否來(lái)進(jìn)行邏輯判斷。禁用狀態(tài):某個(gè)元件地禁用狀態(tài)。根據(jù)元件地禁用狀態(tài)來(lái)判斷是否執(zhí)行某個(gè)用例。選狀態(tài):某個(gè)元件地選狀態(tài)。根據(jù)元件是否被選來(lái)判斷是否執(zhí)行某個(gè)用例。面板狀態(tài):某個(gè)動(dòng)態(tài)面板地狀態(tài)。根據(jù)動(dòng)態(tài)面板地狀態(tài)來(lái)判斷是否執(zhí)行某個(gè)用例。用來(lái)進(jìn)行邏輯判斷地值

設(shè)置條件

元件可見:某個(gè)元件是否可見。根據(jù)元件是否可見來(lái)判斷是否執(zhí)行某個(gè)用例。按下地鍵:根據(jù)按鍵盤上地某個(gè)鍵來(lái)判斷是否要執(zhí)行某些操作。指針:可以通過當(dāng)前地指針獲取鼠標(biāo)指針地當(dāng)前位置,實(shí)現(xiàn)鼠標(biāo)指針拖曳地有關(guān)功能。元件范圍:為元件事件添加條件事件指定地范圍。自適應(yīng)視圖:根據(jù)一個(gè)元件地所在面板進(jìn)行判斷。用來(lái)進(jìn)行邏輯判斷地值

設(shè)置條件

元件可見:某個(gè)元件是否可見。根據(jù)元件是否可見來(lái)判斷是否執(zhí)行某個(gè)用例。按下地鍵:根據(jù)按鍵盤上地某個(gè)鍵來(lái)判斷是否要執(zhí)行某些操作。指針:可以通過當(dāng)前地指針獲取鼠標(biāo)指針地當(dāng)前位置,實(shí)現(xiàn)鼠標(biāo)指針拖曳地有關(guān)功能。元件范圍:為元件事件添加條件事件指定地范圍。自適應(yīng)視圖:根據(jù)一個(gè)元件地所在面板進(jìn)行判斷。用來(lái)進(jìn)行邏輯判斷地值

設(shè)置條件

"確定變量或元件名稱"是根據(jù)前面地選擇方式來(lái)確定地。如果前面選擇地"用來(lái)進(jìn)行邏輯判斷地值"是"變量值"選項(xiàng),那么確定變量或元件名稱可以選擇"OnLoadVariable"選項(xiàng),也可以選擇"新建"選項(xiàng),添加新地變量。確定變量或元件名稱

設(shè)置條件

用戶可以在該選項(xiàng)下選擇添加邏輯判斷運(yùn)算符。AxureRP9一為用戶提供了10種邏輯判斷運(yùn)算符選項(xiàng)。邏輯判斷地運(yùn)算符

設(shè)置條件

此選項(xiàng)地值是與"用來(lái)進(jìn)行邏輯判斷地值"做比較地值,選擇地方式與"用來(lái)進(jìn)行邏輯判斷地值"一樣。例如選擇比較兩個(gè)變量,剛才選擇了第1個(gè)變量地名稱,現(xiàn)在就要選擇第2個(gè)變量地名稱。用來(lái)選擇被比較地值

設(shè)置條件

如果"用來(lái)選擇被比較地值"選擇地是"值",那么就要在文本框輸入具體地值。AxureRP9會(huì)根據(jù)用戶在前面幾部分輸入地內(nèi)容,在"條件"下生成一段描述,便于用戶判斷條件邏輯是否是正確地。文本框

設(shè)置條件

單擊按鈕,可以在輸入值地時(shí)候,使用一些常規(guī)地函數(shù),如獲取日期,截?cái)嗯c獲取字符串,預(yù)設(shè)置參數(shù)等。單擊按鈕或者單擊"添加行"按鈕即可添加行,新增一個(gè)條件。單擊按鈕即可刪除一個(gè)條件。當(dāng)需要同時(shí)為多個(gè)動(dòng)作改變條件判斷關(guān)系時(shí),可以在相應(yīng)地動(dòng)作名稱上單擊鼠標(biāo)右鍵,在彈出地快捷菜單選擇"切換為[如果]或[否則]"命令。文本框

課堂操作

新建一個(gè)AxureRP9文件。使用矩形元件,文本元件與按鈕元件制作下圖所示頁(yè)面。使用文本框元件制作下圖所示效果。設(shè)置制作用戶登錄界面

課堂操作

分別將兩個(gè)文本框元件命名為"用戶名"與"密碼",將登錄按鈕命名為"登錄"。選登錄按鈕元件,在"交互編輯器"對(duì)話框?yàn)槠涮砑?單擊時(shí)"事件。設(shè)置制作用戶登錄界面

課堂操作

單擊"啟用情形"按鈕,彈出"情形編輯"對(duì)話框。單擊"添加條件"按鈕新建條件,并設(shè)置各項(xiàng)參數(shù)。單擊"添加行"按鈕,并設(shè)置各項(xiàng)參數(shù)。設(shè)置制作用戶登錄界面

課堂操作

單擊"確定"按鈕,完成交互條件地添加。使用矩形元件與文本元件制作下圖所示地效果。設(shè)置制作用戶登錄界面

課堂操作

將元件選并組合,指定元件名稱為"錯(cuò)誤提示"并將其隱藏。再次單擊"啟用情形"按鈕,不做任何設(shè)置,對(duì)話框效果如下圖所示。設(shè)置制作用戶登錄界面

課堂操作

單擊"確定"按鈕,添加"顯示隱藏"動(dòng)作,設(shè)置各項(xiàng)參數(shù)如下圖所示。設(shè)置制作用戶登錄界面

課堂操作

單擊"確定"按鈕完成交互制作。單擊工具欄上地"預(yù)覽"按鈕,預(yù)覽效果如下圖所示。設(shè)置制作用戶登錄界面

使用表達(dá)式

運(yùn)算符類型算術(shù)運(yùn)算符關(guān)系運(yùn)算符賦值運(yùn)算符邏輯運(yùn)算符

使用表達(dá)式

表達(dá)式地格式[[name]]:這個(gè)表達(dá)式?jīng)]有運(yùn)算符,返回值是name地變量值。[[18/3]]:這個(gè)表達(dá)式地結(jié)果是6。[[name==admin]]:當(dāng)變量name地值為‘a(chǎn)dmin’時(shí),返回True,否則返回False。[[num1+num2]]:當(dāng)兩個(gè)變量值為數(shù)字時(shí),這個(gè)表達(dá)式地返回值為兩個(gè)數(shù)字地與。

課堂操作

新建一個(gè)AxureRP9文檔。使用"矩形"元件與"文本"元件制作下圖所示頁(yè)面。使用"圖片"元件與"文本"元件繼續(xù)制作頁(yè)面。設(shè)置制作滑動(dòng)解鎖

課堂操作

選圖片元件并將其轉(zhuǎn)換為"動(dòng)態(tài)面板"元件。在"交互編輯器"對(duì)話框添加"拖動(dòng)時(shí)"事件并添加情形,設(shè)置"情形編輯"對(duì)話框如下圖所示。單擊"確定"按鈕。添加"移動(dòng)"動(dòng)作,設(shè)置動(dòng)作如下圖所示。設(shè)置制作滑動(dòng)解鎖

課堂操作

單擊"添加界限"按鈕并設(shè)置參數(shù)。單擊按鈕,彈出"編輯值"對(duì)話框。設(shè)置制作滑動(dòng)解鎖

課堂操作

單擊"添加局部變量"選項(xiàng),新建一個(gè)局部變量并設(shè)置參數(shù)。單擊"插入變量或函數(shù)"選項(xiàng),選擇變量并設(shè)置參數(shù)。設(shè)置制作滑動(dòng)解鎖

課堂操作

單擊"確定"按鈕,面板效果如下圖所示。使用相同地方法設(shè)置右側(cè)邊界。設(shè)置制作滑動(dòng)解鎖

課堂操作

添加"設(shè)置文本"動(dòng)作。單擊按鈕,在"編輯文本"對(duì)話框創(chuàng)建局部變量并插入。設(shè)置制作滑動(dòng)解鎖

課堂操作

單擊"確定"按鈕后,添加"設(shè)置尺寸"動(dòng)作,選擇橙色矩形元件,單擊"w"選項(xiàng)后地按鈕,在"編輯值"對(duì)話框創(chuàng)建局部變量并插入。設(shè)置"h"地值為35。設(shè)置制作滑動(dòng)解鎖

課堂操作

再次為"拖動(dòng)時(shí)"事件添加情形,設(shè)置"情形編輯"對(duì)話框如下圖所示。單擊"確定"按鈕后添加"設(shè)置文本"動(dòng)作。設(shè)置制作滑動(dòng)解鎖

課堂操作

再次添加"拖動(dòng)結(jié)束時(shí)"事件并添加情形,"情形編輯"對(duì)話框如下圖所示。添加"移動(dòng)"動(dòng)作,設(shè)置動(dòng)作各項(xiàng)參數(shù)如下圖所示。設(shè)置制作滑動(dòng)解鎖

課堂操作

添加"設(shè)置尺寸"動(dòng)作,設(shè)置動(dòng)作各項(xiàng)參數(shù)如下圖所示。添加"設(shè)置文本"動(dòng)作,設(shè)置動(dòng)作各項(xiàng)參數(shù)如下圖所示。設(shè)置制作滑動(dòng)解鎖

課堂操作

單擊"確定"按鈕,將圖片元件拖曳到下圖所示位置。選0文本元件,將其隱藏。設(shè)置制作滑動(dòng)解鎖

課堂操作

單擊"預(yù)覽"按鈕,預(yù)覽頁(yè)面效果。拖動(dòng)圖片元件效果如下圖所示。設(shè)置制作滑動(dòng)解鎖

本章小結(jié)

本章主要針對(duì)變量與表達(dá)式進(jìn)行了學(xué)習(xí)。學(xué)習(xí)了全局變量與局部變量地概念與使用方法。同時(shí)也對(duì)條件與表達(dá)式進(jìn)行了講解。通過學(xué)習(xí)讀者應(yīng)該可以掌握創(chuàng)建全局變量與局部變量地方法,了解條件地作用。并且能夠熟練掌握表達(dá)式地使用,為制作更為復(fù)雜地原型產(chǎn)品打下基礎(chǔ)。

課后練習(xí)

設(shè)計(jì)制作動(dòng)態(tài)按鈕效果使用元件制作頁(yè)面,將文本框命名為"選項(xiàng)"。為頁(yè)面添加子頁(yè)面,使用"動(dòng)態(tài)面板"元件創(chuàng)建下圖所示地子頁(yè)面。

課后練習(xí)

設(shè)計(jì)制作動(dòng)態(tài)按鈕效果在"交互"面板添加"選項(xiàng)改變時(shí)"事件,設(shè)置鼠標(biāo)移入時(shí)地交互效果如下圖所示。繼續(xù)設(shè)置其它相同交互效果,預(yù)覽頁(yè)面效果如下圖所示。

課后測(cè)試

選擇題1．下列選項(xiàng)不屬于全局變量地是（）。A．值B．元件文字C．選項(xiàng)D．面板狀態(tài)

課后測(cè)試

選擇題2．在彈出地"全局變量"對(duì)話框單擊（）按鈕,即可新建一個(gè)全局變量。A．添加B．變量