網站企劃軟體Axure RP/網站企劃教育訓練/網站企劃專案服務-悠識數位

1. Axure RP實現更豐富的互動設計
2. 認識Dynamic Panel Widget
3. 編輯Dynamic Panel 的狀態
4. 預設Dynamic Panel的顯示/隱藏
5. 示範-以Click來開關Dynamic Panel
6. 教學影片
　》教學影片 - 開關Dynamic Panel互動設計 51秒
　》教學影片 3分55秒

1. Axure RP實現更豐富的互動設計

網站開發技術越來越豐富了，這是我們正在經歷的過程，也是未來的趨勢。

不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術，能夠讓網站介面更豐富，展現更優質的人機互動。

同時，這個趨勢也挑戰了傳統的文書軟體或繪圖軟體，當這些軟體受限於僅能表現單一畫面與單一狀態的情況下，您很難把心目中最友善的互動方式表達清楚並設計出來。

Axure RP與其他的wireframe軟體，最大的差異在於能夠進行互動設計(Interaction Design)，且可以立即將結果呈現於prototype上，而不是只有文字敘述。更棒的一點是，學習Axure RP的互動設計，您並不需要學習HTML或Java Script語法，只要透過一些設定與操作，便可以完成多樣而創新的互動介面設計。

在Axure RP設計出來的Prototype中，最簡單的互動設計是網頁連結，透過滑鼠的click來串起使用者與網站的互動流程。然而，真正發揮Axure RP在互動設計上的驚人特色，並不是只有連結這麼簡單的互動，您可以藉由學習Dynamic Panel (動態面板)物件的操作與控制，來做到更豐富更友善的互動介面設計。

2. 認識Dynamic Panel Widget

Dynamic Panel (動態面板) 這種物件是專門用在設計Prototype動態功能的Widget，Dynamic Panel可以包含一或多個狀態(State)，每個狀態本身是一個小頁面，藉由控制狀態(State)的順序或隱藏/顯示Dynamic Panel來達成互動介面的整個表現。

就像其他Widget一樣，Dynamic Panel可以用拖放的方式從Wireframe窗格加入到畫布中。

學習Dynamic Panel的互動設計之前，有2個重要的概念必須先認識：

(1) Dynamic Panel (動態面板)：

一種透明的物件，本身可以包含很多個狀態(State)，而每個狀態都是一個小網頁。被放置在最上層的狀態就是該面板的長相。

(2) State (狀態)：

每個狀態都是一個小網頁，而這個小網頁的邊界與大小，與所屬的Dynamic Panel大小相同。不同的State可以重疊在同一個Dynamic Panel裡頭，唯有被控制放在最上層的State，才會呈現於Prototype的畫面中。

以Axure RP所設計出來的多樣互動介面，大多藉由各種觸發事件(Event)來控制Dynamic Panel顯示或消失，或控制哪個State在最上層來模擬出實際的互動介面。

3. 編輯Dynamic Panel 的State(狀態)

已經擺放到畫布中的Dynamic Panel，直接在上頭快速點滑鼠左鍵兩下，會開啟「Dynamic Panel State Manager」對話方塊。在這個對話視窗中，您可以新增State、更改State名稱、調整State排序、移除State與編輯State。
Axure dynamic panel state manager 在「Dynamic Panel State Manager」對話方塊中選擇一個Panel State，然後按下【Edit State】鈕，會開啟這個Panel State的Wireframe以供設計。或者您可以選擇【Edit All States】鈕，一口氣把所有的狀態頁面通通開啟。

開啟後，您就可以像設計其他Wireframe一樣的設計狀態頁面(State)，每個狀態頁面的側邊藍色虛線外框就表示Dynamic Panel 的邊界。

4. 預設Dynamic Panel的顯示/隱藏

Axure Dynamic Panel Hidden Dynamic Panel 可以預設為隱藏(Hidden)，作法是在Dynamic Panel 物件上按滑鼠右鍵，並選擇「Edit Dynamic Panel->Set Hidden」，這樣就可以隱藏Panel 的內容，而且Dynamic Panel的遮罩也會從藍色變成黃色。已經預設隱藏的Dynamic Panel，可以選擇「Edit Dynamic Panel->Set Visible」來顯示Dynamic Panel。

Dynamic Panel 可以藉由接下來所介紹的互動模式，動態控制在Prototype 中的顯示或隱藏。Axure RP提供互動設計的實現方式，都在「Interaction Case Properties」對話方塊中設定 (請參考初級互動設計)。

其中有5種互動方式(Action)是專門用來控制Dynamic Panel的，分別是:

Set Panel state(s) to State(s)：將某個Dynamic Panel的State設定為該Panel的顯示狀態
Show Panel(s)：顯示(設為visible) 一或多個Dynamic Panel
Hide Panel(s)：隱藏一或多個Dynamic Panel
Toggle Visibility for Panel(s)：根據目前的顯示狀態來顯示或隱藏Dynamic Panel
Move Panel(s)：移動Dynamic Panel，可根據絕對座標或相對座標來移動

5. 示範-以Click來開關Dynamic Panel

　》下載這個示範rp檔(MyFirstPanel.zip, 52k)
　》教學影片 - 開關Dynamic Panel互動設計 51秒

要了解Dynamic Panel的互動控制，我們先來模擬一個Click的效果 - 當滑鼠Click頁面上的矩形時，會出現一個訊息視窗，再Click一次時，又把訊息視窗隱藏起來。換句話說，我們將藉由滑鼠Click來控制Dynamic Panel的顯示與隱藏。

首先我們先在畫布上放一個矩形物件。接下來放置一個Dynamic Panel，並且編輯這個Panel唯一的預設狀態(State1)。

在State1(狀態)的wireframe上，隨意加入一些文字，以供辨認。

再把Dynamic Panel的顯示狀態，設定為隱藏(Hidden)。

然後，在矩形物件上增加一個OnClick的Interaction Case。先選擇矩形物件，接著click兩下 “OnClick”，彈出「Interaction Case Properties」互動設計的對話方塊。

分別針對這個對話方塊中的Step 1- 3做互動設計的設定：

step 1: Description - 預設為 Case 1，不用變更。

step 2: Select Actions - 勾選Toggle Visibility for Panel(s)，此時在step 3會出現 Toggle Visibility for Panel。如下圖：

接下來…

step 3: Edit the Action description (click an underlined value to edit) - 這句話的意思是，去點選有加底線的項目進一步編輯。於是我們接著click Panel這個單字，然後會看到彈出一個「Select Panels」對話方塊，裡頭只有一個叫做”My First Panel”的項目，把它勾選起來。此時在step 3會出現Toggle Visibility for My First Panel。(如下圖)

如果您曾經給Dynamic Panel有意義的名稱，就可以在Select Panel時看到被您命名過的Panel。選擇Dynamic Panel時，Dynamic Panel 會以Annotations & Interactions 窗格中所給予的Label做為識別，如果沒有指定的話，Dynamic Panel 會預設標示為”Unlabeled”。

接下來，就可以輸出Prototype了，按下F5或選擇「Generate > Prototype」，將剛剛設計過的簡易互動介面，輸出到瀏覽器上進一步檢視，當滑鼠click時，您所設計的那個Dynamic Panel是否會消失/出現 (如下圖)。