AxureRP8實(shí)戰(zhàn)手冊

1、AxureRP8實(shí)戰(zhàn)手冊新手必須掌握的基礎(chǔ)操作：本篇包含56種常見的基礎(chǔ)操作，初學(xué)者應(yīng)在掌握本篇內(nèi)容后再進(jìn)行實(shí)戰(zhàn)案例篇的學(xué)習(xí)，以免產(chǎn)生學(xué)習(xí)障礙。同時，建議具備一定基礎(chǔ)的讀者學(xué)習(xí)本篇中相對生疏的內(nèi)容，并加以掌握。一 Axure8.0基礎(chǔ)教程（1-10）*本文目錄*第1章 使用元件基礎(chǔ)1. 添加元件到畫布基礎(chǔ)2. 添加元件名稱基礎(chǔ)3. 設(shè)置元件位置/尺寸基礎(chǔ)4. 設(shè)置元件默認(rèn)角度基礎(chǔ)5. 設(shè)置元件顏色與透明基礎(chǔ)6. 設(shè)置形狀或圖片圓角基礎(chǔ)7. 設(shè)置矩形僅顯示部分邊框基礎(chǔ)8. 設(shè)置線段/箭頭/邊框樣式基礎(chǔ)9. 設(shè)置元件文字邊距/行距基礎(chǔ)10. 設(shè)置元件默認(rèn)隱藏*正 文*第1章 使用元件基礎(chǔ)1.

2、60;  添加元件到畫布 在左側(cè)元件庫中選擇要使用的元件，按住鼠標(biāo)左鍵不放，拖動到畫布適合的位置上松開。（圖1-1）基礎(chǔ)2.   添加元件名稱在檢視面板的元件名稱文本框中輸入元件的自定義名稱，建議采用英文命名。建議格式：PasswordInput01或Password01名稱含義：序號01的密碼輸入框格式說明：“Password”表示主要用途；“Input”表示元件類型，一般情況下可省略，當(dāng)有不同類型的同名元件需要區(qū)分或名稱不能明確表達(dá)用途的時候使用；“01”表示出現(xiàn)多個同名元件時的編號；單詞首字母大寫的書寫格式便于閱讀。（圖1-2）基礎(chǔ)3.  

3、; 設(shè)置元件位置/尺寸元件的位置與尺寸可以通過鼠標(biāo)拖拽調(diào)整，也可以在快捷功能或元件樣式中進(jìn)行輸入調(diào)整。（圖1-3）x：指元件在畫布中的x軸坐標(biāo)值。y：指元件在畫布中的y軸坐標(biāo)值。w：指元件的寬度值。h：指元件的高度值。在輸入數(shù)值調(diào)整元件尺寸時，可以在樣式中設(shè)置，讓元件【保持寬高比例】。（圖1-4）基礎(chǔ)4.   設(shè)置元件默認(rèn)角度方式一：選擇需要改變角度的元件，按住<Ctrl>鍵的同時，用鼠標(biāo)拖動元件的節(jié)點(diǎn)到合適的角度。（圖1-5）方式二：在元件樣式中進(jìn)行角度的設(shè)置，元件的角度與元件文字的角度可以分開設(shè)置。（圖1-5）基礎(chǔ)5.   設(shè)置元件顏色與

4、透明選擇要改變顏色的元件，點(diǎn)擊快捷功能區(qū)中的背景顏色設(shè)置按鈕，選取相應(yīng)的顏色，或者在元件樣式中進(jìn)行設(shè)置。（圖1-6）基礎(chǔ)6.   設(shè)置形狀或圖片圓角可以通過拖動元件左上方的圓點(diǎn)圖標(biāo)進(jìn)行調(diào)整，也可以在元件樣式中設(shè)置圓角半徑來實(shí)現(xiàn)。（圖1-7）基礎(chǔ)7.   設(shè)置矩形僅顯示部分邊框在Axure RP 8的版本中，矩形的邊框可以在樣式中設(shè)置顯示全部或部分。（圖1-8）基礎(chǔ)8.   設(shè)置線段/箭頭/邊框樣式線段、箭頭和元件邊框的樣式可以在快捷功能或者元件樣式中進(jìn)行設(shè)置。（圖1-9）基礎(chǔ)9.   設(shè)置元件文字邊距/行距在元件樣

5、式中可以設(shè)置元件文字的【行間距】與【填充】。（圖1-10）行間距：是指文字段落行與行之間的空隙。填充：是指文字與形狀邊緣之間填充的空隙。基礎(chǔ)10.   設(shè)置元件默認(rèn)隱藏選擇要隱藏的元件，在快捷功能或者元件樣式中勾選【隱藏】選項(xiàng)。（圖1-11）二 Axure8.0基礎(chǔ)教程（11-20）*本文目錄*基礎(chǔ)11. 設(shè)置文本框輸入為密碼基礎(chǔ)12. 設(shè)置打開選擇文件窗口基礎(chǔ)13. 限制文本框輸入字符位數(shù)基礎(chǔ)14. 設(shè)置文本框提示文字基礎(chǔ)15. 設(shè)置文本框回車觸發(fā)事件基礎(chǔ)16. 設(shè)置元件鼠標(biāo)移入的提示基礎(chǔ)17. 設(shè)置矩形為其他形狀基礎(chǔ)18. 設(shè)置自定義形狀基礎(chǔ)19. 設(shè)置形狀水平/垂直翻

6、轉(zhuǎn)基礎(chǔ)20. 設(shè)置列表框的內(nèi)容*正 文*基礎(chǔ)11.   設(shè)置文本框輸入為密碼 文本框?qū)傩灾羞x擇文本框的類型為【密碼】。（圖1-12）基礎(chǔ)12.   設(shè)置打開選擇文件窗口 文本框?qū)傩灾羞x擇文本框的類型為【文件】，即可在瀏覽器中變成打開選擇本地文件的按鈕。該按鈕樣式各瀏覽器略有不同。（圖1-13）基礎(chǔ)13.   限制文本框輸入字符位數(shù) 在文本框?qū)傩灾休斎胛谋究虻淖畲箝L度為指定長度的數(shù)字。（圖1-14）基礎(chǔ)14.   設(shè)置文本框提示文字 在文本框?qū)傩灾休斎胛谋究虻奶崾疚淖?。提示文字的字體、顏色、對齊方式等樣式可以點(diǎn)擊【提

7、示樣式】進(jìn)行設(shè)置。（圖1-15） 提示文字設(shè)置包含隱藏提示觸發(fā)選項(xiàng)，其中： 輸入：指用戶開始輸入時提示文字才消失。 獲取焦點(diǎn)：指光標(biāo)進(jìn)入文本框時提示文字即消失?；A(chǔ)15.   設(shè)置文本框回車觸發(fā)事件 文本框回車觸發(fā)事件是指在文本框輸入狀態(tài)下按<回車>鍵，可以觸發(fā)某個元件的【鼠標(biāo)單擊時】事件。只需在文本框?qū)傩灾刑峤话粹o的列表中選擇相應(yīng)的元件即可。（圖1-16）基礎(chǔ)16.   設(shè)置鼠標(biāo)移入元件時的提示 在文本框?qū)傩灾性崾局休斎胩崾緝?nèi)容即可。（圖1-17）基礎(chǔ)17.   設(shè)置矩形為其他形狀 在畫布中點(diǎn)擊矩形右上方圓點(diǎn)圖標(biāo)即可

8、打開形狀列表，設(shè)置為其它形狀。（圖1-18）基礎(chǔ)18.   設(shè)置自定義形狀 在形狀上點(diǎn)擊<鼠標(biāo)右鍵>，在菜單中選擇【轉(zhuǎn)換為自定義形狀】，即可對形狀進(jìn)行編輯。也可以通過點(diǎn)擊形狀右上角的圓點(diǎn)圖標(biāo)，在打開的形狀選擇列表中選擇【轉(zhuǎn)換為自定義形狀】（圖1-18）。具體的編輯操作見圖1-19中的標(biāo)注?；A(chǔ)19.   設(shè)置形狀水平/垂直翻轉(zhuǎn) 在形狀的屬性中可以對形狀進(jìn)行【水平翻轉(zhuǎn)】和【垂直翻轉(zhuǎn)】的操作。（圖1-20）基礎(chǔ)20.   設(shè)置列表框的內(nèi)容 下拉列表框與列表框都可以設(shè)置內(nèi)容-列表項(xiàng)?？梢酝ㄟ^【屬性】-【列表項(xiàng)】的選項(xiàng)來設(shè)置，也可

9、以通過鼠標(biāo)雙擊元件進(jìn)行設(shè)置。（圖1-21）三 Axure8.0基礎(chǔ)教程（21-30）*本文目錄*基礎(chǔ)21. 設(shè)置元件默認(rèn)選中/禁用基礎(chǔ)22. 設(shè)置單選按鈕唯一選中基礎(chǔ)23. 設(shè)置元件不同狀態(tài)時的樣式基礎(chǔ)24. 設(shè)置圖片文本基礎(chǔ)25. 切割/裁剪圖片基礎(chǔ)26. 嵌入多媒體文件/頁面基礎(chǔ)27. 調(diào)整元件的層級基礎(chǔ)28. 組合/取消組合元件基礎(chǔ)29. 轉(zhuǎn)換元件為圖片基礎(chǔ)30. 載入元件庫*正 文*基礎(chǔ)21.   設(shè)置元件默認(rèn)選中/禁用 元件的屬性中可以對一些元件的默認(rèn)狀態(tài)進(jìn)行設(shè)置，可以設(shè)置的狀態(tài)包括【選中】和【禁用】，默認(rèn)狀態(tài)的設(shè)置，可以觸發(fā)屬性中設(shè)置的交互樣式。比如設(shè)置某個元件

10、在瀏覽器中默認(rèn)為禁用的灰色，就需要勾選【禁用】（復(fù)選框），并設(shè)置【禁用】的交互樣式。（圖1-22） 除了禁用與選中個別元件還具有【只讀】的設(shè)置。例如：文本框與多行文本框。基礎(chǔ)22.   設(shè)置單選按鈕唯一選中 全選所有的單選按鈕，在元件屬性中設(shè)置單選按鈕組名稱，即可實(shí)現(xiàn)唯一選中的效果。（圖1-23）基礎(chǔ)23.   設(shè)置元件不同狀態(tài)的交互樣式 點(diǎn)擊元件屬性中各個交互樣式的名稱，即可設(shè)置元件在不同狀態(tài)時呈現(xiàn)的樣式。這些樣式在交互被觸發(fā)時，就會顯示出來。（圖1-24）比如設(shè)置元件默認(rèn)狀態(tài)為禁用，在瀏覽原型時，頁面打開后就會顯示該元件被禁用的樣式。（圖1-22）基

11、礎(chǔ)24.   設(shè)置圖片文本 設(shè)置圖片文本需要在圖片上點(diǎn)擊<鼠標(biāo)右鍵>，選擇【編輯文本】，方可進(jìn)行圖片上的文字編輯。（圖1-25）基礎(chǔ)25.   切割/裁剪圖片 在圖片的元件屬性中，設(shè)有切割和裁剪功能的圖標(biāo)，點(diǎn)擊即可使用相應(yīng)功能。元件上點(diǎn)擊<鼠標(biāo)右鍵>，菜單中也有相應(yīng)的選項(xiàng)。（圖1-26） 切割：可將圖片進(jìn)行水平與垂直的切割，將圖片分割開。 裁剪：可將圖片中的某一部分取出。裁剪分為幾種，分別是裁剪、剪切、和復(fù)制。其中：裁剪只保留被選擇的區(qū)域；剪切是將選取的部分從原圖中剪切到系統(tǒng)剪貼板中；復(fù)制是將選取的部分復(fù)制到系統(tǒng)剪貼板中，復(fù)制的方

12、式對原圖沒有影響。基礎(chǔ)26.   嵌入多媒體文件/頁面 基本元件中的內(nèi)聯(lián)框架可以插入多媒體文件與網(wǎng)頁。雙擊元件或者在屬性中點(diǎn)擊【框架目標(biāo)頁面】，在彈出的界面中選擇【鏈接到url或文件】，填寫超鏈接，內(nèi)容為多媒體文件的地址（網(wǎng)絡(luò)地址或文件路徑）或網(wǎng)頁地址。在這個界面中也可以選擇嵌入原型中的某個頁面。（圖1-27）圖中嵌入的優(yōu)酷視頻地址：基礎(chǔ)27.   調(diào)整元件的層級 元件的層級可以通過點(diǎn)擊快捷功能中的圖標(biāo)或者右鍵菜單的【順序】選項(xiàng)進(jìn)行調(diào)整，也可以在頁面內(nèi)容概要中通過拖動進(jìn)行調(diào)整。概要中層級順序?yàn)橛缮现料拢畹撞康脑樽铐攲印＃▓D1-28）基礎(chǔ)28.

13、60;  組合/取消組合元件 通過快捷功能圖標(biāo)或右鍵菜單可以將多個元件組合到一起，達(dá)到共同移動/選取/添加交互等操作。組合/取消組合的快捷鍵為< Ctrl G>鍵/鍵。（圖1-29）基礎(chǔ)29.   轉(zhuǎn)換元件為圖片 形狀/文本標(biāo)簽/線段等元件可以通過點(diǎn)擊<鼠標(biāo)右鍵>，選擇將元件【轉(zhuǎn)換為圖片】。例如，使用少量特殊字體或者圖標(biāo)字體時，即可將元件轉(zhuǎn)換為圖片，避免在未安裝字體的設(shè)備上瀏覽原型時不能正常顯示。（圖1-30）基礎(chǔ)30.   載入元件庫 除了使用軟件自帶的默認(rèn)元件庫與流程圖元件庫，用戶還可以加載自定義元件庫。加載自定義元

14、件庫只需點(diǎn)擊功能圖標(biāo)，在列表中選擇【載入元件庫】。（圖1-31）四 Axure8.0基礎(chǔ)教程（31-40）*本文目錄*基礎(chǔ)31. 切換元件庫第2章 頁面設(shè)置基礎(chǔ)32. 設(shè)置頁面居中基礎(chǔ)33. 設(shè)置頁面背景（圖片/顏色）基礎(chǔ)34. 設(shè)置頁面顏色（草圖/黑白）第3章 設(shè)置條件基礎(chǔ)35. 添加條件判斷基礎(chǔ)36. 設(shè)置條件限制基礎(chǔ)37. 用例條件轉(zhuǎn)換第4章 使用變量/公式基礎(chǔ)38. 全局變量設(shè)置基礎(chǔ)39. 局部變量設(shè)置基礎(chǔ)40. 公式的格式及類型*正 文*基礎(chǔ)31.   切換元件庫 在元件庫功能面板中，可以通過點(diǎn)擊元件庫列表，選擇不同的元件庫進(jìn)行使用。（圖1-32）第2章 

15、;   頁面設(shè)置基礎(chǔ)32.   設(shè)置頁面居中 在頁面【樣式】設(shè)置中選擇頁面居中的按鈕。頁面居中是指在瀏覽器中查看原型時頁面內(nèi)容居中顯示。（圖2-1）基礎(chǔ)33.   設(shè)置頁面背景（圖片/顏色） 在頁面【樣式】中可以編輯頁面的背景顏色以及背景圖片。（圖2-2）基礎(chǔ)34.   設(shè)置頁面顏色（草圖/黑白） 在頁面的【樣式】中，可以將當(dāng)前頁面的顯示為草圖效果，同時可以將頁面顏色在彩色與黑白之間轉(zhuǎn)換。（圖2-3）第3章    設(shè)置條件基礎(chǔ)35.   添加條件判斷 在用例編輯界面

16、中點(diǎn)擊添加【條件按鈕】進(jìn)行添加條件。（圖3-1） 比如：判斷當(dāng)前元件上的文字包含“”。（圖3-2）基礎(chǔ)36.   設(shè)置條件邏輯關(guān)系 設(shè)置執(zhí)行一個動作必須同時滿足多個條件，或者僅需滿足多個條件中的任何一個，需要在添加條件的界面中進(jìn)行設(shè)置。（圖3-3）基礎(chǔ)37.   用例條件轉(zhuǎn)換 為多個用例改變條件判斷關(guān)系時，只需要在相應(yīng)的用例名稱上點(diǎn)擊<鼠標(biāo)右鍵>，選擇【切換為或】。（圖3-4）第4章    使用變量/公式基礎(chǔ)38.   全局變量設(shè)置 全局變量是一個數(shù)據(jù)容器，就像一個U盤，可以把需要的資料存入，

17、隨身攜帶，在需要的時候讀取出來使用。全局變量的設(shè)置在【項(xiàng)目】-【全局變量】中。（圖4-1）基礎(chǔ)39.   局部變量設(shè)置 局部變量在編輯值/文本的界面中進(jìn)行創(chuàng)建，通過在【插入變量或函數(shù)】列表中選取使用。 局部變量能夠在創(chuàng)建時獲取多種類型的數(shù)據(jù)。（圖4-2）基礎(chǔ)40.   公式的格式及類型 公式在編輯值/文本的界面中進(jìn)行編輯，格式為“公式內(nèi)容”。公式內(nèi)的內(nèi)容可以進(jìn)行運(yùn)算，例如：“3*15”獲取的結(jié)果為“45”；公式運(yùn)算結(jié)果自動與公式外的內(nèi)容連接到一起，形成一個字符串，例如：“3*15個”獲取的“45個”。變量與函數(shù)需要在寫入在公式的“”中才能夠正確獲取變量值

18、或者函數(shù)運(yùn)算結(jié)果。（圖4-3）五 Axure8.0基礎(chǔ)教程（41-50）*本文目錄*第5章 功能設(shè)置基礎(chǔ)41. 設(shè)置形狀并排顯示細(xì)邊框基礎(chǔ)42. 設(shè)置畫布中的遮罩陰影基礎(chǔ)43. 顯示/隱藏交互與說明編號基礎(chǔ)44. 顯示/隱藏兩側(cè)的功能面板基礎(chǔ)45. 展開/收起/彈出/停靠功能面板基礎(chǔ)46. 關(guān)閉/恢復(fù)功能面板基礎(chǔ)47. 文件備份與恢復(fù)基礎(chǔ)48. 設(shè)置自適應(yīng)視圖第6章 查看原型基礎(chǔ)49. 快速預(yù)覽查看原型基礎(chǔ)50.     生成HTML查看原型*正 文*第5章    功能設(shè)置基礎(chǔ)41.   設(shè)置形狀并排顯示細(xì)邊框 在

19、【菜單】-【項(xiàng)目】的選項(xiàng)列表中，選擇【項(xiàng)目設(shè)置】；在彈出的面板中進(jìn)行邊界對齊的設(shè)置。選擇【邊框重合】時，兩個形狀中間的邊框?yàn)榧?xì)邊框；選擇【邊框并排】時，兩個形狀中間的邊框?yàn)榇诌吙?。（圖5-1）基礎(chǔ)42.   設(shè)置畫布中的遮罩陰影 在【菜單】-【視圖】-【遮罩】的選項(xiàng)列表中，取消相應(yīng)的勾選。比如畫布中隱藏的元件不顯示淡黃色的陰影，則取消【隱藏對象】的勾選。（圖5-2）基礎(chǔ)43.   顯示/隱藏交互與說明編號 在【菜單】-【視圖】的選項(xiàng)列表中，取消【顯示腳注】的勾選。（圖5-3）基礎(chǔ)44.   顯示/隱藏兩側(cè)的功能面板 點(diǎn)擊快捷功能中的圖

20、標(biāo)即可關(guān)閉開啟相應(yīng)的功能面板。（圖5-4）基礎(chǔ)45.   展開/收起/彈出/?？?關(guān)閉功能面板 如果某個功能面板需要更大的操作空間，可以將其彈出或者收起其它面板。當(dāng)完成操作后再進(jìn)行還原。面板彈出后可將其關(guān)閉。（圖5-5）基礎(chǔ)46.   關(guān)閉/恢復(fù)功能面板 面板可以在彈出狀態(tài)下點(diǎn)擊【×】將其關(guān)閉（圖5-5），也可以在【視圖】-【功能區(qū)】菜單中進(jìn)行關(guān)閉或開啟。如果需要將功能區(qū)所有面板恢復(fù)默認(rèn)?？梢栽凇疽晥D】中通過【重置視圖】來完成。（圖5-6）基礎(chǔ)47.   文件備份與恢復(fù) 開啟軟件的自動備份功能，可以有效的幫助我們降低因誤操作

21、、軟件崩潰、斷電等異常時，未保存或者損壞文件的風(fēng)險。文件的備份與恢復(fù)在【文件】菜單中進(jìn)行相關(guān)操作。（圖5-7）基礎(chǔ)48.   設(shè)置自適應(yīng)視圖 自適應(yīng)視圖是指編輯多種分辨率的原型，設(shè)備中查看時，系統(tǒng)會根據(jù)自身分辨率，自動與分辨率相適合的原型進(jìn)行匹配，并顯示出來。自適應(yīng)視圖在【項(xiàng)目】-【自適應(yīng)視圖】中進(jìn)行設(shè)置。（圖5-8）第6章    查看原型基礎(chǔ)49.   快速預(yù)覽查看原型 預(yù)覽原型的快捷鍵為鍵?；蛘撸c(diǎn)擊快捷功能中的預(yù)覽圖標(biāo)進(jìn)行預(yù)覽。導(dǎo)航菜單【發(fā)布】-【預(yù)覽設(shè)置】中進(jìn)行預(yù)覽的設(shè)置。（圖6-1）基礎(chǔ)50. 生成HTML查看原型

22、 生成原型的快捷鍵為鍵?；蛘?，點(diǎn)擊快捷功能中的生成圖標(biāo)，選擇【生成HTML文件】進(jìn)行生成。還可以通過導(dǎo)航菜單【發(fā)布】-【生成HTML文件】中進(jìn)行生成。（6-2） 生成時，需要選擇保存HTML文件的文件夾。查看設(shè)置與預(yù)覽設(shè)置相同。（圖6-3）六 Axure8.0基礎(chǔ)教程（51-56）*本文目錄*基礎(chǔ)51. 生成部分原型頁面基礎(chǔ)52. 為原型添加標(biāo)志基礎(chǔ)53. 發(fā)布原型到AxShare基礎(chǔ)54. 重新生成當(dāng)前頁面基礎(chǔ)55. 移動設(shè)備設(shè)置基礎(chǔ)56. Web字體設(shè)置*正 文*基礎(chǔ)51.   生成部分原型頁面 發(fā)布原型時，如果不需要將所有頁面生成或發(fā)布，可以在生成HTML的設(shè)置中打開

23、【頁面】的設(shè)置，取消【生成所有頁面】的勾選，則可以設(shè)置生成指定的頁面。注意，子級頁面無法單獨(dú)發(fā)布，勾選子級頁面時會自動勾選父級頁面。如果需要單獨(dú)發(fā)布子級頁面，需要在頁面管理面板中將子級頁面的級別調(diào)整到一級頁面。（圖6-4）基礎(chǔ)52.   為原型添加標(biāo)志 在生成HTML的設(shè)置中有【標(biāo)志】的設(shè)置，可以為原型添加圖片標(biāo)識或文字標(biāo)題。原型發(fā)布后會顯示在工具欄的頁面面板中。（圖6-5）基礎(chǔ)53.   發(fā)布原型到AxShare 發(fā)布原型到AxShare是指將做好的原型發(fā)布到Axure官方提供的空間中，通過自動生成的網(wǎng)址進(jìn)行訪問。發(fā)布到AxShare的快捷鍵為鍵。發(fā)布到AxShare需要預(yù)先注冊AxureShare賬號，注冊地址： 發(fā)布完成后，將會自動生成一個網(wǎng)址?？梢酝ㄟ^在PC或手機(jī)瀏覽器中打開該網(wǎng)址查看原型。（圖6-7）基礎(chǔ)54.   重新生成當(dāng)前頁面 修改某個頁面無需將整個原型HTML文件都重新生成一遍，只需要在【發(fā)布】的選項(xiàng)列表中，選擇【在HTML文件中重新生成當(dāng)前頁面】即可。（圖6-8）基礎(chǔ)55.   移動設(shè)備設(shè)置 制作移動設(shè)備原型需要遵循規(guī)范將原型制作成標(biāo)準(zhǔn)尺寸。移動設(shè)備原型尺寸計(jì)算工具： 除了制作成標(biāo)準(zhǔn)原型尺寸，還需要在生成HTML文件配置中，進(jìn)行【移動設(shè)備】的設(shè)置，讓生成的HTML文件【包