Axure基本使用教程+示例

1、Axure使用介紹文檔目錄一、Axure rp 的界面 2二、Axure rp的線框圖元件3三、Axure rp的元件觸發(fā)事件4四、Axure rp的條件生成6五、系統(tǒng)函數(shù)與變量8六、動(dòng)態(tài)面板的使用14七、母版的使用20八、中繼器的使用28一、Axure rp 的界面（界面顯示各個(gè)區(qū)域可在主菜單工具欄-視圖中找到）1、菜單工具欄：同大部分軟件類(lèi)似，可選擇Axure各個(gè)功能的工具區(qū)。2、操作界面：繪制產(chǎn)品的操作區(qū)，所有元件、部件可拖與此區(qū)域操作。3、站點(diǎn)地圖：頁(yè)面文件存放區(qū)域，可增加、刪除、修改、查看頁(yè)面；可設(shè)置頁(yè)面級(jí)別。4、元件庫(kù)（部件庫(kù)）：主要分為流程圖和線框圖；可拖動(dòng)元件庫(kù)里的元件到操作界

2、面進(jìn)行產(chǎn)品繪制；為提高效率，元件庫(kù)也可自行導(dǎo)入已經(jīng)可使用的元件。5、母版：母版的使用主要針對(duì)于頂部導(dǎo)航、底部導(dǎo)航，多個(gè)頁(yè)面中重復(fù)出現(xiàn)的元素，可先繪制與母版中，再拖動(dòng)到需使用的頁(yè)面（比起重復(fù)操作，修改擴(kuò)展行也更強(qiáng)）。6、頁(yè)面屬性：可設(shè)置當(dāng)前頁(yè)面的注釋、交互、與樣式。7、元件交互與注釋?zhuān)嚎蓪?duì)操作頁(yè)面中用到的元件或元件與元件之間的交互事件進(jìn)行設(shè)置（如動(dòng)態(tài)面板顯示與隱藏、鼠標(biāo)點(diǎn)擊事件、鼠標(biāo)移入移出事件等）。8、元件屬性和樣式：可設(shè)置選中元件的基本樣式與屬性。9、部件管理（動(dòng)態(tài)面板管理）：該區(qū)域可對(duì)已設(shè)置的動(dòng)態(tài)面板狀態(tài)進(jìn)行操作，可添加、刪除、進(jìn)行排序，也可雙擊動(dòng)態(tài)面板進(jìn)入編輯。二、Axure rp的線框

3、圖元件1、圖片：圖片元件拖入編輯時(shí)，可雙擊載入本地磁盤(pán)的圖片，載入圖片是Axure會(huì)自動(dòng)提示將大圖進(jìn)行優(yōu)化，避免原型文件過(guò)大；載入的圖片可以選擇原圖大小也可以保持元件大小。2、文本：標(biāo)題1、標(biāo)題2、單行文本、多行文本都屬于文本類(lèi)型的元件，在網(wǎng)頁(yè)中的名稱(chēng)為lable，主要用于文字描述、文本鏈接等功能3、矩形：矩形可用作背景、按鈕等元件使用；雙擊矩形可輸入文本；拖入矩形時(shí)默認(rèn)是直角矩形，可通過(guò)左右拖動(dòng)左上角的黃色小三角來(lái)改變圓角半徑；也可通過(guò)右鍵選擇形狀來(lái)改變當(dāng)前形狀。4、占位符：顧名思義，主要用于替代一些沒(méi)有交互或交互比較簡(jiǎn)單的區(qū)域。5、圓角矩形：與矩形功能相似，不同的是拖動(dòng)使用時(shí)，默認(rèn)為圓角并

4、且有文字說(shuō)明。6、水平線、垂直線：兩種線的功能一樣，主要用于區(qū)域與區(qū)域之間的劃分；也可通過(guò)改變角度變成斜線。7、圖片熱區(qū)：在查看頁(yè)面效果時(shí)不顯示，于鼠標(biāo)點(diǎn)擊或移入移出某個(gè)區(qū)域產(chǎn)生交互時(shí)而使用，可理解為一個(gè)有效范圍。8、動(dòng)態(tài)面板：頁(yè)面交互里非常重要的使用元件，在Axure中是必須要學(xué)會(huì)的，可直接拖動(dòng)動(dòng)態(tài)面板到頁(yè)面中，也可通過(guò)自行選擇需要用到交互的元件選好后，右鍵轉(zhuǎn)為動(dòng)態(tài)面板，之后再進(jìn)行設(shè)置事件的交互。9、內(nèi)部框架：用于頁(yè)面中嵌入其他頁(yè)面的Axure元件，可雙擊指定要嵌入的頁(yè)面，多用于網(wǎng)站后臺(tái)原型。10、中繼器：Axure7.0開(kāi)始更新的元件，中繼器的功能非常復(fù)雜，主要用于表格或列表中對(duì)數(shù)據(jù)進(jìn)行記

5、錄、排序、分類(lèi)、分頁(yè)等操作；中繼器就是數(shù)據(jù)的集中池。11、窗體部分元件：包含單行文本框、多行文本框、下拉列表框、列表選擇框、復(fù)選框、單選框、HTML按鈕（網(wǎng)頁(yè)中常用到的基本元件）12、菜單和表格部分元件：包含樹(shù)、表格、經(jīng)典菜單-水平、經(jīng)典菜單-垂直（主要用于網(wǎng)站導(dǎo)航、多用于后臺(tái)）三、Axure rp的元件觸發(fā)事件1、OnClick（鼠標(biāo)點(diǎn)擊時(shí)）：除了動(dòng)態(tài)面板外的所有元件點(diǎn)擊時(shí)觸發(fā)2、OnMouseEnter（鼠標(biāo)移入時(shí)）：鼠標(biāo)進(jìn)入某個(gè)元件范圍時(shí)觸發(fā)3、OnMouseOut（鼠標(biāo)移出時(shí)）：鼠標(biāo)移出某個(gè)元件范圍時(shí)觸發(fā)4、OnKeyUp（按鍵彈起時(shí)）：文本框（單行與多行）編輯時(shí)，鍵盤(pán)按下某一個(gè)按鍵松

6、開(kāi)時(shí)觸發(fā)5、OnFocus（獲取焦點(diǎn)時(shí)）：一個(gè)元件點(diǎn)擊或切換獲取焦點(diǎn)時(shí)觸發(fā)6、OnLostFocus（失去焦點(diǎn)時(shí)）：一個(gè)組件失去焦點(diǎn)時(shí)觸發(fā)7、OnChange（選中項(xiàng)改變時(shí)）：8、OnMove（移動(dòng)時(shí)）9、The OnShow and OnHide events（顯示或隱藏時(shí)）10、OnPanelStateChange（狀態(tài)改變時(shí)）11、OnDragStart: Occurs when the drag begins（開(kāi)始拖動(dòng)面板時(shí)）12、OnDrag: Occurs as the panel is dragged（面板拖動(dòng)時(shí)）13、OnDragDrop: Occurs when the pa

7、nel is dropped（面板拖動(dòng)結(jié)束時(shí)）四、Axure rp的條件生成用Axure制作原型時(shí)，經(jīng)常用到交互事件以達(dá)到頁(yè)面的保真效果，而為保障能完成更加復(fù)雜的交互事件，就需要用到條件。1、新增條件（1）、要對(duì)元件或其他相關(guān)頁(yè)面添加交互事件的條件，首先雙擊需要添加條件的事件，打開(kāi)用例編輯器，在用例編輯器的第一步用例說(shuō)明右方（如圖數(shù)字1的位置），點(diǎn)擊添加條件即可打開(kāi)條件生成（2）、圖中數(shù)字2的位置包含全部、任意，兩項(xiàng)可選；與字義一樣，要形成完整的條件語(yǔ)句，不許滿足全部條件，或滿足任意一種條件即可。（3）、圖中數(shù)字3的區(qū)域即為實(shí)際設(shè)置條件的區(qū)域。圖中數(shù)字4里為可設(shè)置的條件，其中包括值：可以是字母

8、、數(shù)字、漢字、符號(hào)、函數(shù)、公式；可直接輸入，或點(diǎn)擊fx計(jì)入編輯。變量值：Axure中默認(rèn)的變量值為OnLoadVariable，可通過(guò)新建、重命名、刪除來(lái)操作。變量值長(zhǎng)度：值變量值的字符個(gè)數(shù)，其中Axure中一個(gè)漢字為一個(gè)字符。部件文字：元件中可編輯的文字，當(dāng)然必須是可編輯文字的元件，其中不包含-動(dòng)態(tài)面板、圖片熱區(qū)、垂直線、水平線、內(nèi)部框架、下拉列表、列表框。焦點(diǎn)部件上的文字：通過(guò)鼠標(biāo)點(diǎn)擊或Tab切換被選中的元件上的文字；如文本框獲取焦點(diǎn)時(shí)，光標(biāo)在文本框內(nèi)閃動(dòng)；按鈕獲取焦點(diǎn)時(shí)四周會(huì)出現(xiàn)虛線。部件值長(zhǎng)度：元件中字符個(gè)數(shù)；僅包含單行、多行文本框、下拉列表和列表框。選中項(xiàng)值：選中時(shí)值為“真”，為選中

9、時(shí)值為“假”；僅適用于單選按鈕和復(fù)選框。選中狀態(tài)值：通過(guò)獲取元件當(dāng)前值來(lái)確定選擇狀態(tài)，僅適用于下拉列表和列表框。動(dòng)態(tài)面板狀態(tài)：僅限動(dòng)態(tài)面板使用，以動(dòng)態(tài)面板狀態(tài)為判斷條件來(lái)激發(fā)事件。部件可見(jiàn)性：以元件的顯示隱藏作為判斷條件，true為顯示，false為隱藏；也包含動(dòng)態(tài)面板的顯示隱藏。部件范圍：指元件覆蓋的范圍，以是否觸碰到指定元件為條件。自適應(yīng)視圖：自適應(yīng)視圖存在繼承關(guān)系，利用視圖與視圖之間的關(guān)系引用條件。五、系統(tǒng)函數(shù)與變量1、變量與其他計(jì)算機(jī)語(yǔ)言類(lèi)似包含以下變量類(lèi)型全局變量：可以在整個(gè)原型的任意位置調(diào)用和修改局部變量：僅作用于某一事件的某一動(dòng)作內(nèi)自定義變量：自行新建的全局變量2、系統(tǒng)函數(shù)（1）

10、、元件函數(shù)Widget.Width：獲取元件的寬度，使用方法：通過(guò)局部變量獲取LVAR. Width；Widget.Height：獲取元件的高度，使用方法：通過(guò)局部變量獲取LVAR. Height；Widget.X：獲取元件左上頂點(diǎn)X坐標(biāo)值，使用方法：通過(guò)局部變量獲取LVAR. X；Widget.Y：獲取元件左上頂點(diǎn)Y坐標(biāo)值，使用方法：通過(guò)局部變量獲取LVAR. Y；Widget. Left：獲取元件左邊界X坐標(biāo)值，使用方法：通過(guò)局部變量獲取LVAR. Left；Widget. Top：獲取元件頂部邊界Y坐標(biāo)值，使用方法：通過(guò)局部變量獲取LVAR. Top；Widget. Right：獲取元件

11、等右邊界X坐標(biāo)值，使用方法：通過(guò)局部變量獲取LVAR. Right；Widget. Bottom：獲取元件底部邊界Y坐標(biāo)值，使用方法：通過(guò)局部變量獲取LVAR. Bottom；（2）、窗口函數(shù)Window.ScrollX：獲取窗口橫向滾動(dòng)的當(dāng)前坐標(biāo)值；使用方法：Window. ScrollXWindow.ScrollY：獲取窗口縱向滾動(dòng)的當(dāng)前坐標(biāo)值；使用方法：Window. ScrollYWindow.width：獲取窗口的寬度，使用方法：Window.widthWindow.height：獲取窗口的高度，使用方法：Window. height（3）、鼠標(biāo)函數(shù)Cursor.X：獲取鼠標(biāo)X軸坐標(biāo)

12、值，使用方法：Cursor.X；Cursor.Y：獲取鼠標(biāo)Y軸坐標(biāo)值，使用方法：Cursor.Y。（4）、數(shù)字函數(shù)toFixed：指定數(shù)字的小數(shù)點(diǎn)位數(shù)，使用方法：如果n=1.232，n.toFixed(2)返回值1.23；toExponential ：把對(duì)象的值轉(zhuǎn)換為指數(shù)計(jì)數(shù)法，使用方法：n. toExponential (參數(shù))；toPrecision： 把數(shù)字格式化為指定的長(zhǎng)度：如果n=1, n. toPrecision (6)返回值1.00000。（5）、字符串函數(shù)的介紹charAt：返回指定位置的字符。使用方法： LVAR. charAt(位數(shù))charCodeAt：返回指定位置字符的

13、 Unicode 編碼。使用方法：LVAR. charCodeAt (位數(shù))Concat：連接字符串。（暫未發(fā)現(xiàn)無(wú)實(shí)際用途）fromCharCode：從字符編碼創(chuàng)建一個(gè)字符串。（未測(cè)試成功）indexOf：檢索字符串。使用方法：LVAR. indexOf (字符串)lastIndexOf：從后向前搜索字符串。使用方法：LVAR. lastIndexOf (字符串)Slice：提取字符串的片斷，并在新的字符串中返回被提取的部分。使用方法：LVAR. Split(start,end)Slice參數(shù)介紹：start要抽取的片斷的起始下標(biāo)。如果是負(fù)數(shù)，則該參數(shù)規(guī)定的是從字符串的尾部開(kāi)始算起的位置。也就

14、是說(shuō)，-1 指字符串的最后一個(gè)字符，-2 指倒數(shù)第二個(gè)字符，以此類(lèi)推。end緊接著要抽取的片段的結(jié)尾的下標(biāo)。若未指定此參數(shù)，則要提取的子串包括 start 到原字符串結(jié)尾的字符串。如果該參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從字符串的尾部開(kāi)始算起的位置。Split：把字符串分割為字符串?dāng)?shù)組。使用方法1：LVAR1.Split() 如果：LVAR1等于asdfg，則返回a,s,d,f,g使用方法2：LVAR1.Split( ) 如果：LVAR1等于asd fg，則返回asd,fgSubstr：從起始索引號(hào)提取字符串中指定數(shù)目的字符。使用方法：LVAR. Substr (start,stop)Substrin

15、g：提取字符串中兩個(gè)指定的索引號(hào)之間的字符。使用方法：LVAR. Substring (start,stop)Substring參數(shù)介紹：start必需。一個(gè)非負(fù)的整數(shù)，規(guī)定要提取的子串的第一個(gè)字符在 stringObject 中的位置。stop可選。一個(gè)非負(fù)的整數(shù)，比要提取的子串的最后一個(gè)字符在 stringObject 中的位置多 1。如果省略該參數(shù)，那么返回的子串會(huì)一直到字符串的結(jié)尾。LVAR. Substring (start)toLowerCase：把字符串轉(zhuǎn)換為小寫(xiě)。使用方法：LVAR. toLowerCase ()toString：返回字符串。（暫未發(fā)現(xiàn)無(wú)實(shí)際用途）toUpper

16、Case：把字符串轉(zhuǎn)換為大寫(xiě)。使用方法：LVAR. toUpperCase ()trim：去除字符串兩端空格。使用方法：LVAR. trim ()（6）、日期函數(shù)的介紹getDate：返回一個(gè)月中的某一天 (1 31)。使用方法：LVAR. getDate ()，LVAR格式為標(biāo)準(zhǔn)日期格式，如YYYY/MM/DD,YYYY-MM-DD等。getDay：返回一周中的某一天 (0 6)。使用方法：LVAR. getDay ()getDayOfWeek：返回一周中的某一天的英文名稱(chēng)。使用方法：LVAR. getDayOfWeek ()getFullYear：返回日期中四位數(shù)字的年。使用方法：LVAR

17、. getFullYear ()getHours：返回日期中的小時(shí) (0 23)。getMilliseconds：返回毫秒數(shù)(0 999)。getMinutes：返回日期中的分鐘 (0 59)。getMonth：返回日期中的月份 (0 11)。getMonthName：返回日期中的月份名稱(chēng) (0 11)。getSeconds：返回日期中的秒數(shù)(0 59)。不行了，樓老師快精盡人亡了，以下請(qǐng)好事者自行研究吧！getTime：返回 1970 年 1 月 1 日至今的毫秒數(shù)。getTimezaneOffset：返回本地時(shí)間與格林威治標(biāo)準(zhǔn)時(shí)間 (GMT) 的分鐘差。getUTCDategetUTCDa

18、ygetUTCFullYeargetUTCHoursgetUTCMillisecondsgetUTCMinutesgetUTCMonthgetUTCSecondstoDateStringtoISOStringtoJSONtoLocaleDateStringtoLocalTimeStringtoLocaleStringtoTimeStringtoUTCStringvalueOfaddYearaddMonthaddDayaddHouraddMinuteaddSecondaddMillisecondparse：返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)。UTC：根據(jù)世界時(shí)返回 1970

19、年 1 月 1 日 到指定日期的毫秒數(shù)。六、動(dòng)態(tài)面板的使用動(dòng)態(tài)面板控件（Dynamic Panel）可以讓你實(shí)現(xiàn)高級(jí)的交互功能，實(shí)現(xiàn)原型的高保真度。動(dòng)態(tài)面板包含有多個(gè)狀態(tài)（states），每個(gè)狀態(tài)可包含一系列控件（你可以把一個(gè)狀態(tài)理 解成一個(gè)獨(dú)立的頁(yè)面）。任何時(shí)候都只有一個(gè)狀態(tài)（頁(yè)面）是可見(jiàn)的，或整個(gè)動(dòng)態(tài)面板可以被隱藏。結(jié)合交互動(dòng)作，可以讓動(dòng)態(tài)面板的狀態(tài)進(jìn)行隱藏、顯示和改變。 像添加其它控件一樣，可以在控件面板中拖放動(dòng)態(tài)面板控件到線框圖中。簡(jiǎn)單的說(shuō)，動(dòng)態(tài)面板就是展示在頁(yè)面不跳轉(zhuǎn)的情況下所能實(shí)現(xiàn)的交互狀態(tài)。而動(dòng)態(tài)面板的每一個(gè)狀態(tài)都可以看作是產(chǎn)生的一個(gè)新的交互結(jié)果。Axure中掌握動(dòng)態(tài)面板是非常重

20、要的一部分內(nèi)容，下面通過(guò)一個(gè)例子來(lái)了解動(dòng)態(tài)面板的使用第一步：拖動(dòng)動(dòng)態(tài)面板到主操作區(qū)，并設(shè)置好動(dòng)態(tài)面板相應(yīng)的大小，同樣也可以通過(guò)拖入其他元件再右鍵轉(zhuǎn)為動(dòng)態(tài)面板實(shí)現(xiàn)。（圖1）第二步：雙擊動(dòng)態(tài)面板，打開(kāi)動(dòng)態(tài)面板狀態(tài)管理，新建三個(gè)面板狀態(tài)，并相應(yīng)命名（注：平時(shí)使用Axure元件時(shí)需養(yǎng)成規(guī)范命名習(xí)慣，此處命名于演示方便圖2）第三步：分別雙擊演示狀態(tài)1、2、3進(jìn)入面板狀態(tài)頁(yè)面，并拖入相應(yīng)元件（此處以圖片演示）圖3、4、5第四步：回到主操作頁(yè)面，動(dòng)態(tài)面板會(huì)顯示最頂層的狀態(tài)元件；在此頁(yè)面添加三個(gè)按鈕，同樣轉(zhuǎn)為動(dòng)態(tài)面板，再為每個(gè)按鈕添加如圖6下方第二種狀態(tài)。第五步：分別為三個(gè)按鈕添加鼠標(biāo)點(diǎn)擊時(shí)事件，設(shè)置動(dòng)態(tài)面板

21、狀態(tài)。圖7、8、9第六步：設(shè)置完交互事件后，按F5快捷鍵進(jìn)入瀏覽器預(yù)覽，圖10為動(dòng)態(tài)面板顯示效果。七、母版的使用母版可以把項(xiàng)目中重復(fù)使用的部件集合起來(lái)，為了方便維護(hù)，可以將這些重復(fù)使用的部件做成母版，需要調(diào)用的時(shí)候直接從母版菜單欄拖拽過(guò)來(lái)。當(dāng)你修改母版的時(shí)候，所有調(diào)用到該母版的頁(yè)面或區(qū)域都會(huì)發(fā)生相應(yīng)變動(dòng)，就不用一個(gè)一個(gè)頁(yè)面地去修改了。母版使用說(shuō)明1、新增母版，在母版管理面板中，點(diǎn)擊新增母版2、也可以選中要轉(zhuǎn)為母版的元素，右鍵，點(diǎn)擊轉(zhuǎn)換為母版。3、在母版面板中可以添加母版、新增文件夾、向上移動(dòng)、向下移動(dòng)、降級(jí)、升級(jí)、刪除、搜索4、添加母版到頁(yè)面，拖拽母板到設(shè)計(jì)區(qū)域中。5、母板可以設(shè)置三種不同的拖

22、放行為：拖放到任何位置、鎖定母板位置、從母板脫離。 要改變母板行為，右鍵點(diǎn)擊母板 - 拖放行為，在彈出的子菜單中進(jìn)行選擇。你可以隨時(shí)修改母板行為，但是這只會(huì)影響到你當(dāng)前要拖放到設(shè)計(jì)區(qū)域的母板。母版使用示例1、拖動(dòng)母版到設(shè)計(jì)區(qū)域（圖中母版已經(jīng)鎖定到母版位置x=0 ,y=1184的位置）、雙擊母版進(jìn)入母版元件設(shè)置，圖中分為五個(gè)動(dòng)態(tài)面板，每個(gè)動(dòng)態(tài)面板有兩種面板狀態(tài)。3、在母版外的主設(shè)計(jì)頁(yè)面中，為動(dòng)態(tài)面板-萬(wàn)事通設(shè)置五種狀態(tài)（五種狀態(tài)分別對(duì)應(yīng)母版中五個(gè)動(dòng)態(tài)面板）4、由于動(dòng)態(tài)面板-萬(wàn)事通屬于母版外的元素，且為母版新增用例時(shí)，是不可能操做外部（母版外）元素的；所以此用例中，若要以母版的用例來(lái)操作動(dòng)態(tài)面板-

23、萬(wàn)事通，就需要在母版點(diǎn)擊目標(biāo)元件，增加一個(gè)觸發(fā)事件。、首先為母版添加相應(yīng)的觸發(fā)事件，分別命名為EventPhone、EventContacts、EventStore、EventLnn、EventMore。6、進(jìn)入母版，分別為母版中相應(yīng)的動(dòng)態(tài)面板添加觸發(fā)事件7、添加過(guò)觸發(fā)事件后，母版就可以控制母版外的元素了；回到主頁(yè)面，點(diǎn)擊母版在交互事件里就可以看到母版里添加的觸發(fā)事件。8、此時(shí)為已設(shè)置好的觸發(fā)事件添加交互以控制母版外的元素,分別雙擊EventPhone、EventContacts.添加交互事件。9、最終顯示效果如下八、中繼器的使用中繼器是Axure7.0之后更新的新功能，英文名為Repeater，就如其名一樣，Repeat重復(fù)數(shù)據(jù)的集