47個Axure基礎(chǔ)學(xué)習(xí)實(shí)踐

基礎(chǔ)1:添加元件到畫布

在左側(cè)元件庫中,選擇要使用的元件,按住鼠標(biāo)左鍵不放,拖動到畫布適合的位置松開。

添加元件到畫布

基礎(chǔ)2:添加元件的名稱

文本框?qū)傩灾休斎朐淖远x名稱,建議采用英文命名。

為什么要添加元件的名稱呢?

我們在做交互的時候,可能會碰到多塊面板或者是其他的元件。你要針對整個框架做交互動作,但是呢你的框架又由很多小的元件組成的。那么這個時候,我們就需要組合。當(dāng)它組合起來取一個名稱,取名稱之后,我的交互效果是針對于組合起來的這樣的一個框架面板。這就是取名稱的一個目的。

在Axure的官方網(wǎng)站也是說建議我們?nèi)∶臅r候取英文名。正常的情況下,怎么方便怎么來,我們也可以將其命名為中文名或者阿里伯?dāng)?shù)字。

添加元件的名稱

基礎(chǔ)3:設(shè)置元件位置/尺寸

元件的位置與尺寸可以通過鼠標(biāo)拖拽調(diào)整,也可以在快捷功能或元件樣式中進(jìn)行輸入調(diào)整。

x:指元件在畫布中的x軸坐標(biāo)值。

y:指元件在畫布中的y軸坐標(biāo)值。

w:指元件的寬度值。

h:指元件的高度值。

在輸入數(shù)值調(diào)整元件尺寸時,可以在樣式中設(shè)置,讓元件【保持寬高比例】。

設(shè)置元件位置/尺寸

基礎(chǔ)4:設(shè)置元件的默認(rèn)角度

方式一:選擇需要改變角度的元件,按住鍵的同時,用鼠標(biāo)拖動元件的節(jié)點(diǎn)到合適的角度。

方式二:在元件樣式中,進(jìn)行角度的設(shè)置,元件的角度與元件文字的角度可以分開設(shè)置。

設(shè)置元件的角度

基礎(chǔ)5:設(shè)置元件顏色與透明

選擇要改變顏色的元件,點(diǎn)擊快捷功能區(qū)中的背景顏色設(shè)置按鈕,選取相應(yīng)的顏色,或者在元件樣式中進(jìn)行設(shè)置

設(shè)置元件顏色與透明

基礎(chǔ)6:設(shè)置形狀或圓片的角度

可以通過拖動元件左上方的圓點(diǎn)圖標(biāo)進(jìn)行調(diào)整,也可以在元件樣式中設(shè)置圓角半徑來實(shí)現(xiàn)。

設(shè)置形狀或圖片圓角

基礎(chǔ)7:設(shè)置矩形僅顯示部分邊框

在Axure 8的版本中,矩形的邊框可以在樣式中設(shè)置顯示全部或部分。

取消部分邊框 7

基礎(chǔ)8:設(shè)置線段/箭頭/邊框樣式

線段、箭頭和元件邊框的樣式可以在快捷功能或者元件樣式中進(jìn)行設(shè)置。

設(shè)置線段/箭頭/邊框樣式

基礎(chǔ)9:設(shè)置元件文字邊框/行距

在元件樣式中可以設(shè)置元件文字的【行間距】與【填充】

行間距:是指文字段落行與行之間的空隙。

填充:是指文字與形狀邊緣之間填充的間隙。

設(shè)置元件文字邊框/行距

基礎(chǔ)10:設(shè)置元件默認(rèn)隱藏

選擇要隱藏的元件,在快捷功能或者元件樣式中勾選【隱藏】選項(xiàng)。

設(shè)置元件默認(rèn)隱藏

基礎(chǔ)11:設(shè)置文本輸入為密碼

文本框?qū)傩灾羞x擇文本框的{類型}為【密碼】


設(shè)置文本框輸入為密碼

基礎(chǔ)12:設(shè)置打開選擇文件窗口

文本框?qū)傩灾羞x擇文本框的{類型}為【文件】,即可在瀏覽器中變成打開選擇本地文件的按鈕。該按鈕樣式各瀏覽器略有不同。

設(shè)置打開選擇文件窗口

基礎(chǔ)13.限制文本框內(nèi)輸入的字符位數(shù)

在文本框?qū)傩灾休斎胛谋究虻膡最大長度}為指定長度的數(shù)字。

限制文本框內(nèi)輸入的字符數(shù)

基礎(chǔ)14.設(shè)置文本框提示文字

在文本框中輸入文本框的{提示文字}。提示文字的字體、顏色、對齊方式等樣式可以點(diǎn)擊{提示樣式}進(jìn)行設(shè)置

提示文字設(shè)置包含{隱藏提示觸發(fā)}選項(xiàng),其中:

輸入:指用戶開始輸入時提示文字才消失。

獲取焦點(diǎn):指光標(biāo)進(jìn)入文本框時提示文字即消失,

設(shè)置文本框提示文字

基礎(chǔ)15.設(shè)置文本框回車觸發(fā)事件

文本框回車觸發(fā)事件是指在文本框輸入狀態(tài)下按<回車>鍵,

可以出發(fā)某個元件的【鼠標(biāo)單擊時】事件。只需要在文本框?qū)傩灾衶提交按鈕}的列表中選擇相應(yīng)的元件即可。

設(shè)置文本框回車觸發(fā)事件

基礎(chǔ)16:鼠標(biāo)移入元件時的提示

在文本框?qū)傩灾校ㄔ崾荆┲休斎胩崾緝?nèi)容即可/


鼠標(biāo)移入元件時的提示

基礎(chǔ)17:設(shè)置矩形為其他形狀

在畫布中點(diǎn)擊矩形右上方圓點(diǎn)圖標(biāo)即可打開形狀列表,設(shè)置為其他形狀。

設(shè)置矩形為其他形狀

基礎(chǔ)18:設(shè)置自定義形狀

在形狀上點(diǎn)擊<鼠標(biāo)右鍵>,在菜單中選擇【轉(zhuǎn)換為自定義形狀】,即可對形狀進(jìn)行編輯。也可通過點(diǎn)擊形狀右上角的圓點(diǎn)鼠標(biāo),在打開的形狀列表中選擇【轉(zhuǎn)換為自定義形狀】

設(shè)置自定義邊框

基礎(chǔ)19:設(shè)置形狀水平/垂直翻轉(zhuǎn)

在形狀的屬性中可以對形狀進(jìn)行【水平翻轉(zhuǎn)】和【垂直翻轉(zhuǎn)】的操作

設(shè)置形狀水平/垂直翻轉(zhuǎn)

基礎(chǔ)20:設(shè)置列表框的內(nèi)容

下拉列表框與列表框都可以設(shè)置內(nèi)容--列表項(xiàng)??梢酝ㄟ^【屬性】-【列表項(xiàng)】的選項(xiàng)來設(shè)置,也可以通過鼠標(biāo)雙擊元件進(jìn)行設(shè)置。

設(shè)置列表框的內(nèi)容

基礎(chǔ)21:設(shè)置元件默認(rèn)選中/禁用

元件的屬性中可以對一些元件的默認(rèn)狀態(tài)進(jìn)行設(shè)置,可以設(shè)置的狀態(tài)包括【選中】和【禁用】,默認(rèn)狀態(tài)的設(shè)置,可以觸發(fā)屬性中設(shè)置的交互樣式。比如設(shè)置某個元件在瀏覽器中默認(rèn)為禁用的灰色,就需要勾選【禁用】(復(fù)選框)。并設(shè)置禁用的交互樣式。

設(shè)置元件默認(rèn)選中/禁用1

基礎(chǔ)22:設(shè)置單選按鈕唯一選中

全選所有的單選按鈕,在元件屬性中{設(shè)置單選按鈕組名稱},即可實(shí)現(xiàn)唯一選中的效果。

設(shè)置單選按鈕唯一選中

基礎(chǔ)23:設(shè)置元件不同狀態(tài)的交互樣式

點(diǎn)擊元件屬性中各個交互樣式的名稱,即可設(shè)置元件在不同狀態(tài)時呈現(xiàn)的樣式。這些樣式在交互被觸發(fā)時,就會顯示出來。比如設(shè)置元件默認(rèn)狀態(tài)為禁用,在瀏覽原型時,頁面打開后就會顯示元件被禁用的樣式。

設(shè)置元件不同狀態(tài)的交互樣式

?基礎(chǔ)24 :設(shè)置圖片的文本

設(shè)置圖片文本需要在圖片上點(diǎn)擊<鼠標(biāo)右鍵>。選擇【編輯文本】,方可進(jìn)行圖片上的文字編輯。

設(shè)置圖片上的文本

基礎(chǔ)25:切割/裁剪圖片

在圖片的元件屬性中,設(shè)有切割和裁剪的功能圖標(biāo),點(diǎn)擊即可使用相應(yīng)的功能。元件上點(diǎn)擊<鼠標(biāo)右鍵>,菜單中也有相應(yīng)的選項(xiàng)。

切割:可將圖片進(jìn)行水平或垂直切割,將圖片分割開。

裁剪:可將圖片中的某一部分取出,裁剪分為幾種,分別是裁剪、剪切和復(fù)制。其中:裁剪只保留被選擇的區(qū)域;剪切是將選取的布恩從原圖中剪切到系統(tǒng)剪切板中;復(fù)制是將選取的部分復(fù)制到系統(tǒng)剪切板中,復(fù)制的方式對原圖沒有影響。


切割/裁剪圖片

基礎(chǔ)26.嵌入多媒體文件/頁面

基本元件的內(nèi)聯(lián)框架可以插入多媒體文件與網(wǎng)頁。雙擊元件或者在屬性中點(diǎn)擊【框架目標(biāo)頁面】,在彈出的界面中選擇【鏈接到url或文件】,填寫{超鏈接},內(nèi)容為多媒體文件的地址(網(wǎng)絡(luò)地址或文件路徑)或網(wǎng)頁地址。在這個界面中也可以選擇嵌入原型中的某個頁面。


嵌入多媒體元件頁面

基礎(chǔ)27. 調(diào)整元件的層級

元件的層級可以通過點(diǎn)擊快捷功能中的圖標(biāo)或者右鍵菜單的【順序】選項(xiàng)進(jìn)行調(diào)整,也可以在頁面內(nèi)容概要中通過拖動進(jìn)行調(diào)整。概要中層級順序?yàn)橛缮现料?,最底部的元件為最底層?/p>


調(diào)整元件的層級

基礎(chǔ)28.組合/取消組合元件

通過快捷功能圖標(biāo)或右鍵菜單可以將多個元件組合到一起,達(dá)到共同移動/選取/添加交互等操作,組合/取消的快捷鍵為<Ctrl>鍵

組合/取消組合元件

基礎(chǔ)29.轉(zhuǎn)換元件為圖片

形狀/文本標(biāo)簽/線段等元件可以通過點(diǎn)擊<鼠標(biāo)右鍵>,選擇將元件【轉(zhuǎn)換為圖片】。例如,使用少量特殊字體或者圖標(biāo)字體時,即可將元件轉(zhuǎn)換為圖片,避免在未安裝字體的設(shè)備上瀏覽原型時不能正常顯示。

轉(zhuǎn)換元件為圖片

基礎(chǔ)30. 載入元件庫

除了使用軟件自帶的默認(rèn)元件庫與流程圖元件庫,用戶還可以加載自定義元件庫。加載自定義元件庫只需要點(diǎn)擊功能圖標(biāo),在列表中選擇【載入元件庫】

載入元件庫

基礎(chǔ)31.切換元件庫

在元件庫功能面板中,可以通過點(diǎn)擊元件庫列表,選擇不同的元件庫進(jìn)行使用。

切換元件庫

基礎(chǔ)32.設(shè)置頁面居中

在頁面【樣式】設(shè)置中選擇頁面居中的按鈕。頁面居中是指在瀏覽器中查看原型時頁面內(nèi)容內(nèi)容居中顯示。

設(shè)置頁面居中

基礎(chǔ)33:設(shè)置頁面背景(圖片/顏色)

在頁面【樣式】中可以編輯頁面的背景顏色以及背景圖片。

設(shè)置頁面背景

基礎(chǔ)34:設(shè)置頁面顏色(草圖/黑白)

在頁面的【樣式】中,可以將當(dāng)前頁面的顯示為草圖效果,同時可以將頁面顏色在彩色與黑白之間轉(zhuǎn)換。

設(shè)置頁面顏色(草圖/黑白)

基礎(chǔ)35:添加條件判斷

在用例編輯頁面中點(diǎn)擊添加【條件按鈕】進(jìn)行添加條件

添加條件判斷

基礎(chǔ)36:設(shè)置條件邏輯關(guān)系

設(shè)置執(zhí)行一個動作必須同時滿足多個條件,或者僅需滿足多個條件中的任何一個,需要在添加條件的頁面進(jìn)行設(shè)置。

設(shè)置條件邏輯關(guān)系

基礎(chǔ)37:用例條件轉(zhuǎn)換

為多個用例改變條件判斷關(guān)系時,只需要在相應(yīng)的用例名稱上點(diǎn)擊<鼠標(biāo)右鍵>,選擇【切換為或】


用例條件轉(zhuǎn)換

基礎(chǔ)38:設(shè)置形狀并排顯示細(xì)邊框

在【菜單】-【項(xiàng)目】的選項(xiàng)列表中,選擇【項(xiàng)目設(shè)置】;在彈出面板中進(jìn)行{邊界對齊}的設(shè)置。選擇【邊框重合】時,兩個形狀中間的邊框?yàn)榧?xì)邊框;選擇【邊框并排】時,兩個形狀中間的邊框?yàn)榇诌吙颉?/p>

設(shè)置形狀并排顯示細(xì)邊框

基礎(chǔ)39:設(shè)置畫布中的遮罩陰影

在【菜單】-【視圖】-【遮罩】的選項(xiàng)列表中,取消相應(yīng)的勾選。比如畫布中隱藏的元件不顯示淡黃色的陰影,則取消【隱藏對象】的勾選。

設(shè)置畫布中的遮罩陰影基礎(chǔ)40:

基礎(chǔ)40:顯示/隱藏交互與說明編號

在【菜單】-【視圖】的選項(xiàng)列表中,取消【顯示腳注】的勾選。

顯示與隱藏腳注

基礎(chǔ)41:顯示/隱藏兩側(cè)的功能面板

點(diǎn)擊快捷功能中的圖標(biāo)即可關(guān)閉開啟相應(yīng)的功能面板

顯示/隱藏兩側(cè)的功能面板


基礎(chǔ)42:展開/收起/彈出/停靠/關(guān)閉功能面板

如果某個功能面板需要更大的操作空間,可以將其彈出或者收起其他功能面板。當(dāng)完成操作后再進(jìn)行還原。面板彈出后可將其關(guān)閉。


展開/收起/彈出/???關(guān)閉功能面板

基礎(chǔ)43:關(guān)閉/恢復(fù)功能面板

面板可以在彈出狀態(tài)下點(diǎn)擊【x】將其關(guān)閉,也可以在【視圖】-【功能區(qū)】菜單中進(jìn)行關(guān)閉或開啟。

如果需要將功能區(qū)所有面板恢復(fù)默認(rèn)??梢栽凇疽晥D】中通過【重置視圖】來完成。

關(guān)閉/恢復(fù)功能面板

基礎(chǔ)44:文件備份與恢復(fù)

開啟軟件的自動備份功能,可以有效地幫助我們降低因誤操作、軟件奔潰、斷電等異常時,未保存或者損壞的風(fēng)險(xiǎn)。文件的備份與恢復(fù)在【文件】菜單中進(jìn)行相關(guān)操作。

文件備份與恢復(fù)

基礎(chǔ)45:快速預(yù)覽查看原型

預(yù)覽原型的快捷鍵為鍵?;蛘撸c(diǎn)擊快捷功能中的預(yù)覽圖標(biāo)進(jìn)行預(yù)覽。導(dǎo)航菜單【發(fā)布】-【預(yù)覽設(shè)置】中進(jìn)行預(yù)覽的設(shè)置。

快速預(yù)覽查看原型

基礎(chǔ)46:生成HTML查看原型

生成原型的快捷鍵為鍵。或者,點(diǎn)擊快捷功能中的生成圖標(biāo),選擇【生成HTML文件】進(jìn)行生成。還可以通過導(dǎo)航菜單【發(fā)布】-【生成HTML文件】中進(jìn)行生成

生成HTML查看原型

基礎(chǔ)47:生成部分原型頁面

發(fā)布原型時,如果不需要將所有頁面生成或發(fā)布,可以在HTML的設(shè)置中打開【頁面】設(shè)置,取消【生成所有頁面】的勾選,則可以設(shè)置生成制定的頁面。注意,子集頁面無法單獨(dú)發(fā)布,勾選子集頁面時會自動勾選父級頁面。如果需要單獨(dú)發(fā)布子集頁面,需要在頁面管理面板中獎子集頁面的級別調(diào)整到一級頁面。

生成部分原型頁面
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容