本節學習目標

  • 認識物件互動的方式
互動
事件
樣式的調整
設定結果
認識物件互動的方式

物件互動的方式一共有兩種,分別是建立在「事件與結果」及「樣式的改變」。

 

  1. 事件與結果:觸發某物件後而導致的結果。如:按下按鈕出現視窗,那麼按下按鈕就是事件,而結果就是視窗的出現

  2. 樣式的改變:樣式(Style)上的更動。如:滑鼠移至按鈕時按鈕會變色、按鈕被按下時會變色。

互動功能簡介
  1. 點選物件後在物件區切換至互動(interaction)區塊,在最上方可以將物件命名,建議給予物件名稱以方便未來互動設定上的找尋。

    在區塊下方可以看到預設的幾個常用互動,分別是點選後開啟連結 (On Click, Open Link) 、點選後改變能見度 (On Click, Set Visiblity)、滑鼠移入移出物件樣式的改變 (Mouseover Style Effect)。

  2. 除了這三個常見的互動外,可以點選新互動(New Interaciotn)觀看更多互動選項。點選後可以看到上半部是事件(Event),常用的事件像是 點選後會發生什麼事(on click)、滑鼠移入(on mouse enter)、滑鼠移出(on mouse out) ; 下半部則是樣式的調整(Style Effect),常用的像是 滑鼠移入移出(Mouseover) 或者 被選擇時(selected) 物件樣式會如何改變。
  3. 點選事件後,會切換到結果頁面,此時可以設定結果如顯示或隱藏(Show / Hide)、打開連結(Open Link)等。選擇結果後,就完成互動的設定了。

無需撰寫任何程式碼

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