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



2008/7/28

下拉選單(droplist)互動設計-控制另一個下拉選單

說明:

在同一頁面,有2 個下拉選單- A 和 B。下拉的選項分別各有 2 個- a1, a2, b1, b2。

互動設計要做到的效果:
當 A 選擇 a1 時,B 自動變為 b1
當 A 選擇 a2 時,B 自動變為 b2

 》瀏覽這個範例的Prototype
 》下載這個範例的RP檔(下載後請解壓縮)
 》教學影片-以下拉選單(droplist)來控制換頁 1分24秒

作法:

詳細教學請參考 》教學影片-以下拉選單(droplist)來控制換頁 1分24秒。

當Droplist物件遇到OnChange的觸發Event時 (請留意不是 OnClick ),新增互動設計的Case。

新增Case之後,設定符合條件的狀況 - 在 “Add Condition” (或 “Edit Condition”)的窗格,選擇 selected option of A 等於 a1。

接著,定義正確的互動Action - 在 “Set Variable and Widget value(s) equal to Value(s) ” 的窗格中,選擇 Set selected option of B 到 b1。

完成後的互動設計的statement如下:

OnChange:
Case 1 (If selected option of A equals “a1″):
Set selected option of B equal to “b1″
Case 1 (Else If selected option of A equals “a2″):
Set selected option of B equal to “b2″

類似的教學範例可參考 - 下拉選單(droplist)互動設計-控制換頁


張貼留言

* 為必填,您的email並不會被顯示
姓名

Email *


XHTML / CSS / Designed by Handlino