目錄Contents了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計1了解AxureRP102頁面管理與自適應(yīng)視圖3使用元件和元件庫4元件的樣式和交互5使用母版和動態(tài)面板6變量與表達(dá)式7函數(shù)的使用8使用中繼器9團隊合作與輸出設(shè)計制作網(wǎng)頁原型設(shè)計制作App原型10111207變量與表達(dá)式7.1使用變量全局變量是一個數(shù)據(jù)容器，就像一個硬盤，可以把需要的內(nèi)容存入，能隨身攜帶。在需要的時候讀取出來即可使用。全局變量的作用范圍為一個頁面，即在“頁面”面板中一個節(jié)點（不包含子節(jié)點）內(nèi)有效，“全局”并不是指整個原型文件內(nèi)的所有頁面，所以有一定的局限性。在“交互編輯器”對話框中單擊“設(shè)置變量值”，彈出如圖所示的面板。默認(rèn)情況下該面板中只包含一個全局變量：OnLoadVariable。勾選OnLoadVariable復(fù)選框，用戶可以在對話框的右側(cè)設(shè)置全局變量值，如圖所示。7.1.1全局變量7.1使用變量

AxureRP10一共提供了11種全局變量值供用戶使用，具體功能如下。文本值：直接獲取一個常量，可為數(shù)值和字符串。變量值：獲取另外一個變量的值。變量值長度：獲取另外一個變量的值的長度。元件文本：獲取元件上的文字。焦點元件文本：獲取焦點元件上的文字。元件值長度：獲取元件文字的值的長度。被選項：獲取被選擇的項目。元件禁用狀態(tài)：獲取元件的禁用狀態(tài)。選中狀態(tài)：獲取元件的選中狀態(tài)。面板狀態(tài)：獲取面板的當(dāng)前狀態(tài)。元件錯誤狀態(tài)：獲取元件的錯誤狀態(tài)。7.1.1全局變量7.1使用變量7.1.1全局變量單擊“交互編輯器”對話框右側(cè)的“配置動作”選項組中的“目標(biāo)”下拉列表，選擇“添加變量”選項，即可創(chuàng)建一個新的全局變量，如圖所示。在彈出的“全局變量”對話框中單擊“添加”，即可新建一個全局變量，如圖所示。7.1使用變量7.1.1全局變量

用戶可以重新對變量命名，以便查找和使用，如圖所示。用戶可以單擊“上移”和“下移”實現(xiàn)調(diào)整全局變量順序的操作。單擊“刪除”將刪除選中的全局變量。單擊“確定”按鈕，即可完成操作，如圖所示。課堂操作

使用全局變量01.新建一個AxureRP10文檔。分別將“一級標(biāo)題”元件和“主要按鈕”元件拖曳到頁面中，如圖所示。分別將兩個元件命名為“標(biāo)題”和“提交”，修改元件文本，如圖所示。課堂操作

使用全局變量02.在“交互編輯器”對話框中選擇“頁面載入”事件，如圖所示。選擇“設(shè)置變量值”動作，如圖所示。課堂操作

使用全局變量03.選擇“添加變量”選項，在彈出的“全局變量”對話框中單擊“添加”，新建一個名為“wenzi”的全局變量，如圖所示。單擊“確定”按鈕，設(shè)置動作的各項參數(shù)如圖所示。課堂操作

使用全局變量04.單擊“確定”按鈕，“交互”面板如圖所示。選擇“提交”按鈕元件，在“交互編輯器”對話框中添加“單擊”事件，再添加“設(shè)置文本”動作，選擇“標(biāo)題”選項，如圖所示。課堂操作

使用全局變量05.在“交互編輯器”對話框右側(cè)設(shè)置各項參數(shù)，如圖所示。單擊“確定”按鈕，再單擊“預(yù)覽”按鈕，頁面預(yù)覽效果如圖所示。“01添加局部變量

用戶可以在“交互編輯器”對話框“配置動作”選項組中添加局部變量，如圖所示。單擊“值”文本框右側(cè)的按鈕，彈出“編輯文本”對話框，如圖所示。7.1.2局部變量7.1使用變量“01添加局部變量

單擊“添加局部變量”，即可添加一個局部變量，如圖所示。局部變量由3部分組成，由左到右分別是變量名稱、變量類型和添加變量的目標(biāo)文件，如圖所示。7.1.2局部變量7.1使用變量“02編輯局部變量

添加局部變量時，系統(tǒng)默認(rèn)設(shè)置局部變量名稱為“LVAR1”，用戶可以根據(jù)個人的習(xí)慣自定義局部變量的名稱。局部變量名稱必須是字母、數(shù)字，不允許包含空格。用戶可以在變量類型下拉列表中選擇局部變量的類型，如圖所示。可以在目標(biāo)元件下拉列表中選擇添加變量的元件，如圖所示。7.1.2局部變量7.1使用變量“03插入局部變量

完成局部變量的添加后，單擊“編輯文本”對話框上方的“插入變量或函數(shù)”，在下拉列表中選擇添加的局部變量，即可插入該局部變量，如圖所示。單擊局部變量右側(cè)的“刪除”按鈕，即可刪除該局部變量，如圖所示。7.1.2局部變量7.1使用變量7.2設(shè)置條件

用戶可以為動作設(shè)置條件，實現(xiàn)控制動作發(fā)生的時機。單擊“交互”面板中事件選項右側(cè)的“條件”按鈕，或者單擊“交互編輯器”對話框事件選項后的“條件”按鈕，如圖所示，彈出“條件編輯”對話框，如圖所示。單擊“添加條件”按鈕，即可為事件添加一個條件，如圖所示。7.2設(shè)置條件

添加的條件包括用來進(jìn)行邏輯判斷的值、確定變量或元件名稱、邏輯判斷的運算符、用來選擇被比較的值和文本框5部分，如圖所示。

用戶可以單擊“條件編輯”對話框右側(cè)的“符合全部條件”和“符合任意條件”按鈕，用來確定條件邏輯，如圖所示。符合全部條件：必須同時滿足條件編輯器中的所有條件，用例交互才有可能發(fā)生。符合任意條件：只要滿足條件編輯器中的任何一個條件，用例交互就會發(fā)生。7.2設(shè)置條件7.2.1確定條件邏輯提示：可以通過條件邏輯關(guān)系，設(shè)置執(zhí)行一個動作必須同時滿足多個條件，或者僅需滿足多個條件中的任何一個。

在用來進(jìn)行邏輯判斷的值下拉列表中有16個選項，如圖所示。7.2設(shè)置條件7.2.2用來進(jìn)行邏輯判斷的值7.2設(shè)置條件7.2.2用來進(jìn)行邏輯判斷的值文本值：自定義變量值。變量值：能夠根據(jù)一個變量的值來進(jìn)行邏輯判斷。例如，可以添加一個變量，將其命名為“日期”并且判斷只有當(dāng)日期為3月18日時，才會出現(xiàn)“HappyBirthday”的用例。變量值長度：在驗證表單的時候，用于驗證用戶選擇的用戶名或者密碼長度。元件文本：用來獲取某個輸入文本框內(nèi)文本的值。焦點元件文本：當(dāng)前獲得焦點的元件文字。元件值長度：與變量值長度相似，只是它判斷的是某個元件的文本長度。被選項：可以根據(jù)頁面中某個復(fù)選框元件的選中與否來進(jìn)行邏輯判斷。元件禁用狀態(tài)：某個元件的禁用狀態(tài)。可以根據(jù)元件的禁用狀態(tài)來判斷是否執(zhí)行某個用例。元件錯誤狀態(tài)：某個元件的錯誤狀態(tài)。可以根據(jù)元件的錯誤狀態(tài)來判斷是否執(zhí)行某個用例。選中狀態(tài)：某個元件的選中狀態(tài)。可以根據(jù)元件是否被選中來判斷是否執(zhí)行某個用例。面板狀態(tài)：某個動態(tài)面板的狀態(tài)?？梢愿鶕?jù)動態(tài)面板的狀態(tài)來判斷是否執(zhí)行某個用例。元件可見性：某個元件是否可見?？梢愿鶕?jù)元件是否可見來判斷是否執(zhí)行某個用例。按下的鍵：可以根據(jù)按鍵盤上的哪個鍵來判斷是否要執(zhí)行某些操作。鼠標(biāo)指針：獲取鼠標(biāo)指針的當(dāng)前位置，實現(xiàn)鼠標(biāo)指針拖曳的相關(guān)功能。元件范圍：為元件事件添加條件事件指定的范圍。自適應(yīng)視圖：可以根據(jù)一個元件的所在面板判斷當(dāng)前視圖尺寸并自適應(yīng)。

“確定變量或元件名稱”是根據(jù)前面的選擇方式來確定的。如果前面的“用來進(jìn)行邏輯判斷的值”選擇“變量值”選項，那么“確定變量或元件名稱”可以選擇“OnLoadVariable”選項，也可以選擇“新建”選項，以添加新的變量，如圖所示。7.2設(shè)置條件7.2.3確定變量或元件名稱

用戶可以在該下拉列表中選擇邏輯判斷運算符，如圖所示。AxureRP10一共為用戶提供了10種邏輯判斷運算符選項。7.2設(shè)置條件7.2.4邏輯判斷的運算符

此選項的值是和“用來進(jìn)行邏輯判斷的值”做比較的值，選擇的方式和“用來進(jìn)行邏輯判斷的值”一樣，如圖所示。例如選擇比較兩個變量，剛才選擇了第1個變量的名稱，現(xiàn)在就要選擇第2個變量的名稱。7.2設(shè)置條件7.2.5用來選擇被比較的值

如果“用來選擇被比較的值”選擇的是“文本值”，那么就要在文本框中輸入具體的值，如圖所示。AxureRP10會根據(jù)用戶在前面幾部分中輸入的內(nèi)容，在“概要”下生成一段描述，便于用戶判斷條件邏輯是否是正確的，如圖所示。7.2設(shè)置條件7.2.6文本框

單擊按鈕，可以在輸入值的時候使用一些常規(guī)的函數(shù)，如獲取日期、截斷和獲取字符串、預(yù)設(shè)置參數(shù)等函數(shù)。單擊按鈕或者單擊“添加條件”按鈕即可，新增一個條件。單擊按鈕即可刪除一個條件。當(dāng)需要同時為多個動作改變條件判斷關(guān)系時，可以在相應(yīng)的動作名稱上右擊，在彈出的快捷菜單中選擇“切換為[如果]或[否則]”命令，如圖所示。7.2設(shè)置條件7.2.6文本框提示：添加交互時，打開交互編輯器，首先選擇要使用的若干個動作，然后對動作進(jìn)行參數(shù)設(shè)定。課堂操作

設(shè)計制作用戶登錄界面01.新建一個AxureRP10文件。使用矩形元件、文本元件和按鈕元件制作如圖所示頁面。使用“文本框”元件制作如圖所示效果。課堂操作

設(shè)計制作用戶登錄界面02.分別將兩個“文本框”元件命名為“用戶名”和“密碼”，將登錄按鈕命名為“登錄”，如圖所示。選中登錄按鈕元件，在“交互編輯器”對話框中為其添加“單擊”事件，如圖所示。課堂操作

設(shè)計制作用戶登錄界面03.單擊“條件”按鈕，彈出“條件編輯”對話框。單擊“添加條件”按鈕新建一個條件，并為其設(shè)置各項參數(shù)，如圖所示。單擊“添加條件”按鈕，創(chuàng)建行并為其設(shè)置各項參數(shù)，如圖所示。課堂操作

設(shè)計制作用戶登錄界面04.單擊“確定”按鈕，添加“打開鏈接”動作，完成交互條件的添加，如圖所示。使用矩形元件和文本元件制作圖所示的效果。課堂操作

設(shè)計制作用戶登錄界面05.將元件選中并組合，設(shè)置元件名稱為“錯誤提示”并將其隱藏，如圖所示。再次單擊“條件”按鈕，不進(jìn)行任何設(shè)置，對話框效果如圖所示課堂操作

設(shè)計制作用戶登錄界面06.單擊“確定”按鈕，添加“顯示隱藏”動作，設(shè)置各項參數(shù)如圖所示。07.單擊“確定”按鈕完成交互制作。單擊工具欄上的“預(yù)覽”按鈕，預(yù)覽效果如圖所示。7.3使用表達(dá)式7.3.1運算符類型1．算術(shù)運算符算術(shù)運算符就是常說的加減乘除符號，符號為＋、－、*、/，例如a+b、b/c等。除了以上4個算術(shù)運算符外，還有一個取余數(shù)運算符，符號是%。取余數(shù)是指將前面的數(shù)字中可以整除后面數(shù)字的部分去除，只保留剩余的部分，例如18%5，結(jié)果為3。2．關(guān)系運算符AxureRP10中一共有6個關(guān)系運算符，分別是＜、＜=、＞、＞=、==、!=。關(guān)系運算符對其兩側(cè)的表達(dá)式進(jìn)行比較，并返回比較結(jié)果。比較結(jié)果只有“真”和“假”兩種，也就是True和False。3．賦值運算符AxureRP10中的賦值運算符是=。賦值運算符能夠?qū)⑵溆覀?cè)的運算結(jié)果賦給左側(cè)一個能夠被修改的值，例如變量、元件文字等。4．邏輯運算符AxureRP10中的邏輯運算符主要有兩種，分別是&&和‖。&&表示“并且”，‖表示“或者”。邏輯運算符能夠?qū)⒍鄠€表達(dá)式連接在一起，形成更復(fù)雜的表示式。在AxureRP10中還有一種邏輯運算符！，表示“不是”，它能夠?qū)⒈磉_(dá)式結(jié)果取反。例如，?。╝+b&&=c）返回的值與（a+b&&=c）返回的值相反。7.3使用表達(dá)式7.3.2表達(dá)式的格式a+b、a＞b或者a+b&&=c等都是表達(dá)式。在AxureRP10中，只有在編輯值時才可以使用表達(dá)式，表達(dá)式必須寫在[[]]中。下面通過幾個例子加深理解。[[name]]：這個表達(dá)式?jīng)]有運算符，返回值是name的變量值。[[18/3]]：這個表達(dá)式的結(jié)果是6。[[name==admin]]：當(dāng)變量name的值為‘a(chǎn)dmin’時，返回True，否則返回False。[[num1+num2]]：當(dāng)兩個變量值為數(shù)字時，這個表達(dá)式的返回值為兩個數(shù)字的和。提示：如果想將兩個表達(dá)式的內(nèi)容連接在一起或者將表達(dá)式的返回值與其他文字連接在一起，只需將它們寫在一起。課堂操作

設(shè)計制作滑動解鎖01.新建一個AxureRP10文檔。使用矩形元件和文本元件制作如圖所示頁面。使用“圖片”元件和文本元件繼續(xù)制作頁面，如圖所示。課堂操作

設(shè)計制作滑動解鎖02.選中“圖片”元件并將其轉(zhuǎn)換為“動態(tài)面板”元件。在“交互編輯器”對話框中添加“拖動”事件并添加條件，設(shè)置“條件編輯”對話框如圖所示。單擊“確定”按鈕。添加“移動”動作，設(shè)置動作參數(shù)如圖所示。課堂操作

設(shè)計制作滑動解鎖03.單擊“添加范圍限制”并設(shè)置參數(shù)，如圖所示。單擊fx按鈕，彈出“編輯值”對話框，如圖所示。課堂操作

設(shè)計制作滑動解鎖04.單擊“添加局部變量”，新建一個局部變量并設(shè)置參數(shù)，如圖所示。單擊“插入變量或函數(shù)”，選擇變量并設(shè)置參數(shù)，如圖所示。課堂操作

設(shè)計制作滑動解鎖05.單擊“確定”按鈕，面板效果如圖所示。使用相同的方法設(shè)置右側(cè)邊界，如圖所示。課堂操作

設(shè)計制作滑動解鎖06.添加“設(shè)置文本”動作，如圖所示。單擊fx按鈕，在“編輯文本”對話框中創(chuàng)建局部變量并插入，如圖所示。課堂操作

設(shè)計制作滑動解鎖07.單擊“確定”按鈕后，添加“設(shè)置尺寸”動作，選擇橙色矩形元件，單擊“w”選項右側(cè)的按鈕，在“編輯值”對話框中創(chuàng)建局部變量并插入，如圖所示。設(shè)置“h”的值為35，如圖所示。課堂操作

設(shè)計制作滑動解鎖08.為“拖動”事件添加條件，設(shè)置“條件編輯”對話框如圖所示。單擊“確定”按鈕后添加“設(shè)置文本”動作，如圖所示。課堂操作

設(shè)計制作滑動解鎖09.添加“拖動后松開”事件并添加條件，“條件編輯”對話框如圖所示。添加“移動”動作，設(shè)置動作各項參數(shù)如圖所示。課堂操作

設(shè)計制作滑動解鎖10.添加“設(shè)置尺寸”動作，設(shè)置動作各項參數(shù)如圖所示。添加“設(shè)置文本”動作，設(shè)置動作各項參數(shù)如圖所示。課堂操作

設(shè)計制作滑動解鎖11.單擊“確定”按鈕，將“圖片”元件拖曳到圖所示的位置。選中“0”文本元件，將其隱藏，如圖所示。課堂操作

設(shè)計制作滑動解鎖12.單擊“預(yù)覽”按鈕，預(yù)覽頁面效果。拖曳“圖片”元件效果如圖所示。7.4本章小結(jié)

本章主要針對變量和表達(dá)式進(jìn)行了講解，包括全局變量和局部變量的概念和使用方法，以及條件和表達(dá)式。通過本章內(nèi)容的學(xué)習(xí)，讀者應(yīng)該掌握創(chuàng)建全局變量和局部變量的方法，了解條件的作用，并且熟練掌握表達(dá)式的使用方法，為制作更為復(fù)雜的產(chǎn)品原型打下基礎(chǔ)。素養(yǎng)拓展本章通過基礎(chǔ)知識與課程操作相結(jié)合的方法講解互聯(lián)網(wǎng)產(chǎn)品原型交互設(shè)計制作過程中使用變量表達(dá)式的相關(guān)知識。在學(xué)習(xí)過程中，讀者應(yīng)持續(xù)關(guān)注行業(yè)動態(tài)和技術(shù)發(fā)展，不斷學(xué)習(xí)新的設(shè)計理念和技能，提升自己專業(yè)素養(yǎng)，通過使用變量和表達(dá)式調(diào)整原型交互效果，優(yōu)化用戶體驗。7.5課后練習(xí)設(shè)計制作圖片交互效果

01.使用元件制作頁面，將頁面中的文本框命名為“選項”，如圖所示。

02.為頁面添加子頁面，使用“動態(tài)面板”元件創(chuàng)建圖所示的子頁面。7.5課后練習(xí)設(shè)計制作動態(tài)按鈕效果

03.在“交互”面板中添加“選中項目發(fā)生改變”事件，設(shè)置選擇不同下拉列表選項的交互效果，如圖所示。

04.繼續(xù)設(shè)置其他相同交互效果，預(yù)覽頁面效果，如圖所示。12437.6課后測試7.6.1選擇題1．下列選項中不屬于全局變量的是（）。A．值B．元件文字C．選中項D．面板狀態(tài)2．在彈出的“全局變量”對話框中單擊（）按鈕，即可新建一個全局變量。A．添加B．變量C．重命名D．查找3．在AxureRP10中有一種邏輯運算符（）表示“不是”，它能夠?qū)Ρ磉_(dá)式結(jié)果取反。A．！B．=C．+D．!=4．使用關(guān)系運算符對其兩側(cè)的表達(dá)式進(jìn)行比較，并返回比較結(jié)果，比較結(jié)果只有真和假兩種，也就是（）。A．True和FalseB．＜和＜=C．＞和＞=D．以上都不對5．當(dāng)需要同時為多個條件改變條件判斷關(guān)系時，可以在相應(yīng)的條件名稱上右擊，選擇（）命令。A．切換為[如果]或[否則]B．OnLoadVariableC．CaseD．False或true7.6課后測試7.6.2填空題1．變量分為

和

兩種。2．用戶可以使用

和

功能調(diào)整全局變量的順序，而使用

功能會將選中的全局變量刪除。3．局部變量的作用范圍為一個條件里面的一個事務(wù)，一個事件里面有多個條件，一個條件里面有多個事務(wù)，可見局部變量的作用范圍

。4．用戶可以為動作設(shè)置條件，實現(xiàn)控制動作發(fā)生的時機。單擊“交互編輯器”對話框中的按鈕，彈出

對話框。5．表達(dá)式是由

、

、

、

等組合成的公式。7.6課后測試7.6.3操作題根據(jù)本章所學(xué)內(nèi)容，設(shè)計制作計算器App原型。謝謝觀賞目錄Contents了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計1了解AxureRP102頁面管理與自適應(yīng)視圖3使用元件和元件庫4元件的樣式和交互5使用母版和動態(tài)面板6變量與表達(dá)式7函數(shù)的使用8使用中繼器9團隊合作與輸出設(shè)計制作網(wǎng)頁原型設(shè)計制作App原型10111208函數(shù)的使用8.1了解函數(shù)

AxureRP10中的函數(shù)是一種特殊的變量，可以通過函數(shù)的調(diào)用獲得一些特定的值。函數(shù)的使用范圍很廣泛，使用函數(shù)能夠讓產(chǎn)品原型的制作變得更迅速，使產(chǎn)品原型變得更靈活和更逼真。在AxureRP10中只有表達(dá)式中能夠使用函數(shù)。在“交互編輯器”對話框中添加“設(shè)置變量值”動作后，勾選“OnLoadVariable”復(fù)選框，單擊“值”選項組中文本框右側(cè)的按鈕，如圖所示。單擊彈出的“編輯文本”對話框中的“插入變量或函數(shù)”，即可看到AxureRP10自帶的函數(shù)，如圖所示。課堂操作

使用時間函數(shù)01.使用“文本框”元件、“文本標(biāo)簽”元件和“主要按鈕”元件制作如圖所示的頁面效果。從左到右依次將“文本框”元件命名為“shi”（見圖）、“fen”和“miao”。課堂操作

使用時間函數(shù)02.選擇“主要按鈕”元件，單擊“交互”面板上的“新建交互”按鈕，添加“單擊”事件后再添加“設(shè)置文本”動作，在“目標(biāo)”下拉列表中選擇“shi”，單擊“值”選項組文本框右側(cè)的按鈕，如圖所示。03.單擊彈出的“編輯文本”對話框中的“插入變量或函數(shù)”，選擇“日期”選項下的“getHours()”選項，如圖所示。課堂操作

使用時間函數(shù)04.單擊“確定”按鈕，獲取小時函數(shù)。單擊“設(shè)置文本”右側(cè)的“添加目標(biāo)”按鈕，分別為其他兩個文本框添加函數(shù)，如圖所示。單擊“預(yù)覽”按鈕，預(yù)覽效果如圖所示。8.2常見函數(shù)8.2.1中繼器/數(shù)據(jù)集函數(shù)單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“中繼器/數(shù)據(jù)集”選項下可以看到6個中繼器/數(shù)據(jù)集函數(shù)，如表所示。8.2常見函數(shù)8.2.2元件函數(shù)

單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“元件”選項下可以看到16個元件函數(shù)，如表所示。課堂操作

設(shè)計制作商品詳情頁01.新建一個AxureRP10文件，將“圖片”元件拖曳到頁面中并插入圖片，將圖片命名為“bigpic”，復(fù)制圖片并調(diào)整其位置和大小，將其命名為“pic1”，如圖所示。繼續(xù)使用相同的方法導(dǎo)入圖片，并將其命名為“pic2”，如圖所示。課堂操作

設(shè)計制作商品詳情頁02.使用矩形元件創(chuàng)建一個如圖所示的矩形，將其命名為“kuang”。選擇“pic1”元件，為其添加“鼠標(biāo)移入”事件，再添加“設(shè)置圖片”動作，選擇“bigpic”元件，如圖所示。課堂操作

設(shè)計制作商品詳情頁03.單擊“設(shè)置常規(guī)狀態(tài)圖片”選項組中的“選擇”按鈕，選擇導(dǎo)入一張圖片，如圖所示。添加“移動”動作，選擇“目標(biāo)”為“kuang”，設(shè)置“移動”選項為“To”（到達(dá)），如圖所示。課堂操作

設(shè)計制作商品詳情頁04.單擊x文本框后的按鈕，在“編輯值”對話框中刪除數(shù)值0，單擊“插入變量或函數(shù)”，選擇“x”選項，如圖所示。為了保證邊框與圖片對齊，通過表達(dá)式使圖片移動3個單位，如圖所示。課堂操作

設(shè)計制作商品詳情頁05.單擊“確定”按鈕。單擊y文本框后的按鈕，在“編輯值”對話框中進(jìn)行設(shè)置，如圖所示。單擊“確定”按鈕，設(shè)置動作如圖所示。課堂操作

設(shè)計制作商品詳情頁06.使用相同的方法為“pic2”元件添加交互，“交互編輯器”對話框如圖所示。制作完成后的預(yù)覽效果如圖所示。8.2常見函數(shù)8.2.3頁面函數(shù)

單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“頁面”選項下可以看到1個頁面函數(shù)，如表所示。8.2常見函數(shù)8.2.4窗口函數(shù)

單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“窗口”選項下可以看到4個窗口函數(shù)，如表所示。8.2常見函數(shù)8.2.5鼠標(biāo)指針函數(shù)

單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“鼠標(biāo)指針”選項下可以看到7個鼠標(biāo)指針函數(shù)，如表所示。課堂操作

設(shè)計制作產(chǎn)品局部放大效果01.新建一個AxureRP10文件，使用“圖片”元件插入圖片并調(diào)整其大小為400像素×400像素，將其命名為“pic”，如圖所示。將“動態(tài)面板”元件拖曳到頁面中，將其命名為“mask”。雙擊編輯State1，為其指定填充圖片，如圖所示，并將其隱藏。課堂操作

設(shè)計制作產(chǎn)品局部放大效果02.返回Page1頁面，再次拖入一個“動態(tài)面板”元件，將其命名為“zoombig”，如圖所示。雙擊編輯State1，導(dǎo)入一張圖片，并將其命名為“bigpic”，如圖所示。課堂操作

設(shè)計制作產(chǎn)品局部放大效果03.單擊“關(guān)閉”按鈕，返回Page1頁面，單擊工具欄上的“隱藏”按鈕，將“zoombig”元件和“mask”元件隱藏。使用“熱區(qū)”元件創(chuàng)建一個和圖片大小一致的熱區(qū)，并將其命名為“requ”，如圖所示。04.選中“熱區(qū)”元件，為其添加“鼠標(biāo)移入”事件，再添加“顯示/隱藏”動作，設(shè)置各項參數(shù)，如圖所示。課堂操作

設(shè)計制作產(chǎn)品局部放大效果05.添加“鼠標(biāo)移出”事件，再添加“顯示/隱藏”動作，如圖所示。添加“鼠標(biāo)經(jīng)過”事件，選中“移動”動作，選擇“mask”動態(tài)面板，設(shè)置“邊界”的各項參數(shù)，如圖所示。課堂操作

設(shè)計制作產(chǎn)品局部放大效果06.設(shè)置“移動”選項為“到達(dá)”，單擊x文本框右側(cè)的按鈕，設(shè)置鼠標(biāo)指針函數(shù)如圖所示。按同樣的方式，單擊y文本框右側(cè)的按鈕，設(shè)置鼠標(biāo)指針函數(shù)如圖所示。課堂操作

設(shè)計制作產(chǎn)品局部放大效果07.單擊“移動”動作右側(cè)的“添加目標(biāo)”按鈕，勾選“bigpic”復(fù)選框，選擇“移動”選項為“到達(dá)”，單擊x文本框右側(cè)的按鈕，單擊“添加局部變量”，新建一個局部變量，如圖所示。輸入如圖所示表達(dá)式，用來控制大圖的顯示。課堂操作

設(shè)計制作產(chǎn)品局部放大效果08.使用相同的方法設(shè)置y文本框的值，如圖所示。單擊“確定”按鈕，返回Page1頁面，單擊“預(yù)覽”按鈕，預(yù)覽效果如圖所示。8.2常見函數(shù)8.2.6數(shù)字函數(shù)

單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“數(shù)字”選項下可以看到3個數(shù)字函數(shù)，如表所示。8.2常見函數(shù)8.2.7字符串函數(shù)單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“字符串”選項下可以看到15個字符串函數(shù)，如表所示。8.2常見函數(shù)8.2.8數(shù)字函數(shù)

單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“數(shù)學(xué)”選項下可以看到22個數(shù)學(xué)函數(shù)，如表所示。課堂操作

設(shè)計制作計算器01.新建一個AxureRP10文件。使用“矩形3”元件、“文本框”元件、“文本標(biāo)簽”元件和“主要按鈕”元件完成頁面的制作，如圖所示。分別為“文本框”元件和“主要按鈕”元件設(shè)置名稱，如圖所示。課堂操作

設(shè)計制作計算器02.選擇“計算加”按鈕元件，添加“單擊”事件，單擊“添加變量”選項，新建全局變量a并設(shè)置動作，如圖所示。使用相同的方法，新建全局變量b，如圖所示。課堂操作

設(shè)計制作計算器03.添加“設(shè)置文本”動作，在“目標(biāo)”下拉列表中選擇“和”選項，單擊“值”下拉列表右側(cè)的按鈕，插入如圖所示的表達(dá)式。單擊“確定”按鈕，設(shè)置動作如圖所示。課堂操作

設(shè)計制作計算器04.單擊“確定”按鈕，頁面效果如圖所示。單擊“預(yù)覽”按鈕，頁面預(yù)覽效果如圖所示。課堂操作

設(shè)計制作計算器05.使用相同的方法，依次為其他幾個“按鈕”元件添加交互，完成后的頁面效果如圖所示。頁面預(yù)覽效果如圖所示。8.2常見函數(shù)8.2.9日期函數(shù)

單擊“編輯文本”對話框中的“插入變量或函數(shù)”，在“日期”選項下可以看到40個日期函數(shù)，如表所示。課堂操作

使用日期函數(shù)01.新建一個AxureRP10文件。將“二級標(biāo)題”元件拖曳到頁面中，修改文本內(nèi)容如圖所示。分別將兩個元件命名為日期和時間，如圖所示。課堂操作

使用日期函數(shù)02.選中兩個元件，右擊，在彈出的快捷菜單中選擇“轉(zhuǎn)換為動態(tài)面板”命令，如圖所示。將動態(tài)面板命名為“動態(tài)時間”，如圖所示。課堂操作

使用日期函數(shù)03.在“大綱”面板中“狀態(tài)1”項目上右擊，選擇“創(chuàng)建狀態(tài)副本”命令，復(fù)制效果如圖所示。04.在頁面空白處單擊，添加“頁面載入”事件，再添加“設(shè)置動態(tài)面板狀態(tài)”動作，選擇“狀態(tài)”為“下一個”，勾選“在第1個到最后1個狀態(tài)之間循環(huán)”復(fù)選框，將“Repeatevery”（循環(huán)間隔）設(shè)置為1000毫秒，如圖所示。

課堂操作

使用日期函數(shù)05.單擊“確定”按鈕。選中“動態(tài)時間”元件，為其添加“面板狀態(tài)改變”事件，再添加“設(shè)置文本”動作，將“時間”元件設(shè)置為“目標(biāo)”，單擊“值”下拉列表右側(cè)的按鈕，在“編輯文本”對話框中插入如圖所示的表達(dá)式。06.單擊“確定”按鈕，使用相同方法添加“日期”元件為目標(biāo)，并創(chuàng)建如圖所示的表達(dá)式。

課堂操作

使用日期函數(shù)07.單擊“確定”按鈕，再次將“時間”元件設(shè)置為目標(biāo)，設(shè)置“時間”元件動作如圖所示。繼續(xù)使用相同的方法為“日期”元件設(shè)置動作，“交互編輯器”對話框如圖所示。

課堂操作

使用日期函數(shù)08.單擊“確定”按鈕，頁面效果如圖所示。單擊工具欄上的“預(yù)覽”按鈕，頁面預(yù)覽效果如圖所示。

8.3本章小結(jié)