使用者介面設計課程講義

Unit 09．Prototype ＼ Interactive Prototype & Motion

讓精稿
真的動起來

精稿是好看的靜態畫面，Prototype 是可以點、可以滑、有動態的產品。

ui08 把拾器的每一頁精稿都做好了，這一關要把這些各自獨立的畫面，串成一個可以實際操作、可以拿去讓使用者測試的互動原型。你會學到 Trigger（什麼時候觸發）、Action（觸發後做什麼）、Animation（畫面怎麼轉場）三個核心概念的實際用法，還有這一關的重點：怎麼用 Easing、Spring、Overshoot 這些細節，做出「有質感」的動態，而不是隨便選一個轉場就交差。

0種 Trigger 觸發方式
0種轉場動畫類型
0個畫面串成一個可操作的流程

內容整理於 2026 年 9 月．中國科大視傳系｜使用者介面設計

拾
拾器 Pick It 這一關要決定：畫面點下去，會不會有反應
01Prototype 是什麼 02逐步串接案例 03Trigger 技巧 04Action 與轉場 05做出有質感的動態 06外掛與延伸
這堂課怎麼上 01 關先講清楚 Prototype 跟精稿的差別；02 關用拾器的 4 個畫面，逐步示範怎麼串成一個完整流程；03～04 關拆開講 Trigger 跟 Action／Animation 的實際用法；05 關是這一關的重點——怎麼用 Easing 曲線做出有質感的動態；06 關整理幾個能加強動態表現的外掛與延伸工具。
怎麼下指令，AI 才聽得懂 串連原型時，指令要講清楚「從哪一頁的哪個元件」「觸發方式是什麼」「要跳到哪一頁」「用什麼轉場」——四個資訊缺一個，Figma Agent 就只能用預設值猜，猜出來的動態通常不是你要的質感。
STAGE 01

Prototype 是什麼，
跟精稿差在哪裡

什麼是 Prototype？Prototype（互動原型）是把 ui08 做好的每一頁精稿，用「連接線」串起來，變成一個可以實際點擊、滑動、操作的模擬產品——按下「登入」按鈕真的會跳到下一頁，滑動列表真的會有捲動的感覺。

跟精稿差在哪？精稿回答的是「畫面長什麼樣子」，Prototype 回答的是「畫面怎麼動、使用者怎麼操作」。同一份精稿，沒有串接就只是一張圖；串接、設定好轉場動畫之後，才變成可以做「可用性測試」、可以讓使用者實際試用、甚至可以直接拿去跟工程師溝通互動細節的原型。

為什麼要學這關？很多動態上的問題（跳轉太生硬、轉場太突兀、使用者不知道點哪裡），要到 Prototype 階段實際操作過一輪才會發現——這是精稿完成後、正式開發前最後一次可以低成本修正體驗的機會。

參考資料
操作提醒下面 02 關會直接用拾器的案例，示範怎麼把登入、列表、詳情、聊天四個畫面串成一條完整的操作流程。

承接拾器對話串．精稿已經做完，準備進入 Prototype

精稿．Mockup

四張各自獨立的靜態畫面：登入頁、物品列表頁、物品詳情頁、聊天頁——顏色字體都對，但畫面之間沒有任何連結，點哪裡都沒有反應。

互動原型．Prototype

同樣四張畫面，串上 Trigger／Action／Animation 之後：點登入按鈕會轉場到列表頁、點物品卡片會滑出詳情頁、點「聯絡賣家」會用 Smart Animate 展開聊天視窗——變成一個「摸得到」的產品。

Figma Agent
拾器的四頁精稿都做好了：登入頁、物品列表頁、物品詳情頁、聊天頁。接下來要串成可以操作的原型，讓使用者可以實際點過一輪流程。
收到，我會照這個順序串接：登入頁的「登入」按鈕 Navigate To 列表頁；列表頁的物品卡片 Navigate To 詳情頁；詳情頁的「聯絡賣家」用 Smart Animate 展開聊天視窗。串接的同時我會建議每個轉場合適的動畫類型，確保操作起來順、不生硬。

02 關會把這個串接過程拆成 5 個步驟，逐步實際示範

STAGE 02

Step 1．把拾器的四頁
精稿串成完整流程

串接原型不是把所有畫面隨便連一連，而是照著「使用者實際會怎麼操作」的順序，一步一步建立起來。右邊拆成 5 個步驟，對應拾器從登入到聯絡賣家的完整操作路徑。

你的產出
操作提醒每串完一段連接，就實際點一次 Present 模式測試，不要等全部串完才第一次測試，不然出錯很難抓是哪一段。

互動練習．點步驟圓點，逐步看拾器怎麼串成完整原型

Figma Agent
四頁都串好了嗎？幫我整理一下整條流程，等下要拿去給同學測試。
串好了：登入頁（起點）→ 點登入用 Smart Animate 到列表頁 → 點物品卡片用 Smart Animate 到詳情頁 → 點聯絡賣家用 Open Overlay 彈出聊天視窗，點背景可以關閉。整條路徑我測過一輪，轉場速度都在 300ms 左右，操作起來算順。

串接完成，03～04 關拆開來看每個 Trigger／Action／Animation 實際還有哪些選擇

STAGE 03

Trigger：
什麼時候要觸發轉場

Trigger 決定「使用者要做什麼動作，轉場才會發生」。挑對 Trigger，操作起來才會符合直覺——例如「Hover 顯示提示」如果改成 On Click，使用者會覺得反應怪怪的。

參考資料
操作提醒手機／平板沒有滑鼠游標，Hover／While Hovering 這兩種在觸控裝置上不會觸發，設計手機版原型時要注意。

6 種 Trigger 觸發方式，對應拾器實際用到的場景

On Click／Tap 點擊觸發 最常用的 Trigger：點登入按鈕、點物品卡片、點聯絡賣家，都是 On Click（桌面）／On Tap（觸控裝置）。
On Drag 拖曳觸發 用手指或滑鼠拖曳元件時觸發，適合像「滑動刪除」「拖曳排序」這類手勢操作。
While Hovering 持續懸停 滑鼠停留在元件上時持續觸發，放開就恢復——適合桌面版「滑到按鈕上顯示提示文字」。
On Hover 懸停觸發一次 滑鼠移入時觸發一次，不需要持續停留，跟 While Hovering 的差別在於是否需要「一直停在上面」。
After Delay 延遲自動觸發 不需要使用者做任何動作，經過設定的秒數後自動觸發——適合拾器的開場 Splash 畫面幾秒後自動進登入頁。
Key／Gamepad 按鍵觸發 設定特定鍵盤按鍵（例如 Enter、Esc）觸發，適合模擬「按 Enter 送出表單」「按 Esc 關閉彈窗」這類鍵盤操作。
Figma Agent
聊天視窗的關閉按鈕，用哪種 Trigger 比較好？
關閉按鈕用 On Click／On Tap 最直覺——使用者預期「點 X 就關閉」。如果同時想讓「點聊天視窗以外的背景」也能關閉，Overlay 本身有個「點背景關閉」的設定可以另外打開，不需要額外拉一個 Trigger。

04 關接著看 Trigger 觸發之後，Action 實際會發生什麼

STAGE 04

Action 與 Animation：
觸發後做什麼、怎麼轉場

Trigger 決定「什麼時候」，Action 決定「發生什麼事」，Animation 決定「畫面怎麼轉場」——三個一起設定，才是一個完整的互動。下面先看 Action 的 5 種類型，再看基本的轉場動畫怎麼選。

參考資料
操作提醒Change To（Variants）常被忽略，但很適合做「按鈕點下去變成 Loading 狀態」這種同一個元件的狀態切換，不需要跳頁。

5 種 Action 類型．拾器案例分別用在哪裡

Navigate To 跳轉到另一個畫面 最常用的 Action：登入頁跳到列表頁、列表頁跳到詳情頁，都是整頁切換到另一個 Frame。
Open Overlay 彈出浮層 在目前畫面上疊一層新內容，不整頁切換——拾器的聯絡賣家聊天視窗就是用這個，感覺更輕量。
Swap Overlay 切換浮層內容 已經開著一個 Overlay 時，換成另一個 Overlay 內容，適合「篩選條件」彈窗內切換不同篩選頁籤。
Close Overlay 關閉浮層 把目前開著的 Overlay 關掉，回到底下的畫面——聊天視窗的 X 按鈕用的就是這個。
Change To (Variants) 切換元件狀態 不跳頁、不開浮層，只切換同一個元件的另一個 Variant——例如按鈕從「登入」變成「登入中…」的 Loading 狀態。

基本轉場動畫．5 種類型

類型適合場景
Instant→立即切換，沒有過渡動畫，適合不希望使用者等待的場景，但容易感覺生硬。
Dissolve→淡入淡出，適合切換不太相關的兩個畫面，避免生硬的跳動感。
Smart Animate→自動比對兩個畫面裡同名的圖層，做出「移動、縮放、變形」的流暢動畫——拾器的列表卡片放大成詳情頁用的就是這個。
Move In／Out→整個畫面從某個方向滑入或滑出，適合模擬「下一頁」「返回上一頁」這種有方向性的操作。
Slide In／Out→類似 Move，但新畫面滑入時會把舊畫面推出去，常用在手機版的頁籤切換。
Figma Agent
列表頁的卡片點下去變成詳情頁，用 Instant 還是 Smart Animate 比較好？
建議用 Smart Animate——因為卡片跟詳情頁的圖片、標題圖層是同名對應的，Smart Animate 可以做出「卡片放大變成詳情頁」的流暢感，讓使用者清楚知道自己點的是哪一個物品。用 Instant 的話畫面會直接跳掉，失去這個視覺上的連續性。

Smart Animate 做得好不好，關鍵在下一關的 Easing 設定——05 關實際示範

STAGE 05

這一關的重點：
怎麼做出「有質感」的動態

同樣是 Smart Animate，套用不同的 Easing（速度曲線），質感差很多——太生硬的動態讓介面感覺廉價，太浮誇的彈跳又讓人分心。右邊可以直接切換幾種常見的 Easing／Spring 曲線，實際感受同一段位移，速度感受怎麼不一樣。

Figma Agent 輔助
操作提醒Figma 的 Smart Animate 設定裡可以選 Ease In／Ease Out／Ease In and Out，也可以選 Spring 並自己調 Bounce（彈性）跟 Speed（速度）兩個參數。

互動練習．點下面的曲線，看同一段位移用不同 Easing 的速度感受

為什麼質感不一樣

Linear 速度從頭到尾一樣，機械感重，很少用在介面轉場；Ease Out 一開始快、後段慢慢停下，是最接近真實世界物體運動的感覺，也是介面動態最常用的曲線；Spring 帶一點回彈，適合強調「這個元件很重要」，但用太多地方會顯得浮誇。

Figma Agent
詳情頁的「聯絡賣家」按鈕，用 Overlay 彈出聊天視窗，想要有一點「跳出來」的活潑感，但不要太誇張，要怎麼調？
建議用 Smart Animate 搭配 Spring，Bounce（彈性）設在 5～10% 左右就好，太高會像果凍一樣一直晃；Speed（速度）可以設中等偏快，讓視窗很快出現、只在最後一點點回彈，感覺輕巧有活力，又不會拖慢操作節奏。

動態的「質感」沒有標準答案，但有方向：越常用的元件，動態要越快、越安靜；越重要的強調時刻，才適合多一點彈性

STAGE 06

加強動態表現的
Figma 外掛與延伸工具

Figma 內建的 Smart Animate／Spring 已經能處理大部分的介面轉場，但如果想做更複雜的關鍵影格動畫、或是把動態輸出成 Lottie 檔案給工程師用，這幾個外掛跟延伸工具可以幫上忙。

參考資料
操作提醒外掛清單以 Figma Community 實際上架的工具為準，介面跟功能可能隨版本更新調整。

推薦外掛與工具．做動態常用的四個選擇

Figma Community Plugins ／ 延伸工具

Figmotion．在 Figma 裡直接做關鍵影格動畫，比 Smart Animate 更精細地控制每個時間點 LottieFiles for Figma．預覽、插入現成的 Lottie 動態圖示，適合小型 icon 動效 Anima．把 Figma 原型轉成可以直接互動、甚至輸出程式碼的進階原型，適合更複雜的微互動 Jitter．匯入 Figma 畫面後用時間軸調整動態細節，介面比 Figma 內建更貼近專業動態設計工具

課後作業與下一步

把拾器的串接方式，換成你自己期中案例的產品，做出一條可以實際操作的完整流程

本週交付項目

  1. 把你自己期中案例的至少 3 個精稿頁面，用 Prototype 串成一條完整的操作流程，並設定好起始畫面。
  2. 整條流程裡至少用到 2 種不同的 Trigger（例如 On Click 跟 After Delay），以及至少 1 次 Open Overlay。
  3. 挑一段轉場（例如卡片放大成詳情頁）套用 Smart Animate，並自己嘗試 Ease Out 跟 Spring 兩種設定，比較哪一種比較適合你的產品調性。
  4. 用 Present 模式把整條流程實際操作一次，記錄下任何操作起來不順、動態太生硬或太浮誇的地方，並試著調整。
ui08．Mockup 精稿設計回顧精稿設計原則與代幣套用← ui10．Figma Make & Site AI 生成下一個教學單元→

內容整理於 2026 年 9 月．中國科大視傳系｜使用者介面設計