初級互動設計

1. 互動(Interaction)
2. 定義基本連結
3. 動作型態(Action)及實際動作(Action Description)
4. 多重條件(Multiple Cases )
5. 網頁層級的互動: OnPageLoad
6. 秘技(Quick Tips)

---

1. 互動(Interaction)

Interactions窗格是用來定義Widget在Wireframe中的互動表現方式，互動表現的方式包含簡單的連結到Rich Internet Application (RIA)的複雜行為，而且這些互動表現都可以在Prototype中執行。

　
觸發事件(Event)、假設條件(Case)、動作型態(Action)

在Axure RP中的互動設計是由觸發事件(Event)、假設條件(Case)與動作型態(Action)所組成。

當使用者對網頁進行某些人機介面的操作時，就會對網頁觸發一個事件(Event)。

每一個觸發事件都可以有一或多個假設條件(Case)，例如，一個按鈕的OnClick 觸發事件可以有兩個假設條件：其中一個導引至某個網頁，另一個則導引至另一個網頁 。

而每一個假設條件(Case)又可以執行一或多個動作型態(Action)，舉例來說：「Open Link in Current Window」的動作就是一個基本連結。

觸發事件(Event)

目前Axure RP 5支援的人機介面觸發事件，及相對應的觸發事件(Event)名稱如下：

• 以滑鼠點擊 - OnClick
• 滑鼠的指標移動到物件之上 - OnMouseEnter
• 滑鼠的指標移動出物件之外 - OnMouseOut
• 滑鼠的指標進入文字輸入狀態 - OnFocus
• 滑鼠的指標離開文字輸入狀態 - OnLostFocus
• 敲鍵盤 - OnKeyUp
• 瀏覽器載入網頁 - OnPageLoad

大多數的物件，只具備最常見的三種觸發事件(Event) - OnClick、OnMouseEnter 與OnMouseOut。
某些特定的Widget的可觸發事件有些不同：

• Button物件只有OnClick。
• Radio Button，CheckBox 這2種物件則具有OnFocus / OnLostFocus 觸發事件。
• Text Field，Text Area這2種物件則具備 OnKeyUp / OnFocus / OnLostFocus 觸發事件。
• Droplist，List Box這2種物件則具備 OnChange / OnFocus / OnLostFocus 觸發事件。
• 網頁載入瀏覽器時，則有 OnPageLoad觸發事件。(請參考5. 網頁層級的互動: OnPageLoad)

您不需要硬背上述的物件及對應的Event，在Axure RP的操作介面上，您只要點選物件，就可以查看Interaction窗格所顯示的對應Event。

---

2. 定義基本連結

下列步驟說明如何新增一個基本連結到Button Widget。

加入基本連結最快的方法就是按一下Interactions窗格中的「Quick Link」，彈出Sitemap窗格的網頁清單後，你可以為選定的物件(Widget)指定連結到哪一個網頁。

如果不是透過Quick Link的話，那麼請按照下列步驟(對照下圖) 進行互動的設定。

步驟一：指定物件

於畫布中放置一個Button Widget並選取它。

步驟二：新增假設條件(Add Case)

在 Interactions窗格中選擇OnClick ，並點選「Add Case」 (或在OnClick上連續按滑鼠左鍵兩下)以增加一個假設條件(Case)到按鈕的OnClick觸發事件，這時會出現「Interaction Case Properties」對話窗，您可以在此處選擇想要執行的動作。

步驟三：選擇動作型態(Select Action)

在Interaction Case Properties對話窗的Step 2. Select Actions，勾選「Open Link in Current Window」這個動作型態。

步驟四：編輯實際動作(Edit Action Description)

按一下Interaction Case Properties對話窗的下方，step 3 的”Link” ，並選擇實際執行動作時要開啟的網頁。

---

3. 動作型態(Action)及實際動作(Action Description)

除了基本連結之外，Axure RP還提供了許多的動作型態，這些動作都可以在任何觸發事件的假設條件中被執行。

你可以同時指定一種/多種動作型態(Action)之後，接著定義實際動作(Action Description)，這樣子才能完成展現在Prototype上的一個/多個實際動作。

以下是 Axure RP 5.0版所提供的動作型態 (Action)：

1. Open link in Current Window	開啟網頁
2. Open link in Popup Window	開啟網頁在Popup視窗
3. Open link in Parent Window	開啟網頁在Parent視窗
4. Close Current Window	關閉目前視窗
5. Open link in Frame	開啟網頁在inline frame中
6. Set Panel state(s) to State(s)	指定某個Dynamic Panel的顯示狀態
7. Show Panel(s)	顯示Dynamic Panel
8. Hide Panel(s)	隱藏Dynamic Panel
9. Toggle Visibitdty for Panel(s)	切換Dynamic Panel顯示或隱藏
10. Move Panel(s)	移動Dynamic Panel
11. Set Variable and Widget value(s) equal to Value(s)	設定變數或Widget 的值
12. Open link in Parent Frame	開啟網頁在上層內嵌框架中
13. Scroll to Image Map Region	捲動畫面到Image Map的位置
14. Enable Widget(s)	把Widgets變成可用狀態
15. Disable Widget(s)	把Widgets變成變成不可用狀態
16. Wait Time(s)	動作之前先等候(毫秒)
17. Other	以文字說明來描述實際動作

---

4. 多重假設條件(Multiple Cases)

一個觸發事件(Event)可以加入多個假設條件(Multiple Cases)，以進行不同條件判斷的差異化流程或互動表現。

舉例來說，您可以在一個按鈕的OnClick觸發事件中加入兩個假設條件，第一個假設條件 Case 1 命名為 “If Yes”，選擇這個假設條件時會開啟第一頁；第二個假設條件 Case 2 命名為 “If No”，選擇這個假設條件時會開啟第二頁。

當按紐在Prototype中被按下時，會顯示出這兩個條件的說明(”If Yes” 與”If No”)，此時點選其中一個條件的說明，就會執行該條件所關連的動作。

使用條件說明可以有效溝通條件流程，但是，如果需要建立一個高親合力的Prototype，則必需在條件中定義條件邏輯，根據在表單Widget中輸入的值或變數值來執行動作，這個主題將會在第六章高級互動設計做深入的說明。

---

5. 網頁層級的互動: OnPageLoad

Axure RP支援一個網頁層級的觸發事件(Event)-OnPageLoad，這個觸發事件發生在Prototype載入網頁時。

OnPageLoad 互動必須在Page Notes 窗格的Interactions 窗格中定義，加入假設條件的方式與在Widget中相同。

OnPageLoad 觸發事件(Event)會在OnPageLoad Event的介紹中做深入的說明。

---

6. 秘技(Quick Tips)

秘技一. 快速連結(Quick Link)

選擇 Widget ，然後按一下Interactions 窗格中的「Quick Link」並選擇目標網頁，可以快速地在Widget中加入一個基本連結。

秘技二. 連結外部實際網址或網頁

你可以讓prototype的hyperlink動作去連結到外部的實際網址或網頁。

如果使用Axure RP 5.0版

在「Link Properties」對話方塊中指定網頁連結的時候，勾選「Link to an external url or file」選項，然後在「Hyperlink」欄位指定一個外部實際網址的URL。

如果使用Axure RP 4.6版

在「Link Properties」對話方塊中指定網頁連結的時候，取消勾選「Link to a page in this design」選項，然後在「Hyperlink」欄位指定一個外部實際網址的URL。

秘技三. 重複應用類似的互動設計

如果你要進行一連串類似的互動設定，可以在Interaction窗格上，對著某個Case按滑鼠右鍵選擇”Copy”的動作，然後到你想加上互動設定的另一個Case，以滑鼠右鍵選”Paste”動作，然後再修改這個新的互動設定。如此一來，就可以更快速的完成物件的互動設定。

---

(版權聲明：歡迎引用及複製Axure RP 中文教學內容，必須註明出處為悠識數位顧問有限公司及原始文章網址 UserXper.com)

---