Axure 9.0基礎教程：這個中秋節，帶你全面認識這些元件的使用方法
一、表單類元件
01 文字框
在設計填寫項時我們我們需要經常用到文字框，比如註冊、登入、個人資訊等相關的頁面設計，我們都需要使用文字框。文字框的型別包含：文字、密碼、郵箱、數字、電話、URL地址、搜尋、檔案、日期、月份和時間。選定好型別後，只能在文字框中輸入選定型別的資訊。比如我們設定了數字，則無法輸入中文和英文。文字框內容的輸入長度，可以設定上限，這裡的長度限制同時適用於中文、英文和數字。選中元件，右鍵單擊選擇“文字型別”，右鍵單擊選擇文字框選擇“編輯最大長度”，輸入數字，限定最大長度。文字框的型別和長度限制也可以通過互動樣式面板進行設定。如下圖所示：
右鍵選單設定.png
樣式設定.png
- 只讀與禁用：當我們將文字設定為只讀時，在瀏覽器中開啟原型時，將無法修改輸入框中的文字，即只能檢視；設定為禁用時，文字框將被鎖死，無法進行操作。只讀與禁用的互動效果從表象看，沒有什麼區別，但其實是有區別的，只讀是針對內容而言，無法改變；而禁用，則是針對此項功能，無法使用。選中元件，右鍵選單選擇只讀或禁用。
文字框只讀與禁用.png
- 文字提示：提示使用者應該在文字框中輸入什麼樣的內容，點選輸入框獲取焦點後，內建提示資訊消失。選中元件，在右側互動樣式面板的提示文字中，填寫提示內容。
文字提示.png
- 文字框樣式：可以設定元件的寬度與高度、填充色、邊框線的顏色、粗細和樣式，陰影、圓角和邊距。
- 常用互動： 文編改變時/獲取焦點時/失去焦點時 是文字框元件常用的互動事件。
02文字段落
文字段落常用於留言、評論、個人介紹。文字段落可輸入多行文字內容，當文字內容超出文字框高度時，文字段落將出現垂直滾動條。文字段落除不能設定文字型別外，其它的屬性均與文字框一致，可參考文字框的元件說明。
有些漢化包將文字段落翻譯為文字域或多行文字
03 下拉列表
當我們需要在多個選項中選出一項作為篩選條件或者選擇結果時，我們就需要使用下拉列表。比如地區的選擇、日期範圍的選擇等。選擇的結果，通過全域性變數進行儲存，然後通過全域性變數傳遞給其它頁面，影響頁面的展示結果。
- 編輯下拉列表：拖拽元件至設計區域，雙擊元件，開啟編輯框，在這裡可以進行選項的新增、刪除、位置的移動等操作。點選編輯多項，可一次性新增多個選項。編輯設定如下圖所示：
下拉列表編輯.png
- 禁用下拉列表：某些情況下，我們可以會有禁用下拉列表的需求。選中下拉列表，右鍵選單選擇“禁用”或者通過右側互動樣式面板設定禁用下拉列表。
- 新增空白選項：有些時候下拉列表需要預設為空，這個時候我們通過建立一個空格選項來實現空選項的效果。需要注意，需要將空格選項移動至第一個位置，因為下拉列表預設選擇第一項。
常用互動： 選中改變時/獲取焦點時 作為下拉列表元件常用的互動事件。
04 列表框
與下拉列表的使用場景基本相同，可以用來取代下拉列表，如果你的設計需求希望直接將眾多選項展示出來，而不需要使用者點選檢視選項，列表框可以滿足這一需求。
- 新增/編輯列表框：列表框的新增、批量新增、編輯、刪除、位置的移動與下拉列表相同，唯一的區別在於列表框可以允許進行多項選擇。
列表框.png
不足之處：在實際的原型演示時，我們無法做到新增、刪除，移動某一選項至另一個列表框中，但我們還可以藉助動態面板的多個狀態實現這樣的效果。每一個互動事件都不能同時設定多個選項，列表框元件只需要讀取或設定一個選項。
05 複選框
複選框的選定比較靈活，可以不選擇、也可以選擇、可以選擇一個或多個。
- 編輯複選框：拖動複選框元件至設計區域，雙擊複選框，編輯選項內容。複選框預設處於未選中，點選左側方框或右鍵選擇為“選中”狀態。複選框還可以通過互動動作切換選中狀態。
- 對齊方式：預設情況下，複選框位於左側，文字在右側，可以通過右鍵選單切換複選框的左右位置。
- 禁用複選框：預設為啟用，但是有時候我們需要禁用複選框。選中複選框，右鍵選單點選選擇“禁用”或通過右側的互動樣式面板選擇“禁用”。
- 自定義樣式：複選框支援設定填充、邊框線、陰影、圓角等樣式，文字可以設定字型、字號、對齊方式等樣式。
不足之處：複選框與單選按鈕不同，不可以指定單選按鈕組，複選框的高度與寬度是固定的，不可以調整。
06 單選按鈕
單選按鈕常用於表單設計中，一些判斷型的資訊選擇，如性別選擇，婚姻狀況等。選擇的結果可能影響到當前頁面的互動顯示或跨頁面的互動顯示，跨頁面常常需要用到全域性變數儲存選擇結果。
- 指定單選按鈕組：單選按鈕加入到指定的組後，一次只能將一個單選按鈕設定為選中狀態。選中想要加入到組中的單選按鈕（第一個單選按鈕加入組），然後右鍵單擊，指定單選按鈕的組，或者在交樣式互面板中設定單選按鈕組名稱。後續新增更多單選項到組中，右鍵點選該單選按鈕，選擇“指定單選按鈕組”，在彈出的對話視窗中下拉選擇組的名稱或者通過互動樣式面板選擇單選按鈕組名稱。若要將單選按鈕從組中移出，右鍵點選單選按鈕，選擇“指定單選按鈕組”，刪除組的名稱，點選“確定”按鈕。
單選按鈕組.png
- 對齊方式：預設按鈕在左側，文字在右側，右鍵單擊，在彈出選單中可切換文字和按鈕的左右位置。
- 禁用單選按鈕：單選按鈕預設為啟用狀態，但有時候我們需要禁用。右鍵點選單選按鈕，在彈出選單中選擇“禁用”或通過互動樣式面板選擇為禁用。
- 按鈕選中狀態：點選單選按鈕或右鍵單擊選擇選中。這樣生成原型檔案時，在瀏覽中看到的預設狀態即為選中狀態。按鈕的選中切換，也可以通過互動用例的動作進行設定選中/取消選中。
不足之處：單選按鈕的大小是固定的，形狀是固定的，但文字可以設定字型、字號、顏色，可以設定文字和按鈕的對齊方式。
二、選單和製表
01 樹元件
常用來瀏覽檔案或選單的層級結構，點選父節點將收起或展開子節點內容。當一個頁面內有太多互動時，也可以點選樹節點跳轉到新頁面。
樹節點.png
- 新增/刪除樹節點：右鍵單擊節點，在彈出選單中選擇新增/刪除節點。支援新增子節點或同級節點，同級節點可以選擇在該節點前或節點後新增。
- 移動節點：節點的位置和層級可以靈活設定。選中樹節點，右鍵節點，在彈出選單中選擇移動，在這裡可以移動節點的上下位置或者調整節點的層級。
移動節點.png
- 新增樹節點圖示：樹節點左側的圖示可以自定義修改，預設為三角形。右鍵節點，在彈出選單中選擇編輯圖示，從本地匯入圖示，選擇圖示的適用範圍：當前節點/當前節點和同級節點/當前節點、同級節點和全部子節點。關閉對話方塊，右鍵樹節點，選擇編輯樹屬性，在彈出視窗中勾選“顯示圖示”。
-自定義展開/收縮圖示：右鍵樹節點，在彈出選單中選擇“編輯樹屬性”，彈出視窗中選擇展開/摺疊的圖示，系統提供三角形和+/-，預設圖示為三角形。這裡也可以匯入圖示，與編輯圖示不同的是，這裡的圖示只適用於本節點。
新增節點&新增圖示.png
展開/收縮圖示.png
- 樹節點的互動樣式：樹節點可以新增滑鼠懸停時/滑鼠按下時/選中時/獲取焦點時的樣式。選中樹節點，通過互動樣式面板進行設定。
- 自定義樣式：樹節點可以自定義設定填充色，設定邊框線的顏色、粗細、線條型別（直線或虛線），設定文字的字型、字號、顏色和陰影。
不足之處：樹節點的圖示可以自定義匯入，但不能動態隱藏/顯示子節點內容。
02 表格
在設計後臺類資料查詢頁面時，我們需要使用表格元件。
- 新增/刪除行和列：右鍵單元格或者表格上方和左側的表頭，在彈出選單中選擇插入行和列，可以選擇插入的位置。
插入行:列.png
- 互動樣式：表格中的單元格可以設定滑鼠懸停時/按下時/選中時/獲取焦點時的互動樣式。右鍵點選單元格（windows按照ctrl，Mac按住command可進行多選），然後在互動樣式面板中設定互動樣式。
不足之處：表格中的資料是靜態的，無法動態進行新增、刪除和移動，如若需要動態新增行或列的資料，可以使用中繼器；表格不能同時新增多行或多列；不能對錶格中的資料進行排序和篩選。
03 水平選單和垂直選單
選單元件設定好之後，我們經常會將其轉換為母版，其目的是需要在不同頁面之間來回跳轉。
-
編輯選單：右鍵選單，在彈出選單中選擇後方新增選單/前方新增選單/新增子選單/刪除選單項。如下圖所示：
編輯選單.png
- 編輯選單填充：右鍵選單，在彈出選單中選擇“編輯選單填充”，彈出視窗中設定填充畫素，選擇適用範圍：僅當前選單/當前選單和全部子選單。設定選單填充後，選單外層出現了一個矩形框，填充畫素的大小影響了矩形框的大小，且選單與矩形框的四個邊距是相等的。
選單填充.png
- 選單樣式：通過右側樣式面板，可以對選單設定顏色填充，設定邊框線的顏色，設定文字的字型、字號、顏色和對齊方式，設定文字內容的邊距。新增子選單時，子選單繼承了父選單的樣式，子選單或父選單修改樣式，均不會影響到對方。
- 選單的互動樣式：我們可以為選單項設定滑鼠懸停時/按下時/選中時/獲取焦點時的互動樣式。選擇目標選單（windows按照ctrl，Mac按住command可進行多選），在互動樣式面板中點選新建互動，為選單項設定互動樣式。
設定選單互動樣式.png
不足之處：無法為選單項新增圖示，無法點選展開子選單，選單元件預設是滑鼠懸停時展開子選單。
三、標記
01 快照
當我們在梳理頁面關係或跳轉邏輯時，可以使用快照引用原型頁面幫助我們分析流程。與內部框架不同，快照只能引用內部頁面和母版，而內部框架不僅可以引用內部頁面，也可以引用外部頁面。
- 引用頁面：雙擊快照元件或右鍵選單選擇“引用頁面或母版”或點選樣式面板中的“新增引用頁面”，在彈出視窗中選擇想要引用的頁面或母版，點選確定，完成引用。
引用頁面.png
- 快照樣式：在樣式面板中，可以為快照元件設定寬度和高度、縮放比例、邊距和外框線的顏色、粗細和樣式。引用頁面預設根據快照元件的大小自適應調整縮放比例，也可以通過樣式面板手動調整。
快照樣式.png
02 水平箭頭和垂直箭頭
箭頭與直線的樣式屬性、互動樣式相同，區分在於，箭頭元件預設選擇了一個箭頭樣式，且箭頭線條比直線更粗。具體的樣式屬性請參照 ofollow,noindex">《Axure 9.0基礎教程：史上最詳細的元件說明，建議你認真看完》
03 便籤與標記
當我們需要為頁面中新增簡短的說明提示時，使用便籤備註則比較方便；截圖時，我們需要標註某一區域時，使用標記元件則較為方便，如我們在講解操作介面時，使用了標記元件。
- 便籤：Axure 9.0預設為我們提供了黃、藍、青、紫四種顏色的標籤，便籤預設設定了外部陰影，邊距為10。
- 標記：Axure 9.0預設提供了圓形標記和水滴標記，標記元件填充色為藍色，邊框線為白色，邊距為2。
便籤與標記，本質上是一種新增特殊樣式的形狀類元件，具體的樣式屬性請參照 《Axure 9.0基礎教程：史上最詳細的元件說明，建議你認真看完》
元件的說明介紹至此已經講解完畢，下一篇文章將講述元件的基本操作。
如果你對原型設計或Axure的學習有興趣，希望系統性的學習Axure知識，掌握更多Axure的使用技巧；或者希望通過臨摹互動案例作品，進一步提升自己的高保真原型設計能力， 請點選下方關注按鈕，檢視更多連載作品。