Axure PR 9 認識元器件
本文將深入探討Axure設計原型圖中所使用的各種元器件,從基礎的形狀元件到復雜的動態面板和中繼器,一一解析它們的功能和應用場景。無論您是資深的UX設計師,還是剛入行的新手,本文都將為您提供寶貴的參考和啟發。
接著上期內容,這期內容一起認識一下Axure設計原型圖所使用的元器件。
01 形狀
默認元件庫的基礎元件中的各種框、按鈕、標題、占位符以及標簽和段落都是形狀元件。
圖標元件庫中可用的圖標也是形狀,用鋼筆工具繪制的任何元件也是形狀元件。
Axure RP附帶了各種現成的形狀,可以在元件庫中訪問,要將形狀添加到原型中,點擊插入菜單,選中窗格中的圖形拖放到畫布上。
菜單界面左上角的插入菜單中包含許多形狀,選擇一個形狀,單擊并拖動到畫布上,可以在拖動時按住SHIFT來限制其尺寸,也可以使用快捷方式繪制常用的形狀:
- R矩形
- O橢圓形
- L線
- T文本(段落元件)
- P手繪鋼筆工具
02 圖片
圖片元件可以將靜態圖片和動態GIF添加到設計中,支持:JPG,PNG,GIF,BMP和SVG文件類型。
將空白圖片元件從元件庫拖到畫布上,雙擊圖片或右鍵單擊選擇導入圖片,就可以添加圖片文件,加載圖片時,圖片元件將自動調整為導入圖片的原始尺寸。
防止圖片元件調整大小,在導入圖片文件之前選擇并雙擊大小調整手柄,調整大小手柄將從黃色變為白色,表示適合圖片功能已關閉。
通過雙擊調整大小手柄或單擊樣式中的適合圖片來再次啟用自動調整功能。
03 編輯圖片
通過樣式窗格頂部的顏色調整菜單調整圖片的顏色,選中調整顏色框,使用滑塊或下面的數字字段更改圖片的色相,飽和度,亮度和對比度。
單擊重置字段回到默認值,或取消選中顏色將圖片切換回默認值,不會影響每個屬性的選擇。
04 裁剪和切片
右鍵單擊所選圖片,進行切割或裁剪,在上下文菜單中選擇任一選項,也可以使用S和C快捷鍵。
* 還可以自定義頂部的工具欄,添加“切割”和“裁剪”按鈕。
切片工具將圖片分為幾個部分,每個部分都成為一個新的圖片元件,可以使用水平,垂直或交叉切割進行切片,裁剪工具包含幾個選項:
- 裁切: 刪除選擇框外圖片的所有部分
- 剪切: 刪除選擇框中的圖片部分并將其復制到剪貼板
- 復制:復制選擇框中的圖片部分,并使原始圖像保持不變
要水平或垂直翻轉圖片,右鍵單擊它,然后轉到變換圖片→水平翻轉或垂直翻轉。
05 固定邊角
右鍵單擊圖片元件,在上下文菜單中選擇變換圖片→固定邊角。
三角形標記會出現在圖片頂部和左側,指示圖片其余部分不會調整大小的區域,可以拖動三角形標記調整保留區域的大小。
* 無法在空白圖片元件上保留角落,嘗試執行此操作之前,確保將圖片文件加載到元件中。
06 旋轉圖片
樣式窗格頂部的旋轉字段可以旋轉畫布上的選定圖片,旋轉角度支持正和負的度值,最多兩位小數,正值將圖片向右旋轉,而負值將圖片向左旋轉。
07 清除圖片
在樣式窗格中,單擊填充圖片,然后單擊預覽圖片右上方的紅色X。
08 添加編輯文本
通過以下選項將文本添加到圖片或編輯元件文本:
右鍵單擊圖像,在上下文菜單中選擇編輯文本。
按住CTRL(Windows)或CMD(Mac),雙擊圖片以進入文本編輯模式。
選擇圖片,開始輸入。(僅當你禁用了單鍵快捷方式時,此選項才可用)
09 優化最大圖片
大圖會增加RP文件的大小,影響Axure RP和瀏覽器中的性能,優化圖片可以減小文件大小,從而減小RP文件的大小,但是會降低圖片質量。
大圖導入Axure RP時,系統會詢問是否進行優化,還可以通過右鍵單擊,在上下文菜單中選擇轉換圖片→優化圖片來優化RP文件中已有的圖片。
* 優化PNG將刪除可能具有的任何透明度,而優化動畫GIF將刪除動畫。
可以在一組形狀,線條,圖片或動態面板元件之間創建關系,通過“設置選擇/選中”操作一次只能將一個元件設置為其選定狀態。(類似于單選按鈕組中單選按鈕之間的關系。)
10 熱區
熱區是特殊元件,在瀏覽器中不可見,需要在沒有合適設計區域的元件上增加交互事件時使用,例如在熱區添加圖片的特定區域或將錨點位置添加到長頁面時。
* 不需要熱區可向一組元件添加交互性,將元件放入元件組中,并在父組的事件上配置交互。
熱區元件位于“默認”元件庫的“通用”中,從“元件庫”窗格中將其拖放到畫布上。
默認情況下熱區會用綠色遮罩覆蓋,以便可以在畫布上看到,可以在應用程序菜單的“視圖”→“遮罩”中切換遮罩。
* 元件遮罩,包括熱區遮罩不會再瀏覽器上顯示。
11 線
Axure RP附帶了一些現成的線,在元件庫默認元件中訪問這些線,包括“公共”水平線和垂直線以及“標記”中的箭頭。
12 線條工具
使用“線條”工具在畫布上繪制直線,工具可以在界面左上角“插入”菜單中找到,也可以通過“L”快捷鍵激活工具,然后在畫布上單擊并拖動以繪制線條,拖動時按住SHIFT將以45°增量捕捉線。
13 鋼筆工具
使用鋼筆工具繪制直線、曲線、鋸齒狀、波浪狀、螺旋狀或任何其他類型的線條,可在界面左上角的“插入”菜單中或通過 P 快捷方式使用。
鋼筆工具的工作方式與其他矢量繪圖應用程序中的等效工具類似:
- 單擊畫布以添加新的矢量點。
- 單擊并拖動以添加彎曲點。
- 拖動時按住 SHIFT 以將曲線手柄自動對齊到X或Y軸。
- 拖動時按住 ALT 可獨立移動拖動手柄。
- 雙擊畫布或按 ESC 創建一個開放路徑形狀。(一條線)
* 如果繪制具有兩個直線矢量點的開放形狀,在“概要”窗格中標記為“線”,彎曲點或者使用兩個以上的點,標記為“形狀”,可以像設置其他線元件一樣進行樣式設置。
14 曲線
除了使用“鋼筆”工具繪制曲線外,還可以彎曲已經創建的直線,選擇線并雙擊邊框編輯其矢量點。
沿直線單擊,添加任意數量的新點,雙擊一個點使其彎曲,或右鍵單擊,在上下文菜單中選擇“曲線”,可以拖動點的曲線手柄以調整曲線的寬度和方向。
線樣式及箭頭
使用“樣式”窗格中的“邊框”屬性設置線條的樣式:
- 顏色
- 線寬
- 模式
- 箭頭(行的兩端可以有不同的箭頭)
通過以下選項將文本添加到線元件或編輯其當前文本:
- 選擇該行并按ENTER進入文本編輯模式。
- 右鍵單擊該行,然后在上下文菜單中選擇“編輯文本”。
- 選擇行并開始輸入。(僅當你禁用了單鍵快捷方式時,此選項才可用)
15 動態面板
動態面板是一個容器,它將其他元件保存在“狀態”集合中,動態面板可以有一種或多種狀態,并且一次只能看到其中一種狀態,使用“設置面板狀態”操作動態設置可見狀態,動態面板適合創建輪播和幻燈片。
動態面板是唯一可以在瀏覽器中拖動或滑動的元件, 也是唯一可以固定到瀏覽器的元件。
元件庫中有一個空的動態面板元件,從“元件庫”窗格拖到畫布上的動態面板將以一個可以添加元件的空狀態開始。
* 默認情況下,動態面板的尺寸是固定的,點擊啟用“自適應內容”,可以調整大小。
選擇一個或多個元件,單擊鼠標右鍵,然后在上下文菜單中選擇“創建動態面板”,可以使用畫布上已有的元件創建新的動態面板。
動態面板默認情況下覆蓋藍色遮罩,可以在應用程序菜單的“視圖”→“遮罩”中切換遮罩。
* 元件遮罩,包括動態面板遮罩,不會在瀏覽器中顯示。
管理狀態
雙擊畫布上的動態面板進入編輯模式,狀態包括藍綠色邊框和畫布周圍的工具欄指示。
在動態面板的狀態下添加,刪除和編輯元件,還可以通過單擊畫布右上方的“隔離”來切換動態面板外部元件的可見性。
單擊畫布頂部的當前狀態名稱,在顯示的下拉菜單中,可以編輯動態面板本身的狀態,執行以下操作:
- 單擊狀態名在畫布上查看包含元件。
- 單擊狀態名右側的復制狀態圖標可以復制狀態。
- 單擊狀態名右側的刷除狀態圖標可以刪除狀態。
- 單擊下拉菜單底部的添加狀態以創建新狀態。
上下拖動狀態名稱以對其進行重新排序(最上面的狀態是默認情況下可見的狀態)。
在“概要”窗格中選擇一個動態面板狀態或包含的一個元件,可以在畫布上打開狀態進行編輯。
拖動到“概要”窗格中,可以快速將現有元件移入或移出動態面板狀態。
將鼠標懸停名稱上,單擊右側的“添加狀態”圖標,可以將新狀態添加到動態面板。
同樣,鼠標懸停在名稱上,單擊右側的“復制狀態”圖標可以復制狀態,選擇一個狀態,按Delete鍵刪除,或者右鍵單擊并在上下文菜單中選擇刪除。
上下拖動或右鍵單擊,使用上下文菜單中的選項,可以重新排列動態面板狀態,頂部狀態默認情況下可見的狀態。
* 如果動態面板妨礙畫布上的其他元件交互,可以通過“概要”窗格中單擊名稱右側的“從視圖隱藏”圖標來暫時隱藏,在畫布上隱藏面板,瀏覽器中仍將可見,要再次顯示面板,再次單擊該圖標。
在動態面板上單擊鼠標右鍵,然后在上下文菜單中選擇“從首狀態脫離”,可以將動態面板包含的所有元件放在面板外部的畫布上。
* 如果動態面板只有一個狀態,使用從首狀態脫離也會刪除該動態面板。
使用“樣式”窗格中的以下選項來設置動態面板狀態的樣式,每個狀態對每個屬性都有自己的選項,因此可以為所有樣式設置相同或不同的樣式。
填充顏色或圖片:這些是背景屬性,填充顏色或圖片僅在動態面板未覆蓋元件的區域中可見。
邊框顏色、類型和可見性:狀態邊框在所包含的元件上層呈現,因此粗邊框可以在面板狀態的邊緣處重疊或切斷元件。
外陰影:陰影在動態面板下方渲染,在“樣式”窗格中選擇的移值始終可見。
圓角半徑和可見度:面板狀態的圓角在其所包含的元件之前顯示,因此圓角可以在面板狀態的四角遮擋或割除元件。
* 選擇動態面板本身時,對這些樣式選項所做的更改僅應用于面板的第一個狀態。
將動態面板設置為“自適應內容”可使寬度和高度依據包含元件自動調整大小。
在“樣式”窗格中選中或取消選中“自適應大小”框,或雙擊動態面板的任意一個調整大小手柄。
* 通過“樣式”窗格中的“ 寬”和“高”字段或拖動面板的調整大小手柄來手動調整動態面板的大小,“自適應內容”將被自動禁用。
通過調整動態面板的大小,讓狀態的內容更短或更窄使,動態面板的內容支持滾動,這將關閉“自適應內容”并隱藏任何超出動態面板邊界的元件。
啟用滾動,在“樣式”窗格的“滾動”下拉列表中選擇以下選項之一:
- 按需滾動
- 水平滾動
- 垂直滾動
* 動態面板只能在瀏覽器中滾動,滾動條的樣式由瀏覽器控制,模擬滾動條將出現在Axure RP的動態面板上,但不起作用。
使用“100%寬”動態面板使背景顏色或圖片跨越瀏覽器窗口的整個寬度。
首先為動態面板的第一種狀態設置背景顏色或背景圖片,在“樣式”窗格中選中“100%寬度”,在瀏覽器中查看原型時,背景顏色或圖片將擴展窗口的整個寬度,調整窗口的大小,動態面板的寬度(及其背景)將自動調整。
* 屬性僅調整動態面板本身的大小,包含的元件不受影響。
“固定到瀏覽器”選項將動態面板固定在相對于瀏覽器窗口的位置,在滾動頁面時不會移動,使用此選項可以構建始終可見的導航標題和模式窗口之類的東西。
- 選擇一個動態面板,在“樣式”窗格中單擊“固定到瀏覽器”。
- 在對話框中,選中“固定到瀏覽器”啟用該功能。
- 在下面,配置面板的水平和垂直位置。
* 根據Axure RP畫布上動態面板的X和Y坐標自動設置“左”和“上”圖釘選項的邊距,更改邊距,在畫布上移動“動態面板”。
- 如果希望面板始終顯示在頁面上所有其他元件的前面,選中始終保持頂層。
- 單擊“確定”關閉對話框。
16 特定于動態面板的事件和操作
動態面板具有一些其他元件沒有的特殊功能:可以拖動,滑動和滾動,并且可以動態更改面板的活動狀態(可見狀態),通過動態面板特有的事件(“拖動”,“向上滑動”等)和動作(“設置面板狀態”“拖動移動”等)使用這些功能。
如果創建了具有多個狀態的動態面板,則可以使用“設置面板狀態”操作在瀏覽器中動態更改面板的可見狀態。
配置操作時,可以從以下選項選擇狀態:
特定面板的狀態
下一項,將面板設置為列表中的下一個狀態,可與“每隔..毫秒重復”復選框一起用,以自動循環顯示面板的所有狀態,添加向后循環選項能夠創建重復的結構,例如圖片輪播和幻燈片。
上一項,將面板設置為列表中的上一項狀態,與“下一項類似地配置此選項”。
停止循環,停止任何向前或向后循環:
值,允許通過面板的名稱或在狀態列表(1、2、3等)中的位置將面板設置為特定狀態,在此字段中輸入文字值,也可以使用變量或表達式動態填充。
默認情況下,動態面板中具有鼠標樣式效果元件將照常工作:鼠標懸?;騿螕魹g覽器中的元件時,將顯示樣式效果。
可以選擇在鼠標懸?;騿螕魟討B面板本身的任何(包括元件之間的空白區域)時立即觸發所有包含的元件的樣式效果。
選擇動態面板,在“交互”窗格的“更多屬性”菜單中選中“觸發鼠標樣式效果”框。
動態面板包含元件上的交互動態面板元件相同的事件(例如,單擊或點擊),可能會導致沖突。如果動態面板及其包含的元件之一對同一事件設置了動作,則將執行元件的動作,而不是面板的動作。
17 內聯框架
使用內聯框架將HTML,視頻,音頻和其他媒體文件嵌入到Axure RP圖中,使用內聯框架插入RP文件外部的內容,例如YouTube視頻和Google Maps,也可以使用它們將Axure RP原型頁面彼此嵌入。
內聯框架元件在“默認”元件庫中。
雙擊內聯框架元件,或在“樣式”窗格中單擊“添加框架目標”顯示“鏈接屬性”對話框,可以選擇在RP文件中嵌入另一個頁面,也可以使用“鏈接到外部URL或文件”嵌入外部內容。
要嵌入網絡托管頁面或文件,使用網址:要嵌入本地文件,在瀏覽器中使用相對或絕對路徑。
默認情況下,內聯框架中的內容被邊框包圍,邊框樣式由瀏覽器控制,刪除邊框,選擇內聯框架,選中“樣式”窗格中的“隱藏邊框”復選框。
默認情況下,內聯框架的嵌入式媒體大于框架本身,則內聯框架將是可滾動的,如果嵌入的內容比框架高它將顯示一個垂直滾動條,如果嵌入的內容比框架寬,則將顯示一個水平滾動條。
更改滾動行為,選擇內聯框架,在“樣式”窗格的“滾動”下拉列表中選擇其他選項。
頁面加載到瀏覽器中,就會動態加載內聯框架元件嵌入式的內容,嵌入內容不會出現在Axure RP畫布上,可以通過預覽查看框架內容。
選擇內聯框架窗l元件,在“樣式”選項卡的“預覽”下拉列表中選擇以下選項之一:
- 無預覽(default默認)
- 視頻
- 地圖
- 自定義預覽(允許你導入自己的圖片)
* 預覽圖片僅出現在Axure RP的畫布上,不會顯示在瀏覽器中。
使用交互方式為內聯框架元件動態設置目標頁面或文件,在所需事件(例如,按鈕的點擊事件)下設置“框架內打開鏈接”操作,然后在RP文件中選擇一個頁面或輸入外部URL或文件路徑。
框架中的打開鏈接操作可以選擇以“父框架”為目標,而不是特定的嵌入式框架元件,可以在嵌入式框架中加載的頁面中使用此選項,以更改包含嵌入式框架中的當前頁面。
網站可以選擇阻止頁面嵌入到其他域托管的頁面中,這樣可以防止此類頁面顯示在Axure RP的內聯框架元件中。
無法嵌入到內聯框架元件中網站的一些示例是Google,Facebook,Yahoo和Twitter。
不可能在父頁面和任何嵌入式頁面之間來回傳遞變量值,這是一種稱為“跨站點腳本”的網絡安全違規,大多數瀏覽器均不允許使用。
作為一種安全措施,大多數瀏覽器都會阻止網站訪問本地文件。這意味著托管在Axure Cloud上或通過“預覽”選項查看的Axure RP原型(通過本地運行的Web服務器提供原型)無法訪問嵌入在內聯框架元件中的本地文件。
內聯框架中嵌入了本地文件,需要通過“發布”→“生成HTML文件”生成基HTML文件的本。
18 中繼器
中繼器元件是一種高級的元件類型,用于顯示文本,圖片和其他元素的重復集合,中繼器是容納一組稱為“項目”的元件容器,元件在頁面上重復多次,項目的每次重復都可以彼此不同,差異由輸入到中繼器表格形式的“數據集”中的數據控制。
中繼器是數據驅動,可以動態顯示排序和篩選,需要演示動態排序或篩選設計(例如動態表或產品列表)時,使用中繼器。但是,中繼器會花費很多工作來設置,如果原型不需要真正的動態排序和篩選,可以使用常規的元件,例如表格元件。
中繼器元件在“默認”元件庫中。
中繼器元件由兩部分組成:“項目”包含將要重復的元件集合,“數據集”包含控制每個重復外觀的表格數據。
存儲在數據集中的文本和圖片通過中繼器的“項目加載”事件下的交互顯示在項目的元件上。
重復的元件集合稱為“項目”,通過雙擊畫布或“概要”窗格中的中繼器來編輯項目中的元件。在編輯項目時,只會看到包含元件的一個實例,可以通過單擊畫布右上方的“隔離”來隱藏頁面上的其他元件。
對于中繼器數據集中的每一行數據,中繼器中的元件都會重復一次,例如,默認元件庫中的中繼器以其項目中的單個矩形元件及數據集中的三行數據開始,這就是為什么第一次將默認中繼器拖到畫布上時,看到矩形重復3次的原因。
控制中繼器元件重復的數據表稱為“數據集”,在“樣式”窗格中查看和編輯中繼器的數據集。將行或列添加到數據集中,單擊添加列,添加行或使用表格上方的圖標。還可以使用按鈕移動、刪除列和行,或者通過右鍵單擊表中的單元格來執行此操作。
中繼器數據集中的數據決定了中繼器重復之間的差異,例如,默認元件庫中的中繼器從三行數據開始,每行包含一個數字:1、2、3,這些是打印在畫布上中繼器的三個矩形元件上的數字。
* 選擇一個單元格并按CTRL+V(Windows)或CMD+V(Mac)將電子表格應用程序(如Microsoft Excel和Google表格)中的表格數據粘貼到中繼器的數據集中。
在項目中顯示數據
將文本輸入數據集單元格,選擇單元格并開始輸入,或者,雙擊一個單元格編輯其現有文本要在中繼器的項目中的元件上顯示數據集文本,在中繼器的“項目加載”事件中使用“設置文本”操作。在“設置為”下拉列表中選擇文本,然后單擊“值”字段右側的fx圖標。
在“編輯文本”對話框頂部,單擊“插入變量或函數”,下拉菜單的Repeater中,單擊ltem,ColumnName,其中“ColumnName”是包含文本的數據集列的名稱。(使用默認中繼器,在列表中將看到Item.Column0。)
單擊“確定”關閉“編輯文本”對話框。
數據集單元格還可以保存圖片文件,右鍵單擊一個單元格,選擇“導入圖片”。
中繼器中的圖片元件上顯示數據集圖片,在“項目加載”事件下配置“設置圖片”操作,在“設置默認圖片”下,下拉列表中選擇“值”,單擊文本字段右側的fx圖標。
使用“樣式”窗格中的“填充”“邊框”和“圓角”選項為中繼器添加邊框和背景色,中繼器的邊框和背最呈現在中繼器元件后面,需要在中繼器中添加填充才能看到它,“樣式”窗格的“填充”選項允許在中繼器的外邊緣與其項目之間創建空白區域。
中繼器可以具有自己的背景顏色,顏色與中繼器本身的背景不同,在“樣式”窗格的“背景色”中選擇顏色,此外,可以選中“交替顏色”框以選擇將應用于其他所有項目的第二種顏色。
數據集單元格還可以包含 URL和對 RP 文件中其他頁面的引用,以純文本形式輸入 URL,右鍵單擊單元格并選擇引用頁面保存,在出現的對話框中,選擇要為其存儲引用的頁面。
使用 URL和頁面引用在中繼器項目中的元件事件上創建打開鏈接交互-例如,按鈕元件的點擊事件,在鏈接到下拉列表中選擇鏈接到外部 URL,單擊帶有 https://text的文本字段旁邊的 fx 圖標。
在出現的“編輯值”對話框頂部,單擊“插入變量”或“函數”。
在下拉列表的Repeater,單擊ltem.ColumnName,“ColumnName”包含 URL和頁面引用的數據集列的名稱。
單擊確定關閉編輯值對話框。
默認情況下,中繼器所有元件都是可見的,垂直排列在單列中,元件之間沒有空格,使用“樣式”窗格的“間距”、“布局”和“分頁”中的選項更改設置。
在樣式窗格間距中,可以指定重復項的行或列之間應該有多少空白空間,如果中繼器設置了背景顏色,它將在此空自空間中可見。
布局,選擇中繼器的項目是垂直堆疊在一列中還是水平堆疊在一行中,如果希望中繼器分成多列或多行,選中網格排布復選框并輸入希望每列或每行具有的項目數。
分頁將中繼器項目分成多個“頁面”—不要與頁面窗格中的原型頁面混淆—這樣可以控制一次可見的項目數量。
在樣式窗格的分頁,選中多頁復選框,輸入希望在每頁上顯示的項目數,并輸入希望中繼器開始的頁數(默認為 1),使用“設置當前頁面”操作來瀏覽中繼器的頁面,并且可以使用“設置每頁項目數”操作來動態更改每頁的項目數。
使用“樣式”窗格中的“填充”“邊框”和“圓角”選項為中繼器添加邊框和背景色,中繼器的邊框和背景呈現在中繼器元件后面,需要在中繼器中添加填充才能看到,“樣式”窗格的“填充”中的選項允許在中繼器的外邊緣與其項目之間創建空白區域。
中繼器也可以具有背景顏色,顏色與中繼器本身的背景不同,可以在“樣式”窗格的“背景色”中選擇顏色,此外,選中“交替顏色”框以選擇將應用于其他所有項目的第二種顏色。
“適應HTML中內容”復選框位于“樣式”窗格中數據集的上方,默認情況下處于啟用狀態,啟用后,每個中繼器將自動調整大小以適應包含的元件。
如果禁用選項,不管所包含元件的大小,位置或可見性如何變化,每個中繼器始終保持固定大小,移動或顯示元件擴展到其自身的固定邊界之外,可能與其他中繼器重疊。
* 適應HTML中內容”不適用于中繼器,中繼器在頁面初始化加載后會重新加載,包括已排序或篩選的中繼器,以及在瀏覽器中動態添加,刪除或更新行的中繼器。
默認情況下,中繼器中的單選組和選擇組將針對該項目的每個實例分別進行執行,例如,該項目具有一個帶有三個單選按鈕的單選組,則選擇其中一個按鈕將取消選擇該項目實例中的其他兩個按鈕,但是該項目其他實例中的其他單選按鈕將不會因被選中而受影響。
通過取消選中“交互”窗格右上方“更多屬性”菜單中的“隔離單選組”和“隔離選擇組”復選框來更改,禁用選項后,將在項目的每個實例中執行中繼器中單選組和選擇組,這意味著在項目實例中選擇單選按鈕組中的單選按鈕將在項目的每個其他實例中取消選擇單選按鈕組中的所有其他按鈕。
默認情況下中繼器覆蓋綠色遮罩,以使包含元件易于與畫布上其他元件區分,在應用程序菜單的“視圖”→“遮罩”中切換遮罩。
* 元件遮罩,包括中繼器遮罩,不會在瀏覽器中展示。
在瀏覽器中加載中繼器的每個實例,都會觸發一次項目加載事件。例如,該事件將針對其數據集包含三行的中繼器觸發三遍,因為每一行都會創建項目的新實例,此外,項目加載事件始終按從上到下的順序處理數據集行。
初次加載頁面時,中繼器將加載其所有項目,并且每當對中繼器的數據集進行更改時,都會重新加載其所有項目,這意味著“項目加載”事件在頁面加載時針對項目的每個實例觸發一次,并日每次添加,心除或更新數據集行時都會觸發一次。
中繼器的實例包含元件發生更改而重新調整其大小時,都會觸發“項目尺寸改變”事件,僅當將中繼器設置為適合內容時,才會執行該事件。
使用“添加排序”和“刪除排序”操作,可以按中繼器的任何數據集列對其行進行動態排序,按以下數據類型對列的值進行排序:
- 數字
- 文本
- 文本(區分大小寫)
- 日期-YYYY-MM-DD
- 日期-MM/DD/NYYY
選擇升序或降序對行進行排序,或者每當重新應用排序時都可以在兩者之間切換。
使用“添加篩選”和“刪除篩選”操作,可以動態篩選中繼器以顯示滿足特定條件的行,使用布爾表達式定義這些條件,布爾表達式將一個值(通常是數據集列或其他中繼器屬性)與另一個值進行比較,簡單的示例包括:
- [[ltem.State ==‘CA’]]將在“狀態”列中僅顯示值為“CA”的行。
- [[ltem.Price<= 20]]僅顯示價格列中的值小于或等于20的行。
- [[ltem.TasksCompleted!=ltem,TasksAssigned1]]將僅顯示其TasksCompleted列中的值與TasksAssianed列中的值不相等的行。
使用以下操作在瀏覽器中動態更改中繼器的數據集:
- 添加行:向數據集添加新行。
- 刪除行:從數據集中刪除行。
- 更新行:更改數據集中現有行的列值。
- 標記行:指定以后要刪除或更新的行。
- 取消標記行:取消標記先前標記的行。
除了中繼器數據集中每一行的內容之外,還可以使用下面的對象和屬性來訪問值表達式中有關數據集的元信息。
項目和目標項目
Item對象是指由給定交互(通常是ltem Loaded事件下的一個動作)處理的單個中繼器數據集行。
Targetltem是一個相似的對象,可讓訪問與ltem相同的所有屬性,兩者之間的區別在于,中繼器內部的元件交互中使用Targetltem,訪問有關其他中繼器的信息。
可以對ltem和Targetltem對象使用以下屬性:
- Itemm.ColumnName: 表示存儲在命名列中的數據。
- ltem.isFirst: 在應用了排序,篩選和分頁之后,如果該行是中繼器中的第一個可見行,則返回true,否則返回false。
- ltemm.isLast: 在應用了排序,篩選和分頁之后,如果該行是中繼器中的最后一個可見行,則返回true,否則返回false。
- ltem.index: 代表數據集中行號的數值。例如,數據集中第三行的該值為3。
- ltemm.isEven: 如果ltem,index是偶數,則返回true,否則返回false。
- ltem.isOdd:如果ltem.index為奇數,則返回true,否則返回false。
- ltemm,isMarked:如果當前已標記該行,則返回true,否則返回false。
- ltem.isVisible: 在應用了篩選和分頁之后,如果該行當前在中繼器中可見,則返回true,否則返回false。
中繼器對象提供有關中繼器整個數據集的信息,使用中繼器元件事件時,將使用ltem.Repeater訪問此對象:[[ltem,Repeater.dataCount]]。
在處理中繼器事件時使用該表示法,也可以將This用作快捷方式,因為中繼器正在訪問其自己的屬性:[[This.dataCount]]。
[VAR1.dataCount]使用中繼器外部的元件或頁面事件時,要將中繼器存儲為本地變量,將以下屬性附加到本地變量名稱:[[LVAR1.dataCount]]。
可以將以下屬性與Repeater對象一起使用:
- RepeaterdataCount: 表示中繼器數據集中總行數的數值。
- RepeateritemCount: 一個數字值,表示在應用所有選后中繼器中的行數。
- Repeater.visibleltemCount: 在應用了所有篩選和分頁之后,代表中繼器中當前可見行數的數值。
- Repeater.pageCount: 代表中繼器中頁面總數的數值。
- Repeaterpagelndex: 數字值,代表中繼器中當前可見的頁面數。
動態添加行
- 打開一個新的RP文件,在畫布上打開Page1。
- 將中繼器元件,文本輸入框和按鈕元件拖到畫布上。
- 將按鈕的文本設置為“添加新行”。
單擊按鈕時向中繼器添加一行
- 選擇按鈕元件,在“交互”窗格中單擊“新建交互”。
- 在出現的列表中選擇點擊事件,然后選擇添加行操作。
- 在目標下拉列表中選擇中繼器元件。
- 單擊添加行按鈕,在出現的“將行添加到中繼器”對話框中,單擊fx圖標打開“編輯值”對話框。
- 在對話框的底部,單擊“添加局部變量”。
- 在新的局部變量行的第三個字段中,選擇文本輸入框元件,局部變量將在瀏覽器中獲取文本輸入框字段的文本。
- 在對話框的上方字段中,在方括號中輸入局部變量的名稱:[[LVAR1]]。
- 單擊“確定”關閉“編輯值”對話框,然后再次單擊“確定”關閉“將行添加到中繼器”對話框。
- 在“交互”窗格中單擊“確定”以保存“添加行”操作。
預覽頁面,在文本輸入框中輸入一些文本,單擊添加新行按鈕,將新行添加到中繼器,新行的矩形元件應顯示從文本輸入框獲取的文本。
動態刪除中繼器行
1.打開一個新的RP文件,在畫布上打開Page1。
2.將中繼器元件拖動到畫布上,雙擊編輯其項目
3.在“元件庫”窗格中,切換到“圖標”庫,在窗格左上角的搜索輸入中輸入關閉
4.將大“X”圖標拖動到畫布上,并放置在矩形的右側。
單擊X時刪除行
1.選中“X”圖標,在“交互”窗格中單擊“新建交互”
2.在出現的列表中選擇點擊事件,選擇刪除行操作。
3.在目標下拉列表中選擇中繼器元件。
4.保持選中當前(This)單選按鈕,然后單擊確定以保存操作。
* “規則”選項將刪除符合給定規則的行,“標記”選項將刪除先前標記的行。
預覽頁面并逐個單擊“X”圖標以刪除中繼器的行
從中繼器外部刪除行
從中繼器外部刪除行時,使用篩選規則或標記要刪除的行來指定應刪除的行。
更新中繼器行
1.打開一個新的RP文件,在畫布上打開頁面Page1。
2.將中繼器元件拖動到畫布上,雙擊以打開其項目進行編輯。
單擊矩形時更新行的Column0值
1.選擇矩形元件,在“交互”窗格中單擊“新建交互”。
2.在出現的列表中選擇點擊事件,選擇更新行操作。
3.在目標下拉列表中選擇中繼器元件。
4.保持選中This單選按鈕。
5.單擊+選擇列,然后在列表中選擇Column0。
6.在出現的下拉菜單中保持“值”處于選中狀態然后在它旁邊的文本字段中輸入“已單擊!”
7.單擊確定以保存操作。
在瀏覽器中瀏覽頁面,然后在中繼器中單擊一個矩形,其文本應更新為“已單擊!”
標記中繼器行
1.打開一個新的RP文件,在畫布上打開Page1。
2.將中繼器元件拖動到畫布上,雙擊它以編輯其項目,
3.將復選框元件拖動到畫布上,并將其放置在矩形的右側。
4.將復選框標簽的文本設置為“標記行”
選中復選框時標記行
取消選中復選框時取消標記行
1.復選框元件處于選中狀態的情況下,再次在“交互”窗格中單擊“新建交互”。
2.在出現的列表中選擇“取消選中”事件,然后選擇“取消標記行”操作。
3.在目標下拉列表中選擇中繼器元件。
4.保持選中This單選按鈕,單擊確定保存操作。
5.單擊畫布右上角的“關閉”,或按ESC鍵關閉中繼器的項目。
單擊按鈕刪除所有標記行
1.將按鈕元件拖到畫布上,并將文本設置為“刪除標記的行”。
2.選中按鈕后,在“交互”窗格中單擊“新建交互”。
3.在出現的列表中選擇點擊事件,然后選擇刪除行操作。
4.在目標下拉列表中選擇中繼器元件。
5.選擇標記單選按鈕,然后單擊確定以保存操作。
預覽頁面并選中一些中繼器行的框,單擊“刪除標記的行”按鈕以刪除選中的行。
排序中繼器行
1.打開一個新的RP文件,在畫布上打開頁面Page 1。
2.將中繼器和按鈕元件拖到畫布上。
3.將按鈕上的文本設置為“添加排序”。
4.選擇中繼器元件,在“樣式”窗格中,將兩行添加到數據集的Column0中,其中一列的值為4,另一行的值為5。
5.使用數據集上方的藍色箭頭對行進行上下移動,以使Column0的值不再按順序排列。
添加排序
1.選擇“添加排序”按鈕,在“交互”窗格中單擊“新建交互”。
2.在出現的列表中選擇點擊事件,然后選擇添加排序操作。
3.在目標下拉列表中選擇中繼器元件。
4.在名稱字段中,輸入Toggle Column0。
5.在“列”下拉列表中選擇“Column0”,在“排序方式”下拉列表中選擇“數字”。
6.在“排序”下拉列表中,選擇“切換”,然后在“默認”下拉列表中選擇“升序”,這種排序將以數據集的Column0為目標,將數據視為數字,并在單擊按鈕時在升序和降序之間來回切換排序順序。
7.單擊確定保存操作。
移除排序
1.將另一個按鈕元件拖動到畫布上,并將文本設置為“刪除排序”。
2.選中按鈕元件后,在“交互”窗格中單擊“新建交互”。
3.在出現的列表中選擇點擊事件,然后選擇移除排序操作。
4.在目標下拉列表中選擇中繼器元件。
5.選擇AII單選按鈕,然后單擊確定以保存操作。
* 僅刪除一個特定的排序,可以選擇第二個單選按鈕,在文本字段中輸入排序的名稱。
再次預覽頁面,單擊“添加排序”按鈕以對中繼器進行排序,單擊按鈕可將矩形更改為降序,單擊“刪除排序”按鈕,將中繼器恢復為未排序狀態。
分頁中繼器
1.打開一個新的RP文件,在畫布上打開頁面Page 1。
2.將中繼器元件拖動到畫布上。
3.在“樣式”窗格中,向中繼器的數據集添加六行,在Column0中填充數字4到9。
4.在“元件庫”窗格中,切換到“圖標”庫,然后使用窗格左上方的搜索字段搜索箭頭,將左箭頭和右箭頭拖到畫布上,然后在轉發器的每一側放置一個。
1.選擇中繼器,在“樣式”窗格底部的“分頁”中選中“多個頁面”
2.在每頁項目數字段中輸入3,并將起始頁面保留為1。
單擊箭頭部件時設置當前頁面
1.選擇向右箭頭,在“交互”窗格中單擊“新建交互”。
2.在出現的列表中選擇點擊事件,選擇設置當前頁面操作。
3.在目標下拉列表中選擇中繼器元件。
4.在頁面下拉菜單中選擇下一項,然后單擊確定保存操作。
5.用左箭頭重復這些步驟,將中繼器的頁面設置為向前。
在瀏覽器中預覽頁面,應該看到中繼器的前三項顯示,單擊右箭頭查看接下來的三個項目,然后再次單擊以查看最后三個項目,單擊左箭頭可向后瀏覽各個項目。
顯示當前頁碼和總頁數
1.返回Axure RP,將標簽元件拖動到畫布上,并放置在中繼器下方,將文本設置為第1頁,共3頁。
2.選擇中繼器元件,在“交互”窗格中,將鼠標懸停在“已加載項目”事件下的“設置文本”操作上,單擊出現的“添加目標”按鈕。
3.在目標下拉列表中選擇標簽元件。
4.單擊“值”字段右側的fx圖標打開“編輯文本”對話框。
5.在對話框的頂部區域,突出顯示Page1of3 中的1,單擊“插入變量或函數”,在出現的列表中的“ 中繼器/數據集”下選擇pagelndex,該區域中的文本現在應顯示為:Page[[ltem.Repeater.pagelndex]] of 3。
6.突出顯示3,再次單擊插入變量或函數,在“轉發器/數據集”下選擇pageCount,該區域中的文本現在應顯示為:Page[[ltem.Repeater,pagelndex]] of [lltem.Repeater,pageCount]]
括號中的兩個表達式將分別由瀏覽器中中繼器的可見頁數及其總頁數替換,每當中繼器的頁面更改時,可見頁面的編號將自動更新,
7.單擊確定關閉編輯對話框
預覽頁面,單擊左右箭頭更改中繼器的頁面,標簽元件上的文本應更新以顯示當前頁面的編號。
19 文本輸入框和文本域
文本輸入框和文本區域是表單控件,可以在瀏覽器中輸入響應,位于默認元件庫的“表單”中。
在原型表單字段為簡短(單行)表單字段時,使用文本輸入框元件,比如用戶名或密碼字段。
原型表單字段較長(多行)表單字段時,使用文本輸域元件。
提示文字
使用“交互”窗格右上方的“更多屬性”菜單中的“提示文本”字段將提示文本添加到文本輸入框/區域,提示文本將出現在文本輸入框/區域中,直到用戶與之交互為止,此時該提示文本將消失,以允許用戶根據需要填寫輸入。
提示文本默認為灰色,并應用于文本輸入框/區域的字體顯示,更改提示文本的樣式,在“交互”頂部選擇:提示樣式效果。
選擇在文本輸入框/區域獲取焦點之后還是在用戶開始鍵入之后隱藏提示文本。使用“更多屬性”菜單中的“在之后隱藏”下拉菜單進行選擇。
20 輸入類型(僅文本輸入框)
文本輸入框元件可以提供不同的輸入類型,在用戶輸入表單中定義功能,使用“交互”窗格中“更多屬性”菜單中的“類型”下拉列表,為文本字段選擇輸入類型。
瀏覽器通常將自己的樣式應用于某些類型的文本字段,此外,在移動設備上選擇文本字段時某些字段類型將導致出現其他類型的鍵盤,例如數字小鍵盤而不是字母數字鍵盤。
* 文本輸入框類型是HTML的功能,而不是Axure的發明,你會發現某些字段類型比其他字段類型更適用于Axure RP。
不同類型的字段以及使用該字段類型的結果如下:
文本: 用于基本文本輸入的默認設置。
密碼: 輸入文字時將其屏蔽。
郵件: 可能會在移動設備上提示電子郵件鍵盤。
數字:僅接受數字輸入,可能會在移動設備上提示數字鍵盤。
手機號碼: 可能會在移動設備上提示撥號盤。
URL: 可能會在移動設備上提示網址輸入鍵盤。
搜索: 可以在移動設備的鍵盤上添加搜索按鈕,某些瀏覽器可能會添加一個“X”圖標,可以單擊以清除該字段。
文件: 將文本字段更改為瀏覽器中的文件上傳按鈕,單擊該按鈕將打開設備的文件瀏覽器(盡管無法將文件上傳到 Axure RP 原型)。
日期: 可能會提示使用瀏覽器樣式的日期選擇器或日歷控件。
月:可能會提示使用瀏覽器樣式的月份和年份選擇器。
時間: 可能會提示瀏覽器樣式的時間選擇器。
文本輸入框,文本區域和其他表單元件的制表順序由其層深度確定,如“概要”窗格中所示。
通過單擊交互窗格中的本字段和文本區域元件的一些附加屬性。
使用“交互”窗格中“更多屬性”菜單中的“最大長度”字段來指定文本輸入框將接受的最大輸入長度,一旦達到最大字符長度,字段將停止接受其他文本輸入。
禁用文本輸入框或文本域可防止用戶在瀏覽器中與其進行交互,這會激活元件的:禁用樣式效果,使其顯示為灰色。
有兩種禁用元件的方法:
在“交互”窗格的“更多屬性”菜單中,選中“禁用”復選框。
通過啟用/禁用操作在瀏覽器中動態禁用元件,在任何交互過程中執行此操作,例如在頁面加載或單擊按鈕時。
提示:使用“啟用/禁用”操作在瀏覽器中動態啟用/禁用元件。
當文本輸入框/文本域設置為“只讀”時,在瀏覽器中和選擇元件上已經存在的文本,用戶無法更改,要將文本字段/區域設置為只讀,選中“交互”窗格中“更多屬性”菜單中的“只讀”復選框。
通過操作元件值上的文本選項訪問在文輸入框段或文本域中輸入的文本,例如,將全局變量的值設置為文本輸入框/域上的文本,以將文本帶到另一個頁面。
還可以獲取文本輸入框或文本域的文本,僅在文本匹配特定值的情況下才執行特定情況,就像在驗證用戶名和密碼組合時所做的那樣。
文本輸入框或文本域在瀏覽器中獲取焦點時,按ENTER鍵可以觸發頁面上另一個元件的點擊事件,稱為文本輸入框/文本域的“提交按鈕”。
將提交按鈕分配到文本輸入框/域:
1.選擇文本字段/區域,然后單擊“交互”窗格下部的“顯示全部”。
2.從“提交按鈕”下拉列表中的可選擇元件列表中進行選擇。
取消分配提交按鈕,單擊下拉列表底部的取消分配提交按鈕。
21 下拉列表
下拉列表(也稱為下拉菜單)是可切換的列表,其中包含多個選項,一次只能選擇一個,下拉列表元件位于默認元件庫的表單中。
希望用戶從許多可能的答案中選擇一個問題的單個答案時,使用下拉列表元件。
22 添加,刪除和重新排序下拉列表選項
在下拉列表中添加和編輯選項,雙擊畫布或概要窗格中的下拉列表元件打開編輯下拉列表對話框,通過單擊添加,在出現的字段中鍵入新選項的文本,將單個選項添加到下拉列表,或者,通過單擊編輯多項一次將多個新選項添加到下拉列表。
重新排序下拉列表選項,選擇一個選項,使用對話框頂部的向上和向下按鈕,刪除選項,選擇它并單擊刪除,或單擊編輯多項并清除文本區域以一次刪除所有選項。
通常,下拉列表中的第一個選項將顯示為默認選項,希望將其作為默認選項,可以移動到列表頂部。
但是,如果希望使用下拉菜單選項作為默認選項,在編輯下拉列表對話框中選中其旁邊的框。
* 將空白的默認選項添加到下拉列表中,輸入一個空格字符作為選項文本
在瀏覽器中,單擊一個下拉列表以將其打開并選擇一個選項。
使用設置選中列表選項操作動態地更改下拉列表中的選定選項,選擇特定的列表選項,也可以使用變量值來設置新的選定選項。
在交互和條件中通過值選項的選定選項訪問下拉列表的選定選項,例如,將全局變量的值設置為下拉列表的選定選項,將值傳遞到另一個頁面,還可以在某種條件下獲取下拉列表的選定選項,以便僅在選項與特定值匹配時才會觸發特定情況。
下拉列表中可用的選項無法在瀏覽器中動態更改,但可以通過創建具有多個狀態的動態面板來模擬效果,每個狀態都包含具有不同內容的下拉列表,要更改下拉列表中的選項,切換動態面板的狀態。
下拉列表和其他表單元件的制表順序由其層深度確定,如概要窗格中所示。
23 列表框
列表框元件顯示選項列表,用戶可以從中選擇一個或多個選項。
列表框元件位于默認元件庫的表單中。
24 添加、刪除和重新排序列表框選項
在列表框中添加和編輯選項,雙擊畫布或概要窗格中的列表框元件打開編輯列表框對話框,通過單擊添加,在出現的字段中鍵入新選項的文本,將單個選項添加到列表框中,或者,通過單擊編輯多項一次將幾個新選項添加到列表框中。
對列表框選項重新排序,選擇一個選項,使用對話框頂部的向上和向下按鈕。
刪除選項,選擇它并單擊刪除,或單擊編輯多項并清除文本區域以一次刪除所有選項。
列表框可以允許選擇多個,但必須先啟用設置,允許多個選擇,雙擊列表框,在編輯列表框對話框的底部選中默認情況下允許選擇多個項目。
啟用設置后,可以在瀏覽器中通過按住CTRL或CMD并單擊多個選項來選擇多個選項。
通常,列表框默認情況下不會在瀏覽器中選擇任何選項,但可以在編輯列表框對話框中進行更改,雙擊列表框元件,選中對話框中選項旁邊的框。
* 如果啟用了多個選項,可以定義多個默認選項。
禁用列表框可防止用戶在瀏覽器中與其進行交互,這會激活元件的:禁用樣式效果,使其顯示為灰色。
禁用元件有兩種方法:
選中交互窗格的更多屬性菜單中的禁用復選框。
通過啟用/禁用操作在瀏覽器中動態禁用元件,可以在任何交互過程中執行此操作,例如在頁面加載時或單擊按鈕時。
* 使用“啟用/禁用”操作在瀏覽器中動態啟用/禁用元件。
在瀏覽器中,單擊列表框選項以將其選中,如果啟用了多個選擇,則可以按住CTRL或CMD,同時單擊以選擇多個選項。
還可以使用設置選定的列表選項操作動態地更改列表框中的選定選項,可以選擇特定的列表選項,也可以使用變量值來設置新的選定選項。
通過交互條件中的值選項的選中選項訪問列表框的選中選項,例如,將全局變量的值設置為列表框的選定選項,將該值傳遞到另一個頁面,還可以在條件下獲取列表框的選中選項,以僅在選項與特定值匹配時才執行特定情況。
當列表框在瀏覽器中處于焦點狀態時,按ENTER鍵可以觸發頁面上另一個元件的點擊事件,稱為列表框的提交按鈕。
要將提交按鈕分配給列表框:
1.擇列表框,然后單擊“交互”窗格下部的“顯示全部”。
2.提交按鈕,下拉列表中的可選元件列表中進行選擇。
取消分配提交按鈕,單擊下拉列表底部的取消分配提交按鈕。
列表框中可用的選項無法在瀏覽器中動態更改,但可以通過制作具有多個狀態的動態面板來模擬效果。
每個面板都包含一個具有不同內容的列表框,更改列表框中的選項,切換動態面板的狀態。
通過設置選中列表選項操作動態設置列表框的選中選項時,只能選擇一個選項;無法通過互動同時選擇多個選項。
同樣,即使已選擇多個選項,也只能通過交互和條件中的值選項的所選選項從列表框中讀取一個所選選項(最頂部的選項)。
解決限制,需要制作一個帶有形狀元件的自定義列表框。
列表框和其他表單元件的制表順序由其層深度確定,如概要窗格中所示。
25 復選框
用戶輸入表單中,復選框為用戶提供了二進制選擇,復選框可用于單一選擇。
復選框元件位于“默認”元件庫的“表單”中。
在“樣式”窗格的“按鈕”中,使用“大小”字段來設置復選框的寬度和高度。
默認情況下,復選框在左側,標簽文本在右側,要交換順序,以使文本位于左側,而框位于右側,使用“大小”字段右側的“對齊”圖標。
通過以下任一選項來編輯復選框元件標簽上的文本:
雙擊復選框標簽進入文本編輯模式。
選擇復選框標簽,按Enter進入文本編輯模式。
右鍵單擊復選框標簽,在上下文菜單中選擇“編輯文本”。
選擇復選框標簽并開始輸入。(僅當禁用了單鍵快捷方式時,此選項才可用)
默認情況下,頁面首次加載到瀏覽器中時,復選框以未選中狀態開始,要改為選中狀態,選中復選框,在畫布上單擊復選框,還可以在“交互”窗格的“更多屬性”菜單中選中“選定”選項。
禁用復選框可防止用戶在瀏覽器中與其進行交互,這會激活元件的:禁用樣式效果,使其顯示為灰色,有兩種禁用元件的方法:
在“交互”窗格的“更多屬性”菜單中,選中“禁用”復選框。
通過啟用/禁用操作在瀏覽器中動態禁用元件,可以在任何交互過程中執行此操作,例如在頁面加載或單擊按鈕時。
* 使用“啟用/禁用”操作在瀏覽器中動態啟用禁用元件。
在瀏覽器中,單擊復選框以選中和取消選中它。
還可以通過“設置選擇/已選中”操作動態地選中和取消選中一個復選框,真值選項將選中該復選框,而假選項將取消選中該復選框,切換選項會將復選框設置為與互動發生時相反的狀態。
可以通過交互和條件中的“選中狀態”選項來確定是否選中了復選框,如果選中復選框,則返回值“true”,未選中復選框,則返回“false”。
“復選框在瀏覽器中獲取焦點時按ENTER鍵可以觸發頁面上另一個元件的點擊事件,稱為復選框的“提交按鈕”,要將提交按鈕分配給復選框:
1.選中復選框,然后單擊“交互”窗格下部的“顯示全部”
2.從“提交按鈕”下拉列表中的可選元件列表中進行選擇
取消分配提交按鈕,單擊下拉列表底部的取消分配提交按鈕
在某些設計模式中,復選框具有第三種“不確定”狀態,在這種狀態下既沒選中也沒未選中,需要具有三個狀態的復選框,可以使用形狀元件和動態面板創建自定義復選框。
復選框和其他表單元件的制表順序由其層深確定,如“概要”窗格中所示。
26 單選按鈕
單選按鈕是一種表單控件,允許用戶從多個選項中選擇一個選項,例如,要求用戶輸入電話號碼,可以從一組單選按鈕中進行選擇,以指示該號碼是用于家庭,工作還是移動電話。
單選按鈕元件位于默認元件庫的表單中。
大多數設計模式中,選擇單選按鈕將自動取消選擇同一組中任何之前選擇的單選按鈕,在Axure RP中,可以通過將單選按鈕添加到單選組中來在單選按鈕之間創建這種關系:
1.在畫布上或概要窗格中選擇一個或多個單選按鈕元件。
2.在交互窗格的更多屬性菜單中,在分配按鈕組字段中輸入新按鈕組的名稱。
3.通過選擇更多單選按鈕,然后在分配單選組下拉列表中選擇單選組名稱,將其添加到單選組。
4.通過選擇單選按鈕并清除分配單選組字段的選擇,從單選組中刪除單選按鈕。
* 從單選組中刪除所有單選按鈕將刪除該組。
在樣式窗格的按鈕中,使用大小字段來設置單選按鈕的寬和高度。
默認情況下,單選按鈕在左側,標簽文本在右側,要交換順序,使文本位于左側,按鈕位于右側,使用大小字段右側的對齊圖標。
通過以下任意選項編輯單選按鈕標簽上的文本:
雙擊按鈕標簽進入文本編輯模式
選擇按鈕標簽,然后按Enter進入文本編輯模式
右鍵單擊按鈕標簽,然后在上下文菜單中選擇編輯文本
選擇按鈕標簽并開始輸入。(僅當你禁用了單鍵快捷方式時,此選項才可用)
默認情況下,頁面首次加載到瀏覽器中時,單選按鈕以未選擇狀態開始。
要使單選按鈕開始處于選定狀態,選擇單選按鈕,在畫布上單擊其按鈕。
還可以在交互窗格的更多屬性菜單中選中選中選項。
禁用單選按鈕可防止用戶在瀏覽器中與其進行交互,這會激活元件的:禁用樣式效果,使其顯示為灰色。有兩種禁用元件的方法:
選中交互窗格的更多屬性菜單中的禁用復選框。
通過啟用/禁用操作在瀏覽器中動態禁用元件,可以在任何交互過程中執行此操作,例如在頁面加載時或單擊按鈕時。
在瀏覽器中,單擊單選按鈕將其選中。
還可以通過設置選中操作動態選擇一個單選按鈕,true選項將選擇單選按鈕,false選項將取消選擇,切換選項會將單選按鈕設置為與互動發生時相反的狀態。
通過交互和條件中的被選項來確定是否選擇了單選按鈕,如果選擇了單選按鈕,則返回值“true”,未選擇單選按鈕,則返回值“false”。
在瀏覽器中單選按鈕處于焦點狀態時按ENTER鍵可以觸發頁面上另一個元件的點擊事件,稱為單選按鈕的提交按鈕,要將提交按鈕分配給單選按鈕:
1.選擇單選按鈕,然后單擊“交互”窗格下部的“顯示全部”。
2.從“提交按鈕”下拉列表中的可選元件列表中進行選擇。
取消分配提交按鈕,單擊下拉列表底部的取消分配提交按鈕。
單選按鈕和其他表單元件的選制表順序由其層深確定,如概要窗格中所示。
27 樹
最常用于模擬文件瀏覽器并可視化其他層次結構,單擊樹的各個節點可以在頁面上顯示不同的元件或在項目中打開不同的頁面。
添加節點,右鍵單擊現有節點,使用添加子菜單,可以選擇添加子節點或兄弟節點,移動節點,右鍵單擊,使用移動子菜單,可以選擇向上或向下移動節點,也可以使節點升級或降級。
刪除節點,右鍵單擊它,選擇刪除節點,或者,選擇節點并按Delete。刪除節點也將刪除其子節點。
* 樹必須包含一個節點,刪除樹元件的最后一個節點,會收到一條警告:無法刪除所有節點。
28 展開/折疊圖標
默認情況下,每個至少有一個子節點的樹節點都有一個圖標,可以單擊以展開和折疊子節點,這些圖標在Axure RP畫布和瀏覽器中均可用。
默認情況下,展開/折疊圖標為三角形,可以通過選擇樹或其節點之一并在樣式窗格中單擊編輯樹屬性來選擇不同的圖標,在出現的對話框中,可以在兩個內置選項 (加號/減號和三角形)之間進行選擇,也可以導入自己的圖標。
還可以通過取消選中樹屬性對話框中的顯示擴展/折疊圖標來隱藏擴展/折疊圖標。
29 將圖標添加到樹節點
除了展開/折疊圖標之外,還可以在樹節點的左側添加自定義靜態圖標:
1.選擇樹或其節點之一,在樣式窗格中單擊編輯樹屬性。
2.在出現的對話框中,選中顯示圖標框,單擊確定關閉對話框。
3.選擇要向其添加圖標的樹節點,在樣式窗格中單擊編輯圖標。
4.在出現的對話框中,導入圖標并選擇顯示位置:
僅當前節點
當前節點和同級節點
當前節點、同級節點和全部子節點
樹節點只能包含文本和圖標,無法將元件添加到樹節點,需要其他樹內容,嘗試使用形狀元件構建自定義樹結構。
樹的各個方面在所有自適應視圖中都是一致的,要在自適應視圖之間對樹進行樣式設置,可以在每個自適應視圖中放置不同的樹元件,從每個視圖中取消放置為其他自適應視圖設計的樹元件。
30 表格
通過以下任意選項將文本添加到表格單元格或編輯當前文本:
雙擊單元格進入文本編輯模式
選擇單元格,然后按Enter鍵進入文本編輯模式
選擇單元格并開始輸入。(僅當禁用了單鍵快捷方式時,此選項才可用)
從電子表格應用程序(例如Microsoft Excel和Google表格)中復制表格數據,并將表格元件粘貼到Axure RP中,在電子表格應用中復制表格單元格,然后,在Axure RP中,右鍵單擊畫布,選擇選擇性粘貼→粘貼為表格。
也可以將表格數據粘貼到現有的表格中,這樣做,選擇表的左上角的單元格,然后按CTRL+V或CMD+V,粘貼的數據將填充表中已經存在的單元格。
* 將數據粘貼到現有元件時,不會將新的列和行添加到它們中,表格太小而無法容納粘貼的數據,在粘貼數據之前向表格中添加更多的列或行。
將行或列添加到表元件,右鍵單擊任一單元格或灰色的行或列,在上下文菜單中,選擇以下選項:
在上方插入行
在下方插入行
在左側插入列
在右側插入列
刪除行或列,右鍵單擊該行或列中的單元格,或右鍵單擊對應的灰色行或列控件,在上下文菜單中,選擇刪除行或刪除列。
重新排列表格的行和列,選擇灰色的行或列控件,然后向上/向下或向左/向右拖動。
可以通過單擊單元格邊框并拖動來更改行的高度或列的寬度。
還可以使用樣式窗格中的 W 和 H字段設罟單個單元格的寬度和高度。
一次調整多個單元格的大小,單擊并拖動或通過按住SHIFT單擊每個單元格來選擇單元格,然后,使用W和H字段。
表格元件中的每個單元格都有其自己的事件,可用于設置針對特定單元格的特殊交互。例如,配置單元格的單擊事件在頁面上顯示另一個窗口元件。
還可以在交互和條件中定位單個表單元格。例如,使用設置文本操作更改單元格上的文本,并使用元件上的文本選項獲取單元格上的文本。
* 將鼠標懸停在選擇元件下拉菜單中的單元格名稱上時,單元格在畫布上以黃色突出顯示,在上面的屏幕快照中查看第3列的單元格作為示例。
還可以在交互和注釋窗格中命名單個表單元格,以使其更易于查找。
表格單元格不能包含圖片,只能包含文本,要模擬圖片列,需要在表格中創建一個空列,然后在其頂部放置圖片元件。
表格單元格無法合并,要顯示合并的表格單元格的外觀,需要在要合并的單元格上放置一個矩形元件。然后,將矩形上的文本設置為將占據合并單元格的文本。
使行顏色交替出現,需要將每隔一行中的單元格的填充顏色更改為所需的顏色。
* 使用表格元件旁邊的灰色框來選擇一行中的所有單元格,并且可以用CMD/CTRL單擊以選擇多行。
使整個表格行具有鼠標懸?;蚩h停樣式的外觀,需要在行的頂部放置一個矩形元件,給矩形一個半透明的填充,并為其指走:鼠標懸停樣式效果。
不能在瀏覽器中動態添加,刪除,排序或過濾表行,若要使原型具備這些行為,請嘗試以下操作:
使用多狀態動態面板模擬對表元件的動態更改,在動態面板的每種狀態下,放置一個表格,其中已進行了預期的更改,當需要進行給定的更改時,顯示其相應的動態面板狀態。
如果需要能夠對表進行真正的動態更改,可嘗試用中繼器元件。
表格元件的各個方面在所有自適應視圖中都是一致的,要在自適應視圖之間為表格設置不同的樣式,可以在每個自適應視圖中放置一個不同的表格元件,從每個視圖中取消放置為其他自適應視圖設計的表格元件。
31 經典菜單
經典菜單元件用于構建導航菜單,可以自定義頂級菜單項的數量,并為每級菜單創建子菜單。
將鼠標移到父菜單項上時,子菜單會自動顯示在瀏覽器中,而將鼠標移出子菜單及其父菜單時,會再次隱藏。
* 創建不同的菜單(例如,單擊鼠標),可以使用形狀元件創建自定義導航菜單,
經典菜單有兩種類型:水平菜單,其子菜單向下打開:垂直菜單,其子菜單向右打開。
經典菜單元件從三個頂級菜單項開始,添加其他菜單項,右鍵單擊現有選項,然后選擇在之后添加菜單項或在之前添加菜單項,刪除選項,右鍵單擊它,然后選擇除菜單項。
默認情況下,經典菜單沒有任何子菜單,可以通過右鍵單擊菜單項并選擇添加子菜單,將子菜單添加到任何菜單項(包括子菜單中的項),刪除子菜單,右鍵單擊其父菜單項,然后選擇刪除子菜單。
通過右鍵單擊菜單項并選擇編輯菜單填充來在菜單和子菜單項周圍添加填充,這會將菜單的邊框推離菜單項,從而使菜單元件的填充顏色和邊框與菜單項區別開。
傳統菜單使用起來很快,但樣式卻相當不靈活。因此,最適合于菜單外觀和視覺不重要的低保真度原型。
經典菜單的所有方面在所有自適應視圖中都是一致的,在自適應視圖之間為經典菜單設置不同的樣式,可以在每個自適應視圖中放置不同的經典菜單,從每個視圖中取消放置為其他自適應視圖設計的經典菜單。
32 快照
快照元件通常用于在原型頁面上顯示其他圖表(頁面和母版)的屏幕快照,每當更新引用的頁面或母版時,快照元件中的圖像都會自動更新匹配。
可以顯示整個圖表或其中的一部分,還可以在捕獲快照圖像之前將交互應用于圖表,例如隱藏或顯示元件或更改動態面板的狀態。
快照元件位于默認元件庫的標記。
* 快照元件可方便地繪制用戶流程圖并向流程圖添加縮略圖。
快照元件選擇引用頁面或母版,在樣式窗格的快照元件中單擊添加引用頁,在出現的引用頁面對話框中,選擇頁面或母版按鈕,然后從下面的列表中選擇一個目標。
也可以單擊對話框頂部的清除引用,將快照保留為空白。
快照以適應比例模式開始,該模式縮放引用頁面或母版的圖片以適合快照元件的邊界。
在樣式窗格的快照中關閉此選項,取消選中適應比例后,能夠調整捕獲圖片的偏移量和縮放比例。
縮放快照元件中的圖像,使用樣式窗格快照的縮放字段,也可以雙擊快照,然后使用鼠標上的滾輪放大或縮小,如果鼠標沒有滾輪,可以在滾動時按住CTRL或CMD。
快照的X和Y偏移值可讓移動快照中顯示的被引用頁面或母版的位置,可以在樣式窗格的快照中進行設置,也可以雙擊快照,然后將圖像或母版在快照元件中拖動設置。
在快照元件中執行動作會在快照的縮略圖中觸發該操作。(不會影響所引用的頁面或母版。)
執行動作,在畫布上選擇一個快照元件,在樣式窗格快照中單擊執行動作,在出現的對話框中,構建以引用頁面或母版元件為目標的交互。
* 要觸發在引用頁面或母版中已設置的交互,使用觸發事件操作,例如,配置了一個按鈕,當單擊該按鈕時顯示一條消息,則可以觸發該按鈕的點擊事件,以在快照的縮略圖中顯示該消息。
33 流程圖
使用Axure RP制作流程圖,用戶流程,業務流程圖和其他流程圖。
添加形狀,圖片和快照元件以用作流程元素,然后使用“連接器”工具在它們之間繪制智能線。
流程元件庫包含許多流程圖通用的形狀,例如流程,決策,數據庫等。由Axure用戶社區的成員構建的其他流程專用的元件庫可以在“下載元件庫”頁面上找到。
* 流程元件表示RP文件中的頁面時,可以通過元件為其對應頁面分配頁面引用來鏈接兩者。
在兩個元件之間繪制連接器,單擊用戶界面左上角的“連接”圖標以將畫布置于連接器模式,在連接器模式下,可以將鼠標懸停在元件上查看其連接點,單擊并拖動從一個元件上的連接器點到另一個元件上的點,以它們之間繪制一個連接器。
形狀,圖片和快照元件默認情況下具有四個連接器點,每個元件的側面各一個。
根據需要添加更多點,刪除點和重新放置點,右鍵單擊元件,選擇變換形狀——編輯連接器點,要添加連接器點,在元件上的任意位置單擊。
右鍵單擊一個連接器點以將其刪除,或選擇它并按DELETE,將現有連接器點移動到其他位置,將其拖動(這還將移動連接到該點的所有連接器元件)。
默認情況下,連接器遵循錨定的兩點之間的最短路徑,但可以手動更改連接器的路徑,方法是選擇連接器并沿其路徑拖動任何手柄以重新放置連接器。
恢復默認路徑,選擇它,單擊“樣式”窗格的“位置和大小”中的“重排”圖標。
通過選擇連接器并在“樣式”窗格的“位置和大小”中單擊以下選項之一來更改其路徑類型:
直角折線(默認)
圓角角折線
直線
曲線
可以使用“樣式”窗格中的以下“邊框”屬性來為連接器設置樣式:
顏色
線寬
線型
箭頭
通過以下任何選項將文本添加到連接器元件或編輯其當前文本:
雙擊連接器以進入文本編輯模式
選擇連接器,然后按Enter鍵進入文本編輯模式
選擇連接器并開始輸入。(僅當禁用了單鍵快捷方式時,此選項才可用)
Axure RP可以根據原型的頁面結構為生成流程圖。
首先,確保要記錄的頁面結構具有頂級父頁面,然后執行以下操作:
1.打開要放置流程圖的頁面。
2.右鍵單擊要記錄的頁面結構的最頂層頁面,然后選擇“生成流程圖”。
3.在標準,垂直圖或右圖之間選擇,然后單擊確定。
* 流程圖中的每個形狀都將包含項目中對應頁面的頁面參考。
默認情況下,頁面在“頁面”窗格中用“頁面”圖類型圖標標記,可以通過右鍵單擊頁面名稱并選擇“圖類型”→“流程圖”,將具有流程圖的頁面的圖類型更改為“流程圖”。
本文由 @PM大明同學 原創發布于人人都是產品經理。未經作者許可,禁止轉載
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務
作者寫的很清晰明了,我一個門外漢看下來也有個基本的了解了。