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