Home » 線上教學 » 第一章 基礎教學 » 1-9 基礎教學:基礎互動設計

1-9 基礎教學:基礎互動設計

本節學習目標

  • 認識互動功能與物件的關係
  • 認識基本的三個互動事件及如何編輯其他互動事件
  • 建置一個 Onclick 的互動功能

本節我們模擬一個商品頁面的範例,共可分為三部分:

1-9-1

1. 建立物件

依照前幾節所練習的範例,將 Widget 從左方 Widget 窗格拖曳出,放置於 Wireframe 窗格。


1-9-2

2. 認識互動事件

使用 Interaction and Notes 窗格來建立互動功能,點選 Onclick 觸發事件事件,開啟 Case Editor (事件編輯器)。

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

在Axure RP中的互動設計是由觸發事件(Event)、假設條件(Case)與動作型態(Action)所組成。當使用者對網頁進行某些人機介面的操作時,就會對網頁觸發一個事件。

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

目前左圖 Interaction 窗格有列出幾點觸發事件,點選 More Event 會有更多觸發事件選項:

  • OnClick:以滑鼠點擊
  • OnMouseEnter:滑鼠的指標移動到物件之上
  • OnMouseOut:滑鼠的指標移動出物件之外

1-9-4

3. 建立 Onclick 互動功能

開啟 Case Editor,可以看見四個窗格:

  • Case description: 此事件的描述,可以對事件命名
  • Click to add actions:顯示所有動作型態(Action),我們可以點擊此觸發事件需要的動作型態即可
  • Organize actions:已經選擇的動作型態和Configure actions內的設定皆會出現在此區塊
  • Configure actions:設定動作型態的細節內容
1-9-3
我們需要兩個步驟設定觸發事件

  • 步驟一:新增假設條件(Add Case)
    • 開啟事件編輯器後,在左方Click to add actions窗格中的 Open Link 中選擇「Current Window」。此時會在Organize actions中增加一個假設條件(Case):Open Link in Current Window。
  • 步驟二:設定假設條件
    • 點選剛才所增加的假設條件 Open Link in Current Window,在Configure actions窗格中的 Link page in design 點選「購物車」,再按 OK ,就設定完成了。

Leave a Reply