本節學習目標

  • 學習基本的 Dynamic Panel 互動
Dynamic Panel圖示
什麼是 Dynamic Panel

Dynamic Panel ,可以將其想像成一個劇場,只能有一個前台但可以有無數個後台,觀眾也就是使用者只能看到前台的內容。藉由物件的事件可以切換不同後台至前台,使用者也因此能看到不同的內容。

左右切換應用
tab切換示意
Dynamic Panel 常用案例

Dynamic Panel 可以模擬如登入與申請帳號的Tab鍵切換下方的內容,或者如旋轉木馬(Carousel)按下按鈕後可以切換內容。透過物件的事件觸發,切換呈現在使用者能看的內容。

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

Dynamic Panel 可以模擬如登入與申請帳號的Tab鍵切換下方的內容,或者如旋轉木馬(Carousel)按下按鈕後可以切換內容。透過物件的事件觸發,切換呈現在使用者能看的內容。

無需撰寫任何程式碼

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