本週地圖：互動、品質、包裝
前兩週你有了需求、結構與視覺。這週要補上三件事：能點（Figma Design 的 Prototype，評審能走完核心任務）、能測（一輪無障礙測試）、能交（企劃書與簡報的內容逐項確認）。這週結束，UNIT 08 期中報告只需要整合。
開工前：確認 W7 帶了什麼過來
檢查上週成果與帳號（4 項）
課堂：Lv.7（Prototype）＋ Lv.8（無障礙測試）。課後：Lv.9 自評、Lv.10 三個工作台與交稿前審稿。這週的重點是確認企劃書與簡報的內容；Figma Make 用程式碼生成互動網站，留到期中之後的 UNIT 10（W11–12）。
Stage 5．Figma Prototype：讓精稿可以點完核心任務
評審要的是「看得到、點得到」的提案：從首頁一路點到預約完成。Figma Design 的 Prototype 不必寫程式就做得到，而且你在 W7 做的元件與變體，正好讓互動設定一次全站生效。
五個步驟：把精稿連成可以點的原型（連線要手動）
- 先畫流程、備好素材：把 W6 的 User Flow 拿出來，決定要示範的 1–2 條核心任務（例如「首頁 → 列表 → 詳情 → 預約 → 完成」），再用 7-2 請 Agent 把需要的變體與彈窗準備好。
- 設流程起點：右側面板切到 Prototype，選取首頁 Frame，加上 Flow starting point。
- 拉連線：選取按鈕或卡片本身，拖曳邊緣的「＋」圓點到目標 Frame，在 Interaction details 設定觸發、動作、動畫。
- 設互動元件：在 Button 元件的變體之間加 While hovering → Change to，全站按鈕一次有 Hover。
- 測試與分享：右上角 ▶ Present 從頭走一次；沒問題後用 Share 複製 Prototype 連結，做成簡報裡的 QR code。
Figma Agent 目前無法替你設定 Prototype 的連線（觸發、動作、動畫）。連線要在右側 Prototype 面板手動拉；但連線前要用到的「素材」可以先請 Agent 準備好：按鈕的狀態變體、彈窗 Frame、狀態頁與同名圖層。下面 7-2 的四段指令就是做這件事。
先請 Agent 準備素材（連線前做）
依序貼給 Figma Agent，每段都寫了「不要設定 Prototype 連線」，避免它亂動或回覆做不到。示範用的是島嶼新浪潮的頁名，請換成你的頁面名稱。
A按鈕狀態變體（給 Change to 用）
BOverlay 用的彈窗與資訊卡
C狀態頁＋同名圖層（給 Smart animate 用）
D連線前的檢查（只回報不修改）
建立變體、做彈窗 Frame、複製狀態頁、統一圖層名稱、檢查哪裡缺返回鈕。
設流程起點、拉連線、選觸發／動作／動畫、Present 測試、分享 Prototype 連結（下方 7-3 工作台會產生步驟）。
互動工作台：選觸發、動作與動畫，產生手動設定步驟（右邊的手機會動給你看）
六種常見互動：在 Prototype 面板怎麼設
A主導覽換頁
| 觸發 | On click |
| 動作 | Navigate to → 目標頁 Frame |
| 動畫 | Instant 或 Dissolve 200ms |
| 小技巧 | 導覽列做成元件，在元件裡設好連線，每一頁的導覽列都會一起生效。 |
B按鈕 Hover 狀態（互動元件）
| 在哪設 | Button 元件的 Default 變體（不是頁面上的按鈕） |
| 觸發 | While hovering |
| 動作 | Change to → Hover 變體 |
| 動畫 | Smart animate 150ms Ease out |
| 小技巧 | 設一次，全站所有按鈕實例都有 Hover，這就是 W7 做元件的回報。 |
C篩選標籤切換
| 做法 | 標籤元件加一個 Selected 變體；列表頁複製兩個 Frame：「全部」與「北海岸」 |
| 觸發／動作 | 點「北海岸」標籤 → Navigate to「列表_北海岸」Frame |
| 動畫 | Smart animate 250ms（卡片同名，會自動補間） |
| 注意 | 示範 1–2 個條件就好，不需要做出所有組合。 |
D預約表單送出
| 觸發 | 點「送出預約」按鈕 On click |
| 動作 | Open overlay → 「預約成功」提示框，位置 Centered，背景加深 |
| 關閉 | 提示框的「關閉」按鈕 → Close overlay |
| 無障礙 | 成功訊息要有文字，不能只靠綠色。 |
E地圖標記開資訊卡
| 觸發 | 點地圖上的標記 On click |
| 動作 | Open overlay → 小資訊卡，位置 Manual（放在標記旁邊） |
| 動畫 | Move in 由下往上，200ms |
| 注意 | 真的能縮放拖曳的地圖，期中後用 Figma Make 或 Claude 做。 |
F固定導覽與頁內捲動
| 固定導覽 | 選取導覽列 → Position 設 Fixed；Frame 的 Overflow 設 Vertical scrolling |
| 錨點捲動 | 點「看精選」→ Scroll to 同頁的「精選行程」區塊 |
| 手機版 | 手機 Frame 也要設一次，Present 時切換裝置檢查。 |
簡報裡怎麼放 Prototype
簡報到 Demo 頁時切到瀏覽器開 Prototype 連結，用 Present 模式走完核心任務，控制在 1–2 分鐘。
事先錄一段 30–60 秒的操作影片放在簡報裡；同一頁附 Prototype 連結的 QR code，評審可以自己用手機點。
把「首頁 → 列表 → 詳情 → 預約」換成你的核心任務（例如二手書平台：「首頁 → 書籍列表 → 書籍詳情 → 交換申請 → 送出成功」）。先把一條任務走通，比十個零散互動更有說服力。
① 每個畫面都要連，連到最後線亂成一團：只連要 Demo 的流程。② 連線接到群組或被蓋住的圖層，Present 時點不到。③ 時長超過 500ms，評審會覺得卡。④ 分享成設計檔連結，評審看到的是編輯畫面，不是原型。
Figma Make 會用程式碼重新生成畫面，可以做出真的能縮放的地圖與篩選。它在期中之後的 UNIT 10（W11–12）。期中用 Figma Design 的 Prototype 就足夠。
無障礙測試（WCAG AA）與 RWD 斷點轉化
要加進每個 Stage 指令的內容（速查）
| Stage | 要加進指令的內容 | 目的 |
|---|---|---|
| Lv.3 架構圖 | 每頁只有一個 H1，導覽選單順序符合邏輯 | 螢幕閱讀器能判讀頁面結構 |
| Lv.4 線框稿 | 指定手機 375、平板 768、桌機 1440 三種尺寸；圖片註明需保留 alt 位置 | 落實 RWD 三種斷點與替代文字 |
| Lv.6 精稿 | 顏色變數要求文字對比 ≥ 4.5:1；按鈕觸控範圍 ≥ 44×44px | 色彩對比與觸控尺寸通過檢測 |
| Lv.7 Prototype | 重要功能不要只靠 Hover；可點區域 ≥ 44×44px；成功／錯誤訊息要有文字 | 觸控裝置與色弱使用者也能完成任務 |
斷點規範（依 UNIT 04）
| 裝置 | 寬度 | 網格 | 版型轉化 |
|---|---|---|---|
| Desktop 桌機 | ≥ 1200px | 12 欄（Gutter 24） | 完整多欄佈局、展開式導覽 |
| Tablet 平板 | 768–1199px | 8 欄（Gutter 16） | 3 欄轉 2 欄，次要資訊收合 |
| Mobile 手機 | < 768px | 4 欄（Gutter 12） | 單欄堆疊，主選單轉漢堡選單 |
版型轉化四策略（Reflow）
| 策略 | 原理 | 套進首頁的哪裡 |
|---|---|---|
| 01 垂直堆疊 Stack | 多欄降為單欄縱向流動 | 2 欄卡片 → 手機單欄 |
| 02 流體伸縮 Scale | 容器與圖片隨寬度等比縮放 | 地圖區塊 max-width:100%，不產生水平捲軸 |
| 03 漸進收合 Accordion | 隱藏次要資訊，手動展開 | 頁尾聯絡資訊與無障礙聲明收合 |
| 04 順序重排 Reorder | 依行動端視覺權重重新編排 | 「立即預約」CTA 移到最上方 |
無障礙測試實驗室：十項，每一項都動手測一次
點左邊的項目，在右邊實際操作：調顏色看對比、拉大小看觸控區、切灰階看能不能分辨、改標題層級、寫替代文字、用 Tab 鍵走一遍…。弄懂之後到自己的 Figma 檔照「怎麼測」檢查，通過就按「我的設計通過這項」，下方清單會自動勾選。顏色預設用你在 UNIT 06 情緒板與品牌變數設定的色票。測不過的項目，用 8-5 的工作台請 Figma Agent 只修那一項。
測試結果紀錄（勾選＝我的設計已通過）
視覺對比與大小（6 項）
結構標題、替代文字、操作順序（4 項）
修正指令工作台：切斷點、調顏色，產生給 Figma Agent 的修正指令
主色換成你的品牌色，看對比是否過 AA。不過就加深主色或改文字色，再回 Lv.6 的變數更新，不要只在單一頁面手改。
挑一組 Lv.6 的顏色變數，用 WebAIM Contrast Checker 實際算一次，確認 ≥ 4.5:1；沒達到就請 Agent「把這個顏色加深到符合 WCAG AA 對比度」。參考：WCAG 2 快速參考。
把無障礙檢查留到全部精稿做完才一次補：這時才發現某組顏色對比不夠，要改的是所有用到它的畫面。在 Lv.6 建變數的當下就講清楚。
有 Figma Agent vs 手動建置：對照與自評
手動建置不是「做不到」，而是「每件事都要自己記得做」。熟悉 Figma 的設計師一樣做得出漂亮的精稿，只是更花時間，規模一大（例如四個頁面都要一致）光靠人工稽核很容易漏。Agent 省下的主要是「記得做」與「維持一致」，不是取代你的判斷。
同一個案例，兩種做法
| 比較項目 | 手動建置 | 用 Figma Agent |
|---|---|---|
| 輸入方式 | 自己想清楚，一步步動手 | 多輪對話，可帶入評分標準與受眾 |
| 產出速度 | 一頁從線框到精稿，半天到一天 | 幾分鐘到幾十分鐘出草案，仍需迭代 |
| 視覺調性 | 自己蒐集拼貼，團隊易各做各的 | 依關鍵字快速生成色塊與色票，更一致 |
| 套用設計系統 | 要記得複製貼上，人一多易跑掉 | 用語意化指令連接變數與元件 |
| 無障礙／RWD | 容易忘記、留到最後補 | 逐句寫進指令，也能跨頁稽核 |
| 互動原型 | 手動一條一條拉連線 | Agent 建好元件與變體，Prototype 互動一次全站生效；真正的程式互動期中後用 Make／Claude |
| 最適合 | 練基本功、時間充裕、要精細控制 | 時間有限、要快速產出可互動 demo |
自評：三維度（UNIT 01 的評估法）
以為學了 Agent，手動畫線框、套色這些基本功可以跳過。Agent 下的每一句指令（Fill Container、對比 4.5:1）背後都是手動累積的概念；看不懂這些詞，寫出的指令也不精準。Agent 把「怎麼動手」換成「講清楚要什麼」，前提是你先懂要什麼。
企劃書與簡報：包裝成投標文件，並在交稿前逐項確認
Lv.1 的評分表已經把文件長相寫清楚了：「設計與技術」是 Lv.3–8 的成果；「專案管理」與「公司經驗與團隊」各 20%，就是這一關的內容。服務建議書可以拆成四個部分：
讓評審 10 秒認識「你是誰」：名稱、定位、年份、規模、核心服務。
挑和本案相關的案例，用具體數字佐證，不只列案名。
不用重做：Lv.3–Lv.8 已有，這節只摘要排版。
甘特圖＋人員分工，證明管得動這段工期。
工作台 A：公司簡介與代表性實績
| 案例類型 | 和本案的關聯 | 建議附上的佐證數字 |
|---|---|---|
| 地方政府或公部門網站 | 受眾與內容架構相近 | 上線後流量成長 %、平均停留時間 |
| 互動地圖／篩選型網站 | 核心功能重疊（本案 P0） | 地圖互動次數、篩選使用率 |
| RWD 響應式作品 | 對應 RFP 硬性規格 | 行動裝置流量占比、跨裝置滿意度 |
| 無障礙驗收作品 | 對應硬性規格與交付項目 | 檢測通過等級、報告日期 |
用課堂作品、專題、練習案當代表性實績，誠實標示「課堂專題」，重點是「相關」與「有數字」（例如作品被點擊次數、問卷滿意度、師生評分）。不要編造客戶名稱與數字。
工作台 B：專案管理——甘特圖與人員分工
工作台 C：把書面文件濃縮成上台簡報
示範全稿：同一個案例的 20 頁服務建議書（A4 直式，資訊密度高、附表格與數字，給評審私下翻閱）與 15 頁提案簡報（16:9，一頁一個重點，給站上台講）。點縮圖可放大翻閱。
服務建議書全稿（20 頁）
提案簡報全稿（15 頁）
把書面建議書的表格與段落整段貼進投影片，一頁塞滿文字，台下的人讀不完也記不住；或每頁換一種風格。簡報與書面文件都要套用同一組品牌變數，翻起來像同一家公司做的。
交稿前審稿：企劃書與簡報內容逐項確認
W9 期中前最後一關。請兩位組員交換審稿：一人讀企劃書、一人看簡報，照下面逐項打勾，沒過的回到對應的 Lv. 修正。評分標準見 UNIT 08 期中報告。
企劃書服務建議書（8 項）
簡報提案簡報（6 項）
一致性三份東西說同一件事（3 項）
提案總覽與本週作業
三週的提案素材到這裡全部齊了。下面是完整的「提案成長圖」，點每一項可以回到那一關補寫。目標：12 項至少完成 10 項，W9 就能直接進入整合與發表。