本博客參考課程《Axure原創教程網》
地址：http://www.iaxure.com/
一、下載安裝與漢化
1、下載與安裝
https://www.axure.com/
https://www.axure.com/downloadthanks?dl=80pc
或者
https://pan.baidu.com/s/1s399xRCGqUBpa__ED8yqGg，密碼：d8m4
2、安裝漢化包
http://downloads.iaxure.com/AxureRP8_CHS_V1.6.6.zip
將下載的漢化包解壓后得到文件“default”，並把該文件替換到**\Axure\Axure RP 8\Lang\default下，例如： C:\Program User\Axure\Axure RP 8\Lang\default
3、下載和安裝元件庫
元件庫可以自己制作，也可以從網絡上下載，參考元件庫：http://downloads.iaxure.com/IaxureRP8V1.2.zip
載入元件庫：
添加選擇添加元件庫
4、注冊激活
Axure RP 7.0注冊碼:
用戶名：axureuser
序列號：8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+tqEV4LG
在“幫助”——“管理授權”中輸入注冊信息進行注冊即可。
二、Axure RP 7介紹
7.0后新增的模塊 動態面板
1、站點地圖：設置增加站點及子站點
2、頁面樣式：背景、對齊（居左、居中）、背景圖片、重復
3、頁面交互：頁面載入時、窗口調整尺寸時、窗口滾動時
4、頁面注釋（說明、含自定義說明）
4、母版：新增母板后通過“右鍵母版”——“新增頁面”后會將母版同步到對應的頁面中(也可以移除母版)
三、元件庫（新建、編輯/修改、下載）
C:\Users\ThinkPad\Documents\Axure\Libraries
1、創建元件庫，確認后會打開元件庫編輯器
2、創建元件：一個元件庫可以包含多個元件，新建保存后刷新或載入元件庫即可
添加矩形元件后可以調整（點擊矩形元件右上方的小黑點可以選擇形狀）元件形狀為“圓形”
現有元件庫也可以進行編輯，也可以下載元件庫（從Auxre官網下載）
下載鏈接到的地址：https://www.axure.com/support/download-widget-libraries
四、元件的其他特性
1、元件的交互事件：鼠標打擊時、鼠標移入時、鼠標移除時、即更多事件
2、元件的注釋：可以新增配置（也可以直接用描述說明）
3、元件命名：通過名稱可以區分相同元件類型的事件區分，盡量用英文字母命名
4、元件的屬性和樣式（不同元件有所不同）
5、元件的管理（具備搜索等多種設置）：
五、原型實例-登錄界面
1、取色器
將需要取色的目標選取一小塊添加到Axure編輯窗口，在背景顏色選項中點擊“取色器”進行取色即可。
2、圖片logo的處理
添加圖片Image（第一個元件、用截圖軟件看他的坐標位置）
雙擊圖片Image元件添加本地文件,選中按照當前元件尺寸（選擇“否”）。
裁剪圖標：如果圖片是通過頁面截取過來的，可以有很多留白，在圖片屬性里，選擇“裁剪”——調整保留區域后“雙擊”即可把大量留白去除。
切割圖片：在圖片屬性中選擇裁剪，可以將目標圖片裁剪為2分或者4分。
保留圖片清晰度：
- 添加圖片，裁剪取對應留白后
- 選擇“固定邊角范圍”——通過選擇圖片四周的“三角形，把圖片有內容的區域都包含進來”——設置W和H即可。
- 下圖右側圖標清晰度比左側高
3、處理文本框
添加區域矩形框，用來表示用戶名和密碼登錄區域，區域坐標參考設置，拖動時會標識矩形框與logo圖標的中心對齊線
設置矩形框的線條顏色
4、設置鼠標懸停時事件（字體為藍色）
5、設置元件提示信息（鼠標移動到元件上時的文字提示）-在“元件提示”里設置
6、發布（生成HTML文件,F8）或預覽（F5）
7、效果圖
8、原型對應的HTML代碼內容
<!DOCTYPE html> <html> <head> <title>主頁</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/> <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/> <link href="data/styles.css" type="text/css" rel="stylesheet"/> <link href="files/主頁/styles.css" type="text/css" rel="stylesheet"/> <script src="resources/scripts/jquery-1.7.1.min.js"></script> <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script> <script src="resources/scripts/axure/axQuery.js"></script> <script src="resources/scripts/axure/globals.js"></script> <script src="resources/scripts/axutils.js"></script> <script src="resources/scripts/axure/annotation.js"></script> <script src="resources/scripts/axure/axQuery.std.js"></script> <script src="resources/scripts/axure/doc.js"></script> <script src="data/document.js"></script> <script src="resources/scripts/messagecenter.js"></script> <script src="resources/scripts/axure/events.js"></script> <script src="resources/scripts/axure/action.js"></script> <script src="resources/scripts/axure/expr.js"></script> <script src="resources/scripts/axure/geometry.js"></script> <script src="resources/scripts/axure/flyout.js"></script> <script src="resources/scripts/axure/ie.js"></script> <script src="resources/scripts/axure/model.js"></script> <script src="resources/scripts/axure/repeater.js"></script> <script src="resources/scripts/axure/sto.js"></script> <script src="resources/scripts/axure/utils.temp.js"></script> <script src="resources/scripts/axure/variables.js"></script> <script src="resources/scripts/axure/drag.js"></script> <script src="resources/scripts/axure/move.js"></script> <script src="resources/scripts/axure/visibility.js"></script> <script src="resources/scripts/axure/style.js"></script> <script src="resources/scripts/axure/adaptive.js"></script> <script src="resources/scripts/axure/tree.js"></script> <script src="resources/scripts/axure/init.temp.js"></script> <script src="files/主頁/data.js"></script> <script src="resources/scripts/axure/legacy.js"></script> <script src="resources/scripts/axure/viewer.js"></script> <script type="text/javascript"> $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; }; $axure.utils.getOtherPath = function() { return 'resources/Other.html'; }; $axure.utils.getReloadPath = function() { return 'resources/reload.html'; }; </script> </head> <body> <div id="base" class=""> <!-- Unnamed (Image) --> <div id="u0" class="ax_image" title="基於WordPress"> <img id="u0_img" class="img " src="images/主頁/u0.png"/> <!-- Unnamed () --> <div id="u1" class="text"> <p><span></span></p> </div> </div> <!-- Unnamed (形狀) --> <div id="u2" class="ax_形狀"> <img id="u2_img" class="img " src="images/主頁/u2.png"/> <!-- Unnamed () --> <div id="u3" class="text"> <p><span></span></p> </div> </div> <!-- Unnamed (形狀) --> <div id="u4" class="ax_文本段落"> <img id="u4_img" class="img " src="resources/images/transparent.gif"/> <!-- Unnamed () --> <div id="u5" class="text"> <p><span>用戶名</span></p> </div> </div> <!-- Unnamed (形狀) --> <div id="u6" class="ax_文本段落"> <img id="u6_img" class="img " src="resources/images/transparent.gif"/> <!-- Unnamed () --> <div id="u7" class="text"> <p><span>密碼</span></p> </div> </div> <!-- Unnamed (文本框) --> <div id="u8" class="ax_文本框"> <input id="u8_input" type="text" value=""/> </div> <!-- Unnamed (文本框) --> <div id="u9" class="ax_文本框"> <input id="u9_input" type="text" value=""/> </div> <!-- Unnamed (復選框) --> <div id="u10" class="ax_復選框"> <label for="u10_input"> <!-- Unnamed () --> <div id="u11" class="text"> <p><span>記住我的登錄信息</span></p> </div> </label> <input id="u10_input" type="checkbox" value="checkbox"/> </div> <!-- Unnamed (形狀) --> <div id="u12" class="ax_形狀"> <img id="u12_img" class="img " src="images/主頁/u12.png"/> <!-- Unnamed () --> <div id="u13" class="text"> <p><span>登錄</span></p> </div> </div> <!-- Unnamed (形狀) --> <div id="u14" class="ax_文本段落"> <img id="u14_img" class="img " src="resources/images/transparent.gif"/> <!-- Unnamed () --> <div id="u15" class="text"> <p><span>注冊</span></p> </div> </div> <!-- Unnamed (形狀) --> <div id="u16" class="ax_文本段落"> <img id="u16_img" class="img " src="resources/images/transparent.gif"/> <!-- Unnamed () --> <div id="u17" class="text"> <p><span>|</span></p> </div> </div> <!-- Unnamed (形狀) --> <div id="u18" class="ax_文本段落" title="找回密碼"> <img id="u18_img" class="img " src="resources/images/transparent.gif"/> <!-- Unnamed () --> <div id="u19" class="text"> <p><span>忘記</span><span>密碼？</span></p> </div> </div> <!-- Unnamed (形狀) --> <div id="u20" class="ax_文本段落" title="不知道自己在哪？"> <img id="u20_img" class="img " src="resources/images/transparent.gif"/> <!-- Unnamed () --> <div id="u21" class="text"> <p><span>←</span><span>回到Axure原創教程網</span></p> </div> </div> </div> </body> </html>
六、交互事件-鏈接
1、通過copy和部分調整，新增登錄、注冊和找回密碼的原型界面
以下界面從左到右分別是“登錄”、“注冊”、“找回密碼”
2、新增事件——注冊/登錄/找回密碼/外面鏈接
選擇要增加事件的“站點”（這里是“登錄”）
選擇要添加事件的“元件”（這里是“注冊”）
增加事件，通過雙擊事件即可進入事件設置界面，這里事件為“鼠標單擊時”
給事件命名
設置鏈接打開鏈接的方式為“當前窗口”
添加要鏈接的地址“當前項目”或“外部地址”，這里鏈接到“內部項目”的“注冊”界面
同樣的事件設置好之后可以通過復制事件給其他元件。
七、交互事件-獲取焦點
1、給文本框命名，用戶名對應的文本框命名為“name”，密碼對應的文本框命名為“password”
選中對應的文本框，在“文本框 名稱”中命名文本框
2、新增事件
選中文本標簽“用戶名”新增“鼠標單擊時”事件
添加“獲取焦點”事件
添加“獲取焦點的元件”為“name”即“用戶名”文本框
3、增加"密碼"事件，用“用戶名”的方法添加事件，或者通過復制拖動“用戶名”事件copy調整即可，說明如下
選中“用戶名”標簽和“name”文本框，按住啊Ctrl並往下拖動。
修改“用戶名”為“密碼”
修改“name”為password
這樣“密碼”文本標簽和文本框對應的事件增加完成。
4、設置頁面載入時獲取“name”文本框獲取焦點
八、設置文本框類型-密碼加密顯示
通過設置“password”文本框的類型為“密碼”即可，文本框默認類型問“Text”
九、事件交互-添加條件
鼠標單擊“登錄”時觸發判斷條件，所以這里對“登錄按鈕”新增“鼠標單擊時”事件
選中“登錄”元件，添加“鼠標單擊時”事件
“添加條件”
判斷類型“元件文字”，判斷元件“name/password”,判斷兩個元件的值“全部”為空時事件才能往下執行。
添加完條件后，再繼續添加“獲取焦點”事件，事件指向“name文本框”
十、詳細的條件設置
1、當文本框內容等於“蒼老師”，在單擊“提交”按鈕時，文本標簽顯示“下載”
對“提交”按鈕增加“鼠標打擊時”事件
增加條件：如果文本框內容為“蒼老師”，執行動作“設置文本” 文本標簽“dognzuo”的值為“下載”
2、當“文本框”內容等於“常老師”，文本標簽提示“下載”，否則提示“找其它片子”
3、多條件判斷-串行
如果“文本框”內容為蒼老師，文本標簽顯示“下載”
如果是“小澤老師”，顯示“播放”
如果是“明步老師”，顯示“收藏”
其它“關閉網頁”
分別通過添加用例來實現，Case 4不需要再設置條件，直接無條件“設置文本”內容為“關閉網頁即可”
4、多條件判斷-並行
如果“文本框”內容為蒼老師，文本標簽顯示“下載”
如果是“小澤老師”，顯示“播放”
如果是“明步老師”，顯示“收藏”
其它“關閉網頁”
以上動作處理完成后，再執行（無條件執行）動作“錄視頻”-----鼠標右鍵事件Case 5，選中“切換為IF”即可。
5、用戶名/密碼為空的用例
按照用例場景逐條設置，如果設置文本元件的字體有特殊要求，需要選擇“富文本”
十、動態面板
動態面板：具有多層空間的元件容器
1、元件轉為動態面板
可以選中要放入動態面板的元件，右鍵，可以轉換為動態面板
2、隱藏元件，並"拉動元件"
3、顯示元件，並“拉伸/推動元件”
4、效果
5、使用動態面板的“移動事件”
將需要移動的元件全部選中，右鍵——轉換為“動態面板”，雙擊編輯動態面板，在面板中編輯事件。
新增“移動”元件事件，讓“動態面板”移動
並設置移動相對距離/絕對距離
設置動畫效果（這里設置為“線性”移動）
設置動畫時長（單位“毫秒”）
效果：根據事件，登錄等文本框會左右晃動並提示相關信息。
十一、變量
全局變量：原型各處都可以使用。
局部變量：只能作用於一個動作，不能被另外的動作獲取。
1、全局變量設置
2、在事件中設置變量
3、效果
4、修改變量值
5、使用全局變量/局部變量
6、公式
只有在兩個中括號中的才能當做變量來計算[[]]，括號外的只能當着時字符串使用
a=2
b=3
[[a*b]]運算等於6
[[2]]*[[3]]運算等於字符串“2*3”
[[shu1]]*[[shu2]]=[[shu1*shu2]] 輸出“2*3=6”
