學習Axure RP原型設計

1 概述

原型設計是應用開發設計的第一要素。好的原型設計不只能夠起到溝通的做用，並且對客戶而言應用程序擁有更直觀的體現。原型設計經過內容和結構展現以及界面佈局編排，實如今開發前期用戶與產品進行交互。提升用戶對項目的承認度，有利於項目的推動。下面爲你們介紹一款原型設計工具——Axure RP。

2 名詞解釋

Axure RP：Axure RP是一個專業的快速原型設計工具。Axure，表明美國Axure公司；RP則是Rapid Prototyping的縮寫，譯爲快速原型。

3 工具介紹

Axure RP是美國Axure Software Solution公司旗艦產品，是一個專業的快速原型設計工具，負責定義需求和規格、設計功能和界面的專家可以快速建立應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。做爲專業的原型設計工具，它能快速、高效的建立原型，同時支持多人協做設計和版本控制管理。

3.1 應用範圍

Axure的可視化工做環境可讓你輕鬆快捷的以鼠標的方式建立帶有註釋的線框圖。不用進行編程，就能夠在線框圖上定義簡單鏈接和高級交互。在線框圖的基礎上，能夠自動生成HTML（標準通用標記語言下的一個應用）原型和Word格式的規格。

Axure RP的使用者主要包括商業分析師、信息架構師、可用性專家、產品經理、IT諮詢師、用戶體驗設計師、交互設計師、界面設計師等，另外，架構師、程序開發工程師也在使用Axure。

3.2 經常使用功能

Axure的軟件界面總的來講，能夠分爲9大模塊

1.  菜單欄：和大部分的軟件界面同樣，都是一些常規的文件、編輯、視圖等。
2.  工具欄：是頁面進行編輯的一些快捷操做，主要有字體設置、大小設置、頁面顯示大小和Axure自己自帶的一些快捷操做等。
3.  站點地圖：呈樹狀結構、能夠添加、刪除頁面、也能夠對設計中的頁面進行重命名操做。
4.  部件區域：組件集中地帶：矩形組件、圖片組件、動態面板組件……使用方式是直接拖動部件到頁面編輯區域。
5.  母版區域：共用，複用。
6.  頁面編輯區域：拖動相關的部件進行線框圖編輯和交互具體的實施。
7.  頁面交互區域：設置頁面屬性，交互樣式。
8.  部件屬性區域：組件的注視、組件的交互、組件的屬性編輯。
9.  動態面板區域：設置動態面板的可視與隱藏。

 

3.3 環境搭建

輸入https://www.axure.com.cn/網址，進入Axure官網裏點擊下載項，就能看的Axure RP的下載連接了。

下載完成後的安裝包如圖：

雙擊安裝包會彈出安裝嚮導

 

點擊下一步

 

勾選「我贊成」，點擊下一步。

 

選擇安裝路徑點擊下一步。

 

點擊下一步

 

點擊下一步

 

把運行的勾選項去掉，安裝的是英文版，須要進行漢化，因此先不要運行。在網上找一個漢化包，漢化的過程網上都有，這裏不作介紹了。安裝完成後桌面會出現一個快捷方式，雙擊就能夠打開Axure RP軟件了。

4 樣例講解

4.1 前期準備

首先須要準備原型設計要用到的素材，輸入網站http://www.agileai.com，到 數通暢聯官網把須要用到的圖片，logo，圖標和文字下載下來備用。

1. 打開Axure RP軟件，它和大多數的設計軟件的佈局類似，這裏不一一介紹了。點擊工程，選擇頁面樣式編輯器，在頁面樣式編輯器裏有對齊，字體選項，將頁面調試爲居中顯示，字體選擇宋體。

 

2. 點擊佈置，選擇網格和輔助線，根據須要進行調試。網格和輔助線對設計會起到輔助做用。

 

4.2 編輯圖片

1. 先從數通暢聯官網首頁的頂部開始，在庫裏拖拽圖片到設計區。

 

2. 雙擊圖片，會讓你選擇文件，選擇數通暢聯logo。

 

3. 效果圖以下：

 

按一樣的方式繼續搭建頂部。接下來遇到關於圖片的操做都如上所述，就再也不作講解了。

4. 頂部設計好後點擊預覽按鈕，就可在瀏覽器裏預覽效果了。

 

5. 預覽效果如圖：

 

6. 在頁面處右鍵能夠重命名，重命名後，在瀏覽器裏預覽時，會顯示出頁面名稱。

 

4.3 導航菜單

1. 作導航，在庫裏選擇菜單-水平，將其拖拽到設計區。

 

2. 默認是三個，點擊右鍵能夠新增菜單和子菜單。

 

3. 選中菜單，在右側編輯區選擇樣式更改導航背景色和字體顏色。在編輯區上面能夠給元件起名，建議採用英文命名，命名格式例如PasswordInput01或Password01，它的含義是序號01的密碼輸入框。格式說明：「Password」表示主要用途；「Input」表示元件類型，通常狀況下可省略，當有不一樣類型的同名元件須要區分或名稱不能明確表達用途的時候使用；「01」表示出現多個同名元件時的編號；單詞首字母大寫的書寫格式便於閱讀

4. 導航編輯完後爲其添加鼠標移動效果，如圖：

 

5. 點擊預覽，查看效果。

 

4.4 滾動字幕

1. 作導航下面的當前位置。在庫裏拖拽矩形到設計區，長度和導航一致。添加圖標，在庫裏選擇單行文本，輸入「當前位置：」和「首頁」。

2. 在「當前位置」的右側是滾動的文字，是動態的，在庫裏選擇動態面板，調整大小，放到右側。

 

3. 雙擊動態面板，彈出動態面板狀態管理。點擊「+」新增狀態。

 

4. 雙擊State1，進入編輯頁面，如圖：

 

5. 選擇單行文本拖動到動態面板上，並輸入內容。設置鼠標懸停時，字體顏色爲紅色。

 

6. 三個狀態都編輯完成後，返回原編輯頁，在編輯區裏雙擊載入時。

 

7. 彈出編輯框，在編輯框裏設置動態面板的動做。如圖：

 

8. 點擊預覽，就能看到滾動的效果了。

 

4.5 輪播圖片

1. 作輪播圖，輪播圖也是動態的，一樣也須要動態面板。將動態面板拖動致設計區，調整位置和大小，並設置狀態。而後在添加一個圖片切換指示按鈕，也是用動態面板，添加狀態，在每一個狀態裏顯示不一樣的指示樣式。如圖：

2. 點擊右側編輯區裏的載入時，設動畫效果。設置的參數要和輪播的圖片對應。設置參數如圖：

 

3. 點擊預覽，查看效果。

 

接下來配置輪播圖下面的內容，配置這些內容時用上面講到的技術就能夠了，就不作過多說明了。

4.6 返回頂部

在最下面有一個回到頂部的按鈕，在庫裏找個矩形和一個箭頭，按快捷鍵Ctrl+G，將其組合，而後右鍵，轉換爲動態面板。

 

2. 在庫裏在選擇一個佔位符，放到最頂端，透明度設置爲0。

 

3. 選擇返回頂部按鈕，設置鼠標單擊時的參數，以下圖：

 

4. 點擊肯定，返回頂部按鈕就設置完成了。

4.7 懸浮效果

作右側的歡迎諮詢，它是浮動在右側的。按照歡迎諮詢的樣式編輯好後，轉換爲動態面板，選擇固定到瀏覽器，設置參數如圖：

 

2. 到這裏，數通暢聯官網首頁的內容所有作完了，點擊預覽，就能夠看到以假亂真的設計原型了。

 

4.8 生成文件

1. 預覽沒有問題後，點擊發布按鈕，生成html文件。

 

2. 彈出編輯框，選擇生成路徑，點擊生成，就能夠生成html文件了。

 

5 心得總結

原型設計是在項目的設計階段進行的，原型設計對後期的項目開發啓到了很是重要的做用，若是設計作的不到位，在開發階段就會陷入困境。有一個好的原型設計，在和客戶談合做時也會啓到很是好的效果，因此學會原型設計很是重要。

在這裏只是簡單的介紹了Axure RP工具的使用，它還有許多強大的功能，若是您感興趣，能夠到Axure RP官網進行學習。