下拉選單(droplist)互動設計-控制換頁

說明：

現有一個Droplist，其中有AAA，BBB，CCC三項，如何為這三項設定Link，並且在輸出的頁面中點選這三項中的任意一項，鏈結到對應的頁面中。

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

作法：

step 1. 對 Droplist 這個Widget 給一個命名，比如 ‘drop-list-demo’

step 2. 選擇 OnChange 觸發事件(Event) ，新增一個Case；接著在互動設計的窗格中，點 Add Condition…

step 3. 選擇 selected option of drop-list-demo，以及value 等於 ‘AAA’

step 4. 勾選 Open Link in Current Window，接著在Link Properties視窗選擇 ‘Page 1′

step 5. 如果按照上述步驟設定成功，那麼你會在 Interaction Case Properties看到如下敘述:

If selected option of drop-list-demo equals “AAA”
Open Page 1 in Current Window

這段敘述的意思是，當 ‘drop-list-demo’這個物件(Widget)的選項等於’AAA’時，則link到’Page 1′ ，畫面如下。

step 6. 重複上述步驟，將 ‘BBB’, ‘CCC’的選項設定為link 到 Page 2 及 Page 3。

更快速的操作方式，則是利用複製Case的方式，Copy/Paste這兩個互動設定到 OnChange 之下，然後進行修改 “Edit Condition..”，調整Open Link的目標網頁到’BBB’, ‘CCC’。如此便可完成正確的互動設計了。

Copy/Paste Case 畫面如下：

全部完成之後，完整的Interaction design畫面如下：

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

---