前言說明

在 Mockup 完成後，我們可以根據使用者流程（User Flow）開始設定各圖層之間的互動連結，如果還沒看過使用者流程的規劃方式，可以參考先前的第四篇文章，裡面會介紹如何使用 FigJam 來建立使用者流程（User Flow），能更有系統地掌握整體設計。

這次我們以「LINE註冊」的功能做為範例，透過這樣的流程設計，有助於幫助我們在設計階段就提前模擬使用者的操作體驗，思考這樣的設計是否能有效解決客戶需求，或者找到需要改善的部份。
進一步來說，在實際開發時透過互動展示（Present），我們也能直接呈現每個按鈕或連結的互動邏輯，這樣工程師在開發時更清楚知道每個元件該如何串連，讓整個畫面真正「動」起來₍₍ ᕕ(´ ω ‵ ")ᕗ⁾⁾。

讓 Prototype 完整呈現：補齊互動區塊

這次的情境目標是為現有網站新增一頁「註冊功能」。

針對網站中已經正常運作，或是由第三方提供的功能頁面，我們可以先用「 Frame 」簡單畫出對應的區塊。
❗在這邊要特別注意，如果最外層使用「Rectangle」製作，將無法設定互動原型（Prototype），因此請在「Frame」裡建立要互動的區塊。

接著再搭配「 Text 」新增文字說明，標示出每個互動區塊所代表的功能。透過這種方式，就能簡單且清楚的表達，新頁面中的每個功能，點擊後會如何與現有功能結合，並形成完整的操作流向。如此一來，將互動原型（Prototype）的重點聚焦在「新增功能——LINE註冊」的操作互動上，讓Prototype看起來既完整又不失重點✨。

🔍 根據第四篇章 User Flow參考，需新增的互動區塊如下：

根據表格統整清楚互動區塊後，就可以開始製作囉✨！

如果某些互動區塊包含事件處理，例如：彈窗中需要點擊按鈕，才能觸發下個流程。就需要把這些示意按鈕補上，才能完成互動流程，依據上方表格的內容製作，以下是這次對應互動區塊的示意成果：

（用Figma製作完互動區塊）

Prototype 用途是什麼？設計前先建立簡單概念✅

在開始製作之前，先來簡單介紹一下 Figma 中的 互動原型（Prototype） 是什麼，以及它是如何透過各種功能，來讓UI 元素之間能互相連結與產生互動！
對這些功能有基本的理解後，就能更容易掌握製作目標與方法，讓 Prototype 發揮最大的效用💪。

什麼是 Prototype？

互動原型（Prototype） 是用來模擬使用者實際操作網站或應用程式的功能流程與畫面切換方式。
它最大的特點是——不需要寫程式，就能展示一個「可操作的介面」。 這樣的特性非常適合在專案尚未進入開發階段或投入大量成本前，協助團隊向客戶進行提案展示、功能討論或驗證使用流程。

在與客戶簡報溝通，或是與開發團隊進行內部討論時，Prototype 都能幫助大家更直覺地理解「未來網頁功能的操作方式」，相比只能看的靜態畫面更具有說服力，也能更清楚判斷是否符合實際情況的需求。靜態畫面只能「看看長什麼樣」，而 Prototype 是真的可以實際操作、模擬流程，因此即使還沒開始正式開發，也能讓各方對操作邏輯有共同的理解，並更容易給出具體的回饋。

在製作Prototype，主要可以分成這三種步驟去達成：

觸發條件（Trigger）：使用者對畫面上的元素進行互動，例如 點擊按鈕、滑動卡片 等動作。
動作（Action）：畫面會根據觸發行為進行對應反應，例如 切換頁面、展開區塊 等效果。
目的地（Destination）：指的是互動後所導向的最終目標或結果。像是導頁到首頁、更新卡片內容，甚至是畫面捲動到指定位置，這些都是「目的地」的一種表現形式。

簡單認識後，就來實際製作看看吧！

Figma 製作「LINE註冊」Prototype

1. 請選中要操作的元素「LINE 註冊」按鈕，到屬性面板（Properties Panel）選擇Prototype頁籤，會看到下方 Interactions 區塊，這邊說明下互動（Interactions）是指「當使用者觸發某個事件時，設計要如何回應」的設定。
   接著點擊 Interactions 旁邊的「+ 」 來新增。選擇適合的觸發條件（Trigger），以下介紹常見的 Trigger 有哪些類型：

2. 我們的目標是要點擊LINE註冊按鈕來觸發下個流程，所以請選擇「On click」選好Trigger後接著要來設定Action，先來介紹常見的 Action 有哪些類型：

3. Action請選擇「Open overlay」會開啟一個互動視窗來呈現政策條款，讓使用者選擇是否要同意，也可以設定Animation，例如 彈窗有滑入效果可以選「Move in」，在設定時下方也有示意動畫可查看。
   
   （「LINE註冊」Trigger與Action設定流程）

4. 再來分別設定同意與不同意，兩種條件的流程。

   〇 同意：如果同意，首先會進入LINE登入流程，再來會需要LINE許可，接著若LIFF設定 Aggressive 一定會跳出LINE官方帳號加好友視窗，這個部份在之後LIFF相關的文章會做說明。接著就到達會員首頁。

   〇 同意的設定步驟：
   點擊「LINE註冊」按鈕時，會先跳出同意條款政策的 Modal，這裡的 「同意」按鈕 請設定：

   • Trigger：On click
   • Action：Navigate to
   • Destination：選擇「LINE 登入」

   接著會進入 LINE 登入視窗，點擊 「登入」按鈕 時，也使用相同設定：

   • Trigger：On click
   • Action：Navigate to
   • Destination：選擇「LINE 許可」

   接著會進入 LINE 許可視窗，點擊 「許可」按鈕 時，也使用相同設定：

   • Trigger：On click
   • Action：Navigate to
   • Destination：選擇「LINE 好友」

   接著會進入 LINE好友視窗，點擊 「加入」按鈕 時，也使用相同設定：

   • Trigger：On click
   • Action：Navigate to
   • Destination：選擇「會員首頁」，最後「同意」完整流程會到會員首頁。

   ⨉ 不同意：是直接關閉視窗停留在原畫面。

   ⨉ 不同意的設定步驟：
   點擊「LINE註冊」按鈕時，會先跳出同意條款政策的 Modal，這裡的 「不同意」按鈕 ，Trigger選擇「On click」，Action選擇「Close overlay」。

延伸再講個Destination的設定方式，有時候素材太多會不好找到😵，如果Action要使用「Navigate to」，也可以這樣設定：屬性面板頁籤切換到互動原型（Prototype），接著游標移到要設定的元素點擊，這時候可以看到「⨁」符號，按住後拖曳箭頭到要跳轉的另一個 Frame，這樣Destination就可快速設定好囉！

預覽與展示

關於「LINE註冊」的Prototype就設定好囉🌟，選中註冊畫面Frame，再點擊Present撥放查看結果，點擊屬性面板「▷」。如果忘記了動畫效果設定了哪些元素，可以隨意點擊空白處，出現閃爍的區塊就是有設定Prototype的部份。

（「LINE註冊」Prototype設定好執行Present。）

在Present時，Figma會根據Frame帶入適當的尺寸。也可以進入Preview，即時編輯和預覽結果。 如果想要在畫面外呈現裝置外框，可以切換到Prototype，在Prototype settings選擇裝置的型號，按下「Present」或 Preview 就會呈現加了外框的效果。

（執行Preview加上Android Expanded裝置外框）

結語

透過這次的實作流程，分享了如何使用 Figma 製作 Prototype 🤩！
這不只讓 Prototype 呈現「可以操作的畫面」，更提前站在使用者視角，思考每一個點擊背後是否能符合使用者需求，傳達正確的操作意圖，每一個 Trigger、每一個 Destination，其實都是在幫助開發團隊與使用者建立共識，讓未來開發過程更順暢也更精準，驗證與開發前期，快速取得實用的回饋。

參考資料與延伸閱讀

⑴ 使用工具來源：Figma