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

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

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

添加元件到畫布

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

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

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

我們?cè)谧鼋换サ臅r(shí)候,可能會(huì)碰到多塊面板或者是其他的元件。你要針對(duì)整個(gè)框架做交互動(dòng)作,但是呢你的框架又由很多小的元件組成的。那么這個(gè)時(shí)候,我們就需要組合。當(dāng)它組合起來(lái)取一個(gè)名稱,取名稱之后,我的交互效果是針對(duì)于組合起來(lái)的這樣的一個(gè)框架面板。這就是取名稱的一個(gè)目的。

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

添加元件的名稱

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

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

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

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

w:指元件的寬度值。

h:指元件的高度值。

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

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

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

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

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

設(shè)置元件的角度

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

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

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

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

可以通過(guò)拖動(dòng)元件左上方的圓點(diǎn)圖標(biāo)進(jìn)行調(diào)整,也可以在元件樣式中設(shè)置圓角半徑來(lái)實(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ū)傩灾休斎胛谋究虻膡最大長(zhǎng)度}為指定長(zhǎng)度的數(shù)字。

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

設(shè)置自定義邊框

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設(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ù)制的方式對(duì)原圖沒(méi)有影響。


切割/裁剪圖片

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

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


嵌入多媒體元件頁(yè)面

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

元件的層級(jí)可以通過(guò)點(diǎn)擊快捷功能中的圖標(biāo)或者右鍵菜單的【順序】選項(xiàng)進(jìn)行調(diào)整,也可以在頁(yè)面內(nèi)容概要中通過(guò)拖動(dòng)進(jìn)行調(diào)整。概要中層級(jí)順序?yàn)橛缮现料拢畹撞康脑樽畹讓印?/p>


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

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

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

組合/取消組合元件

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

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

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

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

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

載入元件庫(kù)

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

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

切換元件庫(kù)

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

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

設(shè)置頁(yè)面居中

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

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

設(shè)置頁(yè)面背景

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

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

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

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

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

添加條件判斷

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

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

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

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

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


用例條件轉(zhuǎn)換

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

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

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

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

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

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

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

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

顯示與隱藏腳注

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

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

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


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

如果某個(gè)功能面板需要更大的操作空間,可以將其彈出或者收起其他功能面板。當(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ò)【重置視圖】來(lái)完成。

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

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

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

文件備份與恢復(fù)

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

預(yù)覽原型的快捷鍵為鍵。或者,點(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)行生成。還可以通過(guò)導(dǎo)航菜單【發(fā)布】-【生成HTML文件】中進(jìn)行生成

生成HTML查看原型

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

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

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

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,091評(píng)論 1 92
  • 一、Axure界面介紹 1、頁(yè)面導(dǎo)航面板(Pages) Axure的頁(yè)面管理采用類似操作系統(tǒng)的文件夾和頁(yè)面文件的管...
    落霞__孤鶩閱讀 56,113評(píng)論 7 46
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,741評(píng)論 25 709
  • 效果分析 通過(guò)點(diǎn)擊右上角的圖標(biāo)切換掃碼、賬號(hào)登錄方式; 在掃碼登錄頁(yè)面,鼠標(biāo)移入、移出二維碼時(shí),二維碼平行移動(dòng),并...
    第七周期閱讀 15,017評(píng)論 0 11
  • 我是日記星球270號(hào)星寶寶素梅—素食者王繼梅,正在參加日記星球21天蛻變之旅,這是我的第62篇原創(chuàng)日記,堅(jiān)持每天一...
    素梅1素食者王繼梅閱讀 313評(píng)論 0 1

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