本文將深入探討Axure設(shè)計(jì)原型圖中所使用的各種元器件，從基礎(chǔ)的形狀元件到復(fù)雜的動(dòng)態(tài)面板和中繼器，一一解析它們的功能和應(yīng)用場(chǎng)景。無(wú)論您是資深的UX設(shè)計(jì)師，還是剛?cè)胄械男率?，本文都將為您提供寶貴的參考和啟發(fā)。

 

接著上期內(nèi)容，這期內(nèi)容一起認(rèn)識(shí)一下Axure設(shè)計(jì)原型圖所使用的元器件。

01 形狀

默認(rèn)元件庫(kù)的基礎(chǔ)元件中的各種框、按鈕、標(biāo)題、占位符以及標(biāo)簽和段落都是形狀元件。

圖標(biāo)元件庫(kù)中可用的圖標(biāo)也是形狀，用鋼筆工具繪制的任何元件也是形狀元件。

Axure RP附帶了各種現(xiàn)成的形狀，可以在元件庫(kù)中訪問(wèn)，要將形狀添加到原型中，點(diǎn)擊插入菜單，選中窗格中的圖形拖放到畫(huà)布上。

菜單界面左上角的插入菜單中包含許多形狀，選擇一個(gè)形狀，單擊并拖動(dòng)到畫(huà)布上，可以在拖動(dòng)時(shí)按住SHIFT來(lái)限制其尺寸，也可以使用快捷方式繪制常用的形狀:

• R矩形
• O橢圓形
• L線
• T文本(段落元件)
• P手繪鋼筆工具

02 圖片

圖片元件可以將靜態(tài)圖片和動(dòng)態(tài)GIF添加到設(shè)計(jì)中，支持:JPG，PNG，GIF，BMP和SVG文件類型。

將空白圖片元件從元件庫(kù)拖到畫(huà)布上，雙擊圖片或右鍵單擊選擇導(dǎo)入圖片，就可以添加圖片文件，加載圖片時(shí)，圖片元件將自動(dòng)調(diào)整為導(dǎo)入圖片的原始尺寸。

防止圖片元件調(diào)整大小，在導(dǎo)入圖片文件之前選擇并雙擊大小調(diào)整手柄，調(diào)整大小手柄將從黃色變?yōu)榘咨?，表示適合圖片功能已關(guān)閉。

通過(guò)雙擊調(diào)整大小手柄或單擊樣式中的適合圖片來(lái)再次啟用自動(dòng)調(diào)整功能。

03 編輯圖片

通過(guò)樣式窗格頂部的顏色調(diào)整菜單調(diào)整圖片的顏色，選中調(diào)整顏色框，使用滑塊或下面的數(shù)字字段更改圖片的色相，飽和度，亮度和對(duì)比度。

單擊重置字段回到默認(rèn)值，或取消選中顏色將圖片切換回默認(rèn)值，不會(huì)影響每個(gè)屬性的選擇。

04 裁剪和切片

右鍵單擊所選圖片，進(jìn)行切割或裁剪，在上下文菜單中選擇任一選項(xiàng)，也可以使用S和C快捷鍵。

* 還可以自定義頂部的工具欄，添加“切割”和“裁剪”按鈕。

切片工具將圖片分為幾個(gè)部分，每個(gè)部分都成為一個(gè)新的圖片元件，可以使用水平，垂直或交叉切割進(jìn)行切片，裁剪工具包含幾個(gè)選項(xiàng):

• 裁切: 刪除選擇框外圖片的所有部分
• 剪切: 刪除選擇框中的圖片部分并將其復(fù)制到剪貼板
• 復(fù)制:復(fù)制選擇框中的圖片部分，并使原始圖像保持不變

要水平或垂直翻轉(zhuǎn)圖片，右鍵單擊它，然后轉(zhuǎn)到變換圖片→水平翻轉(zhuǎn)或垂直翻轉(zhuǎn)。

05 固定邊角

右鍵單擊圖片元件，在上下文菜單中選擇變換圖片→固定邊角。

三角形標(biāo)記會(huì)出現(xiàn)在圖片頂部和左側(cè)，指示圖片其余部分不會(huì)調(diào)整大小的區(qū)域，可以拖動(dòng)三角形標(biāo)記調(diào)整保留區(qū)域的大小。

* 無(wú)法在空白圖片元件上保留角落，嘗試執(zhí)行此操作之前，確保將圖片文件加載到元件中。

06 旋轉(zhuǎn)圖片

樣式窗格頂部的旋轉(zhuǎn)字段可以旋轉(zhuǎn)畫(huà)布上的選定圖片，旋轉(zhuǎn)角度支持正和負(fù)的度值，最多兩位小數(shù)，正值將圖片向右旋轉(zhuǎn)，而負(fù)值將圖片向左旋轉(zhuǎn)。

07 清除圖片

在樣式窗格中，單擊填充圖片，然后單擊預(yù)覽圖片右上方的紅色X。

08 添加編輯文本

通過(guò)以下選項(xiàng)將文本添加到圖片或編輯元件文本:

右鍵單擊圖像，在上下文菜單中選擇編輯文本。

按住CTRL(Windows)或CMD(Mac)，雙擊圖片以進(jìn)入文本編輯模式。

選擇圖片，開(kāi)始輸入。(僅當(dāng)你禁用了單鍵快捷方式時(shí)，此選項(xiàng)才可用)

09 優(yōu)化最大圖片

大圖會(huì)增加RP文件的大小，影響Axure RP和瀏覽器中的性能，優(yōu)化圖片可以減小文件大小，從而減小RP文件的大小，但是會(huì)降低圖片質(zhì)量。

大圖導(dǎo)入Axure RP時(shí)，系統(tǒng)會(huì)詢問(wèn)是否進(jìn)行優(yōu)化，還可以通過(guò)右鍵單擊，在上下文菜單中選擇轉(zhuǎn)換圖片→優(yōu)化圖片來(lái)優(yōu)化RP文件中已有的圖片。

* 優(yōu)化PNG將刪除可能具有的任何透明度，而優(yōu)化動(dòng)畫(huà)GIF將刪除動(dòng)畫(huà)。

可以在一組形狀，線條，圖片或動(dòng)態(tài)面板元件之間創(chuàng)建關(guān)系，通過(guò)“設(shè)置選擇/選中”操作一次只能將一個(gè)元件設(shè)置為其選定狀態(tài)。(類似于單選按鈕組中單選按鈕之間的關(guān)系。)

10 熱區(qū)

熱區(qū)是特殊元件，在瀏覽器中不可見(jiàn)，需要在沒(méi)有合適設(shè)計(jì)區(qū)域的元件上增加交互事件時(shí)使用，例如在熱區(qū)添加圖片的特定區(qū)域或?qū)㈠^點(diǎn)位置添加到長(zhǎng)頁(yè)面時(shí)。

* 不需要熱區(qū)可向一組元件添加交互性，將元件放入元件組中，并在父組的事件上配置交互。

熱區(qū)元件位于“默認(rèn)”元件庫(kù)的“通用”中，從“元件庫(kù)”窗格中將其拖放到畫(huà)布上。

默認(rèn)情況下熱區(qū)會(huì)用綠色遮罩覆蓋，以便可以在畫(huà)布上看到，可以在應(yīng)用程序菜單的“視圖”→“遮罩”中切換遮罩。

* 元件遮罩，包括熱區(qū)遮罩不會(huì)再瀏覽器上顯示。

11 線

Axure RP附帶了一些現(xiàn)成的線，在元件庫(kù)默認(rèn)元件中訪問(wèn)這些線，包括“公共”水平線和垂直線以及“標(biāo)記”中的箭頭。

12 線條工具

使用“線條”工具在畫(huà)布上繪制直線，工具可以在界面左上角“插入”菜單中找到，也可以通過(guò)“L”快捷鍵激活工具，然后在畫(huà)布上單擊并拖動(dòng)以繪制線條，拖動(dòng)時(shí)按住SHIFT將以45°增量捕捉線。

13 鋼筆工具

使用鋼筆工具繪制直線、曲線、鋸齒狀、波浪狀、螺旋狀或任何其他類型的線條，可在界面左上角的“插入”菜單中或通過(guò) P 快捷方式使用。

鋼筆工具的工作方式與其他矢量繪圖應(yīng)用程序中的等效工具類似:

• 單擊畫(huà)布以添加新的矢量點(diǎn)。
• 單擊并拖動(dòng)以添加彎曲點(diǎn)。
• 拖動(dòng)時(shí)按住 SHIFT 以將曲線手柄自動(dòng)對(duì)齊到X或Y軸。
• 拖動(dòng)時(shí)按住 ALT 可獨(dú)立移動(dòng)拖動(dòng)手柄。
• 雙擊畫(huà)布或按 ESC 創(chuàng)建一個(gè)開(kāi)放路徑形狀。(一條線)

* 如果繪制具有兩個(gè)直線矢量點(diǎn)的開(kāi)放形狀，在“概要”窗格中標(biāo)記為“線”，彎曲點(diǎn)或者使用兩個(gè)以上的點(diǎn)，標(biāo)記為“形狀”，可以像設(shè)置其他線元件一樣進(jìn)行樣式設(shè)置。

14 曲線

除了使用“鋼筆”工具繪制曲線外，還可以彎曲已經(jīng)創(chuàng)建的直線，選擇線并雙擊邊框編輯其矢量點(diǎn)。

沿直線單擊，添加任意數(shù)量的新點(diǎn)，雙擊一個(gè)點(diǎn)使其彎曲，或右鍵單擊，在上下文菜單中選擇“曲線”，可以拖動(dòng)點(diǎn)的曲線手柄以調(diào)整曲線的寬度和方向。

線樣式及箭頭

使用“樣式”窗格中的“邊框”屬性設(shè)置線條的樣式:

• 顏色
• 線寬
• 模式
• 箭頭(行的兩端可以有不同的箭頭)

通過(guò)以下選項(xiàng)將文本添加到線元件或編輯其當(dāng)前文本:

• 選擇該行并按ENTER進(jìn)入文本編輯模式。
• 右鍵單擊該行，然后在上下文菜單中選擇“編輯文本”。
• 選擇行并開(kāi)始輸入。(僅當(dāng)你禁用了單鍵快捷方式時(shí)，此選項(xiàng)才可用)

15 動(dòng)態(tài)面板

動(dòng)態(tài)面板是一個(gè)容器，它將其他元件保存在“狀態(tài)”集合中，動(dòng)態(tài)面板可以有一種或多種狀態(tài)，并且一次只能看到其中一種狀態(tài)，使用“設(shè)置面板狀態(tài)”操作動(dòng)態(tài)設(shè)置可見(jiàn)狀態(tài)，動(dòng)態(tài)面板適合創(chuàng)建輪播和幻燈片。

動(dòng)態(tài)面板是唯一可以在瀏覽器中拖動(dòng)或滑動(dòng)的元件， 也是唯一可以固定到瀏覽器的元件。

元件庫(kù)中有一個(gè)空的動(dòng)態(tài)面板元件，從“元件庫(kù)”窗格拖到畫(huà)布上的動(dòng)態(tài)面板將以一個(gè)可以添加元件的空狀態(tài)開(kāi)始。

* 默認(rèn)情況下，動(dòng)態(tài)面板的尺寸是固定的，點(diǎn)擊啟用“自適應(yīng)內(nèi)容”，可以調(diào)整大小。

選擇一個(gè)或多個(gè)元件，單擊鼠標(biāo)右鍵，然后在上下文菜單中選擇“創(chuàng)建動(dòng)態(tài)面板”，可以使用畫(huà)布上已有的元件創(chuàng)建新的動(dòng)態(tài)面板。

動(dòng)態(tài)面板默認(rèn)情況下覆蓋藍(lán)色遮罩，可以在應(yīng)用程序菜單的“視圖”→“遮罩”中切換遮罩。

* 元件遮罩，包括動(dòng)態(tài)面板遮罩，不會(huì)在瀏覽器中顯示。

管理狀態(tài)

雙擊畫(huà)布上的動(dòng)態(tài)面板進(jìn)入編輯模式，狀態(tài)包括藍(lán)綠色邊框和畫(huà)布周圍的工具欄指示。

在動(dòng)態(tài)面板的狀態(tài)下添加，刪除和編輯元件，還可以通過(guò)單擊畫(huà)布右上方的“隔離”來(lái)切換動(dòng)態(tài)面板外部元件的可見(jiàn)性。

單擊畫(huà)布頂部的當(dāng)前狀態(tài)名稱，在顯示的下拉菜單中，可以編輯動(dòng)態(tài)面板本身的狀態(tài)，執(zhí)行以下操作:

• 單擊狀態(tài)名在畫(huà)布上查看包含元件。
• 單擊狀態(tài)名右側(cè)的復(fù)制狀態(tài)圖標(biāo)可以復(fù)制狀態(tài)。
• 單擊狀態(tài)名右側(cè)的刷除狀態(tài)圖標(biāo)可以刪除狀態(tài)。
• 單擊下拉菜單底部的添加狀態(tài)以創(chuàng)建新?tīng)顟B(tài)。

上下拖動(dòng)狀態(tài)名稱以對(duì)其進(jìn)行重新排序(最上面的狀態(tài)是默認(rèn)情況下可見(jiàn)的狀態(tài))。

在“概要”窗格中選擇一個(gè)動(dòng)態(tài)面板狀態(tài)或包含的一個(gè)元件，可以在畫(huà)布上打開(kāi)狀態(tài)進(jìn)行編輯。

拖動(dòng)到“概要”窗格中，可以快速將現(xiàn)有元件移入或移出動(dòng)態(tài)面板狀態(tài)。

將鼠標(biāo)懸停名稱上，單擊右側(cè)的“添加狀態(tài)”圖標(biāo)，可以將新?tīng)顟B(tài)添加到動(dòng)態(tài)面板。

同樣，鼠標(biāo)懸停在名稱上，單擊右側(cè)的“復(fù)制狀態(tài)”圖標(biāo)可以復(fù)制狀態(tài)，選擇一個(gè)狀態(tài)，按Delete鍵刪除，或者右鍵單擊并在上下文菜單中選擇刪除。

上下拖動(dòng)或右鍵單擊，使用上下文菜單中的選項(xiàng)，可以重新排列動(dòng)態(tài)面板狀態(tài)，頂部狀態(tài)默認(rèn)情況下可見(jiàn)的狀態(tài)。

* 如果動(dòng)態(tài)面板妨礙畫(huà)布上的其他元件交互，可以通過(guò)“概要”窗格中單擊名稱右側(cè)的“從視圖隱藏”圖標(biāo)來(lái)暫時(shí)隱藏，在畫(huà)布上隱藏面板，瀏覽器中仍將可見(jiàn)，要再次顯示面板，再次單擊該圖標(biāo)。

在動(dòng)態(tài)面板上單擊鼠標(biāo)右鍵，然后在上下文菜單中選擇“從首狀態(tài)脫離”，可以將動(dòng)態(tài)面板包含的所有元件放在面板外部的畫(huà)布上。

* 如果動(dòng)態(tài)面板只有一個(gè)狀態(tài)，使用從首狀態(tài)脫離也會(huì)刪除該動(dòng)態(tài)面板。

使用“樣式”窗格中的以下選項(xiàng)來(lái)設(shè)置動(dòng)態(tài)面板狀態(tài)的樣式，每個(gè)狀態(tài)對(duì)每個(gè)屬性都有自己的選項(xiàng)，因此可以為所有樣式設(shè)置相同或不同的樣式。

填充顏色或圖片:這些是背景屬性，填充顏色或圖片僅在動(dòng)態(tài)面板未覆蓋元件的區(qū)域中可見(jiàn)。

邊框顏色、類型和可見(jiàn)性:狀態(tài)邊框在所包含的元件上層呈現(xiàn)，因此粗邊框可以在面板狀態(tài)的邊緣處重疊或切斷元件。

外陰影:陰影在動(dòng)態(tài)面板下方渲染，在“樣式”窗格中選擇的移值始終可見(jiàn)。

圓角半徑和可見(jiàn)度:面板狀態(tài)的圓角在其所包含的元件之前顯示，因此圓角可以在面板狀態(tài)的四角遮擋或割除元件。

* 選擇動(dòng)態(tài)面板本身時(shí)，對(duì)這些樣式選項(xiàng)所做的更改僅應(yīng)用于面板的第一個(gè)狀態(tài)。

將動(dòng)態(tài)面板設(shè)置為“自適應(yīng)內(nèi)容”可使寬度和高度依據(jù)包含元件自動(dòng)調(diào)整大小。

在“樣式”窗格中選中或取消選中“自適應(yīng)大小”框，或雙擊動(dòng)態(tài)面板的任意一個(gè)調(diào)整大小手柄。

* 通過(guò)“樣式”窗格中的“ 寬”和“高”字段或拖動(dòng)面板的調(diào)整大小手柄來(lái)手動(dòng)調(diào)整動(dòng)態(tài)面板的大小，“自適應(yīng)內(nèi)容”將被自動(dòng)禁用。

通過(guò)調(diào)整動(dòng)態(tài)面板的大小，讓狀態(tài)的內(nèi)容更短或更窄使，動(dòng)態(tài)面板的內(nèi)容支持滾動(dòng)，這將關(guān)閉“自適應(yīng)內(nèi)容”并隱藏任何超出動(dòng)態(tài)面板邊界的元件。

啟用滾動(dòng)，在“樣式”窗格的“滾動(dòng)”下拉列表中選擇以下選項(xiàng)之一：

• 按需滾動(dòng)
• 水平滾動(dòng)
• 垂直滾動(dòng)

* 動(dòng)態(tài)面板只能在瀏覽器中滾動(dòng)，滾動(dòng)條的樣式由瀏覽器控制，模擬滾動(dòng)條將出現(xiàn)在Axure RP的動(dòng)態(tài)面板上，但不起作用。

使用“100%寬”動(dòng)態(tài)面板使背景顏色或圖片跨越瀏覽器窗口的整個(gè)寬度。

首先為動(dòng)態(tài)面板的第一種狀態(tài)設(shè)置背景顏色或背景圖片，在“樣式”窗格中選中“100%寬度”，在瀏覽器中查看原型時(shí)，背景顏色或圖片將擴(kuò)展窗口的整個(gè)寬度，調(diào)整窗口的大小，動(dòng)態(tài)面板的寬度(及其背景)將自動(dòng)調(diào)整。

* 屬性僅調(diào)整動(dòng)態(tài)面板本身的大小，包含的元件不受影響。

“固定到瀏覽器”選項(xiàng)將動(dòng)態(tài)面板固定在相對(duì)于瀏覽器窗口的位置，在滾動(dòng)頁(yè)面時(shí)不會(huì)移動(dòng)，使用此選項(xiàng)可以構(gòu)建始終可見(jiàn)的導(dǎo)航標(biāo)題和模式窗口之類的東西。

• 選擇一個(gè)動(dòng)態(tài)面板，在“樣式”窗格中單擊“固定到瀏覽器”。
• 在對(duì)話框中，選中“固定到瀏覽器”啟用該功能。
• 在下面，配置面板的水平和垂直位置。

* 根據(jù)Axure RP畫(huà)布上動(dòng)態(tài)面板的X和Y坐標(biāo)自動(dòng)設(shè)置“左”和“上”圖釘選項(xiàng)的邊距，更改邊距，在畫(huà)布上移動(dòng)“動(dòng)態(tài)面板”。

• 如果希望面板始終顯示在頁(yè)面上所有其他元件的前面，選中始終保持頂層。
• 單擊“確定”關(guān)閉對(duì)話框。

16 特定于動(dòng)態(tài)面板的事件和操作

動(dòng)態(tài)面板具有一些其他元件沒(méi)有的特殊功能:可以拖動(dòng)，滑動(dòng)和滾動(dòng)，并且可以動(dòng)態(tài)更改面板的活動(dòng)狀態(tài)(可見(jiàn)狀態(tài))，通過(guò)動(dòng)態(tài)面板特有的事件(“拖動(dòng)”，“向上滑動(dòng)”等)和動(dòng)作(“設(shè)置面板狀態(tài)”“拖動(dòng)移動(dòng)”等)使用這些功能。

如果創(chuàng)建了具有多個(gè)狀態(tài)的動(dòng)態(tài)面板，則可以使用“設(shè)置面板狀態(tài)”操作在瀏覽器中動(dòng)態(tài)更改面板的可見(jiàn)狀態(tài)。

配置操作時(shí)，可以從以下選項(xiàng)選擇狀態(tài):

特定面板的狀態(tài)

下一項(xiàng)，將面板設(shè)置為列表中的下一個(gè)狀態(tài)，可與“每隔..毫秒重復(fù)”復(fù)選框一起用，以自動(dòng)循環(huán)顯示面板的所有狀態(tài)，添加向后循環(huán)選項(xiàng)能夠創(chuàng)建重復(fù)的結(jié)構(gòu)，例如圖片輪播和幻燈片。

上一項(xiàng)，將面板設(shè)置為列表中的上一項(xiàng)狀態(tài)，與“下一項(xiàng)類似地配置此選項(xiàng)”。

停止循環(huán)，停止任何向前或向后循環(huán):

值，允許通過(guò)面板的名稱或在狀態(tài)列表(1、2、3等)中的位置將面板設(shè)置為特定狀態(tài)，在此字段中輸入文字值，也可以使用變量或表達(dá)式動(dòng)態(tài)填充。

默認(rèn)情況下，動(dòng)態(tài)面板中具有鼠標(biāo)樣式效果元件將照常工作:鼠標(biāo)懸?；騿螕魹g覽器中的元件時(shí)，將顯示樣式效果。

可以選擇在鼠標(biāo)懸?；騿螕魟?dòng)態(tài)面板本身的任何(包括元件之間的空白區(qū)域)時(shí)立即觸發(fā)所有包含的元件的樣式效果。

選擇動(dòng)態(tài)面板，在“交互”窗格的“更多屬性”菜單中選中“觸發(fā)鼠標(biāo)樣式效果”框。

動(dòng)態(tài)面板包含元件上的交互動(dòng)態(tài)面板元件相同的事件(例如，單擊或點(diǎn)擊)，可能會(huì)導(dǎo)致沖突。如果動(dòng)態(tài)面板及其包含的元件之一對(duì)同一事件設(shè)置了動(dòng)作，則將執(zhí)行元件的動(dòng)作，而不是面板的動(dòng)作。

17 內(nèi)聯(lián)框架

使用內(nèi)聯(lián)框架將HTML，視頻，音頻和其他媒體文件嵌入到Axure RP圖中，使用內(nèi)聯(lián)框架插入RP文件外部的內(nèi)容，例如YouTube視頻和Google Maps，也可以使用它們將Axure RP原型頁(yè)面彼此嵌入。

內(nèi)聯(lián)框架元件在“默認(rèn)”元件庫(kù)中。

雙擊內(nèi)聯(lián)框架元件，或在“樣式”窗格中單擊“添加框架目標(biāo)”顯示“鏈接屬性”對(duì)話框，可以選擇在RP文件中嵌入另一個(gè)頁(yè)面，也可以使用“鏈接到外部URL或文件”嵌入外部?jī)?nèi)容。

要嵌入網(wǎng)絡(luò)托管頁(yè)面或文件，使用網(wǎng)址:要嵌入本地文件，在瀏覽器中使用相對(duì)或絕對(duì)路徑。

默認(rèn)情況下，內(nèi)聯(lián)框架中的內(nèi)容被邊框包圍，邊框樣式由瀏覽器控制，刪除邊框，選擇內(nèi)聯(lián)框架，選中“樣式”窗格中的“隱藏邊框”復(fù)選框。

默認(rèn)情況下，內(nèi)聯(lián)框架的嵌入式媒體大于框架本身，則內(nèi)聯(lián)框架將是可滾動(dòng)的，如果嵌入的內(nèi)容比框架高它將顯示一個(gè)垂直滾動(dòng)條，如果嵌入的內(nèi)容比框架寬，則將顯示一個(gè)水平滾動(dòng)條。

更改滾動(dòng)行為，選擇內(nèi)聯(lián)框架，在“樣式”窗格的“滾動(dòng)”下拉列表中選擇其他選項(xiàng)。

頁(yè)面加載到瀏覽器中，就會(huì)動(dòng)態(tài)加載內(nèi)聯(lián)框架元件嵌入式的內(nèi)容，嵌入內(nèi)容不會(huì)出現(xiàn)在Axure RP畫(huà)布上，可以通過(guò)預(yù)覽查看框架內(nèi)容。

選擇內(nèi)聯(lián)框架窗l(fā)元件，在“樣式”選項(xiàng)卡的“預(yù)覽”下拉列表中選擇以下選項(xiàng)之一:

• 無(wú)預(yù)覽(default默認(rèn))
• 視頻
• 地圖
• 自定義預(yù)覽(允許你導(dǎo)入自己的圖片)

* 預(yù)覽圖片僅出現(xiàn)在Axure RP的畫(huà)布上，不會(huì)顯示在瀏覽器中。

使用交互方式為內(nèi)聯(lián)框架元件動(dòng)態(tài)設(shè)置目標(biāo)頁(yè)面或文件，在所需事件(例如，按鈕的點(diǎn)擊事件)下設(shè)置“框架內(nèi)打開(kāi)鏈接”操作，然后在RP文件中選擇一個(gè)頁(yè)面或輸入外部URL或文件路徑。

框架中的打開(kāi)鏈接操作可以選擇以“父框架”為目標(biāo)，而不是特定的嵌入式框架元件，可以在嵌入式框架中加載的頁(yè)面中使用此選項(xiàng)，以更改包含嵌入式框架中的當(dāng)前頁(yè)面。

網(wǎng)站可以選擇阻止頁(yè)面嵌入到其他域托管的頁(yè)面中，這樣可以防止此類頁(yè)面顯示在Axure RP的內(nèi)聯(lián)框架元件中。

無(wú)法嵌入到內(nèi)聯(lián)框架元件中網(wǎng)站的一些示例是Google，F(xiàn)acebook，Yahoo和Twitter。

不可能在父頁(yè)面和任何嵌入式頁(yè)面之間來(lái)回傳遞變量值，這是一種稱為“跨站點(diǎn)腳本”的網(wǎng)絡(luò)安全違規(guī)，大多數(shù)瀏覽器均不允許使用。

作為一種安全措施，大多數(shù)瀏覽器都會(huì)阻止網(wǎng)站訪問(wèn)本地文件。這意味著托管在Axure Cloud上或通過(guò)“預(yù)覽”選項(xiàng)查看的Axure RP原型(通過(guò)本地運(yùn)行的Web服務(wù)器提供原型)無(wú)法訪問(wèn)嵌入在內(nèi)聯(lián)框架元件中的本地文件。

內(nèi)聯(lián)框架中嵌入了本地文件，需要通過(guò)“發(fā)布”→“生成HTML文件”生成基HTML文件的本。

18 中繼器

中繼器元件是一種高級(jí)的元件類型，用于顯示文本，圖片和其他元素的重復(fù)集合，中繼器是容納一組稱為“項(xiàng)目”的元件容器，元件在頁(yè)面上重復(fù)多次，項(xiàng)目的每次重復(fù)都可以彼此不同，差異由輸入到中繼器表格形式的“數(shù)據(jù)集”中的數(shù)據(jù)控制。

中繼器是數(shù)據(jù)驅(qū)動(dòng)，可以動(dòng)態(tài)顯示排序和篩選，需要演示動(dòng)態(tài)排序或篩選設(shè)計(jì)(例如動(dòng)態(tài)表或產(chǎn)品列表)時(shí)，使用中繼器。但是，中繼器會(huì)花費(fèi)很多工作來(lái)設(shè)置，如果原型不需要真正的動(dòng)態(tài)排序和篩選，可以使用常規(guī)的元件，例如表格元件。

中繼器元件在“默認(rèn)”元件庫(kù)中。

中繼器元件由兩部分組成:“項(xiàng)目”包含將要重復(fù)的元件集合，“數(shù)據(jù)集”包含控制每個(gè)重復(fù)外觀的表格數(shù)據(jù)。

存儲(chǔ)在數(shù)據(jù)集中的文本和圖片通過(guò)中繼器的“項(xiàng)目加載”事件下的交互顯示在項(xiàng)目的元件上。

重復(fù)的元件集合稱為“項(xiàng)目”，通過(guò)雙擊畫(huà)布或“概要”窗格中的中繼器來(lái)編輯項(xiàng)目中的元件。在編輯項(xiàng)目時(shí)，只會(huì)看到包含元件的一個(gè)實(shí)例，可以通過(guò)單擊畫(huà)布右上方的“隔離”來(lái)隱藏頁(yè)面上的其他元件。

對(duì)于中繼器數(shù)據(jù)集中的每一行數(shù)據(jù)，中繼器中的元件都會(huì)重復(fù)一次，例如，默認(rèn)元件庫(kù)中的中繼器以其項(xiàng)目中的單個(gè)矩形元件及數(shù)據(jù)集中的三行數(shù)據(jù)開(kāi)始，這就是為什么第一次將默認(rèn)中繼器拖到畫(huà)布上時(shí)，看到矩形重復(fù)3次的原因。

控制中繼器元件重復(fù)的數(shù)據(jù)表稱為“數(shù)據(jù)集”，在“樣式”窗格中查看和編輯中繼器的數(shù)據(jù)集。將行或列添加到數(shù)據(jù)集中，單擊添加列，添加行或使用表格上方的圖標(biāo)。還可以使用按鈕移動(dòng)、刪除列和行，或者通過(guò)右鍵單擊表中的單元格來(lái)執(zhí)行此操作。

中繼器數(shù)據(jù)集中的數(shù)據(jù)決定了中繼器重復(fù)之間的差異，例如，默認(rèn)元件庫(kù)中的中繼器從三行數(shù)據(jù)開(kāi)始，每行包含一個(gè)數(shù)字:1、2、3，這些是打印在畫(huà)布上中繼器的三個(gè)矩形元件上的數(shù)字。

* 選擇一個(gè)單元格并按CTRL+V(Windows)或CMD+V(Mac)將電子表格應(yīng)用程序(如Microsoft Excel和Google表格)中的表格數(shù)據(jù)粘貼到中繼器的數(shù)據(jù)集中。

在項(xiàng)目中顯示數(shù)據(jù)

將文本輸入數(shù)據(jù)集單元格，選擇單元格并開(kāi)始輸入，或者，雙擊一個(gè)單元格編輯其現(xiàn)有文本要在中繼器的項(xiàng)目中的元件上顯示數(shù)據(jù)集文本，在中繼器的“項(xiàng)目加載”事件中使用“設(shè)置文本”操作。在“設(shè)置為”下拉列表中選擇文本，然后單擊“值”字段右側(cè)的fx圖標(biāo)。

在“編輯文本”對(duì)話框頂部，單擊“插入變量或函數(shù)”，下拉菜單的Repeater中，單擊ltem,ColumnName，其中“ColumnName”是包含文本的數(shù)據(jù)集列的名稱。(使用默認(rèn)中繼器，在列表中將看到Item.Column0。)

單擊“確定”關(guān)閉“編輯文本”對(duì)話框。

數(shù)據(jù)集單元格還可以保存圖片文件，右鍵單擊一個(gè)單元格，選擇“導(dǎo)入圖片”。

中繼器中的圖片元件上顯示數(shù)據(jù)集圖片，在“項(xiàng)目加載”事件下配置“設(shè)置圖片”操作，在“設(shè)置默認(rèn)圖片”下，下拉列表中選擇“值”，單擊文本字段右側(cè)的fx圖標(biāo)。

使用“樣式”窗格中的“填充”“邊框”和“圓角”選項(xiàng)為中繼器添加邊框和背景色，中繼器的邊框和背最呈現(xiàn)在中繼器元件后面，需要在中繼器中添加填充才能看到它，“樣式”窗格的“填充”選項(xiàng)允許在中繼器的外邊緣與其項(xiàng)目之間創(chuàng)建空白區(qū)域。

中繼器可以具有自己的背景顏色，顏色與中繼器本身的背景不同，在“樣式”窗格的“背景色”中選擇顏色，此外，可以選中“交替顏色”框以選擇將應(yīng)用于其他所有項(xiàng)目的第二種顏色。

數(shù)據(jù)集單元格還可以包含 URL和對(duì) RP 文件中其他頁(yè)面的引用，以純文本形式輸入 URL，右鍵單擊單元格并選擇引用頁(yè)面保存，在出現(xiàn)的對(duì)話框中，選擇要為其存儲(chǔ)引用的頁(yè)面。

使用 URL和頁(yè)面引用在中繼器項(xiàng)目中的元件事件上創(chuàng)建打開(kāi)鏈接交互-例如，按鈕元件的點(diǎn)擊事件，在鏈接到下拉列表中選擇鏈接到外部 URL，單擊帶有 https://text的文本字段旁邊的 fx 圖標(biāo)。

在出現(xiàn)的“編輯值”對(duì)話框頂部，單擊“插入變量”或“函數(shù)”。

在下拉列表的Repeater，單擊ltem.ColumnName，“ColumnName”包含 URL和頁(yè)面引用的數(shù)據(jù)集列的名稱。

單擊確定關(guān)閉編輯值對(duì)話框。

默認(rèn)情況下，中繼器所有元件都是可見(jiàn)的，垂直排列在單列中，元件之間沒(méi)有空格，使用“樣式”窗格的“間距”、“布局”和“分頁(yè)”中的選項(xiàng)更改設(shè)置。

在樣式窗格間距中，可以指定重復(fù)項(xiàng)的行或列之間應(yīng)該有多少空白空間，如果中繼器設(shè)置了背景顏色，它將在此空自空間中可見(jiàn)。

布局，選擇中繼器的項(xiàng)目是垂直堆疊在一列中還是水平堆疊在一行中，如果希望中繼器分成多列或多行，選中網(wǎng)格排布復(fù)選框并輸入希望每列或每行具有的項(xiàng)目數(shù)。

分頁(yè)將中繼器項(xiàng)目分成多個(gè)“頁(yè)面”—不要與頁(yè)面窗格中的原型頁(yè)面混淆—這樣可以控制一次可見(jiàn)的項(xiàng)目數(shù)量。

在樣式窗格的分頁(yè)，選中多頁(yè)復(fù)選框,輸入希望在每頁(yè)上顯示的項(xiàng)目數(shù)，并輸入希望中繼器開(kāi)始的頁(yè)數(shù)(默認(rèn)為 1),使用“設(shè)置當(dāng)前頁(yè)面”操作來(lái)瀏覽中繼器的頁(yè)面，并且可以使用“設(shè)置每頁(yè)項(xiàng)目數(shù)”操作來(lái)動(dòng)態(tài)更改每頁(yè)的項(xiàng)目數(shù)。

使用“樣式”窗格中的“填充”“邊框”和“圓角”選項(xiàng)為中繼器添加邊框和背景色，中繼器的邊框和背景呈現(xiàn)在中繼器元件后面，需要在中繼器中添加填充才能看到，“樣式”窗格的“填充”中的選項(xiàng)允許在中繼器的外邊緣與其項(xiàng)目之間創(chuàng)建空白區(qū)域。

中繼器也可以具有背景顏色，顏色與中繼器本身的背景不同，可以在“樣式”窗格的“背景色”中選擇顏色，此外，選中“交替顏色”框以選擇將應(yīng)用于其他所有項(xiàng)目的第二種顏色。

“適應(yīng)HTML中內(nèi)容”復(fù)選框位于“樣式”窗格中數(shù)據(jù)集的上方，默認(rèn)情況下處于啟用狀態(tài)，啟用后，每個(gè)中繼器將自動(dòng)調(diào)整大小以適應(yīng)包含的元件。

如果禁用選項(xiàng)，不管所包含元件的大小，位置或可見(jiàn)性如何變化，每個(gè)中繼器始終保持固定大小，移動(dòng)或顯示元件擴(kuò)展到其自身的固定邊界之外，可能與其他中繼器重疊。

* 適應(yīng)HTML中內(nèi)容”不適用于中繼器，中繼器在頁(yè)面初始化加載后會(huì)重新加載，包括已排序或篩選的中繼器，以及在瀏覽器中動(dòng)態(tài)添加，刪除或更新行的中繼器。

默認(rèn)情況下，中繼器中的單選組和選擇組將針對(duì)該項(xiàng)目的每個(gè)實(shí)例分別進(jìn)行執(zhí)行，例如，該項(xiàng)目具有一個(gè)帶有三個(gè)單選按鈕的單選組，則選擇其中一個(gè)按鈕將取消選擇該項(xiàng)目實(shí)例中的其他兩個(gè)按鈕，但是該項(xiàng)目其他實(shí)例中的其他單選按鈕將不會(huì)因被選中而受影響。

通過(guò)取消選中“交互”窗格右上方“更多屬性”菜單中的“隔離單選組”和“隔離選擇組”復(fù)選框來(lái)更改，禁用選項(xiàng)后，將在項(xiàng)目的每個(gè)實(shí)例中執(zhí)行中繼器中單選組和選擇組，這意味著在項(xiàng)目實(shí)例中選擇單選按鈕組中的單選按鈕將在項(xiàng)目的每個(gè)其他實(shí)例中取消選擇單選按鈕組中的所有其他按鈕。

默認(rèn)情況下中繼器覆蓋綠色遮罩，以使包含元件易于與畫(huà)布上其他元件區(qū)分，在應(yīng)用程序菜單的“視圖”→“遮罩”中切換遮罩。

* 元件遮罩，包括中繼器遮罩，不會(huì)在瀏覽器中展示。

在瀏覽器中加載中繼器的每個(gè)實(shí)例，都會(huì)觸發(fā)一次項(xiàng)目加載事件。例如，該事件將針對(duì)其數(shù)據(jù)集包含三行的中繼器觸發(fā)三遍，因?yàn)槊恳恍卸紩?huì)創(chuàng)建項(xiàng)目的新實(shí)例，此外，項(xiàng)目加載事件始終按從上到下的順序處理數(shù)據(jù)集行。

初次加載頁(yè)面時(shí)，中繼器將加載其所有項(xiàng)目，并且每當(dāng)對(duì)中繼器的數(shù)據(jù)集進(jìn)行更改時(shí)，都會(huì)重新加載其所有項(xiàng)目，這意味著“項(xiàng)目加載”事件在頁(yè)面加載時(shí)針對(duì)項(xiàng)目的每個(gè)實(shí)例觸發(fā)一次，并日每次添加，心除或更新數(shù)據(jù)集行時(shí)都會(huì)觸發(fā)一次。

中繼器的實(shí)例包含元件發(fā)生更改而重新調(diào)整其大小時(shí)，都會(huì)觸發(fā)“項(xiàng)目尺寸改變”事件，僅當(dāng)將中繼器設(shè)置為適合內(nèi)容時(shí)，才會(huì)執(zhí)行該事件。

使用“添加排序”和“刪除排序”操作，可以按中繼器的任何數(shù)據(jù)集列對(duì)其行進(jìn)行動(dòng)態(tài)排序，按以下數(shù)據(jù)類型對(duì)列的值進(jìn)行排序:

• 數(shù)字
• 文本
• 文本(區(qū)分大小寫(xiě))
• 日期-YYYY-MM-DD
• 日期-MM/DD/NYYY

選擇升序或降序?qū)π羞M(jìn)行排序，或者每當(dāng)重新應(yīng)用排序時(shí)都可以在兩者之間切換。

使用“添加篩選”和“刪除篩選”操作，可以動(dòng)態(tài)篩選中繼器以顯示滿足特定條件的行，使用布爾表達(dá)式定義這些條件，布爾表達(dá)式將一個(gè)值(通常是數(shù)據(jù)集列或其他中繼器屬性)與另一個(gè)值進(jìn)行比較，簡(jiǎn)單的示例包括:

• [[ltem.State ==‘CA’]]將在“狀態(tài)”列中僅顯示值為“CA”的行。
• [[ltem.Price<= 20]]僅顯示價(jià)格列中的值小于或等于20的行。
• [[ltem.TasksCompleted!=ltem,TasksAssigned1]]將僅顯示其TasksCompleted列中的值與TasksAssianed列中的值不相等的行。

使用以下操作在瀏覽器中動(dòng)態(tài)更改中繼器的數(shù)據(jù)集:

• 添加行:向數(shù)據(jù)集添加新行。
• 刪除行:從數(shù)據(jù)集中刪除行。
• 更新行:更改數(shù)據(jù)集中現(xiàn)有行的列值。
• 標(biāo)記行:指定以后要?jiǎng)h除或更新的行。
• 取消標(biāo)記行:取消標(biāo)記先前標(biāo)記的行。

除了中繼器數(shù)據(jù)集中每一行的內(nèi)容之外，還可以使用下面的對(duì)象和屬性來(lái)訪問(wèn)值表達(dá)式中有關(guān)數(shù)據(jù)集的元信息。

項(xiàng)目和目標(biāo)項(xiàng)目

Item對(duì)象是指由給定交互(通常是ltem Loaded事件下的一個(gè)動(dòng)作)處理的單個(gè)中繼器數(shù)據(jù)集行。

Targetltem是一個(gè)相似的對(duì)象，可讓訪問(wèn)與ltem相同的所有屬性，兩者之間的區(qū)別在于，中繼器內(nèi)部的元件交互中使用Targetltem，訪問(wèn)有關(guān)其他中繼器的信息。

可以對(duì)ltem和Targetltem對(duì)象使用以下屬性:

• Itemm.ColumnName: 表示存儲(chǔ)在命名列中的數(shù)據(jù)。
• ltem.isFirst: 在應(yīng)用了排序，篩選和分頁(yè)之后，如果該行是中繼器中的第一個(gè)可見(jiàn)行，則返回true，否則返回false。
• ltemm.isLast: 在應(yīng)用了排序，篩選和分頁(yè)之后，如果該行是中繼器中的最后一個(gè)可見(jiàn)行，則返回true，否則返回false。
• ltem.index: 代表數(shù)據(jù)集中行號(hào)的數(shù)值。例如，數(shù)據(jù)集中第三行的該值為3。
• ltemm.isEven: 如果ltem,index是偶數(shù)，則返回true，否則返回false。
• ltem.isOdd:如果ltem.index為奇數(shù)，則返回true，否則返回false。
• ltemm,isMarked:如果當(dāng)前已標(biāo)記該行，則返回true，否則返回false。
• ltem.isVisible: 在應(yīng)用了篩選和分頁(yè)之后，如果該行當(dāng)前在中繼器中可見(jiàn)，則返回true，否則返回false。

中繼器對(duì)象提供有關(guān)中繼器整個(gè)數(shù)據(jù)集的信息，使用中繼器元件事件時(shí)，將使用ltem.Repeater訪問(wèn)此對(duì)象:[[ltem,Repeater.dataCount]]。

在處理中繼器事件時(shí)使用該表示法，也可以將This用作快捷方式，因?yàn)橹欣^器正在訪問(wèn)其自己的屬性:[[This.dataCount]]。

[VAR1.dataCount]使用中繼器外部的元件或頁(yè)面事件時(shí)，要將中繼器存儲(chǔ)為本地變量，將以下屬性附加到本地變量名稱:[[LVAR1.dataCount]]。

可以將以下屬性與Repeater對(duì)象一起使用:

• RepeaterdataCount: 表示中繼器數(shù)據(jù)集中總行數(shù)的數(shù)值。
• RepeateritemCount: 一個(gè)數(shù)字值，表示在應(yīng)用所有選后中繼器中的行數(shù)。
• Repeater.visibleltemCount: 在應(yīng)用了所有篩選和分頁(yè)之后，代表中繼器中當(dāng)前可見(jiàn)行數(shù)的數(shù)值。
• Repeater.pageCount: 代表中繼器中頁(yè)面總數(shù)的數(shù)值。
• Repeaterpagelndex: 數(shù)字值，代表中繼器中當(dāng)前可見(jiàn)的頁(yè)面數(shù)。

動(dòng)態(tài)添加行

• 打開(kāi)一個(gè)新的RP文件，在畫(huà)布上打開(kāi)Page1。
• 將中繼器元件，文本輸入框和按鈕元件拖到畫(huà)布上。
• 將按鈕的文本設(shè)置為“添加新行”。

單擊按鈕時(shí)向中繼器添加一行

1. 選擇按鈕元件，在“交互”窗格中單擊“新建交互”。
2. 在出現(xiàn)的列表中選擇點(diǎn)擊事件，然后選擇添加行操作。
3. 在目標(biāo)下拉列表中選擇中繼器元件。
4. 單擊添加行按鈕，在出現(xiàn)的“將行添加到中繼器”對(duì)話框中，單擊fx圖標(biāo)打開(kāi)“編輯值”對(duì)話框。
5. 在對(duì)話框的底部，單擊“添加局部變量”。
6. 在新的局部變量行的第三個(gè)字段中，選擇文本輸入框元件，局部變量將在瀏覽器中獲取文本輸入框字段的文本。
7. 在對(duì)話框的上方字段中，在方括號(hào)中輸入局部變量的名稱:[[LVAR1]]。
8. 單擊“確定”關(guān)閉“編輯值”對(duì)話框，然后再次單擊“確定”關(guān)閉“將行添加到中繼器”對(duì)話框。
9. 在“交互”窗格中單擊“確定”以保存“添加行”操作。

預(yù)覽頁(yè)面，在文本輸入框中輸入一些文本，單擊添加新行按鈕，將新行添加到中繼器，新行的矩形元件應(yīng)顯示從文本輸入框獲取的文本。

動(dòng)態(tài)刪除中繼器行

1.打開(kāi)一個(gè)新的RP文件，在畫(huà)布上打開(kāi)Page1。

2.將中繼器元件拖動(dòng)到畫(huà)布上，雙擊編輯其項(xiàng)目

3.在“元件庫(kù)”窗格中，切換到“圖標(biāo)”庫(kù)，在窗格左上角的搜索輸入中輸入關(guān)閉

4.將大“X”圖標(biāo)拖動(dòng)到畫(huà)布上，并放置在矩形的右側(cè)。

單擊X時(shí)刪除行

1.選中“X”圖標(biāo)，在“交互”窗格中單擊“新建交互”

2.在出現(xiàn)的列表中選擇點(diǎn)擊事件，選擇刪除行操作。

3.在目標(biāo)下拉列表中選擇中繼器元件。

4.保持選中當(dāng)前(This)單選按鈕，然后單擊確定以保存操作。

* “規(guī)則”選項(xiàng)將刪除符合給定規(guī)則的行，“標(biāo)記”選項(xiàng)將刪除先前標(biāo)記的行。

預(yù)覽頁(yè)面并逐個(gè)單擊“X”圖標(biāo)以刪除中繼器的行

從中繼器外部刪除行

從中繼器外部刪除行時(shí)，使用篩選規(guī)則或標(biāo)記要?jiǎng)h除的行來(lái)指定應(yīng)刪除的行。

更新中繼器行

1.打開(kāi)一個(gè)新的RP文件，在畫(huà)布上打開(kāi)頁(yè)面Page1。

2.將中繼器元件拖動(dòng)到畫(huà)布上，雙擊以打開(kāi)其項(xiàng)目進(jìn)行編輯。

單擊矩形時(shí)更新行的Column0值

1.選擇矩形元件，在“交互”窗格中單擊“新建交互”。

2.在出現(xiàn)的列表中選擇點(diǎn)擊事件，選擇更新行操作。

3.在目標(biāo)下拉列表中選擇中繼器元件。

4.保持選中This單選按鈕。

5.單擊+選擇列，然后在列表中選擇Column0。

6.在出現(xiàn)的下拉菜單中保持“值”處于選中狀態(tài)然后在它旁邊的文本字段中輸入“已單擊!”

7.單擊確定以保存操作。

在瀏覽器中瀏覽頁(yè)面，然后在中繼器中單擊一個(gè)矩形，其文本應(yīng)更新為“已單擊！”

標(biāo)記中繼器行

1.打開(kāi)一個(gè)新的RP文件，在畫(huà)布上打開(kāi)Page1。

2.將中繼器元件拖動(dòng)到畫(huà)布上，雙擊它以編輯其項(xiàng)目，

3.將復(fù)選框元件拖動(dòng)到畫(huà)布上，并將其放置在矩形的右側(cè)。

4.將復(fù)選框標(biāo)簽的文本設(shè)置為“標(biāo)記行”

選中復(fù)選框時(shí)標(biāo)記行

取消選中復(fù)選框時(shí)取消標(biāo)記行

1.復(fù)選框元件處于選中狀態(tài)的情況下，再次在“交互”窗格中單擊“新建交互”。

2.在出現(xiàn)的列表中選擇“取消選中”事件，然后選擇“取消標(biāo)記行”操作。

3.在目標(biāo)下拉列表中選擇中繼器元件。

4.保持選中This單選按鈕，單擊確定保存操作。

5.單擊畫(huà)布右上角的“關(guān)閉”，或按ESC鍵關(guān)閉中繼器的項(xiàng)目。

單擊按鈕刪除所有標(biāo)記行

1.將按鈕元件拖到畫(huà)布上，并將文本設(shè)置為“刪除標(biāo)記的行”。

2.選中按鈕后，在“交互”窗格中單擊“新建交互”。

3.在出現(xiàn)的列表中選擇點(diǎn)擊事件，然后選擇刪除行操作。

4.在目標(biāo)下拉列表中選擇中繼器元件。

5.選擇標(biāo)記單選按鈕，然后單擊確定以保存操作。

預(yù)覽頁(yè)面并選中一些中繼器行的框，單擊“刪除標(biāo)記的行”按鈕以刪除選中的行。

排序中繼器行

1.打開(kāi)一個(gè)新的RP文件，在畫(huà)布上打開(kāi)頁(yè)面Page 1。

2.將中繼器和按鈕元件拖到畫(huà)布上。

3.將按鈕上的文本設(shè)置為“添加排序”。

4.選擇中繼器元件，在“樣式”窗格中，將兩行添加到數(shù)據(jù)集的Column0中，其中一列的值為4，另一行的值為5。

5.使用數(shù)據(jù)集上方的藍(lán)色箭頭對(duì)行進(jìn)行上下移動(dòng)，以使Column0的值不再按順序排列。

添加排序

1.選擇“添加排序”按鈕，在“交互”窗格中單擊“新建交互”。

2.在出現(xiàn)的列表中選擇點(diǎn)擊事件，然后選擇添加排序操作。

3.在目標(biāo)下拉列表中選擇中繼器元件。

4.在名稱字段中，輸入Toggle Column0。

5.在“列”下拉列表中選擇“Column0”，在“排序方式”下拉列表中選擇“數(shù)字”。

6.在“排序”下拉列表中，選擇“切換”，然后在“默認(rèn)”下拉列表中選擇“升序”，這種排序?qū)⒁詳?shù)據(jù)集的Column0為目標(biāo)，將數(shù)據(jù)視為數(shù)字，并在單擊按鈕時(shí)在升序和降序之間來(lái)回切換排序順序。

7.單擊確定保存操作。

移除排序

1.將另一個(gè)按鈕元件拖動(dòng)到畫(huà)布上，并將文本設(shè)置為“刪除排序”。

2.選中按鈕元件后，在“交互”窗格中單擊“新建交互”。

3.在出現(xiàn)的列表中選擇點(diǎn)擊事件，然后選擇移除排序操作。

4.在目標(biāo)下拉列表中選擇中繼器元件。

5.選擇AII單選按鈕，然后單擊確定以保存操作。

* 僅刪除一個(gè)特定的排序，可以選擇第二個(gè)單選按鈕，在文本字段中輸入排序的名稱。

再次預(yù)覽頁(yè)面，單擊“添加排序”按鈕以對(duì)中繼器進(jìn)行排序，單擊按鈕可將矩形更改為降序，單擊“刪除排序”按鈕，將中繼器恢復(fù)為未排序狀態(tài)。

分頁(yè)中繼器

1.打開(kāi)一個(gè)新的RP文件，在畫(huà)布上打開(kāi)頁(yè)面Page 1。

2.將中繼器元件拖動(dòng)到畫(huà)布上。

3.在“樣式”窗格中，向中繼器的數(shù)據(jù)集添加六行，在Column0中填充數(shù)字4到9。

4.在“元件庫(kù)”窗格中，切換到“圖標(biāo)”庫(kù)，然后使用窗格左上方的搜索字段搜索箭頭，將左箭頭和右箭頭拖到畫(huà)布上，然后在轉(zhuǎn)發(fā)器的每一側(cè)放置一個(gè)。

1.選擇中繼器，在“樣式”窗格底部的“分頁(yè)”中選中“多個(gè)頁(yè)面”

2.在每頁(yè)項(xiàng)目數(shù)字段中輸入3，并將起始頁(yè)面保留為1。

單擊箭頭部件時(shí)設(shè)置當(dāng)前頁(yè)面

1.選擇向右箭頭，在“交互”窗格中單擊“新建交互”。

2.在出現(xiàn)的列表中選擇點(diǎn)擊事件，選擇設(shè)置當(dāng)前頁(yè)面操作。

3.在目標(biāo)下拉列表中選擇中繼器元件。

4.在頁(yè)面下拉菜單中選擇下一項(xiàng)，然后單擊確定保存操作。

5.用左箭頭重復(fù)這些步驟，將中繼器的頁(yè)面設(shè)置為向前。

在瀏覽器中預(yù)覽頁(yè)面，應(yīng)該看到中繼器的前三項(xiàng)顯示，單擊右箭頭查看接下來(lái)的三個(gè)項(xiàng)目，然后再次單擊以查看最后三個(gè)項(xiàng)目，單擊左箭頭可向后瀏覽各個(gè)項(xiàng)目。

顯示當(dāng)前頁(yè)碼和總頁(yè)數(shù)

1.返回Axure RP，將標(biāo)簽元件拖動(dòng)到畫(huà)布上，并放置在中繼器下方，將文本設(shè)置為第1頁(yè)，共3頁(yè)。

2.選擇中繼器元件，在“交互”窗格中，將鼠標(biāo)懸停在“已加載項(xiàng)目”事件下的“設(shè)置文本”操作上，單擊出現(xiàn)的“添加目標(biāo)”按鈕。

3.在目標(biāo)下拉列表中選擇標(biāo)簽元件。

4.單擊“值”字段右側(cè)的fx圖標(biāo)打開(kāi)“編輯文本”對(duì)話框。

5.在對(duì)話框的頂部區(qū)域，突出顯示Page1of3 中的1，單擊“插入變量或函數(shù)”，在出現(xiàn)的列表中的“ 中繼器/數(shù)據(jù)集”下選擇pagelndex，該區(qū)域中的文本現(xiàn)在應(yīng)顯示為:Page[[ltem.Repeater.pagelndex]] of 3。

6.突出顯示3，再次單擊插入變量或函數(shù),在“轉(zhuǎn)發(fā)器/數(shù)據(jù)集”下選擇pageCount,該區(qū)域中的文本現(xiàn)在應(yīng)顯示為:Page[[ltem.Repeater,pagelndex]] of [lltem.Repeater,pageCount]]

括號(hào)中的兩個(gè)表達(dá)式將分別由瀏覽器中中繼器的可見(jiàn)頁(yè)數(shù)及其總頁(yè)數(shù)替換,每當(dāng)中繼器的頁(yè)面更改時(shí)，可見(jiàn)頁(yè)面的編號(hào)將自動(dòng)更新，

7.單擊確定關(guān)閉編輯對(duì)話框

預(yù)覽頁(yè)面，單擊左右箭頭更改中繼器的頁(yè)面,標(biāo)簽元件上的文本應(yīng)更新以顯示當(dāng)前頁(yè)面的編號(hào)。

19 文本輸入框和文本域

文本輸入框和文本區(qū)域是表單控件，可以在瀏覽器中輸入響應(yīng)，位于默認(rèn)元件庫(kù)的“表單”中。

在原型表單字段為簡(jiǎn)短(單行)表單字段時(shí)，使用文本輸入框元件，比如用戶名或密碼字段。

原型表單字段較長(zhǎng)(多行)表單字段時(shí)，使用文本輸域元件。

提示文字

使用“交互”窗格右上方的“更多屬性”菜單中的“提示文本”字段將提示文本添加到文本輸入框/區(qū)域，提示文本將出現(xiàn)在文本輸入框/區(qū)域中，直到用戶與之交互為止，此時(shí)該提示文本將消失，以允許用戶根據(jù)需要填寫(xiě)輸入。

提示文本默認(rèn)為灰色，并應(yīng)用于文本輸入框/區(qū)域的字體顯示，更改提示文本的樣式，在“交互”頂部選擇:提示樣式效果。

選擇在文本輸入框/區(qū)域獲取焦點(diǎn)之后還是在用戶開(kāi)始鍵入之后隱藏提示文本。使用“更多屬性”菜單中的“在之后隱藏”下拉菜單進(jìn)行選擇。

20 輸入類型(僅文本輸入框)

文本輸入框元件可以提供不同的輸入類型，在用戶輸入表單中定義功能，使用“交互”窗格中“更多屬性”菜單中的“類型”下拉列表，為文本字段選擇輸入類型。

瀏覽器通常將自己的樣式應(yīng)用于某些類型的文本字段，此外，在移動(dòng)設(shè)備上選擇文本字段時(shí)某些字段類型將導(dǎo)致出現(xiàn)其他類型的鍵盤，例如數(shù)字小鍵盤而不是字母數(shù)字鍵盤。

* 文本輸入框類型是HTML的功能，而不是Axure的發(fā)明，你會(huì)發(fā)現(xiàn)某些字段類型比其他字段類型更適用于Axure RP。

不同類型的字段以及使用該字段類型的結(jié)果如下:

文本: 用于基本文本輸入的默認(rèn)設(shè)置。

密碼: 輸入文字時(shí)將其屏蔽。

郵件: 可能會(huì)在移動(dòng)設(shè)備上提示電子郵件鍵盤。

數(shù)字:僅接受數(shù)字輸入，可能會(huì)在移動(dòng)設(shè)備上提示數(shù)字鍵盤。

手機(jī)號(hào)碼: 可能會(huì)在移動(dòng)設(shè)備上提示撥號(hào)盤。

URL: 可能會(huì)在移動(dòng)設(shè)備上提示網(wǎng)址輸入鍵盤。

搜索: 可以在移動(dòng)設(shè)備的鍵盤上添加搜索按鈕，某些瀏覽器可能會(huì)添加一個(gè)“X”圖標(biāo)，可以單擊以清除該字段。

文件: 將文本字段更改為瀏覽器中的文件上傳按鈕，單擊該按鈕將打開(kāi)設(shè)備的文件瀏覽器(盡管無(wú)法將文件上傳到 Axure RP 原型)。

日期: 可能會(huì)提示使用瀏覽器樣式的日期選擇器或日歷控件。

月:可能會(huì)提示使用瀏覽器樣式的月份和年份選擇器。

時(shí)間: 可能會(huì)提示瀏覽器樣式的時(shí)間選擇器。

文本輸入框，文本區(qū)域和其他表單元件的制表順序由其層深度確定，如“概要”窗格中所示。

通過(guò)單擊交互窗格中的本字段和文本區(qū)域元件的一些附加屬性。

使用“交互”窗格中“更多屬性”菜單中的“最大長(zhǎng)度”字段來(lái)指定文本輸入框?qū)⒔邮艿淖畲筝斎腴L(zhǎng)度，一旦達(dá)到最大字符長(zhǎng)度，字段將停止接受其他文本輸入。

禁用文本輸入框或文本域可防止用戶在瀏覽器中與其進(jìn)行交互，這會(huì)激活元件的:禁用樣式效果，使其顯示為灰色。

有兩種禁用元件的方法:

在“交互”窗格的“更多屬性”菜單中，選中“禁用”復(fù)選框。

通過(guò)啟用/禁用操作在瀏覽器中動(dòng)態(tài)禁用元件，在任何交互過(guò)程中執(zhí)行此操作，例如在頁(yè)面加載或單擊按鈕時(shí)。

提示：使用“啟用/禁用”操作在瀏覽器中動(dòng)態(tài)啟用/禁用元件。

當(dāng)文本輸入框/文本域設(shè)置為“只讀”時(shí)，在瀏覽器中和選擇元件上已經(jīng)存在的文本，用戶無(wú)法更改，要將文本字段/區(qū)域設(shè)置為只讀，選中“交互”窗格中“更多屬性”菜單中的“只讀”復(fù)選框。

通過(guò)操作元件值上的文本選項(xiàng)訪問(wèn)在文輸入框段或文本域中輸入的文本，例如，將全局變量的值設(shè)置為文本輸入框/域上的文本，以將文本帶到另一個(gè)頁(yè)面。

還可以獲取文本輸入框或文本域的文本，僅在文本匹配特定值的情況下才執(zhí)行特定情況，就像在驗(yàn)證用戶名和密碼組合時(shí)所做的那樣。

文本輸入框或文本域在瀏覽器中獲取焦點(diǎn)時(shí)，按ENTER鍵可以觸發(fā)頁(yè)面上另一個(gè)元件的點(diǎn)擊事件，稱為文本輸入框/文本域的“提交按鈕”。

將提交按鈕分配到文本輸入框/域:

1.選擇文本字段/區(qū)域，然后單擊“交互”窗格下部的“顯示全部”。

2.從“提交按鈕”下拉列表中的可選擇元件列表中進(jìn)行選擇。

取消分配提交按鈕，單擊下拉列表底部的取消分配提交按鈕。

21 下拉列表

下拉列表(也稱為下拉菜單)是可切換的列表，其中包含多個(gè)選項(xiàng)，一次只能選擇一個(gè)，下拉列表元件位于默認(rèn)元件庫(kù)的表單中。

希望用戶從許多可能的答案中選擇一個(gè)問(wèn)題的單個(gè)答案時(shí)，使用下拉列表元件。

22 添加，刪除和重新排序下拉列表選項(xiàng)

在下拉列表中添加和編輯選項(xiàng)，雙擊畫(huà)布或概要窗格中的下拉列表元件打開(kāi)編輯下拉列表對(duì)話框，通過(guò)單擊添加，在出現(xiàn)的字段中鍵入新選項(xiàng)的文本，將單個(gè)選項(xiàng)添加到下拉列表，或者，通過(guò)單擊編輯多項(xiàng)一次將多個(gè)新選項(xiàng)添加到下拉列表。

重新排序下拉列表選項(xiàng)，選擇一個(gè)選項(xiàng)，使用對(duì)話框頂部的向上和向下按鈕，刪除選項(xiàng)，選擇它并單擊刪除，或單擊編輯多項(xiàng)并清除文本區(qū)域以一次刪除所有選項(xiàng)。

通常，下拉列表中的第一個(gè)選項(xiàng)將顯示為默認(rèn)選項(xiàng)，希望將其作為默認(rèn)選項(xiàng)，可以移動(dòng)到列表頂部。

但是，如果希望使用下拉菜單選項(xiàng)作為默認(rèn)選項(xiàng)，在編輯下拉列表對(duì)話框中選中其旁邊的框。

* 將空白的默認(rèn)選項(xiàng)添加到下拉列表中，輸入一個(gè)空格字符作為選項(xiàng)文本

在瀏覽器中，單擊一個(gè)下拉列表以將其打開(kāi)并選擇一個(gè)選項(xiàng)。

使用設(shè)置選中列表選項(xiàng)操作動(dòng)態(tài)地更改下拉列表中的選定選項(xiàng)，選擇特定的列表選項(xiàng)，也可以使用變量值來(lái)設(shè)置新的選定選項(xiàng)。

在交互和條件中通過(guò)值選項(xiàng)的選定選項(xiàng)訪問(wèn)下拉列表的選定選項(xiàng)，例如，將全局變量的值設(shè)置為下拉列表的選定選項(xiàng)，將值傳遞到另一個(gè)頁(yè)面，還可以在某種條件下獲取下拉列表的選定選項(xiàng)，以便僅在選項(xiàng)與特定值匹配時(shí)才會(huì)觸發(fā)特定情況。

下拉列表中可用的選項(xiàng)無(wú)法在瀏覽器中動(dòng)態(tài)更改，但可以通過(guò)創(chuàng)建具有多個(gè)狀態(tài)的動(dòng)態(tài)面板來(lái)模擬效果，每個(gè)狀態(tài)都包含具有不同內(nèi)容的下拉列表，要更改下拉列表中的選項(xiàng)，切換動(dòng)態(tài)面板的狀態(tài)。

下拉列表和其他表單元件的制表順序由其層深度確定，如概要窗格中所示。

23 列表框

列表框元件顯示選項(xiàng)列表，用戶可以從中選擇一個(gè)或多個(gè)選項(xiàng)。

列表框元件位于默認(rèn)元件庫(kù)的表單中。

24 添加、刪除和重新排序列表框選項(xiàng)

在列表框中添加和編輯選項(xiàng)，雙擊畫(huà)布或概要窗格中的列表框元件打開(kāi)編輯列表框?qū)υ捒?，通過(guò)單擊添加，在出現(xiàn)的字段中鍵入新選項(xiàng)的文本，將單個(gè)選項(xiàng)添加到列表框中，或者，通過(guò)單擊編輯多項(xiàng)一次將幾個(gè)新選項(xiàng)添加到列表框中。

對(duì)列表框選項(xiàng)重新排序，選擇一個(gè)選項(xiàng)，使用對(duì)話框頂部的向上和向下按鈕。

刪除選項(xiàng)，選擇它并單擊刪除，或單擊編輯多項(xiàng)并清除文本區(qū)域以一次刪除所有選項(xiàng)。

列表框可以允許選擇多個(gè)，但必須先啟用設(shè)置，允許多個(gè)選擇，雙擊列表框，在編輯列表框?qū)υ捒虻牡撞窟x中默認(rèn)情況下允許選擇多個(gè)項(xiàng)目。

啟用設(shè)置后，可以在瀏覽器中通過(guò)按住CTRL或CMD并單擊多個(gè)選項(xiàng)來(lái)選擇多個(gè)選項(xiàng)。

通常，列表框默認(rèn)情況下不會(huì)在瀏覽器中選擇任何選項(xiàng)，但可以在編輯列表框?qū)υ捒蛑羞M(jìn)行更改，雙擊列表框元件，選中對(duì)話框中選項(xiàng)旁邊的框。

* 如果啟用了多個(gè)選項(xiàng)，可以定義多個(gè)默認(rèn)選項(xiàng)。

禁用列表框可防止用戶在瀏覽器中與其進(jìn)行交互，這會(huì)激活元件的:禁用樣式效果，使其顯示為灰色。

禁用元件有兩種方法:

選中交互窗格的更多屬性菜單中的禁用復(fù)選框。

通過(guò)啟用/禁用操作在瀏覽器中動(dòng)態(tài)禁用元件，可以在任何交互過(guò)程中執(zhí)行此操作，例如在頁(yè)面加載時(shí)或單擊按鈕時(shí)。

* 使用“啟用/禁用”操作在瀏覽器中動(dòng)態(tài)啟用/禁用元件。

在瀏覽器中，單擊列表框選項(xiàng)以將其選中，如果啟用了多個(gè)選擇，則可以按住CTRL或CMD，同時(shí)單擊以選擇多個(gè)選項(xiàng)。

還可以使用設(shè)置選定的列表選項(xiàng)操作動(dòng)態(tài)地更改列表框中的選定選項(xiàng)，可以選擇特定的列表選項(xiàng)，也可以使用變量值來(lái)設(shè)置新的選定選項(xiàng)。

通過(guò)交互條件中的值選項(xiàng)的選中選項(xiàng)訪問(wèn)列表框的選中選項(xiàng)，例如，將全局變量的值設(shè)置為列表框的選定選項(xiàng)，將該值傳遞到另一個(gè)頁(yè)面，還可以在條件下獲取列表框的選中選項(xiàng)，以僅在選項(xiàng)與特定值匹配時(shí)才執(zhí)行特定情況。

當(dāng)列表框在瀏覽器中處于焦點(diǎn)狀態(tài)時(shí)，按ENTER鍵可以觸發(fā)頁(yè)面上另一個(gè)元件的點(diǎn)擊事件，稱為列表框的提交按鈕。

要將提交按鈕分配給列表框:

1.擇列表框，然后單擊“交互”窗格下部的“顯示全部”。

2.提交按鈕，下拉列表中的可選元件列表中進(jìn)行選擇。

取消分配提交按鈕，單擊下拉列表底部的取消分配提交按鈕。

列表框中可用的選項(xiàng)無(wú)法在瀏覽器中動(dòng)態(tài)更改，但可以通過(guò)制作具有多個(gè)狀態(tài)的動(dòng)態(tài)面板來(lái)模擬效果。

每個(gè)面板都包含一個(gè)具有不同內(nèi)容的列表框，更改列表框中的選項(xiàng)，切換動(dòng)態(tài)面板的狀態(tài)。

通過(guò)設(shè)置選中列表選項(xiàng)操作動(dòng)態(tài)設(shè)置列表框的選中選項(xiàng)時(shí)，只能選擇一個(gè)選項(xiàng);無(wú)法通過(guò)互動(dòng)同時(shí)選擇多個(gè)選項(xiàng)。

同樣，即使已選擇多個(gè)選項(xiàng)，也只能通過(guò)交互和條件中的值選項(xiàng)的所選選項(xiàng)從列表框中讀取一個(gè)所選選項(xiàng)(最頂部的選項(xiàng))。

解決限制，需要制作一個(gè)帶有形狀元件的自定義列表框。

列表框和其他表單元件的制表順序由其層深度確定，如概要窗格中所示。

25 復(fù)選框

用戶輸入表單中，復(fù)選框?yàn)橛脩籼峁┝硕M(jìn)制選擇，復(fù)選框可用于單一選擇。

復(fù)選框元件位于“默認(rèn)”元件庫(kù)的“表單”中。

在“樣式”窗格的“按鈕”中，使用“大小”字段來(lái)設(shè)置復(fù)選框的寬度和高度。

默認(rèn)情況下，復(fù)選框在左側(cè)，標(biāo)簽文本在右側(cè)，要交換順序，以使文本位于左側(cè)，而框位于右側(cè)，使用“大小”字段右側(cè)的“對(duì)齊”圖標(biāo)。

通過(guò)以下任一選項(xiàng)來(lái)編輯復(fù)選框元件標(biāo)簽上的文本:

雙擊復(fù)選框標(biāo)簽進(jìn)入文本編輯模式。

選擇復(fù)選框標(biāo)簽，按Enter進(jìn)入文本編輯模式。

右鍵單擊復(fù)選框標(biāo)簽，在上下文菜單中選擇“編輯文本”。

選擇復(fù)選框標(biāo)簽并開(kāi)始輸入。(僅當(dāng)禁用了單鍵快捷方式時(shí)，此選項(xiàng)才可用)

默認(rèn)情況下，頁(yè)面首次加載到瀏覽器中時(shí)，復(fù)選框以未選中狀態(tài)開(kāi)始，要改為選中狀態(tài)，選中復(fù)選框，在畫(huà)布上單擊復(fù)選框，還可以在“交互”窗格的“更多屬性”菜單中選中“選定”選項(xiàng)。

禁用復(fù)選框可防止用戶在瀏覽器中與其進(jìn)行交互，這會(huì)激活元件的:禁用樣式效果，使其顯示為灰色，有兩種禁用元件的方法:

在“交互”窗格的“更多屬性”菜單中，選中“禁用”復(fù)選框。

通過(guò)啟用/禁用操作在瀏覽器中動(dòng)態(tài)禁用元件，可以在任何交互過(guò)程中執(zhí)行此操作，例如在頁(yè)面加載或單擊按鈕時(shí)。

* 使用“啟用/禁用”操作在瀏覽器中動(dòng)態(tài)啟用禁用元件。

在瀏覽器中，單擊復(fù)選框以選中和取消選中它。

還可以通過(guò)“設(shè)置選擇/已選中”操作動(dòng)態(tài)地選中和取消選中一個(gè)復(fù)選框，真值選項(xiàng)將選中該復(fù)選框，而假選項(xiàng)將取消選中該復(fù)選框，切換選項(xiàng)會(huì)將復(fù)選框設(shè)置為與互動(dòng)發(fā)生時(shí)相反的狀態(tài)。

可以通過(guò)交互和條件中的“選中狀態(tài)”選項(xiàng)來(lái)確定是否選中了復(fù)選框，如果選中復(fù)選框，則返回值“true”，未選中復(fù)選框，則返回“false”。

“復(fù)選框在瀏覽器中獲取焦點(diǎn)時(shí)按ENTER鍵可以觸發(fā)頁(yè)面上另一個(gè)元件的點(diǎn)擊事件，稱為復(fù)選框的“提交按鈕”，要將提交按鈕分配給復(fù)選框:

1.選中復(fù)選框，然后單擊“交互”窗格下部的“顯示全部”

2.從“提交按鈕”下拉列表中的可選元件列表中進(jìn)行選擇

取消分配提交按鈕，單擊下拉列表底部的取消分配提交按鈕

在某些設(shè)計(jì)模式中，復(fù)選框具有第三種“不確定”狀態(tài)，在這種狀態(tài)下既沒(méi)選中也沒(méi)未選中，需要具有三個(gè)狀態(tài)的復(fù)選框，可以使用形狀元件和動(dòng)態(tài)面板創(chuàng)建自定義復(fù)選框。

復(fù)選框和其他表單元件的制表順序由其層深確定，如“概要”窗格中所示。

26 單選按鈕

單選按鈕是一種表單控件，允許用戶從多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)，例如，要求用戶輸入電話號(hào)碼，可以從一組單選按鈕中進(jìn)行選擇，以指示該號(hào)碼是用于家庭，工作還是移動(dòng)電話。

單選按鈕元件位于默認(rèn)元件庫(kù)的表單中。

大多數(shù)設(shè)計(jì)模式中，選擇單選按鈕將自動(dòng)取消選擇同一組中任何之前選擇的單選按鈕，在Axure RP中，可以通過(guò)將單選按鈕添加到單選組中來(lái)在單選按鈕之間創(chuàng)建這種關(guān)系:

1.在畫(huà)布上或概要窗格中選擇一個(gè)或多個(gè)單選按鈕元件。

2.在交互窗格的更多屬性菜單中，在分配按鈕組字段中輸入新按鈕組的名稱。

3.通過(guò)選擇更多單選按鈕，然后在分配單選組下拉列表中選擇單選組名稱，將其添加到單選組。

4.通過(guò)選擇單選按鈕并清除分配單選組字段的選擇，從單選組中刪除單選按鈕。

* 從單選組中刪除所有單選按鈕將刪除該組。

在樣式窗格的按鈕中，使用大小字段來(lái)設(shè)置單選按鈕的寬和高度。

默認(rèn)情況下，單選按鈕在左側(cè)，標(biāo)簽文本在右側(cè)，要交換順序，使文本位于左側(cè)，按鈕位于右側(cè)，使用大小字段右側(cè)的對(duì)齊圖標(biāo)。

通過(guò)以下任意選項(xiàng)編輯單選按鈕標(biāo)簽上的文本:

雙擊按鈕標(biāo)簽進(jìn)入文本編輯模式

選擇按鈕標(biāo)簽，然后按Enter進(jìn)入文本編輯模式

右鍵單擊按鈕標(biāo)簽，然后在上下文菜單中選擇編輯文本

選擇按鈕標(biāo)簽并開(kāi)始輸入。(僅當(dāng)你禁用了單鍵快捷方式時(shí)，此選項(xiàng)才可用)

默認(rèn)情況下，頁(yè)面首次加載到瀏覽器中時(shí)，單選按鈕以未選擇狀態(tài)開(kāi)始。

要使單選按鈕開(kāi)始處于選定狀態(tài)，選擇單選按鈕，在畫(huà)布上單擊其按鈕。

還可以在交互窗格的更多屬性菜單中選中選中選項(xiàng)。

禁用單選按鈕可防止用戶在瀏覽器中與其進(jìn)行交互，這會(huì)激活元件的:禁用樣式效果，使其顯示為灰色。有兩種禁用元件的方法:

選中交互窗格的更多屬性菜單中的禁用復(fù)選框。

通過(guò)啟用/禁用操作在瀏覽器中動(dòng)態(tài)禁用元件，可以在任何交互過(guò)程中執(zhí)行此操作，例如在頁(yè)面加載時(shí)或單擊按鈕時(shí)。

在瀏覽器中，單擊單選按鈕將其選中。

還可以通過(guò)設(shè)置選中操作動(dòng)態(tài)選擇一個(gè)單選按鈕，true選項(xiàng)將選擇單選按鈕，false選項(xiàng)將取消選擇，切換選項(xiàng)會(huì)將單選按鈕設(shè)置為與互動(dòng)發(fā)生時(shí)相反的狀態(tài)。

通過(guò)交互和條件中的被選項(xiàng)來(lái)確定是否選擇了單選按鈕，如果選擇了單選按鈕，則返回值“true”，未選擇單選按鈕，則返回值“false”。

在瀏覽器中單選按鈕處于焦點(diǎn)狀態(tài)時(shí)按ENTER鍵可以觸發(fā)頁(yè)面上另一個(gè)元件的點(diǎn)擊事件，稱為單選按鈕的提交按鈕，要將提交按鈕分配給單選按鈕:

1.選擇單選按鈕，然后單擊“交互”窗格下部的“顯示全部”。

2.從“提交按鈕”下拉列表中的可選元件列表中進(jìn)行選擇。

取消分配提交按鈕，單擊下拉列表底部的取消分配提交按鈕。

單選按鈕和其他表單元件的選制表順序由其層深確定，如概要窗格中所示。

27 樹(shù)

最常用于模擬文件瀏覽器并可視化其他層次結(jié)構(gòu)，單擊樹(shù)的各個(gè)節(jié)點(diǎn)可以在頁(yè)面上顯示不同的元件或在項(xiàng)目中打開(kāi)不同的頁(yè)面。

添加節(jié)點(diǎn)，右鍵單擊現(xiàn)有節(jié)點(diǎn)，使用添加子菜單，可以選擇添加子節(jié)點(diǎn)或兄弟節(jié)點(diǎn)，移動(dòng)節(jié)點(diǎn)，右鍵單擊，使用移動(dòng)子菜單，可以選擇向上或向下移動(dòng)節(jié)點(diǎn)，也可以使節(jié)點(diǎn)升級(jí)或降級(jí)。

刪除節(jié)點(diǎn)，右鍵單擊它，選擇刪除節(jié)點(diǎn)，或者，選擇節(jié)點(diǎn)并按Delete。刪除節(jié)點(diǎn)也將刪除其子節(jié)點(diǎn)。

* 樹(shù)必須包含一個(gè)節(jié)點(diǎn)，刪除樹(shù)元件的最后一個(gè)節(jié)點(diǎn)，會(huì)收到一條警告:無(wú)法刪除所有節(jié)點(diǎn)。

28 展開(kāi)/折疊圖標(biāo)

默認(rèn)情況下，每個(gè)至少有一個(gè)子節(jié)點(diǎn)的樹(shù)節(jié)點(diǎn)都有一個(gè)圖標(biāo)，可以單擊以展開(kāi)和折疊子節(jié)點(diǎn)，這些圖標(biāo)在Axure RP畫(huà)布和瀏覽器中均可用。

默認(rèn)情況下，展開(kāi)/折疊圖標(biāo)為三角形，可以通過(guò)選擇樹(shù)或其節(jié)點(diǎn)之一并在樣式窗格中單擊編輯樹(shù)屬性來(lái)選擇不同的圖標(biāo)，在出現(xiàn)的對(duì)話框中，可以在兩個(gè)內(nèi)置選項(xiàng) (加號(hào)/減號(hào)和三角形)之間進(jìn)行選擇，也可以導(dǎo)入自己的圖標(biāo)。

還可以通過(guò)取消選中樹(shù)屬性對(duì)話框中的顯示擴(kuò)展/折疊圖標(biāo)來(lái)隱藏?cái)U(kuò)展/折疊圖標(biāo)。

29 將圖標(biāo)添加到樹(shù)節(jié)點(diǎn)

除了展開(kāi)/折疊圖標(biāo)之外，還可以在樹(shù)節(jié)點(diǎn)的左側(cè)添加自定義靜態(tài)圖標(biāo):

1.選擇樹(shù)或其節(jié)點(diǎn)之一，在樣式窗格中單擊編輯樹(shù)屬性。

2.在出現(xiàn)的對(duì)話框中，選中顯示圖標(biāo)框，單擊確定關(guān)閉對(duì)話框。

3.選擇要向其添加圖標(biāo)的樹(shù)節(jié)點(diǎn)，在樣式窗格中單擊編輯圖標(biāo)。

4.在出現(xiàn)的對(duì)話框中，導(dǎo)入圖標(biāo)并選擇顯示位置:

僅當(dāng)前節(jié)點(diǎn)

當(dāng)前節(jié)點(diǎn)和同級(jí)節(jié)點(diǎn)

當(dāng)前節(jié)點(diǎn)、同級(jí)節(jié)點(diǎn)和全部子節(jié)點(diǎn)

樹(shù)節(jié)點(diǎn)只能包含文本和圖標(biāo)，無(wú)法將元件添加到樹(shù)節(jié)點(diǎn)，需要其他樹(shù)內(nèi)容，嘗試使用形狀元件構(gòu)建自定義樹(shù)結(jié)構(gòu)。

樹(shù)的各個(gè)方面在所有自適應(yīng)視圖中都是一致的，要在自適應(yīng)視圖之間對(duì)樹(shù)進(jìn)行樣式設(shè)置，可以在每個(gè)自適應(yīng)視圖中放置不同的樹(shù)元件，從每個(gè)視圖中取消放置為其他自適應(yīng)視圖設(shè)計(jì)的樹(shù)元件。

30 表格

通過(guò)以下任意選項(xiàng)將文本添加到表格單元格或編輯當(dāng)前文本:

雙擊單元格進(jìn)入文本編輯模式

選擇單元格，然后按Enter鍵進(jìn)入文本編輯模式

選擇單元格并開(kāi)始輸入。(僅當(dāng)禁用了單鍵快捷方式時(shí)，此選項(xiàng)才可用)

從電子表格應(yīng)用程序(例如Microsoft Excel和Google表格)中復(fù)制表格數(shù)據(jù)，并將表格元件粘貼到Axure RP中，在電子表格應(yīng)用中復(fù)制表格單元格，然后，在Axure RP中，右鍵單擊畫(huà)布，選擇選擇性粘貼→粘貼為表格。

也可以將表格數(shù)據(jù)粘貼到現(xiàn)有的表格中，這樣做，選擇表的左上角的單元格，然后按CTRL+V或CMD+V，粘貼的數(shù)據(jù)將填充表中已經(jīng)存在的單元格。

* 將數(shù)據(jù)粘貼到現(xiàn)有元件時(shí)，不會(huì)將新的列和行添加到它們中，表格太小而無(wú)法容納粘貼的數(shù)據(jù)，在粘貼數(shù)據(jù)之前向表格中添加更多的列或行。

將行或列添加到表元件，右鍵單擊任一單元格或灰色的行或列，在上下文菜單中，選擇以下選項(xiàng):

在上方插入行

在下方插入行

在左側(cè)插入列

在右側(cè)插入列

刪除行或列，右鍵單擊該行或列中的單元格，或右鍵單擊對(duì)應(yīng)的灰色行或列控件，在上下文菜單中，選擇刪除行或刪除列。

重新排列表格的行和列，選擇灰色的行或列控件，然后向上/向下或向左/向右拖動(dòng)。

可以通過(guò)單擊單元格邊框并拖動(dòng)來(lái)更改行的高度或列的寬度。

還可以使用樣式窗格中的 W 和 H字段設(shè)罟單個(gè)單元格的寬度和高度。

一次調(diào)整多個(gè)單元格的大小，單擊并拖動(dòng)或通過(guò)按住SHIFT單擊每個(gè)單元格來(lái)選擇單元格，然后，使用W和H字段。

表格元件中的每個(gè)單元格都有其自己的事件，可用于設(shè)置針對(duì)特定單元格的特殊交互。例如，配置單元格的單擊事件在頁(yè)面上顯示另一個(gè)窗口元件。

還可以在交互和條件中定位單個(gè)表單元格。例如，使用設(shè)置文本操作更改單元格上的文本，并使用元件上的文本選項(xiàng)獲取單元格上的文本。

* 將鼠標(biāo)懸停在選擇元件下拉菜單中的單元格名稱上時(shí)，單元格在畫(huà)布上以黃色突出顯示，在上面的屏幕快照中查看第3列的單元格作為示例。

還可以在交互和注釋窗格中命名單個(gè)表單元格，以使其更易于查找。

表格單元格不能包含圖片，只能包含文本，要模擬圖片列，需要在表格中創(chuàng)建一個(gè)空列，然后在其頂部放置圖片元件。

表格單元格無(wú)法合并，要顯示合并的表格單元格的外觀，需要在要合并的單元格上放置一個(gè)矩形元件。然后，將矩形上的文本設(shè)置為將占據(jù)合并單元格的文本。

使行顏色交替出現(xiàn)，需要將每隔一行中的單元格的填充顏色更改為所需的顏色。

* 使用表格元件旁邊的灰色框來(lái)選擇一行中的所有單元格，并且可以用CMD/CTRL單擊以選擇多行。

使整個(gè)表格行具有鼠標(biāo)懸?；蚩h停樣式的外觀，需要在行的頂部放置一個(gè)矩形元件，給矩形一個(gè)半透明的填充，并為其指走:鼠標(biāo)懸停樣式效果。

不能在瀏覽器中動(dòng)態(tài)添加，刪除，排序或過(guò)濾表行，若要使原型具備這些行為，請(qǐng)嘗試以下操作:

使用多狀態(tài)動(dòng)態(tài)面板模擬對(duì)表元件的動(dòng)態(tài)更改，在動(dòng)態(tài)面板的每種狀態(tài)下，放置一個(gè)表格，其中已進(jìn)行了預(yù)期的更改，當(dāng)需要進(jìn)行給定的更改時(shí)，顯示其相應(yīng)的動(dòng)態(tài)面板狀態(tài)。

如果需要能夠?qū)Ρ磉M(jìn)行真正的動(dòng)態(tài)更改，可嘗試用中繼器元件。

表格元件的各個(gè)方面在所有自適應(yīng)視圖中都是一致的，要在自適應(yīng)視圖之間為表格設(shè)置不同的樣式，可以在每個(gè)自適應(yīng)視圖中放置一個(gè)不同的表格元件，從每個(gè)視圖中取消放置為其他自適應(yīng)視圖設(shè)計(jì)的表格元件。

31 經(jīng)典菜單

經(jīng)典菜單元件用于構(gòu)建導(dǎo)航菜單，可以自定義頂級(jí)菜單項(xiàng)的數(shù)量，并為每級(jí)菜單創(chuàng)建子菜單。

將鼠標(biāo)移到父菜單項(xiàng)上時(shí)，子菜單會(huì)自動(dòng)顯示在瀏覽器中，而將鼠標(biāo)移出子菜單及其父菜單時(shí)，會(huì)再次隱藏。

* 創(chuàng)建不同的菜單(例如，單擊鼠標(biāo))，可以使用形狀元件創(chuàng)建自定義導(dǎo)航菜單，

經(jīng)典菜單有兩種類型:水平菜單，其子菜單向下打開(kāi):垂直菜單，其子菜單向右打開(kāi)。

經(jīng)典菜單元件從三個(gè)頂級(jí)菜單項(xiàng)開(kāi)始，添加其他菜單項(xiàng)，右鍵單擊現(xiàn)有選項(xiàng)，然后選擇在之后添加菜單項(xiàng)或在之前添加菜單項(xiàng)，刪除選項(xiàng)，右鍵單擊它，然后選擇除菜單項(xiàng)。

默認(rèn)情況下，經(jīng)典菜單沒(méi)有任何子菜單，可以通過(guò)右鍵單擊菜單項(xiàng)并選擇添加子菜單，將子菜單添加到任何菜單項(xiàng)(包括子菜單中的項(xiàng))，刪除子菜單，右鍵單擊其父菜單項(xiàng)，然后選擇刪除子菜單。

通過(guò)右鍵單擊菜單項(xiàng)并選擇編輯菜單填充來(lái)在菜單和子菜單項(xiàng)周圍添加填充，這會(huì)將菜單的邊框推離菜單項(xiàng)，從而使菜單元件的填充顏色和邊框與菜單項(xiàng)區(qū)別開(kāi)。

傳統(tǒng)菜單使用起來(lái)很快，但樣式卻相當(dāng)不靈活。因此，最適合于菜單外觀和視覺(jué)不重要的低保真度原型。

經(jīng)典菜單的所有方面在所有自適應(yīng)視圖中都是一致的，在自適應(yīng)視圖之間為經(jīng)典菜單設(shè)置不同的樣式，可以在每個(gè)自適應(yīng)視圖中放置不同的經(jīng)典菜單，從每個(gè)視圖中取消放置為其他自適應(yīng)視圖設(shè)計(jì)的經(jīng)典菜單。

32 快照

快照元件通常用于在原型頁(yè)面上顯示其他圖表(頁(yè)面和母版)的屏幕快照，每當(dāng)更新引用的頁(yè)面或母版時(shí)，快照元件中的圖像都會(huì)自動(dòng)更新匹配。

可以顯示整個(gè)圖表或其中的一部分，還可以在捕獲快照?qǐng)D像之前將交互應(yīng)用于圖表，例如隱藏或顯示元件或更改動(dòng)態(tài)面板的狀態(tài)。

快照元件位于默認(rèn)元件庫(kù)的標(biāo)記。

* 快照元件可方便地繪制用戶流程圖并向流程圖添加縮略圖。

快照元件選擇引用頁(yè)面或母版，在樣式窗格的快照元件中單擊添加引用頁(yè)，在出現(xiàn)的引用頁(yè)面對(duì)話框中，選擇頁(yè)面或母版按鈕，然后從下面的列表中選擇一個(gè)目標(biāo)。

也可以單擊對(duì)話框頂部的清除引用，將快照保留為空白。

快照以適應(yīng)比例模式開(kāi)始，該模式縮放引用頁(yè)面或母版的圖片以適合快照元件的邊界。

在樣式窗格的快照中關(guān)閉此選項(xiàng)，取消選中適應(yīng)比例后，能夠調(diào)整捕獲圖片的偏移量和縮放比例。

縮放快照元件中的圖像，使用樣式窗格快照的縮放字段，也可以雙擊快照，然后使用鼠標(biāo)上的滾輪放大或縮小，如果鼠標(biāo)沒(méi)有滾輪，可以在滾動(dòng)時(shí)按住CTRL或CMD。

快照的X和Y偏移值可讓移動(dòng)快照中顯示的被引用頁(yè)面或母版的位置，可以在樣式窗格的快照中進(jìn)行設(shè)置，也可以雙擊快照，然后將圖像或母版在快照元件中拖動(dòng)設(shè)置。

在快照元件中執(zhí)行動(dòng)作會(huì)在快照的縮略圖中觸發(fā)該操作。(不會(huì)影響所引用的頁(yè)面或母版。)

執(zhí)行動(dòng)作，在畫(huà)布上選擇一個(gè)快照元件，在樣式窗格快照中單擊執(zhí)行動(dòng)作，在出現(xiàn)的對(duì)話框中，構(gòu)建以引用頁(yè)面或母版元件為目標(biāo)的交互。

* 要觸發(fā)在引用頁(yè)面或母版中已設(shè)置的交互，使用觸發(fā)事件操作，例如，配置了一個(gè)按鈕，當(dāng)單擊該按鈕時(shí)顯示一條消息，則可以觸發(fā)該按鈕的點(diǎn)擊事件，以在快照的縮略圖中顯示該消息。

33 流程圖

使用Axure RP制作流程圖，用戶流程，業(yè)務(wù)流程圖和其他流程圖。

添加形狀，圖片和快照元件以用作流程元素，然后使用“連接器”工具在它們之間繪制智能線。

流程元件庫(kù)包含許多流程圖通用的形狀，例如流程，決策，數(shù)據(jù)庫(kù)等。由Axure用戶社區(qū)的成員構(gòu)建的其他流程專用的元件庫(kù)可以在“下載元件庫(kù)”頁(yè)面上找到。

* 流程元件表示RP文件中的頁(yè)面時(shí)，可以通過(guò)元件為其對(duì)應(yīng)頁(yè)面分配頁(yè)面引用來(lái)鏈接兩者。

在兩個(gè)元件之間繪制連接器，單擊用戶界面左上角的“連接”圖標(biāo)以將畫(huà)布置于連接器模式，在連接器模式下，可以將鼠標(biāo)懸停在元件上查看其連接點(diǎn)，單擊并拖動(dòng)從一個(gè)元件上的連接器點(diǎn)到另一個(gè)元件上的點(diǎn)，以它們之間繪制一個(gè)連接器。

形狀，圖片和快照元件默認(rèn)情況下具有四個(gè)連接器點(diǎn)，每個(gè)元件的側(cè)面各一個(gè)。

根據(jù)需要添加更多點(diǎn)，刪除點(diǎn)和重新放置點(diǎn)，右鍵單擊元件，選擇變換形狀——編輯連接器點(diǎn)，要添加連接器點(diǎn)，在元件上的任意位置單擊。

右鍵單擊一個(gè)連接器點(diǎn)以將其刪除，或選擇它并按DELETE，將現(xiàn)有連接器點(diǎn)移動(dòng)到其他位置，將其拖動(dòng)(這還將移動(dòng)連接到該點(diǎn)的所有連接器元件)。

默認(rèn)情況下，連接器遵循錨定的兩點(diǎn)之間的最短路徑，但可以手動(dòng)更改連接器的路徑，方法是選擇連接器并沿其路徑拖動(dòng)任何手柄以重新放置連接器。

恢復(fù)默認(rèn)路徑，選擇它，單擊“樣式”窗格的“位置和大小”中的“重排”圖標(biāo)。

通過(guò)選擇連接器并在“樣式”窗格的“位置和大小”中單擊以下選項(xiàng)之一來(lái)更改其路徑類型:

直角折線(默認(rèn))

圓角角折線

直線

曲線

可以使用“樣式”窗格中的以下“邊框”屬性來(lái)為連接器設(shè)置樣式:

顏色

線寬

線型

箭頭

通過(guò)以下任何選項(xiàng)將文本添加到連接器元件或編輯其當(dāng)前文本:

雙擊連接器以進(jìn)入文本編輯模式

選擇連接器，然后按Enter鍵進(jìn)入文本編輯模式

選擇連接器并開(kāi)始輸入。(僅當(dāng)禁用了單鍵快捷方式時(shí)，此選項(xiàng)才可用)

Axure RP可以根據(jù)原型的頁(yè)面結(jié)構(gòu)為生成流程圖。

首先，確保要記錄的頁(yè)面結(jié)構(gòu)具有頂級(jí)父頁(yè)面，然后執(zhí)行以下操作:

1.打開(kāi)要放置流程圖的頁(yè)面。

2.右鍵單擊要記錄的頁(yè)面結(jié)構(gòu)的最頂層頁(yè)面，然后選擇“生成流程圖”。

3.在標(biāo)準(zhǔn)，垂直圖或右圖之間選擇，然后單擊確定。

* 流程圖中的每個(gè)形狀都將包含項(xiàng)目中對(duì)應(yīng)頁(yè)面的頁(yè)面參考。

默認(rèn)情況下，頁(yè)面在“頁(yè)面”窗格中用“頁(yè)面”圖類型圖標(biāo)標(biāo)記，可以通過(guò)右鍵單擊頁(yè)面名稱并選擇“圖類型”→“流程圖”，將具有流程圖的頁(yè)面的圖類型更改為“流程圖”。