挑戰6.1：密碼輸入框禁用/啟用的交互（一）

請參考如下描述開始挑戰：將【確認密碼】文本輸入框設置為【禁用】，當【密碼】文本輸入框的內容【不為空】時，啟用【確認密碼】文本輸入框。

挑戰6.2：密碼輸入框禁用/啟用的交互（二）

請參考如下描述開始挑戰：將【立即注冊】按鈕設置為禁用，當【確認密碼】文本輸入框中的值，與【密碼】文本輸入框中的值完全相同時，啟用【立即注冊按鈕】。

9．文本區域

文本區域部件大多情況下用于留言/評論效果。文本區域可以輸入多行文本，而且可以調整至任意高度，見圖151。

文本區域的屬性除了不能設置類型，其他和文本輸入框相同，可參考文本輸入框部件。

本區域部件的局限性在于，不能添加漸變背景色，但可以將其背景設置為透明，再添加一個填充顏色的矩形部件，置于文本段落底部即可。

（圖151）

10．下拉列表框

下拉列表經常用于性別選擇、信用卡過期日期、地址列表等形式。所選擇的項存儲在變量中，然后通過變量進行傳遞。

編輯下拉列表：添加、刪除、排序選項：雙擊下拉列表，在彈出的【編輯列表項】對話框中可以對下拉列表中的項目進行添加、刪除和排序，見圖152。

禁用下拉列表：默認情況下，拖放【下拉列表框】部件到設計區域，該部件是啟用的。但某些情況下需要禁用下拉列表，可以右鍵單擊該部件并選擇勾選【禁用】，或者到部件【屬性】面板中勾選【禁用】。下拉列表的啟用/禁用，可以在【用例編輯器】的動作中進行設置，見圖153。

（圖152）

A：添加列表項

B：使用上下藍色箭頭調整列表項順序

C：刪除選中列表項

D：刪除所有列表項

E：批量列表項

F：已添加列表項

（圖153）

創建空白選項：在生成的原型中，【下拉列表框】部件默認顯示最上

面（第一個列表項）。雖然不能創建空白選項，但是可以添加一個列表項并給該列表項內容添加一個空格，這樣可以替代空白選項，見圖154。

11．列表框通常用來替代【下拉列表框】部件，如果你想讓用戶查看所有選項而不需要點擊選擇的話，就使用列表選擇框替代下拉列表。

編輯列表選擇框：項目的添加、刪除、排序和批量添加操作，和下拉列表框都是一樣的。唯一不同的是，列表選擇框可以設置為允許選擇多個列表項，見圖155。

列表框的局限性：動態添加、刪除項目列表框內的選項不能動態改變，但可以使用多個動態面板狀態中包含不同的選項來實現。在一個交互事件中不能同時讀取或設置多個選項，即便勾選了多選功能，列表框部件只允許讀取或設置一個選項。

（圖154）

（圖155）

12．復選框

復選框經常用來允許用戶添加一個或多個附加選項。

編輯復選框：要將復選框默認設置為勾選，可以在設計區域單擊復選框或者右鍵選擇【選中】。復選框可以通過【用例編輯器】中的【選中】進行動態設置。

對齊按鈕：默認情況下，復選框在左側，文字在右側。你可以通過部件【屬性】面板調整左右位置，見圖156-A。

禁用復選框：默認情況下復選框是啟用的，但有些情況需要禁用復選框。禁用復選框可右鍵點擊，選擇【禁用】，或者在部件【屬性】面板中選擇【禁用】，見圖156-B。

（圖156）

復選框的局限性：復選框只可以給文字更改樣式。如果想給復選框更改樣式，可以使用動態面板制作自定義復選框。與單選按鈕不同，復選框不能像單選按鈕那樣【指定單選按鈕組】。

13．單選按鈕

單選按鈕經常用于表單中，從一個小組的選擇切換到另一組。該選擇可以觸發該頁面上的交互或被存儲的變量值跨頁面交互，見圖157。

（圖157）

指定單選按鈕組：是指將多個單選按鈕添加到一個組中，一次只能將一個單選按鈕設置為選中狀態。操作方法如下。

選擇你想要加入到組中的單選按鈕，單擊右鍵，在彈出的關聯菜單中選擇【指定單選按鈕組】，或者在部件【屬性】面板中設置單選按鈕組名稱，見圖158-A。

（圖158-A）

如果你想添加其他的單選按鈕到組中，右鍵單擊該單選按鈕，選擇【指定單選按鈕組】，在彈出的對話框中選擇對應的單選按鈕組名稱。要將單選按鈕從組中移除，右鍵單擊單選按鈕，選擇【指定單選按鈕組】，將組名稱清空，單擊【確定】按鈕即可。

對齊方式：默認情況下，單選按鈕在左側，文字在右側。你可以通過部件【屬性】面板，調整左右位置，見圖158-B。

禁用單選按鈕：默認情況下單選按鈕是啟用的，但有些情況下需要禁用單選按鈕。右鍵點擊單選按鈕，選擇【禁用】，或者在部件【屬性】面板中選擇【禁用】。

設置默認選中或動態選中：單選按鈕可以在設計區域點擊設置為默認選中，或者右鍵單擊勾選【選中】，見圖159，這樣生成原型單選按鈕默認是選中的。單選按鈕也可以通過【用例編輯器】中的【選中】動作動態設置其選中狀態。

（圖159）

單選按鈕的局限性：單選按鈕是固定的高度，你可以改變文字，但無法改變按鈕形狀；單選按鈕的圖標無法修改，但你可以使用動態面板部件制作自定義單選按鈕。網站建設小編認為在工作中，尤其是制作高保真原型時，我們會制作大量適用于自己工作項目的自定義部件，可將其添加到自定義部件庫，便于后期循環使用。

14．提交按鈕

該按鈕是為操作系統的瀏覽器體驗而設計的，提交（SUBMIT）按鈕的格式取決于你使用哪一款瀏覽器來預覽效果，它通常針對你使用的瀏覽器內置了【鼠標懸停時】和【鼠標按下時】的交互樣式。

編輯提交按鈕：提交按鈕的填充顏色、邊框顏色和其他大多數樣式格式都被禁用了，取而代之的是，生成原型后在瀏覽器中它會使用內建的樣式。不過，提交按鈕可以改變大小和禁用。如果你想自定義按鈕樣式，請使用形狀按鈕。

提交按鈕的局限性：提交按鈕無法設置交互樣式，如【選中】、【鼠標懸?！?、【左鍵按下】。提交按鈕也無法動態讀取或寫入按鈕上的內容。

15．樹部件

樹部件可以用來模擬文件瀏覽器，點擊不同的樹節點可以隱藏和顯示一個動態面板的不同狀態。當一個頁面內有太多交互的時候，也可以單擊樹節點跳轉到新頁面，見圖160。

添加/刪除樹節點：右鍵單擊一個節點，在彈出菜單中可以添加/刪除/移動節點。子節點將會添加到該節點的下一層，在該節點前/后添加，是同級節點，見圖161。

（圖160）

（圖161）

添加樹節點圖標：可以給樹節點添加自定義圖標，右鍵點擊一個節點并選擇【編輯圖標】。導入一個圖標，并選擇應用到【當前節點/同級節點】或【當前節點、同級節點和所有子節點】，見圖162。關閉對話框，然后右鍵單擊樹，選擇【編輯樹屬性】，在彈出窗口中勾選“顯示圖標”，見圖163-A。

（圖162）

自定義展開/收縮圖標：右鍵點擊，選擇【編輯樹屬性】，在彈出對話框或部件【屬性】面板中，可自定義展開/收縮圖標，見圖163-B。

（圖163）

樹節點的交互樣式：樹節點可以添加【鼠標懸?！?、【左鍵按下】、【選中】的交互樣式。右鍵點擊樹節點并選擇【交互樣式】，或者在部件【屬性】面板中設置，見圖164。

（圖164）

樹部件的局限性：樹部件的邊框不能自定義樣式。如果想制作自定義的樹部件，使用動態面板組合可以制作出你想要的效果。

16．表格

表格部件可以通過交互（如點擊鼠標）在單元格中動態顯示數據。

添加/刪除行和列：要添加行/列，點擊右鍵單元格，在彈出菜單中選擇插入/刪除行或列，見圖165。

（圖165）

交互樣式：表格中的單元格可以設置【鼠標懸停時】、【鼠標按下時】、【選中時】的交互樣式，右鍵單擊單元格（可以同時按下Ctrl/Command進行多選），然后在部件【屬性】面板中設置交互樣式。

表格的局限性：單擊單元格時無法輸入文字，單元格默認要雙擊才可以輸入文字。要實現單擊輸入文字狀態，可以使用【文本輸入框】部件覆蓋在單元格上面。不能同時添加多行或多列，表格只允許每次添加一行或一列。不能通過事件動態添加行或列。如果希望使用動態添加行/列功能，請使用中繼器部件。不能對表格中的數據進行排序和過濾，不能像Excel那樣合并單元格。

17．經典菜單（水平菜單/垂直菜單）

菜單部件通常用于母版之中，其目的是在原型中跳轉到不同頁面。

編輯菜單：要編輯菜單，點擊右鍵，在彈出關聯菜單中選擇【前方添加菜單項】、【后方添加菜單項】、【刪除菜單項】、【添加子菜單】，見圖166。

（圖166）

菜單樣式：使用工具欄或部件樣式面板可以編輯菜單樣式，如填充顏色、字體顏色和字體大小等。

菜單的交互樣式：菜單可以添加交互樣式，【鼠標懸停時】、【左鍵按下】、【選中】，選擇要添加樣式的菜單（可以按住Ctrl/Command多選），右鍵選擇交互樣式，或者在部件【屬性】面板中設置，如【選中的菜單項】、【選中的菜單】、【選中的菜單和所有子菜單】，見圖167。

（圖167）

菜單部件的局限性：無法嵌入圖標，但是可以通過創建自定義菜單來實現。無法點擊展開子菜單，菜單部件默認是鼠標懸停展開子菜單的。

18．快照

快照部件是Axure RP8中新增的一款部件，使用該部件可以捕獲其他頁面或母版的快照（圖像），可以通過配置來設置顯示某個頁面的完整快照或部分快照，見圖168。還可以給快照部件設置動作，來捕獲執行該動作之后的快照狀態。

（圖168）

快照部件可用于制作交互流程圖或者在流程圖中作為縮略圖使用，見圖169。

（圖169）

在Axure RP8內建的【默認部件庫】和【流程部件庫】中，都可以找到快照部件，見圖170。

（圖170）

參照頁或母版：要在快照部件中顯示頁面或母版，首先在【部件】面板中拖放快照部件到設計區域，雙擊或右鍵點擊該部件，在彈出的關聯菜單中勾選【參照頁或母版…】，見圖171，也可以在右側的部件【屬性】面板中單擊【添加參照頁】，見圖172-A。在彈出的【參照頁】對話框中可以選擇頁面或母版。如果在部件【屬性】面板中勾選了【自適應縮放】，雙擊快照部件仍然會彈出【參照頁】對話框，見圖172-B。

（圖171）

（圖172）

自適應縮放：快照部件默認是啟用【自適應縮放】模式的，在這種模式下，改變快照部件尺寸，快照中的內容（圖像）會自適應快照部件的尺寸。在部件【屬性】面板中取消勾選【自適應縮放】后，雙擊該部件可以通過拖動快照部件中的圖像來改變圖像位置，見圖173。

（圖173）

偏移量：除了雙擊拖動圖像調整位置以外，還可以通過【偏移量】來調整快照中圖像的位置，見圖174-A。

（圖174）

縮放：你也可以在不改變快照部件大小的前提下對里面的圖像進行縮放，見圖174-B。除此之外，還可以使用快捷鍵進行縮放， Ctrl+鼠標滾輪；Command+鼠標滾輪。

設置動作：在部件【屬性】面板中，可以給快照部件【設置動作】，見圖174-C。設置動作會觸發快照中部件的事件，但不會影響到參照頁，見圖175。

（圖175）

當你想要展示某個頁面或一系列頁面中觸發某個指定交互后的狀態時，【觸發事件】就變得非常有用了。如圖175所示，左側的快照部件中顯示的未觸發事件的圖像；右側快照部件中顯示的是【在未輸入密碼時點擊登錄按鈕，提示錯誤登錄信息】的圖像。你也可以提交參照頁中并沒有設置的動作，例如使用【設置自適應視圖】動作指定快照中的自適應視圖，見圖176。

（圖176）

交互：快照部件和其他部件相同，也可以設置交互（鼠標單擊時、鼠標移入/移出時等），但是在默認情況下，單擊快照部件會跳轉到參照頁。你可以在【生成HTML文件】時取消勾選這一選項，見圖177。取消該選項后，就會執行你在快照部件上添加的其他交互了。

19．水平箭頭/垂直箭頭

這兩個部件和之前介紹的水平線與垂直線是完全相同的，只是添加了箭頭樣式。

20．便簽/標記

默認部件庫底部的便簽和標記部件和之前介紹的形狀部件完全相同，只是填充了不同顏色和陰影。

（圖177）