本節學習目標

  • 什麼是 Components
  • 如何使用 Components
  • Components 的擺放方法
components示意
什麼是 Components

將物件轉換成 Component 後,物件將以一組的形式保存在 Components 列表中,當有需要時可從 Components 列表中直接拖曳至繪圖區中,毋需再透過複製貼上的步驟。此外,只要該 Component 中的內容更動後,所有該 Component 的內容皆會同步更新,對於管理大量重複出現的物件十分方便。

製作元件
如何使用 Components
  1. 將想要轉換成 Component 的物件圈選,按下滑鼠右鍵選擇製作 Component(Create Component),在彈跳視窗中可以更改該 Component 的名稱,確認完就製作完成了,而點選 Components 時的顏色是粉紅色來區隔與其他物件的不同。
  2. 要瀏覽所有的 Components,只要在物件庫中切換到 Components 就可看到所有 Components,要使用只需要拖曳想要的 Component 至繪圖區即可。修改 Components 只要在列表或者繪圖區中雙點擊開啟修改頁進行修改,要注意修改會更動到所有有使用該 Component 的地方。
  3. 在 Components 列表中,直接對 Component 按下滑鼠右鍵可進行刪除、複製或貼上等功能。
  4. 另外,在點選被拖曳到繪圖區的 Component 後,可以在樣式(Style)中看到 Overrides,可以更改 Component 內的內容,例如文字或圖片。
Components 的擺放方法

Components 的擺放方法,總共有三種可以選擇,分別為任意放置(Place Anywhere)、鎖定位置(Lock to Component Location)以及打散(Break away)。要改變擺放方式,在物件庫中的 Components 區塊,對想要改變的 Component 按下滑鼠右鍵選擇 Drop Behavior 即可。

擺放方式說明:

  1. 任意放置(Place Anywhere),Component 從物件庫拉出時可任意擺放 Component 到任何位置。
  2. 鎖定位置(Lock to Component Location),可預設 Component 的位置,之後從物件庫拉出就是固定的位置。雙點擊進入該 Component 的頁面並放置在想要的地方,將該 Component 的擺放方法改為鎖定位置(Lock to Component Location)即可。
  3. 打散(Break away),當擺放方法更改為打散後,拉出該 Component 時,全部物件將獨立呈現。

無需撰寫任何程式碼

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