47個Axure基礎學習實踐

基礎1:添加元件到畫布

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

添加元件到畫布

基礎2:添加元件的名稱

文本框屬性中輸入元件的自定義名稱,建議采用英文命名。

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

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

在Axure的官方網站也是說建議我們取名的時候取英文名。正常的情況下,怎么方便怎么來,我們也可以將其命名為中文名或者阿里伯數字。

添加元件的名稱

基礎3:設置元件位置/尺寸

元件的位置與尺寸可以通過鼠標拖拽調整,也可以在快捷功能或元件樣式中進行輸入調整。

x:指元件在畫布中的x軸坐標值。

y:指元件在畫布中的y軸坐標值。

w:指元件的寬度值。

h:指元件的高度值。

在輸入數值調整元件尺寸時,可以在樣式中設置,讓元件【保持寬高比例】。

設置元件位置/尺寸

基礎4:設置元件的默認角度

方式一:選擇需要改變角度的元件,按住鍵的同時,用鼠標拖動元件的節點到合適的角度。

方式二:在元件樣式中,進行角度的設置,元件的角度與元件文字的角度可以分開設置。

設置元件的角度

基礎5:設置元件顏色與透明

選擇要改變顏色的元件,點擊快捷功能區中的背景顏色設置按鈕,選取相應的顏色,或者在元件樣式中進行設置

設置元件顏色與透明

基礎6:設置形狀或圓片的角度

可以通過拖動元件左上方的圓點圖標進行調整,也可以在元件樣式中設置圓角半徑來實現。

設置形狀或圖片圓角

基礎7:設置矩形僅顯示部分邊框

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

取消部分邊框 7

基礎8:設置線段/箭頭/邊框樣式

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

設置線段/箭頭/邊框樣式

基礎9:設置元件文字邊框/行距

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

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

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

設置元件文字邊框/行距

基礎10:設置元件默認隱藏

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

設置元件默認隱藏

基礎11:設置文本輸入為密碼

文本框屬性中選擇文本框的{類型}為【密碼】


設置文本框輸入為密碼

基礎12:設置打開選擇文件窗口

文本框屬性中選擇文本框的{類型}為【文件】,即可在瀏覽器中變成打開選擇本地文件的按鈕。該按鈕樣式各瀏覽器略有不同。

設置打開選擇文件窗口

基礎13.限制文本框內輸入的字符位數

在文本框屬性中輸入文本框的{最大長度}為指定長度的數字。

限制文本框內輸入的字符數

基礎14.設置文本框提示文字

在文本框中輸入文本框的{提示文字}。提示文字的字體、顏色、對齊方式等樣式可以點擊{提示樣式}進行設置

提示文字設置包含{隱藏提示觸發}選項,其中:

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

獲取焦點:指光標進入文本框時提示文字即消失,

設置文本框提示文字

基礎15.設置文本框回車觸發事件

文本框回車觸發事件是指在文本框輸入狀態下按<回車>鍵,

可以出發某個元件的【鼠標單擊時】事件。只需要在文本框屬性中{提交按鈕}的列表中選擇相應的元件即可。

設置文本框回車觸發事件

基礎16:鼠標移入元件時的提示

在文本框屬性中(元件提示)中輸入提示內容即可/


鼠標移入元件時的提示

基礎17:設置矩形為其他形狀

在畫布中點擊矩形右上方圓點圖標即可打開形狀列表,設置為其他形狀。

設置矩形為其他形狀

基礎18:設置自定義形狀

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

設置自定義邊框

基礎19:設置形狀水平/垂直翻轉

在形狀的屬性中可以對形狀進行【水平翻轉】和【垂直翻轉】的操作

設置形狀水平/垂直翻轉

基礎20:設置列表框的內容

下拉列表框與列表框都可以設置內容--列表項。可以通過【屬性】-【列表項】的選項來設置,也可以通過鼠標雙擊元件進行設置。

設置列表框的內容

基礎21:設置元件默認選中/禁用

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

設置元件默認選中/禁用1

基礎22:設置單選按鈕唯一選中

全選所有的單選按鈕,在元件屬性中{設置單選按鈕組名稱},即可實現唯一選中的效果。

設置單選按鈕唯一選中

基礎23:設置元件不同狀態的交互樣式

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

設置元件不同狀態的交互樣式

?基礎24 :設置圖片的文本

設置圖片文本需要在圖片上點擊<鼠標右鍵>。選擇【編輯文本】,方可進行圖片上的文字編輯。

設置圖片上的文本

基礎25:切割/裁剪圖片

在圖片的元件屬性中,設有切割和裁剪的功能圖標,點擊即可使用相應的功能。元件上點擊<鼠標右鍵>,菜單中也有相應的選項。

切割:可將圖片進行水平或垂直切割,將圖片分割開。

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


切割/裁剪圖片

基礎26.嵌入多媒體文件/頁面

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


嵌入多媒體元件頁面

基礎27. 調整元件的層級

元件的層級可以通過點擊快捷功能中的圖標或者右鍵菜單的【順序】選項進行調整,也可以在頁面內容概要中通過拖動進行調整。概要中層級順序為由上至下,最底部的元件為最底層。


調整元件的層級

基礎28.組合/取消組合元件

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

組合/取消組合元件

基礎29.轉換元件為圖片

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

轉換元件為圖片

基礎30. 載入元件庫

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

載入元件庫

基礎31.切換元件庫

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

切換元件庫

基礎32.設置頁面居中

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

設置頁面居中

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

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

設置頁面背景

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

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

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

基礎35:添加條件判斷

在用例編輯頁面中點擊添加【條件按鈕】進行添加條件

添加條件判斷

基礎36:設置條件邏輯關系

設置執行一個動作必須同時滿足多個條件,或者僅需滿足多個條件中的任何一個,需要在添加條件的頁面進行設置。

設置條件邏輯關系

基礎37:用例條件轉換

為多個用例改變條件判斷關系時,只需要在相應的用例名稱上點擊<鼠標右鍵>,選擇【切換為或】


用例條件轉換

基礎38:設置形狀并排顯示細邊框

在【菜單】-【項目】的選項列表中,選擇【項目設置】;在彈出面板中進行{邊界對齊}的設置。選擇【邊框重合】時,兩個形狀中間的邊框為細邊框;選擇【邊框并排】時,兩個形狀中間的邊框為粗邊框。

設置形狀并排顯示細邊框

基礎39:設置畫布中的遮罩陰影

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

設置畫布中的遮罩陰影基礎40:

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

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

顯示與隱藏腳注

基礎41:顯示/隱藏兩側的功能面板

點擊快捷功能中的圖標即可關閉開啟相應的功能面板

顯示/隱藏兩側的功能面板


基礎42:展開/收起/彈出/停靠/關閉功能面板

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


展開/收起/彈出/停靠/關閉功能面板

基礎43:關閉/恢復功能面板

面板可以在彈出狀態下點擊【x】將其關閉,也可以在【視圖】-【功能區】菜單中進行關閉或開啟。

如果需要將功能區所有面板恢復默認。可以在【視圖】中通過【重置視圖】來完成。

關閉/恢復功能面板

基礎44:文件備份與恢復

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

文件備份與恢復

基礎45:快速預覽查看原型

預覽原型的快捷鍵為鍵。或者,點擊快捷功能中的預覽圖標進行預覽。導航菜單【發布】-【預覽設置】中進行預覽的設置。

快速預覽查看原型

基礎46:生成HTML查看原型

生成原型的快捷鍵為鍵。或者,點擊快捷功能中的生成圖標,選擇【生成HTML文件】進行生成。還可以通過導航菜單【發布】-【生成HTML文件】中進行生成

生成HTML查看原型

基礎47:生成部分原型頁面

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

生成部分原型頁面
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • 一、Axure界面介紹 1、頁面導航面板(Pages) Axure的頁面管理采用類似操作系統的文件夾和頁面文件的管...
    落霞__孤鶩閱讀 55,810評論 7 46
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,581評論 25 708
  • 效果分析 通過點擊右上角的圖標切換掃碼、賬號登錄方式; 在掃碼登錄頁面,鼠標移入、移出二維碼時,二維碼平行移動,并...
    第七周期閱讀 14,355評論 0 11
  • 我是日記星球270號星寶寶素梅—素食者王繼梅,正在參加日記星球21天蛻變之旅,這是我的第62篇原創日記,堅持每天一...
    素梅1素食者王繼梅閱讀 255評論 0 1