1-9 基礎教學：基礎互動設計 - Axure RP 原型工具

本節學習目標認識互動功能與物件的關係認識基本的三個互動事件及如何編輯其他互動事件建置一個Onclick 的互動功能本節我們模擬一個商品頁面的範例， ... Home»7.0線上教學»1-9基礎教學：基礎互動設計 1-9基礎教學：基礎互動設計 Share! 本節學習目標 認識互動功能與物件的關係 認識基本的三個互動事件及如何編輯其他互動事件 建置一個Onclick的互動功能 本節我們模擬一個商品頁面的範例，共可分為三部分： 1.建立物件 依照前幾節所練習的範例，將Widget從左方Widget窗格拖曳出，放置於Wireframe窗格。

2.認識互動事件 使用InteractionandNotes窗格來建立互動功能，點選Onclick觸發事件事件，開啟CaseEditor（事件編輯器）。

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

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

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

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

目前左圖Interaction窗格有列出幾點觸發事件，點選MoreEvent會有更多觸發事件選項： OnClick：以滑鼠點擊 OnMouseEnter：滑鼠的指標移動到物件之上 OnMouseOut：滑鼠的指標移動出物件之外 3.建立Onclick互動功能 開啟CaseEditor，可以看見四個窗格： Casedescription：此事件的描述，可以對事件命名 Clicktoaddactions：顯示所有動作型態（Action），我們可以點擊此觸發事件需要的動作型態即可 Organizeactions：已經選擇的動作型態和Configureactions內的設定皆會出現在此區塊 Configureactions：設定動作型態的細節內容 我們需要兩個步驟設定觸發事件 步驟一：新增假設條件（AddCase） 開啟事件編輯器後，在左方Clicktoaddactions窗格中的OpenLink中選擇「CurrentWindow」。

此時會在Organizeactions中增加一個假設條件（Case）：OpenLinkinCurrentWindow。

步驟二：設定假設條件 點選剛才所增加的假設條件OpenLinkinCurrentWindow，在Configureactions窗格中的Linkpageindesign點選「購物車」，再按OK，就設定完成了。

2014-06-20 shinluen Share! 悠識是AxureInc.的合作夥伴 ©2007~2022悠識數位顧問股份有限公司UserXperDigitalConsultingCo.,Ltd.