一、基本操作
添加元件:從左側(cè)元件庫中直接拖拽元件至設(shè)計(jì)區(qū)域,也支持從其他頁面復(fù)制元件并粘貼進(jìn)來。
移動(dòng)元件
直接拖拽元件至任意位置。
使用方向鍵移動(dòng)元件位置,每次移動(dòng)1像素。
Shift+方向鍵移動(dòng)元件,每次移動(dòng)10像素。
Alt+拖拽元件(Mac系統(tǒng)為Option+拖拽元件),快速復(fù)制元件并將新元件移動(dòng)到指定位置。
Shift+Alt+拖拽元件(Mac系統(tǒng)為Shift+Option+拖拽元件),快速復(fù)制元件并水平或垂直移動(dòng)元件至指定位置。
改變?cè)叽?/h4>
選中元件,拖動(dòng)元件周圍的手柄。
原型、矩形等形狀類元件,拖拽手柄時(shí)按住Shift鍵,可以等比例調(diào)整元件的寬度和高度。
通過頂部工具欄或右側(cè)樣式面板中,直接輸入元件的寬度值和高度值,也支持同時(shí)選中多個(gè)元件,改變這幾個(gè)元件總的寬度與高度。
旋轉(zhuǎn)元件:選中元件,Windows按住Ctrl鍵,Mac按住Command鍵,將鼠標(biāo)移至手柄周圍并上下拖拽鼠標(biāo),也可以通過右側(cè)的樣式面板直接輸入旋轉(zhuǎn)角度。需要注意的是,樣式面板的旋轉(zhuǎn)角度為順時(shí)針方向。
元件組合:選中多個(gè)元件,右鍵菜單選擇組合(windows快捷鍵Ctrl+G,Mac快捷鍵Command+G),也可以直接點(diǎn)擊工具欄中的組合按鈕。
元件的對(duì)齊與分布:選中多個(gè)元件,可以通過右鍵菜單或頂部工具欄針對(duì)這些元件進(jìn)行對(duì)齊和分布。對(duì)齊方式分為:左側(cè)對(duì)齊、水平居中對(duì)齊、右側(cè)對(duì)齊、頂部對(duì)齊、垂直居中對(duì)齊、底部對(duì)齊。分布方式分為水平分布和垂直分布,至少3個(gè)元件才可以設(shè)置分布方式。
跳轉(zhuǎn)鏈接:選中元件,點(diǎn)擊右側(cè)交互面板中的單擊事件,設(shè)置跳轉(zhuǎn)頁面,選擇頁面打開方式(當(dāng)前窗口/新窗口/彈出窗口/父級(jí)窗口)。
元件選擇模式:有“相交選中”和“包含選中”兩種模式,位于工具欄的左上角。默認(rèn)為“相交模式”,點(diǎn)擊或拖動(dòng)鼠標(biāo)選擇區(qū)域時(shí),接觸的所有元件都會(huì)被選中?!鞍J健焙蚔isio相似,僅在選取完全包含元件時(shí)才能選中。
二、編輯元件樣式
工具欄/樣式面板編輯:使用設(shè)計(jì)區(qū)域上方的工具欄或者右側(cè)的樣式面板可以編輯元件的樣式,如填充、邊框線、坐標(biāo)、尺寸、字體、字號(hào)、文字顏色等。還可以選擇多個(gè)元件,并進(jìn)行對(duì)齊、分布、圖層順序調(diào)整等操作。
雙擊編輯:雙擊元件直接對(duì)元件內(nèi)容或?qū)傩赃M(jìn)行編輯。比如雙擊圖片元件,可以直接導(dǎo)入圖片;雙擊矩形元件,可以直接編輯文本;雙擊下拉列表,直接編輯選項(xiàng)。
右鍵編輯:有些元件屬性,需要通過右鍵菜單顯示特有的屬性,這些屬性與元件類型有關(guān)。
元件屬性和樣式面板:在樣式面板中可用找到元件的坐標(biāo)、尺寸、填充、邊線、陰影、邊距、字體等通用樣式。在右鍵的屬性菜單中可以找到元件特定屬性。
三、元件特定屬性
圖片:固定邊角范圍,圖片拉伸時(shí)不影響邊角弧度。
單行文本框
類型包含:文本、密碼、郵箱、數(shù)字、電話、URL地址、搜索、文件、日期、月份和時(shí)間。
最大長(zhǎng)度:允許輸入的最大長(zhǎng)度,這里的長(zhǎng)度限制對(duì)中文、英文和數(shù)字都生效。
提示信息:鼠標(biāo)點(diǎn)擊文本框時(shí),提示信息消失。
提示文字樣式:設(shè)置提示文字內(nèi)容的樣式。
只讀:生成原型后,文本框內(nèi)容不可編輯,僅能查看。
禁用:將元件設(shè)置為禁用狀態(tài)。
隱藏邊框:隱藏輸入框的邊框線。
提交按鈕:分配一個(gè)按鈕,當(dāng)按下回車鍵時(shí),按鈕執(zhí)行鼠標(biāo)單擊事件。
多行文本框 :當(dāng)文本高度超出多行文本框高度時(shí),多行文本框自動(dòng)出現(xiàn)垂直滾動(dòng)條。
內(nèi)聯(lián)框架
引用頁面:支持引用內(nèi)部頁面和外部頁面。
隱藏邊框:支持隱藏邊框線。
滾動(dòng)條:分為按需滾動(dòng)、始終滾動(dòng)和從不滾動(dòng)。
本地預(yù)覽:分為無預(yù)覽、視頻預(yù)覽、地圖預(yù)覽和自定義預(yù)覽,自定義預(yù)覽可以從本地導(dǎo)入圖片,預(yù)覽效果僅在Axure畫布中有效。
復(fù)選框
選中:默認(rèn)為選中狀態(tài),可以切換為未選中。
對(duì)齊:默認(rèn)復(fù)選框位于左側(cè),文字位于右側(cè),支持互換復(fù)選框和文字的位置。
禁用:默認(rèn)為啟用狀態(tài),可以設(shè)置為禁用狀態(tài)。
提交按鈕:分配一個(gè)按鈕,當(dāng)按下回車鍵時(shí),按鈕執(zhí)行鼠標(biāo)單擊事件。
單選按鈕
選中:默認(rèn)為選中狀態(tài),可以切換為未選中。
指定組:將多個(gè)單選按鈕指定到一個(gè)組中,組中的成員同一時(shí)間只能有一個(gè)處于選中狀態(tài)。
對(duì)齊:默認(rèn)單選按鈕位于左側(cè),文字位于右側(cè),支持互換單選按鈕和文字的位置。
禁用:默認(rèn)為啟用狀態(tài),可以設(shè)置為禁用狀態(tài)。
提交按鈕:分配一個(gè)按鈕,當(dāng)按下回車鍵時(shí),按鈕執(zhí)行鼠標(biāo)單擊事件。
下拉列表/列表框
編輯列表項(xiàng):可以一次添加一項(xiàng),也可以一次添加多項(xiàng)。
移動(dòng)項(xiàng):可以上下移動(dòng)列表項(xiàng)的位置。
刪除項(xiàng):在編輯窗口中,可以刪除任意項(xiàng)。
選中項(xiàng):默認(rèn)選中第一項(xiàng),也可以手動(dòng)修改選中項(xiàng)。
禁用:默認(rèn)為啟用狀態(tài),可以設(shè)置為禁用狀態(tài)。
提交按鈕:分配一個(gè)按鈕,當(dāng)按下回車鍵時(shí),按鈕執(zhí)行鼠標(biāo)單擊事件。
菜單
添加菜單項(xiàng):可以添加同級(jí)別菜單項(xiàng),也可以添加子菜單項(xiàng);添加同級(jí)別菜單項(xiàng)可以選擇插入前方或后方。
刪除菜單項(xiàng):選中任意菜單項(xiàng),可通過右鍵刪除,支持一次性刪除多個(gè)菜單項(xiàng)。
菜單填充:可以編輯填充像素大小,選擇適用范圍,適用范圍包含:僅當(dāng)前菜單、當(dāng)前菜單和全部子菜單。
編輯像素后,我們會(huì)看到在菜單外部有一個(gè)更大的矩形元件,像素的大小,實(shí)際上就是菜單與矩形的邊距,顏色可以通過樣式面板或工具欄進(jìn)行設(shè)置。
樹
添加節(jié)點(diǎn):可以選擇添加節(jié)點(diǎn)的位置,支持添加子節(jié)點(diǎn)。
移動(dòng)節(jié)點(diǎn):可以移動(dòng)節(jié)點(diǎn)的位置,調(diào)增節(jié)點(diǎn)的層級(jí)。
刪除節(jié)點(diǎn):可一次性刪除多個(gè)選中節(jié)點(diǎn),刪除父節(jié)點(diǎn)時(shí),子節(jié)點(diǎn)將全部被刪除。
編輯圖標(biāo):Axure提供了三角圖標(biāo)和+-圖標(biāo),也可以自定義導(dǎo)入本地圖標(biāo);導(dǎo)入自定義圖標(biāo)時(shí),可以選擇適用范圍,適應(yīng)范圍包含:當(dāng)前節(jié)點(diǎn)/當(dāng)前節(jié)點(diǎn)和同級(jí)節(jié)點(diǎn)/當(dāng)前節(jié)點(diǎn)、同級(jí)節(jié)點(diǎn)和全部子節(jié)點(diǎn)。
同一節(jié)點(diǎn),展開和折疊的圖標(biāo)可以不同,根據(jù)設(shè)計(jì)需要可分別導(dǎo)入圖標(biāo)。
四、元件樣式面板說明
位置和尺寸
位置:通過X坐標(biāo)、Y坐標(biāo)精確設(shè)定元件的具體位置。
尺寸:通過設(shè)定元件的寬度和高度,確定元件的具體大小。
旋轉(zhuǎn):輸入數(shù)值,順時(shí)針旋轉(zhuǎn)任意角度。
不透明度:可以設(shè)定元件填充內(nèi)容、邊線、文字的不透明度。
排版
文字:設(shè)定字體類型、字的粗細(xì)、字體大小、字體顏色。
文本:設(shè)定文本行距、字間距,設(shè)定文本的對(duì)齊方式。
填充:分為顏色填充和圖片填充,圖片填充時(shí),可以選擇圖片顯示的位置和圖片布局方式。圖片顯示位置包含:左上、左側(cè)、左下、頂部、居中、底部、右上、右側(cè)和右下。圖片布局方式包含:不重復(fù)、重復(fù)、水平重復(fù)、垂直重復(fù)、填充、適應(yīng)和拉伸。
邊框:可以設(shè)置邊框線的顏色、粗細(xì)、類型;矩形元件可以設(shè)置四條邊的可見性,直線可以設(shè)置箭頭樣式。
陰影:分為外部陰影和內(nèi)部陰影,可以設(shè)置陰影的顏色、大小、方向及模糊度。
通過X坐標(biāo)和Y坐標(biāo)值,不僅可以設(shè)置陰影的大小,還可以改變陰影的方向。
圓角:輸入半徑值,靈活控制圓角大小,還可以設(shè)置每個(gè)圓角的可見性。
矩形、梯形等四邊形的元件,可以將四個(gè)直角設(shè)置圓角,并且設(shè)置每個(gè)圓角的可見性,圓形、三角形、五角星等其他形狀類的元件不可以設(shè)置圓角。
邊距:通過輸入具體數(shù)值,達(dá)到控制文本內(nèi)容與矩形四條邊的距離。
五、元件樣式管理
樣式編輯:在這里可以設(shè)置元件的填充、邊線、文字、文本布局和視覺五大類樣式。
填充:分為顏色填充和圖像填充,還可以設(shè)置填充位置(上下左右)。
邊框線:線條的顏色、粗細(xì)、類型、可見性、圓角大小及可見性。
文字:字體、類型、顏色、字號(hào)、加粗、斜體、下劃線、刪除線。
文本布局:分為水平對(duì)齊、垂直對(duì)齊,設(shè)置文本行距和字間距,設(shè)置文本基線和文本變形。
視覺:包含陰影、不透明度,包含圖像的色調(diào)、飽和度、亮度和對(duì)比度。
添加和復(fù)制樣式:可以添加新的元件并設(shè)置樣式;選中元件,點(diǎn)擊復(fù)制后,添加新元件并將老元件樣式直接復(fù)制到了新元件中。
移動(dòng)位置:在元件樣式管理器中,可以上下任意移動(dòng)元件的位置,一次只能移動(dòng)一個(gè)元件的位置。
刪除元件樣式:這里僅僅是刪除了自定義的元件樣式,并沒有刪除系統(tǒng)元件,元件的默認(rèn)樣式也不會(huì)被清除。