axure8基礎(chǔ)教程

1、基礎(chǔ)教程手冊目錄10.設置元件默認隱藏錯誤!未定義書簽01.添加元件到畫布錯誤!未定義書簽2.添加元件名稱錯誤!未定義書簽3.設置元件位置/尺寸錯誤!未定義書簽4.設置元件默認角度錯誤!未定義書簽5.設置元件顏色與透明錯誤!未定義書簽6.設置形狀或圖片圓角錯誤!未定義書簽7.設置矩形僅顯示部分邊框錯誤!未定義書簽8.設置線段/箭頭/邊框樣式錯誤!未定義書簽9.設置元件文字邊距/行距錯誤!未定義書簽11.設置文本框輸入為密碼錯誤!未定義書簽12.設置打開選擇文件窗口錯誤!未定義書簽025.切割/裁剪圖片錯誤!未定義書簽013 .限制文本框輸入字符位數(shù) 錯誤14 .設置文本框提示文字 錯誤15.設

2、置文本框回車觸發(fā)事件錯誤!未定義書簽16.設置鼠標移入元件時的提示錯誤!未定義書簽17.設置矩形為其他形狀錯誤!未定義書簽18.設置自定義形狀錯誤!未定義書簽19.設置形狀水平/垂直翻轉(zhuǎn)錯誤!未定義書簽20.設置列表框的內(nèi)容錯誤!未定義書簽21 .設置元件默認選中/禁用 錯誤22 .設置單選按鈕唯一選中 錯誤23 .設置元件不同狀態(tài)的交互樣式 錯誤24 .設置圖片文本 錯誤26.嵌入多媒體文件/頁面 錯誤27.調(diào)整元件的層級錯誤!未定義書簽。28.組合/取消組合元件錯誤!未定義書簽。29.轉(zhuǎn)加出圖片錯誤!未定義書簽。30.載入元件庫錯誤!未定義書簽。31.切換元件庫錯誤!未定義書簽。32.設置

3、頁面居中 錯誤!未定義書簽。33.設置頁面背景（圖片/顏色） 錯誤!未定義書簽。34.設置貝囿顏色（草圖/黑白）錯誤!未定義書簽。35.添加條件判斷錯誤!未定義書簽。36.設置條件邏輯關(guān)系 錯誤!未定義書簽。37.用例條件轉(zhuǎn)換錯誤!未定義書簽。38.全局變量設置錯誤!未定義書簽。39.局部變量設置錯誤!未定義書簽。40.公式的格式及回 錯誤!未定義書簽。41.設置形狀并排顯示細邊框 錯誤!未定義書簽。42.設置畫布中的遮罩陰影 錯誤!未定義書簽。43.顯示/隱藏交互與說明編號錯誤!未定義書簽0字體設置錯誤!未定義書簽044.顯示/隱藏兩側(cè)的功能面板錯誤!未定義書簽45.展開/收起/彈出/?？?

4、關(guān)閉功能面板.錯誤!未定義書簽46.關(guān)閉/恢復功能面板錯誤!未定義書簽47.文件備份與恢復錯誤!未定義書簽48.設置自適應視圖錯誤!未定義書簽49.快速預覽查看原型錯誤!未定義書簽50.生成HTM由看原型錯誤!未定義書簽51.生成部分原型頁面錯誤!未定義書簽52.為原型添加標志錯誤!未定義書簽53.發(fā)布原型至U AXSHARE.錯誤!未定義書簽54.重新生成當前頁面錯誤!未定義書簽55.移動設備設置錯誤!未定義書簽1.添加元件到畫布在左側(cè)元件庫中選擇要使用的元件，按住鼠標左鍵不放，拖動到畫布 適合的位置上松開。（圖1-1）irK3e2.添加元件名稱文本框?qū)傩灾休斎朐淖远x名稱，建議采用英文

5、命名。建議格式：PasswordlnputOI 或 Password01名稱含義：序號01的密碼輸入框格式說明：“ Password”表示主要用途；“Input ”表示元件類型, 一般情況下可省略，當有不同類型的同名元件需要區(qū)分或名稱不能明確表 達用途的時候使用；“ 01”表示出現(xiàn)多個同名元件時的編號；單詞首字母 大寫的書寫格式便于閱讀。（圖1-2）Password I nputOIDon冥照+通力用制v砒障點時、關(guān)去焦點時更多事牛23 .設置元件位置/尺寸元件的位置與尺寸可以通過鼠標拖拽調(diào)整，也可以在快捷功能或元件 樣式中進行輸入調(diào)整。（圖1-3）x:指元件在畫布中的x軸坐標值。y：指元件在

6、畫布中的y軸坐標值。=右建大兀件也者是用?!科生上ua點在畫布中的型杯iDnw:指元件的寬度值。h:指元件的高度值在輸入數(shù)值調(diào)整元件尺寸時，可以在樣式中設置，讓元件【保持寬高 比例】。（圖1-4）NdFVTwI - n | B / u a - 二 二 三 =| = | J * .=- 三 bx |o y 0 w 3flO C3I1 |l70Index4 .設置元件默認角度方式一：選擇需要改變角度的元件，按住鍵的同時，用鼠標拖動元件 的節(jié)點到合適的角度。（圖1-5）方式二：在元件樣式中進行角度的設置，元件的角度與元件文字的角5.設置元件顏色與透明選擇要改變顏色的元件，點擊快捷功能區(qū)中的背景顏色設

7、置按鈕，選取相應的顏色，或者在元件樣式中進行設置。（圖1-6)白，U自二三I三H =1=NcialIDKD7用跖觴色TH，曲H力晶力色遇用）4濯豈白左上眄色不建陽宜殳造匚樣啟中的明於州色前送口6.設置形狀或圖片圓角fTSS- 1K*. h2D 口 n sa E可以通過拖動元件左上方的圓點圖標進行調(diào)整，也可以在元件樣式中 設置圓角半徑來實現(xiàn)。（圖1-7）（矩形名拗7 .設置矩形僅顯示部分邊框在Axure RP 8的版本中，矩形的邊框可以在樣式中設置顯示全部或 部分。（圖1-8）-盯消都分講器8 .設置線段/箭頭/邊框樣式 線段、箭頭和元件邊框的樣式可以在快捷功能或者元件樣式中進行設（圖 1-9）

8、Ucnnal邊框樣式S邊框，線段閽頭的樣式設置門厘線廢線比箭頭10)行間距：是指文字段落行與行之間的空隙。填充：是指文字與形狀邊緣之間填充的空隙9 .設置元件文字邊距/行距在元件樣式中可以設置元件文字的【行間距】與【填充】。（圖1-Lnrem ipsum do or sit arnet consecteturadipiscing elit. Aeneari euisnrcd bi bend u m la orc et. Pro in gravida dolor sk smst locus accumsan et viv=rra .usto commndo noin sodales puhina

9、r temper Curr scciis ratoque penatibus et magnis dis Darturient montes. nasceur ridiculLS mus. IJamfermentinn. nullaluctus pharctr3 lUputnt foli尊 tdlus mollit orci. sed rhoncu; saoien nunc eqet.10.設置元件默認隱藏選擇要隱藏的元件，在快捷功能或者元件樣式中勾選【隱藏】選項。（圖 1-11 ）Z *X： 441y: 52w. 300rin： 17QTX（矩形名秘0-c-默認情況下元件陷截后會在編輯區(qū)顯示

10、淡黃色陰密位詈尺寸44-tBox 2300小jcS J W11 .設置文本框輸入為密碼文本框?qū)傩灾羞x擇文本框的類型為【密碼】。（圖1-12）-0-O12 .設置打開選擇文件窗口文本框?qū)傩灾羞x擇文本框的類型為【文件】，即可在瀏覽器中變成打開選擇本地文件的按鈕。該按鈕樣式各瀏覽器略有不同。（圖 1-13）文本框名詵晤*文小幅文件一Text碼EmailNumberPhons NumberUri直找N版Hl卜明鳴中的州日期MonthTime13 .限制文本框輸入字符位數(shù)在文本框?qū)傩灾休斎胛谋究虻淖畲箝L度為指定長度的數(shù)字。（圖1-14）20030014 .設置文本框提示文字在文本框?qū)傩灾休斎胛谋究虻奶崾?/p>

11、文字。提示文字的字體、顏色、對齊方式等樣式可以點擊【提示樣式】進行設置。（圖 1-15）提示文字設置包含隱藏提示觸發(fā)選項，其中:輸入：指用戶開始輸入時提示文字才消失。獲取焦點：指光標進入文本框時提示文字即消失。設置是市文字的樣式分設置揭示文字消失的觸發(fā)條件*-15 .設置文本框回車觸發(fā)事件文本框回車觸發(fā)事件是指在文本框輸入狀態(tài)下按 回車,鍵，可以觸發(fā) 某個元件的【鼠標單擊時】事件。只需在文本框?qū)傩灾?提交按鈕的列表 中選擇相應的元件即可。（圖1-16）D D 口DDBUTTON16.設置鼠標移入元件時的提示o在文本框?qū)傩灾性崾局休斎胩崾緝?nèi)容即可。（圖1-17）忘記密宿?啾箕器中的效果17

12、.設置矩形為其他形狀在畫布中點擊矩形右上方圓點圖標即可打開形狀列表，設置為其它形 狀。（圖 1-18）0100IK II403XW點擊打開形狀列表口區(qū)OS匚cQ6DCIQ 口 na。美日一朝實為已定義形成18 .設置自定義形狀在形狀上點擊 鼠標右鍵，在菜單中選擇【轉(zhuǎn)換為自定義形狀】，即 可對形狀進行編輯。也可以通過點擊形狀右上角的圓點圖標，在打開的形 狀選擇列表中選擇【轉(zhuǎn)換為自定義形狀】（圖 1-18）。具體的編輯操作見 圖1-19中的標注。0ibo ；KO I&力 I+X_ _ 500按住Ctrl濯胞動節(jié) 點，或者曲線狀戀下 “拖動手柄端點可以改 變曲線的曲率.節(jié)點上點擊右鍵可以改變黃.點相

13、邰的戰(zhàn)用為曲線式者直建，也 可以施珠詼節(jié)點.19 .設置形狀水平/垂直翻轉(zhuǎn)在形狀的屬性中可以對形狀進行【水平翻轉(zhuǎn)】和【垂直翻轉(zhuǎn)】的操作。（圖 1-20）水三+垂1翻轉(zhuǎn)：水三翻轉(zhuǎn)垂盲翻轉(zhuǎn)21.設置元件默認選中/禁用20 .設置列表框的內(nèi)容下拉列表框與列表框都可以設置內(nèi)容-列表項?？梢酝ㄟ^【屬性】-【列表項】的選項來設置，也可以通過鼠標雙擊元件進行設置。（圖 121）TIT胤值S酹審原選項.二克個淑針tMKaA 東常定雪,亍在一個.康/I不列塾1%0_LB廣州J泮孫T王律e#除全部列蠡凰1游 上海 i 黜 班 丁豐。劇瞌選中列表也詼次后癡A選中國行掉入E懵下回外不輸入下一行醞_ *元件的屬性中可以

14、對一些元件的默認狀態(tài)進行設置，可以設置的狀態(tài) 包括【選中】和【禁用】，默認狀態(tài)的設置，可以觸發(fā)屬性中設置的交互 樣式。比如設置某個元件在瀏覽器中默認為禁用的灰色，就需要勾選【禁 用】（復選框），并設置【禁用】的交互樣式。（圖 1-22）除了禁用與選中個別元件還具有【只讀】的設置。例如：文本框與多 行文本框。海蜀卷中膽敢生6LTT0NEUTTOTJ出因?qū)W用狀工的程立22 .設置單選按鈕唯一選中全選所有的單選按鈕，在元件屬性中設置單選按鈕組名稱,即可實 現(xiàn)唯一選中的效果。（圖1-23）23 .設置元件不同狀態(tài)的交互樣式點擊元件屬性中各個交互樣式的名稱，即可設置元件在不同狀態(tài)時呈現(xiàn)的樣式。這些樣式在

15、交互被觸發(fā)時，就會顯示出來。（圖 1-24）比如設置元件默認狀態(tài)為禁用，在瀏覽原型時，頁面打開后就會顯示該元件被禁用的樣式。（圖1-22）SUTTOTJIr星耳廠活口d殳器F且上K：24 .設置圖片文本設置圖片文本需要在圖片上點擊 ,選擇【編輯文本】，方 可進行圖片上的文字編輯。（圖1-25）夏刎CG拈貼（P）鼠標右犍菜單（部分）。導入圖片先割雪片Ctrl + &我典圖片Ctrl+7固定邊南軍圉優(yōu)化圖片25 .切割/裁剪圖片在圖片的元件屬性中，設有切割和裁剪功能的圖標，點擊即可使用相 應功能。元件上點擊 鼠標右鍵，菜單中也有相應的選項。（圖1-26）切割：可將圖片進行水平與垂直的切割，將圖片分

16、割開。裁剪：可將圖片中的某一部分取出。裁剪分為幾種，分別是裁剪、剪 切、和復制。其中：裁剪只保留被選擇的區(qū)域；剪切是將選取的部分從原 圖中剪切到系統(tǒng)剪貼板中；復制是將選取的部分復制到系統(tǒng)剪貼板中，復26.嵌入多媒體文件/頁面基本元件中的內(nèi)聯(lián)框架可以插入多媒體文件與網(wǎng)頁。雙擊元件或者在屬性中點擊【框架目標頁面】，在彈出的界面中選擇【鏈接到url或文件】，填寫超鏈接,內(nèi)容為多媒體文件的地址（網(wǎng)絡地址或文件路徑） 或網(wǎng)頁地址。在這個界面中也可以選擇嵌入原型中的某個頁面。（圖 1-27)典.itEIyo 1國用一十g （占名存y匚（喻Atiht 零 J J*回Eg 當rdF28 .組合/取消組合元件通

17、過快捷功能圖標或右鍵菜單可以將多個元件組合到一起，達到共同 移動/選取/添加交互等操作。組合/取消組合的快捷鍵為Ctrl G鍵/鍵 （圖 1-29）100% *A JOHTBl13 ,indcM第 揖筆回%-二巨三二巨二|分在T為蛆合添加交互6攝要中管理組合口為組合瘴加蒼稱。29 .轉(zhuǎn)換元件為圖片形狀/文本標簽/線段等元件可以通過點擊 鼠標右鍵，選擇將元件 【轉(zhuǎn)換為圖片】。例如，使用少量特殊字體或者圖標字體時，即可將元件 轉(zhuǎn)換為圖片，避免在未安裝字體的設備上瀏覽原型時不能正常顯示。（圖 1-30）引用層面誰用Z3T-TL1-I選中設置選蝴IStfIW息-，轉(zhuǎn)換為圉片組合&+Gm（o）鼠標右健菜

18、單（部分）0T轉(zhuǎn)換為母版（W）轉(zhuǎn)換為力態(tài)面板（D30 .載入元件庫除了使用軟件自帶的默認元件庫與流程圖元件庫，用戶還可以加載自 定義元件庫。加載自定義元件庫只需點擊功能圖標，在列表中選擇【載入 元件庫】。（圖1-31）（D）(L)31 .切換元件庫在元件庫功能面板中，可以通過點擊元件庫列表，選擇不同的元件庫 進行使用。（圖1-32）點擊選中需要使用的元14庫6月升7L件庫列表32 .設置頁面居中在頁面【樣式】設置中選擇頁面居中的按鈕。頁面居中是指在瀏覽器 中查看原型時頁面內(nèi)容居中顯示。（圖 2-1）y頁面內(nèi)容在瀏范叁中居中中切換到頁面設置y點擊頁面名稱切換到頁面設置33 .設置頁面背景（圖片/

19、顏色）2-在頁面【樣式】中可以編輯頁面的背景顏色以及背景圖片。（圖2)0 i 而廠 一 12DD ；【一前工00.10口 I i f 111rli ， I 1 I i W i i r If入背墓圉制7器背星圄后34.設置頁面顏色（草圖/黑白）在頁面的【樣式】中，可以將當前頁面的顯示為草圖效果，同時可以 將頁面顏色在彩色與黑白之間轉(zhuǎn)換。（圖 2-3 ）W30QLorem ipsum dolor sit amet, consectetur adiptscirg 國it. Aenean ejismod bibandum laoreet. Proin gravida dolor sit amet la

20、cus accumsan et viv&rra justo comrnodo Proin sodales pulvinar temper忤1tDefault頁面杵喇三35.添加條件判斷背景差色 口 在用例編輯界面中點擊添加【條件按鈕】進行添加條件。（圖 3-1 ）劭湎T4a三必忤疝?.Jl C-=fS-, 1法=；豆比如：判斷當前元件上的文字包含“ （圖 3-2）36.設置條件邏輯關(guān)系設置執(zhí)行一個動作必須同時滿足多個條件，或者僅需滿足多個條件中的任何一個，需要在添加條件的界面中進行設置。（圖 3-3）37.用例條件轉(zhuǎn)換為多個用例改變條件判斷關(guān)系時，只需要在相應的用例名稱上點擊鼠標右鍵，選擇【切

21、換為或】（圖 3-4）一/負面套人才Os 1小行 MyVar =T）+在當前葡匚打開卜邱寶www iaxure. comJ A 5 也 238.全局變量設置全局變量是一個數(shù)據(jù)容器，就像一個 U盤，可以把需要的資料存入, 隨身攜帶，在需要的時候讀取出來使用。全局變量的設置在【項目】 - 【全局變量】中。（圖4-1）項目布局冏 發(fā)布由團隊 帳戶g 膏司（H）慶面樣式的.0直面說朗字盤，nNJ元件說明字段與配置4F）目適應視圖“全局變量項目設詈皿創(chuàng)建全局三量用于送腎器毛里面切換時存儲數(shù)據(jù).如果在JE瀏 覽器瀏密翹,鞋琴期2孫或更少的變量.變量芻必須是宇因數(shù)字r燈25個字得,并且不能包含空播.添加 刪

22、除+ t 1 X避名稱默W1M；Var1jk.4雙擊編輯變量名標與默認值醮言39.局部變量設置局部變量在編輯值/文本的界面中進行創(chuàng)建，通過在【插入變量或函 數(shù)】列表中選取使用。局部變量能夠在創(chuàng)建時獲取多種類型的數(shù)據(jù)。（圖 4-2）40 .公式的格式及類型公式在編輯值/文本的界面中進行編輯，格式為“公式內(nèi)容”。公式內(nèi)的內(nèi)容可以進行運算，例如：“ 3*15 ”獲取的結(jié)果為“ 45” ； 公式運算結(jié)果自動與公式外的內(nèi)容連接到一起，形成一個字符串，例如：“3*15個”獲取的“ 45個”。變量與函數(shù)需要在寫入在公式的“”中才能夠正確獲取變量值或者函數(shù)運算結(jié)果。（圖 4-3）在下苣編病區(qū)保人立本,唔量生甜

23、國同虱左亡若。在Tir中.例如：插入杏量non L。門此1g61即逅同值為毛層”。川口；Iggb屈呻 當前值;插入I靚式KVarA +心電海回值為十國一珀rB嘀和;插入PageName返回首為當前頁而名稱.培人變阜成宮效.r UserName *儡包嚶 r 則輸小巢：刎悔 r 48 .設置自適應視圖自適應視圖是指編輯多種分辨率的原型，設備中查看時，系統(tǒng)會根據(jù)自身分辨率，自動與分辨率相適合的原型進行匹配，并顯示出來。自適應視圖在【項目】【自適應視圖】中進行設置。（圖 5-8）項電納布月因發(fā)病心回隊0程戶（Q裕電七元苗梅加麻.，血反面浣臟宇船Cl元畔訴22 rs等,.舊 Ai全裔英當也1訓我 -n

24、o49 .快速預覽查看原型預覽原型的快捷鍵為鍵。或者，點擊快捷功能中的預覽圖標進行預 覽。導航菜單【發(fā)布】-【預覽設置】中進行預覽的設置。(圖 6-1)用至常審原型的加用器,國1 .；71|jtl C7i5S .：并相瀏賢器沒胃為系統(tǒng)默認 浙莫器.雌原型界面中是百帶有T導 欄.通常目制時汨置關(guān)而”叱 丁導桂；共享他人時,詵探不 而軍一具片.以免用戶仔盤切 典面座歸_ L50 .生成HTM應看原型生成原型的快捷鍵為鍵。或者，點擊快捷功能中的生成圖標，選擇【生成HTMa件】進行生成。還可以通過導航菜單【發(fā)布】-【生成HTML文件】中進行生成。(6-2)文件出扁祀圖項目 相司 發(fā)布(1)團隊3 帳戶

25、 鷲助的100%DO 0 M 4 *日 L5 星Iq me ._ ,如 將茸1_法輝獻筋里家不sSte口 儂 IF51I預闔獺 j(O)Ctrltn。發(fā)布到延標0收F6n生成HTM萬件(H) .丹在HTM 0件中重新生成當前更面(Fl)Ctrl+F8A生成Word說明書.工用國更多生成器組配室為牛(Mj生成時，需要選擇保存HTMLC件的文件夾。查看設置與預覽設置相 同。（圖6-3）51.生成部分原型頁面發(fā)布原型時，如果不需要將所有頁面生成或發(fā)布，可以在生成HTML的設置中打開【頁面】的設置，取消【生成所有頁面】的勾選，則可以設 置生成指定的頁面。注意，子級頁面無法單獨發(fā)布，勾選子級頁面時會自

26、動勾選父級頁面。如果需要單獨發(fā)布子級頁面，需要在頁面管理面板中將 子級頁面的級別調(diào)整到一級頁面。（圖 6-4）52.為原型添加標志在生成HTML勺設置中有【標志】的設置，可以為原型添加圖片標識 或文字標題。原型發(fā)布后會顯示在工具欄的頁面面板中。（圖6-5 ）53.發(fā)布原型到AxShare發(fā)布原型到AxShare是指將做好的原型發(fā)布到Axure官方提供的空間 中，通過自動生成的網(wǎng)址進行訪問。發(fā)布到 AxShare的快捷鍵為鍵。發(fā)布 到AxShare需要預先注冊AxureShare賬號，注冊地址：。（圖6-6）文件e 編輯也 視圖富 項目 布局 發(fā)布（D團隊CD悵戶 m（H） I 乂工 81 回X

27、。100%/文件 的的L選擇幽8:耀5黃毒T岫。屐 IF5預覽選項Ctrl十F5G發(fā)布到AxSharq“.閨 一F6-鈔 HTM 漢件“0）F8在HTM0件中重新生成當前交面（用Ctrl + F8&生成Wet自說用5“.F9更富生成善口函置文件（MC3h:發(fā)布完成后，將會自動生成一個網(wǎng)址?？梢酝ㄟ^在 PC或手機瀏覽器 中打開該網(wǎng)址查看原型。（圖6-7）美叵接布戴 ！,1J設置打開網(wǎng)址后是!1fH否包含站點地圖，！ _ _一-1期的AxSh占摩原型頁面造接為：意可以繼炭博足Zcu曰RP發(fā)布.54.重新生成當前頁面修改某個頁面無需將整個原型 HTMLC件都重新生成一遍，只需要在 【發(fā)布】的選項列表中，選擇【在 HTMLC件中重新生成當前頁面】即 可。（圖6-8）更莖生成翳卻配警支件Mj55.移動設備設置制作移動設備原型需要遵循規(guī)范將原型制作成標準尺寸。移動設備原 型尺寸計算工具：（個別移動設備可能會有出入，僅