期中要交什麼:三個必交、一個加分
期中是「視覺提案」:證明我們做得出來(期末再證明「真的做出來了」)。內容以 三週提案講義(UNIT 05–07)Lv.1–Lv.10 的成果為主體,換成你們這組的題目重跑一次,再整理成文件與簡報。
服務建議書
- 評審拿在手上逐頁翻的書面投標文件
- 資訊密度可以高,附表格與數字佐證
- 全份套用同一套品牌變數
提案簡報
- 由建議書濃縮改編,站上台講
- 一頁一個重點,遠看也清楚
- 每頁有秒數預算,含互動示範備案
Figma 檔案
- Sitemap、User Flow、線框、情緒板、精稿(桌機+手機)、設計系統
- 頁面結構依 UNIT 03(00 Cover~06 Proposal),Frame 用 Sitemap ID 命名、100% 綁定變數
- 權限:Anyone with the link can view
互動原型
- Lv.7:Figma Prototype 走得完核心任務
- 換頁、按鈕 Hover、送出回饋
- 簡報附 QR code,現場掃描操作
平時作業就是期中的零件
你不是在 W09 才開始做。每週作業都是建議書的一章,照這張表做,W09 只需要「組裝與演練」。W6–W8 存進成果收件匣的內容,可以在 UNIT 07 提案總覽一鍵匯出成提案素材包,直接當寫建議書的底稿。
| 週次 | 平時作業 | 成為期中的哪一部分 |
|---|---|---|
| W01 | 選題、A4 主題發想企劃書 | 建議書第 0 章:需求理解的原料 |
| W02 | Persona、競品 SWOT、功能規格清單(P0/P1) | 第 3 章前半:受眾洞察、功能範疇 |
| W03–04 | Figma/FigJam:Sitemap、User Flow、線框 Frame;建議書大綱 | 第 3 章:資訊架構、線框 |
| W05 | 視覺風格定位、色彩 Token 與 RWD 規範(觀念) | 第 3 章:視覺策略的依據 |
| W06 | 提案①:Lv.1 需求理解、Lv.2 Persona/競品/功能規格、Lv.3 Sitemap、Lv.4 四個 P0 線框 | 第 0 章需求理解、第 3 章前半:受眾洞察、資訊架構、線框 |
| W07 | 提案②:Lv.5 情緒板、Lv.6 變數/文字樣式/按鈕元件/精稿 | 第 3 章:品牌調性、設計系統、精稿 |
| W08 | 提案③:Lv.7 Figma Prototype、Lv.8 無障礙測試、Lv.9 自評、Lv.10 公司實績/甘特/簡報骨架/交稿前審稿 | 第 1、2、4 章+簡報骨架(建議書主體成形) |
| W09 | 期中報告 | 組裝、演練、上傳、發表 |
三個角色:誰負責什麼
情緒板、精稿、設計系統;建議書與簡報的版面一致性。
需求理解、受眾洞察、專案管理章、簡報故事線與講稿。
Figma Prototype、QR 與備案影片、模擬評審 Q&A。
發表時每位組員都要開口(至少負責一個段落);Q&A 由對應角色回答。
範例解剖:看懂每一頁在做什麼、怎麼準備
下面是兩份真實的範例:島嶼新浪潮(本課程示範,Figma Agent 產出的 A4 建議書 20 頁+16:9 簡報 15 頁)與學長姐的期中簡報(114-1,題目為網站改版案)。點頁面,看這頁在做什麼、怎麼準備、常見錯誤、對應哪個評分項目。
建議書 vs 簡報:同一件事(例如設計系統),建議書放完整表格,簡報只放色票+一句話。
每頁都有「依據」:數字、案例、檢核結果都能指到來源,評審才會相信。
對照評分:每頁標了 A–E,看看哪一個評分項目靠這一頁拿分。
學長姐簡報 vs 這次期中標準:還缺什麼
學長姐的簡報(網站改版案)邏輯很值得學:現況分析 → 問題整理與解決 → 參考案例 → 色彩風格 → 架構圖 → 頁面設計 → 時程。但你們這次是「標案提案」,評審要看的東西更多。對照一下:
| 項目 | 學長姐簡報有嗎 | 這次期中要補什麼 |
|---|---|---|
| 需求理解(RFP 核心需求) | ✓ 以「現況分析」呈現原站問題 | 改成:RFP 的 3 個核心需求+評分權重,逐項回應 |
| 受眾洞察(Persona) | △ 較少 | 2 個 Persona,痛點要連到功能 |
| 競品/參考案例 | ✓ 參考案例分析 | 改成 SWOT 收斂:我們的突破點 |
| 問題 → 解法對照 | ✓ 非常清楚(01/02/03 對照) | 保留這個做法,放進「提案核心主張」 |
| 資訊架構 | ✓ 實體架構圖 | 加上 P0/P1 優先度與每頁存在理由 |
| 設計系統(色彩、字體、變數) | △ 僅色彩風格 | 色彩+字體+按鈕+網格,並附對比度檢核 |
| RWD 與無障礙 | ✗ 只有桌機 | 三個斷點(375/768/1440)+ 十項無障礙測試結果 |
| 可以點的原型 | ✗ 只有靜態畫面 | Figma Prototype:核心任務從首頁點到完成,簡報附 QR code |
| 時程與分工 | △ 週為單位、項目抽象 | 甘特圖天數加總=工期;組織圖附職掌;交付項目 |
| Q&A 準備 | — | 預算/範疇/技術三類提問演練 |
歷屆期中、期末作業彙整在 114-1 期中、期末作業彙整(FigJam)↗,包含各組的期中 Figma、Figma Make 原型與發佈網站。示範案例的完整 Figma 檔在 島嶼新浪潮示範檔 ↗(「服務建議書與簡報」分頁)。
怎麼準備:倒推時程+三個指令工作台
準備的順序是:匯出提案素材包 → 先排時間 → 排建議書頁序 → 把建議書濃縮成簡報 → 用 UNIT 07 的交稿前審稿檢查 → 用 Claude 練 Q&A。下面先倒推時程,再用三個工作台把「該下什麼指令」直接做出來。
倒推時程:從 11/05 往前排
改日期,所有節點的日期會跟著變;做完一項就勾起來(進度會存在你的瀏覽器)。紅框代表日期已過、還沒勾。
工作台 1:服務建議書規劃器(Figma Agent)
先排「頁序與章節」,再交給 Agent 建立 A4 版型。每章顏色一致,翻頁時知道自己在哪一章。
工作台 2:提案簡報計時濃縮(Figma Slides/Agent)
簡報最容易出的問題是超時與塞字。先算好每頁秒數與字級下限,再讓 Agent 建骨架。
工作台 3:模擬評審 Q&A(Claude)
評審的問題往往直指「值不值得、做不做得完、做不做得出來」。事先被問過,現場才不會卡住。
評分標準:五個項目,滿分 100(加分另計)
評審依下面五項打分。先用自評器找出你們最弱的一項,優先補強;每一項的四個等級都寫出了具體差異,讓你知道「做到什麼程度」會拿高分。
| 項目 | 配分 | 主要看什麼 | 在哪裡拿分 |
|---|---|---|---|
| A 需求理解與策略 | 20 | RFP 3 個核心需求、Persona/SWOT 結論、品牌關鍵字 | 建議書第 0 章、簡報 3–4、8–9 頁 |
| B UI/UX 與 RWD 設計成果 | 30 | Sitemap/User Flow/線框、設計系統、桌機+手機精稿、十項無障礙測試、Figma 結構與 Prototype | 建議書第 3 章、Figma 檔案、簡報 11–14 頁 |
| C 專案管理與可行性 | 15 | 甘特圖、組織圖與職掌、交付項目、MoSCoW 範疇 | 建議書第 4 章、簡報 7、12 頁 |
| D 文件與簡報品質 | 20 | 版面一致、資訊層級、一頁一重點、故事線 | 建議書與簡報整體 |
| E 發表與 Q&A | 15 | 10 分鐘內、分工順暢、三類提問應對 | 現場表現 |
自評器:你們現在大概落在哪裡?
加分與扣分
- Figma Prototype 可現場操作(簡報附 QR)
- 完整保留 AI 協作紀錄(可用本頁「匯出指令包」)
- 建議書與簡報的設計一致性特別突出
- 缺少必交項目(建議書、簡報、Figma 連結)
- 遲交;Figma 連結沒有開放檢視權限
- 超時(超過 10 分鐘 30 秒以上)
- 編造數字或案例、未標示來源;放入真實個資
期中成績占學期成績的比例依教學大綱公告;本頁的分項配分為期中內部評分參考。
繳交與格式規範
| 項目 | 規格 | 檔名範例(點一下複製) |
|---|---|---|
| 服務建議書 | A4 直式(794×1123px),15–20 頁,輸出 PDF,字體嵌入 | |
| 提案簡報 | 16:9(1920×1080),10–15 頁,輸出 PDF;可附 Figma Slides 分享連結 | |
| Figma 檔案 | 頁面:00 Cover、01 Research、02 IA、03 Wireframe、04 Style(情緒板、變數、元件)、05 UI(桌機+手機精稿、Prototype)、06 Proposal(建議書與簡報);權限 Anyone with the link can view | 連結貼在 Moodle 繳交欄 |
| 互動原型(加分) | Figma Prototype 分享連結;簡報內附 QR code | 網址貼在 Moodle,並附一張截圖備案 |
| AI 協作紀錄 | 用本頁「匯出指令包」或附對話連結/截圖 |
上傳前自我檢核
建議書服務建議書
簡報提案簡報與發表
檔案繳交
評選提問攻防,與給期末的銜接
三大攻防議題:評審通常怎麼問
問:「設計系統要花時間,值得嗎?」
答法:不降價,講「價值」與「階段性」——設計系統省下之後的修改成本;提供只做 Must 的精簡方案。
問:「時程緊,怎麼確保如期完成?」
答法:用 MoSCoW 分級:Must 100% 到位;Should/Could 排第二階段,交期清楚。
問:「這麼複雜,工程做得出來嗎?」
答法:展示變數綁定、Auto Layout 對應 Flexbox,設計稿已達可直接轉程式的結構化程度。
肯定委員的洞察 + 提出機制或數據 + 劃定邊界與替代方案。範例:「謝謝委員,這是很關鍵的問題(肯定)。我們已設定三個斷點與 44px 觸控目標(機制);這一期先做 Must have,其餘列第二階段(邊界)。」——用上面的工作台 3 練習。
期末給期末的銜接:設計稿要「工程可以接」——交接檢核表
期末要用 Claude 或 Figma Make(期中後的 UNIT 10–11 才學)把期中提案做成真的網站。期中交出的 Figma 檔案,如果結構亂、沒有綁變數,期末會很痛苦。期中前就用下面四項檢查:
| 構面 | Figma 檢核標準 | 對應到網頁 |
|---|---|---|
| RWD 流體度 | 桌機 1440、平板 768、手機 375 三種完整設計;縮放外框時內容自動換行,無固定寬度溢出 | CSS 斷點、Flexbox/Grid |
| 元件變體 | 按鈕、卡片、輸入框都有 Default/Hover/Active/Disabled | :hover、:focus 樣式 |
| 文案極限 | 標題與內文是 Fill Container,並測過很長的文字 | word-break、彈性換行 |
| 無障礙 | 文字對比 ≥ 4.5:1(WCAG AA),觸控目標 ≥ 44px | 語意標籤、aria |
Auto Layout ↔ CSS:Horizontal/Vertical = flex-direction;Gap/Padding = gap/padding;Fill Container = flex: 1;Hug Contents = width: fit-content。詳細做法見 UNIT 10 Claude × Figma。
常見問題
Q我們這組沒有真實案例,代表性實績怎麼辦?
可以放課堂作品或個人作品,但要標示「課堂作品」或「示意資料」,並仍然附一個可量化的指標(例如作品瀏覽數、測試用戶完成率)。不要編造不存在的客戶或數字。
Q建議書一定要 20 頁嗎?
不用。15–20 頁都可以。重點是五個章節都有,而且 UI/UX 與 RWD 章(占 30 分)有足夠的篇幅。用工作台 1 可以預覽頁數分配。
Q價格分析、資安附錄要做嗎?
本次期中不要求報價單,價格分析與資安附錄屬於選配。示範案例有放是因為它是完整標案的樣子。時間不夠,優先做必備頁。
Q現場網路不穩,Prototype 打不開?
簡報最後放一頁隱藏的備案頁(操作截圖+30–60 秒錄影)。也可以在 Figma 桌面版事先打開 Prototype 的 Present 模式備用。Prototype 屬加分項,沒有它也不會影響必交項目。
Q可以用 AI 生成內容嗎?要注意什麼?
可以,而且鼓勵(本課程就是用 Figma Agent)。但:數字與案例必須能說出來源;AI 編的內容要自己檢查;保留指令紀錄(匯出指令包)。評審會追問「這個數字哪來的」。