Axure 9.0基礎教程：元件使用姿勢不對，原來努力都是白費

摘要： 元件使用.png 一、基本操作 新增元件：從左側元件庫中直接拖拽元件至設計區域，也支援從其他頁面複製元件並貼上進來。 移動元件 直接拖拽元件至任意位置。 使用方向鍵移動元件位置，每次移動1畫素。 Shi...

一、基本操作

1. 新增元件：從左側元件庫中直接拖拽元件至設計區域，也支援從其他頁面複製元件並貼上進來。
2. 移動元件

• 直接拖拽元件至任意位置。
• 使用方向鍵移動元件位置，每次移動1畫素。
• Shift+方向鍵移動元件，每次移動10畫素。
• Alt+拖拽元件（Mac系統為Option+拖拽元件），快速複製元件並將新元件移動到指定位置。
• Shift+Alt+拖拽元件（Mac系統為Shift+Option+拖拽元件），快速複製元件並水平或垂直移動元件至指定位置。

3. 改變元件尺寸

• 選中元件，拖動元件周圍的手柄。
• 原型、矩形等形狀類元件，拖拽手柄時按住Shift鍵，可以等比例調整元件的寬度和高度。
• 通過頂部工具欄或右側樣式面板中，直接輸入元件的寬度值和高度值，也支援同時選中多個元件，改變這幾個元件總的寬度與高度。

4. 旋轉元件：選中元件，Windows按住Ctrl鍵，Mac按住Command鍵，將滑鼠移至手柄周圍並上下拖拽滑鼠，也可以通過右側的樣式面板直接輸入旋轉角度。需要注意的是，樣式面板的旋轉角度為順時針方向。
5. 元件組合：選中多個元件，右鍵選單選擇組合（windows快捷鍵Ctrl+G，Mac快捷鍵Command+G），也可以直接點選工具欄中的組合按鈕。
6. 元件的對齊與分佈：選中多個元件，可以通過右鍵選單或頂部工具欄針對這些元件進行對齊和分佈。對齊方式分為：左側對齊、水平居中對齊、右側對齊、頂部對齊、垂直居中對齊、底部對齊。分佈方式分為水平分佈和垂直分佈，至少3個元件才可以設定分佈方式。
7. 跳轉連結：選中元件，點選右側互動面板中的單擊事件，設定跳轉頁面，選擇頁面開啟方式（當前視窗/新視窗/彈出視窗/父級視窗）。
8. 元件選擇模式：有“相交選中”和“包含選中”兩種模式，位於工具欄的左上角。預設為“相交模式”，點選或拖動滑鼠選擇區域時，接觸的所有元件都會被選中。“包含模式”和Visio相似，僅在選取完全包含元件時才能選中。

二、編輯元件樣式

1. 工具欄/樣式面板編輯：使用設計區域上方的工具欄或者右側的樣式面板可以編輯元件的樣式，如填充、邊框線、座標、尺寸、字型、字號、文字顏色等。還可以選擇多個元件，並進行對齊、分佈、圖層順序調整等操作。
2. 雙擊編輯：雙擊元件直接對元件內容或屬性進行編輯。比如雙擊圖片元件，可以直接匯入圖片；雙擊矩形元件，可以直接編輯文字；雙擊下拉列表，直接編輯選項。
3. 右鍵編輯：有些元件屬性，需要通過右鍵選單顯示特有的屬性，這些屬性與元件型別有關。
4. 元件屬性和樣式面板：在樣式面板中可用找到元件的座標、尺寸、填充、邊線、陰影、邊距、字型等通用樣式。在右鍵的屬性選單中可以找到元件特定屬性。

三、元件特定屬性

1. 圖片：固定邊角範圍，圖片拉伸時不影響邊角弧度。
2. 單行文字框

• 型別包含：文字、密碼、郵箱、數字、電話、URL地址、搜尋、檔案、日期、月份和時間。
• 最大長度：允許輸入的最大長度，這裡的長度限制對中文、英文和數字都生效。
• 提示資訊：滑鼠點選文字框時，提示資訊消失。
• 提示文字樣式：設定提示文字內容的樣式。
• 只讀：生成原型後，文字框內容不可編輯，僅能檢視。
• 禁用：將元件設定為禁用狀態。
• 隱藏邊框：隱藏輸入框的邊框線。
• 提交按鈕：分配一個按鈕，當按下回車鍵時，按鈕執行滑鼠單擊事件。

3. 多行文字框 ：當文字高度超出多行文字框高度時，多行文字框自動出現垂直滾動條。
4. 內聯框架

• 引用頁面：支援引用內部頁面和外部頁面。
• 隱藏邊框：支援隱藏邊框線。
• 滾動條：分為按需滾動、始終滾動和從不滾動。
• 本地預覽：分為無預覽、視訊預覽、地圖預覽和自定義預覽，自定義預覽可以從本地匯入圖片，預覽效果僅在Axure畫布中有效。

5. 複選框

• 選中：預設為選中狀態，可以切換為未選中。
• 對齊：預設複選框位於左側，文字位於右側，支援互換複選框和文字的位置。
• 禁用：預設為啟用狀態，可以設定為禁用狀態。
• 提交按鈕：分配一個按鈕，當按下回車鍵時，按鈕執行滑鼠單擊事件。

6. 單選按鈕

• 選中：預設為選中狀態，可以切換為未選中。
• 指定組：將多個單選按鈕指定到一個組中，組中的成員同一時間只能有一個處於選中狀態。
• 對齊：預設單選按鈕位於左側，文字位於右側，支援互換單選按鈕和文字的位置。
• 禁用：預設為啟用狀態，可以設定為禁用狀態。
• 提交按鈕：分配一個按鈕，當按下回車鍵時，按鈕執行滑鼠單擊事件。

7. 下拉列表/列表框

• 編輯列表項：可以一次新增一項，也可以一次新增多項。
• 移動項：可以上下移動列表項的位置。
• 刪除項：在編輯視窗中，可以刪除任意項。
• 選中項：預設選中第一項，也可以手動修改選中項。
• 禁用：預設為啟用狀態，可以設定為禁用狀態。
• 提交按鈕：分配一個按鈕，當按下回車鍵時，按鈕執行滑鼠單擊事件。

8. 選單

• 新增選單項：可以新增同級別選單項，也可以新增子選單項；新增同級別選單項可以選擇插入前方或後方。
• 刪除選單項：選中任意選單項，可通過右鍵刪除，支援一次性刪除多個選單項。
• 選單填充：可以編輯填充畫素大小，選擇適用範圍，適用範圍包含：僅當前選單、當前選單和全部子選單。

編輯畫素後，我們會看到在選單外部有一個更大的矩形元件，畫素的大小，實際上就是選單與矩形的邊距，顏色可以通過樣式面板或工具欄進行設定。

9. 樹

• 新增節點：可以選擇新增節點的位置，支援新增子節點。
• 移動節點：可以移動節點的位置，調增節點的層級。
• 刪除節點：可一次性刪除多個選中節點，刪除父節點時，子節點將全部被刪除。
• 編輯圖示：Axure提供了三角圖示和+-圖示，也可以自定義匯入本地圖示；匯入自定義圖示時，可以選擇適用範圍，適應範圍包含：當前節點/當前節點和同級節點/當前節點、同級節點和全部子節點。

同一節點，展開和摺疊的圖示可以不同，根據設計需要可分別匯入圖示。

四、元件樣式面板說明

1. 位置和尺寸

• 位置：通過X座標、Y座標精確設定元件的具體位置。
• 尺寸：通過設定元件的寬度和高度，確定元件的具體大小。
• 旋轉：輸入數值，順時針旋轉任意角度。

2. 不透明度：可以設定元件填充內容、邊線、文字的不透明度。
3. 排版

• 文字：設定字型型別、字的粗細、字型大小、字型顏色。
• 文字：設定文字行距、字間距，設定文字的對齊方式。

4. 填充：分為顏色填充和圖片填充，圖片填充時，可以選擇圖片顯示的位置和圖片佈局方式。圖片顯示位置包含：左上、左側、左下、頂部、居中、底部、右上、右側和右下。圖片佈局方式包含：不重複、重複、水平重複、垂直重複、填充、適應和拉伸。
5. 邊框：可以設定邊框線的顏色、粗細、型別；矩形元件可以設定四條邊的可見性，直線可以設定箭頭樣式。
6. 陰影：分為外部陰影和內部陰影，可以設定陰影的顏色、大小、方向及模糊度。

通過X座標和Y座標值，不僅可以設定陰影的大小，還可以改變陰影的方向。

7. 圓角：輸入半徑值，靈活控制圓角大小，還可以設定每個圓角的可見性。

矩形、梯形等四邊形的元件，可以將四個直角設定圓角，並且設定每個圓角的可見性，圓形、三角形、五角星等其他形狀類的元件不可以設定圓角。

8. 邊距：通過輸入具體數值，達到控制文字內容與矩形四條邊的距離。

五、元件樣式管理

1. 樣式編輯：在這裡可以設定元件的填充、邊線、文字、文字佈局和視覺五大類樣式。

• 填充：分為顏色填充和影象填充，還可以設定填充位置（上下左右）。
• 邊框線：線條的顏色、粗細、型別、可見性、圓角大小及可見性。
• 文字：字型、型別、顏色、字號、加粗、斜體、下劃線、刪除線。
• 文字佈局：分為水平對齊、垂直對齊，設定文字行距和字間距，設定文字基線和文字變形。
• 視覺：包含陰影、不透明度，包含影象的色調、飽和度、亮度和對比度。

2. 新增和複製樣式：可以新增新的元件並設定樣式；選中元件，點選複製後，新增新元件並將老元件樣式直接複製到了新元件中。
3. 移動位置：在元件樣式管理器中，可以上下任意移動元件的位置，一次只能移動一個元件的位置。
4. 刪除元件樣式：這裡僅僅是刪除了自定義的元件樣式，並沒有刪除系統元件，元件的預設樣式也不會被清除。

結語：至此，關於元件的操作姿勢，已經講解完畢，下一節將講述頁面的屬性和樣式。