一、Axure交互
Axure交互是指把靜態(tài)線框圖變成可點擊的交互式HTML原型的功能。
每個Axure交互有三個基本的信息單元組成，即When、Where和What。
- When：什么時候發(fā)生交互動作？ 在Axure術(shù)語中，用事件（Events）來表示W(wǎng)hen。例如：瀏覽器中加載頁面時，用戶點擊一個控件后。
- Where：交互在哪里發(fā)生？ 任何一個控件都可以建立交互動作，如矩形框、單選按鈕或下拉列表，或者一個頁面或模板線框圖。
- What：將發(fā)生什么 在Axure中，把這是要發(fā)生的稱為動作（Actions）。動作定義了交互的結(jié)果。例如，在頁面加載時，將一個動態(tài)面板編程一種指定狀態(tài)。
二、示例
本示例在靜態(tài)線框圖的基礎(chǔ)上進(jìn)行構(gòu)建。
使用簡單詞語定義交互
用戶點擊 全局導(dǎo)航欄 上某個Tab時，會鏈接到對應(yīng)的頁面。新打開的頁面將取代當(dāng)前頁面。使用W3C拆解上述過程。
- When：用戶單擊時
- Where：全局導(dǎo)航欄上的一個Tab矩形控件
- What：鏈接到相應(yīng)的頁面
- Condition: 沒有條件
Axure交互界面
Axure事件
Axure交互由兩類Axure事件觸發(fā)。
- 頁面或頁面中的模板加載時：自動交互，在頁面加載時觸發(fā)。
- 用戶直接與控件進(jìn)行交互時：手動交互，由用戶觸發(fā)。
頁面加載事件
OnPageLoad(頁面加載)事件可廣泛應(yīng)用于頁面和模板，很可能成為常用方法。
示例：更改默認(rèn)的著陸頁
打開生成的HTML原型時，總會顯示站點地圖區(qū)的第一個頁面。然而，為了便于原型演示，可能首先打開OverView頁。
交互的目標(biāo)：原型加載時，讓站點地圖區(qū)的第一個頁面重新定向到所指定的頁面。使用W3C方法拆解這個交互的結(jié)構(gòu)。
- When：原型加載時
- Where： 站點地圖中的第一個頁面
- What： 重新定向到另一頁
- Condition： 沒有條件
交互設(shè)置過程：
- 打開Use Cases頁面(A)進(jìn)行編輯，在Page Properties(頁面屬性)區(qū)中，切換到Page Interactions(頁面交互)選項(B)。
- 雙擊交互選項中OnPageLoad事件(C)，打開Case Editor(情景編輯器)窗口。
- Add actions這一欄中列出了所有的Axure動作。Links這組中的交互動作用于處理導(dǎo)航，其中最常用的是Open Link ->Current Window動作(D)，表示在當(dāng)前窗口打開鏈接。單擊它。
- 在Configure actions這一欄中列出了站點地圖區(qū)中的所有頁面。單擊OverView頁面(E)，將OverView頁面設(shè)置為重定向目標(biāo)頁面。該動作會出現(xiàn)在Organize actions這一欄中(F)。
- 這樣就完成了交互設(shè)置。點擊“確定”關(guān)閉Case Edition窗口。
全局導(dǎo)航Tab的OnClick事件
- 打開編輯M Global Nav(全局導(dǎo)航模板)頁面(A)。全局導(dǎo)航欄有7個Tab，他們都有相應(yīng)的交互動作。這里以“指標(biāo)比較”(B)為例介紹。
- 在Widget Interactions and Notes區(qū)，單擊Interactions(C)選項，可看到矩形控件包含三個事件。
- 雙擊OnClick事件(D)或者單擊Add Case鏈接，可以打開Case Editors（E）窗口。
- 然后參照OnPageLoad事件設(shè)置。
模擬上下文導(dǎo)航
一種常規(guī)的用戶體驗需求是，通過全局導(dǎo)航欄，清晰告知用戶當(dāng)前處于哪個頁面。
頁面加載時，全局導(dǎo)航欄會變成當(dāng)前選擇的對應(yīng)頁面。使用W3C方法拆解這個交互的結(jié)構(gòu)。
- When： 頁面加載時
- Where： 全局導(dǎo)航模板
- What： 顯示當(dāng)前所選擇的頁面
- Condition： 沒有條件
很多種方法可以實現(xiàn)這個What：當(dāng)前激活的導(dǎo)航欄Tab可以變大尺寸、變化頁簽背景顏色、加粗字體、變化字體顏色等。
設(shè)置Tab選中后(Selected)的樣式的步驟：
- 打開M Global Navigation(A)編輯頁面，選擇構(gòu)成全局導(dǎo)航欄的7個Tab(B)
- 在Widget Properties and Style(組件屬性和樣式)區(qū)中(C),選擇Properties(D)?？梢钥吹剿闹薪换邮?。
- 選擇Selected(E)選項，彈出Set Interaction Style對話框(F)，選擇Selected選項(G).
4.選擇需要改變的樣式，勾選Preview(預(yù)覽)即可。
三、相關(guān)資源
在線預(yù)覽
原型下載
作者：binarystar
來源：http://www.jianshu.com/p/0d874e1e040f
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
