一、Axure交互

Axure交互是指把靜態(tài)線框圖變成可點(diǎn)擊的交互式HTML原型的功能。

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

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

二、示例

本示例在靜態(tài)線框圖的基礎(chǔ)上進(jìn)行構(gòu)建。

使用簡(jiǎn)單詞語定義交互

用戶點(diǎn)擊 全局導(dǎo)航欄 上某個(gè)Tab時(shí)，會(huì)鏈接到對(duì)應(yīng)的頁面。新打開的頁面將取代當(dāng)前頁面。使用W3C拆解上述過程。

• When：用戶單擊時(shí)
• Where：全局導(dǎo)航欄上的一個(gè)Tab矩形控件
• What：鏈接到相應(yīng)的頁面
• Condition: 沒有條件

Axure交互界面

Axure事件

Axure交互由兩類Axure事件觸發(fā)。

• 頁面或頁面中的模板加載時(shí)：自動(dòng)交互，在頁面加載時(shí)觸發(fā)。
• 用戶直接與控件進(jìn)行交互時(shí)：手動(dòng)交互，由用戶觸發(fā)。

頁面加載事件

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

示例：更改默認(rèn)的著陸頁

打開生成的HTML原型時(shí)，總會(huì)顯示站點(diǎn)地圖區(qū)的第一個(gè)頁面。然而，為了便于原型演示，可能首先打開OverView頁。

交互的目標(biāo)：原型加載時(shí)，讓站點(diǎn)地圖區(qū)的第一個(gè)頁面重新定向到所指定的頁面。使用W3C方法拆解這個(gè)交互的結(jié)構(gòu)。

• When：原型加載時(shí)
• Where： 站點(diǎn)地圖中的第一個(gè)頁面
• What： 重新定向到另一頁
• Condition： 沒有條件

交互設(shè)置過程：

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

全局導(dǎo)航Tab的OnClick事件

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

模擬上下文導(dǎo)航

一種常規(guī)的用戶體驗(yàn)需求是，通過全局導(dǎo)航欄，清晰告知用戶當(dāng)前處于哪個(gè)頁面。
頁面加載時(shí)，全局導(dǎo)航欄會(huì)變成當(dāng)前選擇的對(duì)應(yīng)頁面。使用W3C方法拆解這個(gè)交互的結(jié)構(gòu)。

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

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

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

三、相關(guān)資源

在線預(yù)覽

原型下載

作者：binarystar

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