Axure rp原型設計工具的介紹

軟件工程綜合實踐專題  第三次做業

1、Axure rp簡介

 

  Axure RP是一款專業的快速原型設計工具。Axure（發音：Ack-sure），表明美國Axure公司；RP則是Rapid Prototyping（快速原型）的縮寫。

  Axure RP是美國Axure Software Solution公司旗艦產品，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家可以快速建立應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。做爲專業的原型設計工具，它能快速、高效的建立原型，同時支持多人協做設計和版本控制管理   。 Axure RP的使用者主要包括商業分析師、信息架構師、產品經理、IT諮詢師、用戶體驗設計師、交互設計師、UI設計師等，另外，架構師、程序員也在使用Axure。

2、Axure rp 界面

 

1-主菜單工具欄：大部分相似office軟件，不作詳細解釋，鼠標移到按鈕上都有對應的提示。

 2-主操做界面：繪製產品原型的操做區域，全部的用到的元件都拖到該區域。

 3-站點地圖：全部頁面文件都存放在這個位置，能夠在這裏增長、刪除、修改、查看頁面，也能夠經過鼠標拖動調整頁面順序以及頁面之間的關係。

 4-axure元件庫：或者叫axure組件庫、axure部件庫，全部軟件自帶的元件和加載的元件庫都在這裏，這裏能夠執行建立、加載、刪除axure元件庫的操做，也能夠根據需求顯示所有元件或某一元件庫的元件。

 5-母版管理：這裏能夠建立、刪除、像頁面頭部、導航欄這種出如今每個頁面的元素，能夠繪製在母版裏面，而後加載到須要顯示的頁面，這樣在製做頁面時就不用再重複這些操做。

 6-頁面屬性：這裏能夠設置當前頁面的樣式，添加與該頁面有關的註釋，以及設置頁面加載時觸發的事件onpageload。

 7-元件屬性：這裏能夠設置選中元件的標籤、樣式，添加與該元件有關的註釋，以及設置頁面加載時觸發的事件；

 A-交互事件:元件屬性區域閃電樣式的小圖標表明交互事件；

 B-元件註釋：交互事件左面的圖標是用來添加元件註釋的，在這裏咱們可以添加一些元件限定條件的註釋，好比：文本框的話，能夠添加註釋指出輸入字符長度不能超過20。

 C-元件樣式：交互事件右側的圖標是用來設置元件樣式的，能夠在這裏更改原件的字體、尺寸、旋轉角度等，固然也能夠進行多個元件的對齊、組合等設置。

 8 動態面板：這個是很重要的區域，在這裏能夠添加、刪除動態面板的狀態，以及狀態的排序，也能夠在這裏設置動態面板的標籤；當繪製原型動態面板被覆蓋時，咱們能夠在這裏經過點擊選中相應的動態面板，也能夠雙擊狀態進入編輯。

 Axure rp的界面就介紹到這裏，界面中的各個區域基本上在作產品原型的過程當中，使用都很頻繁，因此建議不要關閉任何一個區域。若是不當心關閉了，能夠經過主菜單工具欄—視圖—重置視圖來找回。

 

3、Axure rp 功能介紹

（1）主菜單工具欄

 

 

 咱們在軟件頂部能夠看到大多數office軟件都有的操做工具欄，咱們能夠經過這裏的文件進行對文件的建立編輯和打開等操做，編輯視圖，項目等和大部分的office操做同樣

 

（2）頁面編輯區域

 

 

頁面區域是進行頁面的編輯的區域，咱們在這裏能夠簡單編輯本身的各個頁面直接的父子關係還能夠建立新的頁面和刪除，在這裏能夠切換頁面，咱們經過直接點擊來進行該頁面的查看，右上角的三個按鈕是添加頁面，添加文件夾，查找內容，這裏的查找在咱們頁面不少時候經過這個按鈕來直接找到定位到咱們要查找的文件頁面

 

（3）主操做界面

 

 

 

頁面最中間的位置，咱們在這裏直接對頁面進行編輯和實時的查看

 

（4）Axure rp的線性框圖元件

 

 

 

l  圖片  圖片元件拖入編輯區後，能夠經過雙擊選擇本地磁盤中的圖片，將圖片載入到編輯區，axure會自動提示將大圖片進行優化，以免原型文件過大；選擇圖片時能夠選擇圖片原始大小，或保持圖片元件的大小。 

l  文本  在網頁中文本的名稱是lable，用於頁面中添加說明文字、文字鏈接，或一些動態的提示。  

l  矩形  矩形的應用比較普遍，好比做爲頁面的背景、按鈕、以及一些元件的遮蓋等；矩形的形狀能夠經過鼠標右鍵點擊–編輯選項—改變形狀，來變成咱們須要的形狀，好比作選項卡時候咱們須要頂部圓角的矩形，就能夠經過改變矩形的形狀來實現。  

l  佔位符  製做原型時，能夠用它來代替對一些沒有交互或者交互比較簡單容易說明的區域；也能夠作成關閉按鈕。佔位符在保真比較高的產品原型中做用不大。  

l  圓角矩形  這個我的認爲是由於圓角矩形應用普遍，因此單獨拿出來做爲元件給使用者，免去了對矩形的設置。  

l  動態面板  很是重要的axure元件，必需要學會使用的元件，動態面板的顯示、隱藏、多狀態等，都是很是有用的。在這裏不過多介紹，詳細介紹請參考：小樓axure圖文教程（五）動態面板的使用。  

l  水平線  就是一條水平的線，能夠做爲表示頁面一些區域分割時使用，好比在兩塊不一樣區域之間添加一條水平線，來明顯的區分。水平線能夠經過設置元件屬性中的角度Rotº變成斜線來使用。  

l  垂直線  沒什麼好說的，和水平線同樣的做用。  l  圖片熱區  用於點擊圖片中某個區域產生交互事件時使用，圖片熱區也是矩形的一種，能夠經過設置矩形無邊框，背景色100%透明度來實現。  

l  文本框（單行）  用於輸入文字的axure元件，用於登陸、標題、密碼框（鼠標右鍵–編輯選項–隱藏文本）等功能。  

l  文本框（多行）  從字面意思就知道了它的功能，用於實現更多文字內容輸入的axure元件，用於回覆、評論、微博發佈框這類的功能。  

l  下拉列表（框）  鼠標點擊時展開多個選項的axure元件，主要用來類別選擇或多條件查詢效果時使用。  

l  列表框  一個多選項的列表，帶滾動條效果，我的認爲樣子很醜，應用不是不少，應用場景能夠參考word自定義快速訪問工具欄中選擇添加項的效果。  

l  複選框  複選框用於同類別內容能夠同時選擇多個時候使用，好比註冊時候我的興趣的選擇，又好比批量刪除郵件時選擇多個郵件的功能。  

l  單選按鈕  多個選項僅能選擇其一時候使用，好比性別選擇。多個單選按鈕聯動效果須要同時選中多個須要聯動的單選按鈕—鼠標右鍵—編輯選項–指定單選按鈕組來實現。不嫌麻煩的話也能夠經過設置每一個單選按鈕的onclick事件來實現。  

l  內部框架  用於在頁面中嵌入其餘頁面的axure元件，能夠設置好大小後雙擊它，指定要嵌入的頁面。框架能夠經過編輯選項取消滾動條，應用場景多見於網站後臺原型和移動互聯網產品原型。  

l  表格  表格很常見，就很少作解釋，每一個表格均可以設置單獨的事件，可是axure還不支持單元格的合併。  

l  菜單縱向  主要用於網站導航。多使用於網站後臺。  

l  菜單橫向  主要用於網站導航，多使用於網站前臺。  

l  樹  主要用於網站導航。多使用於網站後臺。

 

（5）母版管理

 

 

對咱們使用的母版進行編輯操做

 

（6）頁面屬性

 

這裏能夠設置當前頁面的樣式，添加與該頁面有關的註釋，以及設置頁面加載時觸發的事件onpageload。

 

（7）概要

 

 

 

直觀的在這個頁面看到咱們的所完成的頁面的關係以及各個屬性也能夠點擊進行操做

 

（8）完成演示

 

 

咱們點擊預覽頁面

 

 

能夠在新彈出的頁面中看到咱們創建完成的頁面

 

3、Axure rp 的特色

 

1.Axure RP快速建立帶註釋的wireframe文件，並可根據所設置的時間週期，軟件自動保存文檔，確保文件安全。

 

2.Axure RP在不寫任何一條html與javascript語句的狀況下，經過建立的文檔以及相關條件和註釋，一鍵生成html prototype演示。

 

3.Axure RP根據設計稿，一鍵生成一致而專業的word版本的原型設計文檔。

 

4、Axure rp 功能

一.網站構架圖(Site Structure) AxureRP能夠快速繪製樹狀的網站構架圖，並且可讓構架圖中的每個頁面節點，直接鏈接到對應網頁。   Axure RP軟件畫面　

　      

二.示意圖(Wireframe) Axure RP內建了許多會常用到的widget元件，例如：按鈕(Button)、圖片(Image)、文字面板(Text Panel)、選擇鈕(Radio Button)、下拉式菜單(Droplist)。  　

　

三.流程圖(Flowchart)AxureRPFlowDiagram快速創建流程圖就像創建wireframe同樣容易，Flow Widget中有設計流程圖時會常常用到的形狀，您能夠輕鬆在流程之間加入鏈接線並設定鏈接的格式。

　　

四.交互設計(InteractionDesign) 大多數的widget能夠對一個或多個事件產生動做，包括OnClick、OnMouseOver和OnMouseLeave等 　

　

五.自動輸出網站原型(HTML Prototype): Axure　RP能夠將wireframe，輸出成符合InternetExplorer或Firefox等不一樣瀏覽器的HTML prototype。 　

　

六.自動輸出word格式規格文件(Specification) Axure RP能夠輸出Word的格式的文件，規格文件包含了目錄、網頁清單、網頁和附有註解的Master、Annotation、Interaction和Widget特定的資訊，以及結尾文件(例如：附錄)，規格的內容與格式也能夠依據不一樣的閱讀對象來變動

 

5、Axure rp 下載安裝

（1）下載地址：https://www.axure.com/download

 

 

（2）安裝

安裝教程：https://blog.csdn.net/sinat_34104446/article/details/82385032

 

 

 

數據參考：

（1）CSDN  Axure rp安裝教程https://blog.csdn.net/sinat_34104446/article/details/82385032

（2）百度百科  https://baike.baidu.com/item/axure%20rp/9653646?fr=aladdin

（3）我的博客 https://www.cnblogs.com/xpengfee/archive/2012/09/07/2675422.html