Axure基本使用教程+示例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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