本節學習目標

  • 瞭解如何製作 Dynamic Panel
  • 暸解如何設定 Dynamic Panel 的互動
瞭解如何製作 Dynamic Panel
  1. 製作物件:以 Tab 鍵切換內容為例,需要製作 Tab 按鈕以及下方內容。Dynamic Panel 可透過物件事件切換層級,若共有兩層內容,就會需要有四個按鈕來切換相對應的 Dynamic Panel。(一層兩個按鈕,二層共四個)
  2. 設定按鈕顏色至下方相對應的內容,並圈選其中一層物件,按下滑鼠右鍵轉換成 Dynamic Panel (Create Dynamic Panel)並予以命名。將此 Panel 新增一層,置放另一層的內容,兩層皆予以命名。
暸解如何設定 Dynamic Panel 的互動

互動目標是按下按鈕會切換 Dynamic Panel 的內容

  1. 將按鈕點選新增新互動,此時要選的事件為按下(On Click),事件發生後的結果(Action)為切換層級(Set Panel State),選擇剛剛創建的 Dynamic Paenl 並指定要切換到哪一個層級,按下 ok 即可完成。
  2. 另一層的按鈕亦是同樣的互動設定。
  3. 最後可以用預覽,來看看互動是否有完成

無需撰寫任何程式碼

製作逼真、實用的 UX 原型從未如此簡單。