快速原型設計工具-Axure

sf2gis@163.com

2016年1月5日

2016年1月7日新增閃爍效果

2016年1月15日增加團隊專案

1  目標：快速構建GUI，具備基本演示功能，幫助確定介面。

能夠模擬正式程式，具有互動功能（演示），基本接近真實產品。

2 原理：使用HTML+JS生成基本網頁，模擬簡單邏輯。

Axure使用常用的控制元件和jQuery進行邏輯功能，模擬互動，產生較為真實的互動體驗。

3 流程：安裝Axure，新建網站，設計頁面，預覽，釋出

安裝Axure：官網http://www.axure.com/ ，綠色版(http://www.cr173.com/soft/31607.html )。

3.1 新建網站：File-》new會自動建立一個網站，包括Home和三個子頁面。

3.2 設計網頁：首先使用鉛筆在紙上繪製線框圖。然後在Axure中拖動控制元件（Axure中也叫元件，Widget等，一個意思）設計網頁。

設定控制元件名稱和屬性：控制元件名稱在最上面，屬性在屬性框中設定。

為控制元件設計事件響應：點選控制元件-》在右側的事件框中新增相應事件。

3.3 預覽：F5可以在預設瀏覽器中檢視HTML。

3.4 釋出：釋出為HTML或Word文件。

3.4.1釋出HTML：Publish-》Generate HTML Files。

Chrome需要下載外掛（chrome不允許本地檔案呼叫（認為是跨域））。

IE沒有成功。

3.4.2釋出World文件：Publish-》Generate World Document。

World文件包括各個頁面、分頁面的控制元件等截圖和描述。

4 方法：

參考：http://www.woshipm.com/rp/39203.html

http://jingyan.baidu.com/article/7c6fb4285f471580642c9029.html

http://www.doc88.com/p-5718140580162.html

http://bestwishtowzz.blog.163.com/blog/static/214565177201332455420553/

4.1 事件模型：事件使用分支設計，一個事件可以指定多個獨立的分支或條件分支。

4.1.1條件事件：在事件選項對話方塊中選擇新增條件，可以新增多個case，每個case執行一個條件。

4.1.2頁面事件：IDE中下部選項框的中部頁面，Page Interactions，可以設定整個頁面的事件。

參考：

http://zhidao.baidu.com/link?url=mm84xjik6EBaiE_7eBAxvAll1zeEcmAnky2-59a9bePVI62HGYSRNrPSKk1CQ3YvRRWIQBUmcp9xcPIay-mGhKqVMI3q8SnrM_76hmed18G

4.1.3部件事件：IDE右上角選項框第一個頁面，Widget Interactions，可以設定部件的事件。

4.2 模板Master：在Master中內容可以作為模板元件新增到其它頁面進行復用。

新增Master元件：點選Master的Add按鈕，新增一個元件。設計元件。

複用Master元件：右擊元件->新增到頁面，選擇要將元件新增到的頁面。指定頁面將全部新增元件。

 

4.3 隱藏、顯示皮膚DynamicPanel

參考：http://www.doc88.com/p-6983213896444.html

動態皮膚可以動態的顯示或隱藏，並設定切換時的動作。

選擇事件的響應函式對皮膚的顯示設定，可以顯示、隱藏或切換。

可以設定切換時的動畫效果。

可以設定當前按鈕在皮膚隱藏後的動作，是否隨皮膚的顯隱動態的改變位置。也可以設定切換時的動畫效果。

新增部件：雙擊皮膚-》選擇State-》在State編輯部件。

4.3.1 閃爍效果：參見：閃爍效果：在OnLoad（）時設定Panel為Toggle：觸發自動閃爍，OnShow（）和OnHide時也設定Toggle()（自動閃爍）。

4.3.2複製Master：Duplicate-》page只複製當前頁，branch所有子頁面都複製。

參考：http://blog.csdn.net/fyqcdbdx/article/details/7227323

4.4 匯入部件庫：使用特定的元件設計更加保真的介面

參考：http://jingyan.baidu.com/article/870c6fc32f8c8fb03fe4be82.html

下載部件庫，解壓：http://pan.baidu.com/s/1dDOMjPf

點選左側中部的Widgets皮膚-》LoadLibrary…-》載入.rplib模板庫。

4.5 變數：全域性變數和區域性變數

4.5.1目標：用於不同頁面間資料傳遞及部分資訊的讀寫。

4.5.2原理：全域性變數和區域性變數都將設定於data.js中，並設定為相應的值。可以在事件中使用變數控制和顯示。

4.5.3流程：新增變數，設定變數，使用變數。

新增變數：Project->global variables,彈出的選項卡中新增變數名和預設值。

 

設定變數：在事件對話方塊中選擇Variables->Set Variable Value，在變數列表中選擇要修改的變數，設定變數的值。

使用變數：在事件對話方塊中設定值的文字框右側有個fx，點選後進入編輯對話方塊，點選Insert variable and function，選擇需要的變數。

4.5.4方法：本地變數在fx編輯對話方塊中add locate variables中新增。

4.6 匯入頁面：匯入其它頁面或匯入相同頁面進行替換

File->Import from rp file->選擇來源.rp檔案，將顯示所有頁面供匯入。

選擇匯入頁面-》選擇匯入頁面的方式，如果本地不存在匯入的頁面，則預設是add，如果本地存在，則預設是Replace替換本地頁面。

 

匯入頁面後會選擇匯入母版、樣式、範圍、變數等，如果設定了相關的內容，請勾選（預設不選）。

參考：http://www.webppd.com/thread-9401-1-1.html

4.7 顯示網格輔助線：Gridand Guides

參考：http://blog.sina.com.cn/s/blog_5f33f0f50101l7cm.html

Arrange-》Grid and Guides-》show grid顯示網格線（預設不顯示）。

Arrange-》Grid and Guides-》grid settings，可以設定網格線的樣式。

Arrange-》Grid and Guides-》create guides建立輔助線（預設無）。也可以設定樣式。

4.8 備份與恢復

備份：File-》Backup Settings，可以設定備份時間，預設是15分鐘。

恢復：File->Recover file from backup，可以從備份檔案庫中恢復。

4.9 團隊專案：自帶SVN伺服器

參考：http://jingyan.baidu.com/article/ac6a9a5e643e432b653eac1b.html

4.9.1目標：多人協作共發同一個專案，每人負責其中的一部分頁面。

4.9.2原理：Axure7自帶SVN伺服器，建立團隊專案後將自己建立SVN伺服器倉庫（團隊專案路徑）。在Axure中可以操作SVN版本庫。

4.9.3流程：建立團隊專案，共享團隊專案，checkout本地操作，checkin合併到倉庫，開啟共享專案，檢查更新。

4.9.3.1  建立團隊專案：選單-》Team-》Create TeamProject From Current File開啟團隊專案建立對話方塊嚮導。在對話方塊中依次輸入專案名稱，團隊專案路徑(要與本地專案路徑不同)，本地專案路徑。

  

4.9.3.2 共享團隊專案路徑：右鍵團隊專案屬性-》共享，將團隊專案路徑設定為共享，其它團隊成員將訪問此地址。

4.9.3.3  checkout本地操作：從本地專案路徑開啟專案，在需要編輯的頁面右鍵-》checkout，編輯。

4.9.3.4  checkin合併到倉庫：右鍵checkout的頁面-》checkin，更改將合併到共享倉庫。

4.9.3.5  其他成員開啟共享專案：Team-》Get and Open Team Project-》輸入共享的團隊專案目錄-》輸入本地目錄-》開啟團隊專案，可以看到上一步的更改。

4.9.3.6  檢查更新：一個成員修改後合併到團隊專案，其它成員點選頁面右鍵或Team-》Get all changes from Team Directory可以獲取更新。

 

4.10 流程圖

參考：http://www.laixue8.com/ixd/view.asp?ArticleID=483&Page=5

4.10.1目標：頁面使用流程等邏輯圖，用於理解和說明原型。

4.10.2原理：流程與原型結合，從邏輯層面說明原型。

4.10.3流程：繪製流程紙圖，設計原型，建立流程圖。

4.10.3.1 繪製流程紙圖：使用鉛筆繪製紙圖，並以此作為原型的基礎。

4.10.3.2 設計原型：設計原型圖。

4.10.3.3 建立流程圖：以紙圖為基礎，將原型生成流程圖的引用頁，生成流程圖。

建立流程圖：新增新頁面-》右鍵-》Diagram Type-》Flow。

在左側部件欄中選中Flow，繪製流程圖。

原型圖中相關的頁面可以直接在頁面上右擊-》GenerateFlow Diagram-》standard，生成處理框。或者繪製框後在右側屬性框中選擇引用面。

  

5 示例

5.1 閃爍效果：在OnLoad（）時設定Panel為Toggle：觸發自動閃爍，OnShow（）和OnHide時也設定Toggle()（自動閃爍）。

可以設定動畫效果和延時提升體驗。

 

5.2 SVN（不推薦）：由於Axure自帶SVN，共享專案就是一個SVN的伺服器版本，一般採用將團隊專案設定為共享目錄實現團隊合作，也可以將團隊專案託管到SVN伺服器實現SVN的二層版本服務。

參考：http://www.zhihu.com/question/23371280

5.3 圖表繪製：結合Excel繪製圖表

如果資料量比較大的圖表，可以直接在Excel中處理好資料，生成相應的統計圖表後，直接copy，然後在Axure中Paste生成Table（無格式）。

圖則需要使用Image部件再指定圖片檔案。