人都是產品經理旗下【起點學院】推出產品經理“365天”成長計劃，BAT大牛帶你學產品！

一、Axure交互

Axure交互是指把靜態線框圖變成可點擊的交互式HTML原型的功能。

每個Axure交互有三個基本的信息單元組成，即When、Where和What。

• When：什么時候發生交互動作？在Axure術語中，用事件（Events）來表示When。例如：瀏覽器中加載頁面時，用戶點擊一個控件后。
• Where：交互在哪里發生？ 任何一個控件都可以建立交互動作，如矩形框、單選按鈕或下拉列表，或者一個頁面或模板線框圖。
• What：將發生什么 在Axure中，把這是要發生的稱為動作（Actions）。動作定義了交互的結果。例如，在頁面加載時，將一個動態面板編程一種指定狀態。

二、示例

本示例在靜態線框圖的基礎上進行構建。

使用簡單詞語定義交互

用戶點擊 全局導航欄 上某個Tab時，會鏈接到對應的頁面。新打開的頁面將取代當前頁面。使用W3C拆解上述過程。

• When：用戶單擊時
• Where：全局導航欄上的一個Tab矩形控件
• What：鏈接到相應的頁面
• Condition: 沒有條件

Axure交互界面

Axure事件

Axure交互由兩類Axure事件觸發。

• 頁面或頁面中的模板加載時：自動交互，在頁面加載時觸發。
• 用戶直接與控件進行交互時：手動交互，由用戶觸發。

頁面加載事件

OnPageLoad(頁面加載)事件可廣泛應用于頁面和模板，很可能成為常用方法。

示例：更改默認的著陸頁

打開生成的HTML原型時，總會顯示站點地圖區的第一個頁面。然而，為了便于原型演示，可能首先打開OverView頁。

交互的目標：原型加載時，讓站點地圖區的第一個頁面重新定向到所指定的頁面。使用W3C方法拆解這個交互的結構。

• When：原型加載時
• Where：站點地圖中的第一個頁面
• What：重新定向到另一頁
• Condition：沒有條件

交互設置過程：

1. 打開Use Cases頁面(A)進行編輯，在Page Properties(頁面屬性)區中，切換到Page Interactions(頁面交互)選項(B)。
2. 雙擊交互選項中OnPageLoad事件(C)，打開Case Editor(情景編輯器)窗口。
3. Add actions這一欄中列出了所有的Axure動作。Links這組中的交互動作用于處理導航，其中最常用的是Open Link ->Current Window動作(D)，表示在當前窗口打開鏈接。單擊它。
4. 在Configure actions這一欄中列出了站點地圖區中的所有頁面。單擊OverView頁面(E)，將OverView頁面設置為重定向目標頁面。該動作會出現在Organize actions這一欄中(F)。
5. 這樣就完成了交互設置。點擊“確定”關閉Case Edition窗口。

全局導航Tab的OnClick事件

1. 打開編輯M Global Nav(全局導航模板)頁面(A)。全局導航欄有7個Tab，他們都有相應的交互動作。這里以“指標比較”(B)為例介紹。
2. 在Widget Interactions and Notes區，單擊Interactions(C)選項，可看到矩形控件包含三個事件。
3. 雙擊OnClick事件(D)或者單擊Add Case鏈接，可以打開Case Editors（E）窗口。
4. 然后參照OnPageLoad事件設置。

模擬上下文導航

一種常規的用戶體驗需求是，通過全局導航欄，清晰告知用戶當前處于哪個頁面。 頁面加載時，全局導航欄會變成當前選擇的對應頁面。使用W3C方法拆解這個交互的結構。

• When： 頁面加載時
• Where： 全局導航模板
• What： 顯示當前所選擇的頁面
• Condition： 沒有條件
  很多種方法可以實現這個What：當前激活的導航欄Tab可以變大尺寸、變化頁簽背景顏色、加粗字體、變化字體顏色等。

設置Tab選中后(Selected)的樣式的步驟：

1. 打開M Global Navigation(A)編輯頁面，選擇構成全局導航欄的7個Tab(B)
2. 在Widget Properties and Style(組件屬性和樣式)區中(C),選擇Properties(D)?？梢钥吹剿闹薪换邮健?/li>
3. 選擇Selected(E)選項，彈出Set Interaction Style對話框(F)，選擇Selected選項(G).
   4.選擇需要改變的樣式，勾選Preview(預覽)即可。

三、相關資源

作者：binarystar

來源：http://www.jianshu.com/p/0d874e1e040f

備工作：

1.下載echart.min.js,后面放出Axure中引用；

2.進入echart官網-》實例-》官方實例，選擇自己需要的柱狀圖、餅圖或者線形圖等（也可以在社區-》gallery,

這里都是個人上傳的可視化圖，比較實用），也可以自己根據需要修改前端代碼，完成自己所需要的可視化圖，

注意：編輯完成后不要修改如下圖所示，切換背景顏色，不然你的辛苦勞作會丟失的！?。。?！

點擊右下角Download下載一個html，作為后續引入axure內聯框架中。

3.在axure中加入一個內聯框架，如下圖所示：

最后在本地生成HTML文件，將下載的echart.min.js引入到生成的HTML文件下\resources\scripts這個路徑下，

同時將生成的HTML文件與在echart中官網可視化圖或者自定義可視化圖導出的html放在一個目錄下，如下圖：

然后將area-basic.html的本地路徑引入axure的內聯框架之中即可。

注意：查看效果不要axure預覽模式查看，需要重新發布生成，查看效果

獲取更多精彩可視化Axure實例，請點擊下方“了解更多”

次作業為根據TIM登錄界面截圖，畫出一副一樣的原型。

以TIM登錄界面為例。

一、分析

當我們手里僅有這一張截圖時，怎樣利用Axure做出和截圖一樣的原形界面呢？

首先，我們要獲取到每個元件的長、寬、高、以及對應的X軸，Y軸信息

其次，我們也要知道各個元件中使用的顏色

分析截圖，我們將此登錄界面分為兩部分，上半部為”LOGO”部，下半部分為”登錄”部。

二、UI設計步驟

將截圖放在工作區，將X軸，Y軸設置為0,0.

1.標記”LOGO”部的元件位置。如下：

移動圖片到右邊，在標記區域中添加元件。

1.1：背景區域：兩個直角三角形，一個等邊三角形（取色就使用拾色器取色）

1.2：LOGO,應用名稱位置：根據標記線，添加LOGO,應用名稱，（為什么右圖的LOGO看起來是正方形，而左圖為矩形呢？因為右圖的LOGO下有一勾，在標記時也要將此勾作為一個整體標記。）

2.標記”登錄”部的元件位置。如下：

移動圖片到右邊，在標記區域中添加元件。由于登錄部分元件比較多，我們需要分別拆開來看。

• 頭像：圓形，位于左邊據X軸41px，周長81px；
• 在線標記：圓形，位于左邊據X軸101px，周長12px；
• 用戶名、密碼輸入框：文本框，位于左邊據X軸133px，寬196px，高28px；
• 所有的icon：均為寬26px，高26px；
• 登錄按鈕：按鈕（矩形），與用戶名、密碼輸入框左右對齊，高31px；

好了，記下以上的信息之后，有了標記線，就可以基本準確的畫出原形圖了，如下：

三、原型交互步驟

有了以上的原形，我們做一個簡單的交互。交互需求：用戶點擊“登錄”，跳轉到正在登陸界面，正在登陸界面如下：

這樣看，這個交互就簡單了，我們只需要將登陸界面轉換為“動態面板”，點擊登陸時，顯示State2（正在登陸界面）即可。為了再復雜一點，我們設置用戶名為“1234”，密碼為“1234”，如下：

F5預覽，即可

備注：大家可以根據自己的需要，添加各種用例以備后續使用。

本文由 @小甜甜不甜 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議