UNIT 08 期中作業 · W09 · 佔學期期中成績 // 2026.11.05

期中作業:
網站建置標案競標提案

各組扮演網頁設計公司,針對同一份網站建置標案(RFP)競標。期中不是交一份 Figma 檔。你們要交的是服務建議書(A4)+提案簡報(16:9)+Figma 檔案,並在 10 分鐘內說服評審。這一頁告訴你:要準備什麼、怎麼準備、做到什麼程度會拿高分——全部以「島嶼新浪潮」示範案例與學長姐簡報為例。

最新更新 2026 年 10 月 JinJin Wang 發表 11/05・10 分鐘+Q&A 35 頁示範可逐頁解剖
// What to deliver

期中要交什麼:三個必交、一個加分

期中是「視覺提案」:證明我們做得出來(期末再證明「真的做出來了」)。內容以 三週提案講義(UNIT 05–07)Lv.1–Lv.10 的成果為主體,換成你們這組的題目重跑一次,再整理成文件與簡報。

DUE2026.11.05(W09)上課前上傳 Moodle,當天發表
FORMAT10 分鐘+3–5 分鐘 Q&A每組 10 分鐘簡報,接著評審提問
SOURCE提案素材包(Lv.1–10)從 UNIT 05–07 的成果收件匣匯出 .md,加上 Figma 檔與 Prototype
必交 1

服務建議書

  • 評審拿在手上逐頁翻的書面投標文件
  • 資訊密度可以高,附表格與數字佐證
  • 全份套用同一套品牌變數
A4 直式 · 15–20 頁 · PDF
必交 2

提案簡報

  • 由建議書濃縮改編,站上台講
  • 一頁一個重點,遠看也清楚
  • 每頁有秒數預算,含互動示範備案
16:9 · 10–15 頁 · PDF(可附 Figma Slides 連結)
必交 3

Figma 檔案

  • Sitemap、User Flow、線框、情緒板、精稿(桌機+手機)、設計系統
  • 頁面結構依 UNIT 03(00 Cover~06 Proposal),Frame 用 Sitemap ID 命名、100% 綁定變數
  • 權限:Anyone with the link can view
可檢視連結(URL)
加分

互動原型

  • Lv.7:Figma Prototype 走得完核心任務
  • 換頁、按鈕 Hover、送出回饋
  • 簡報附 QR code,現場掃描操作
Figma Prototype 分享連結
1-1

平時作業就是期中的零件

你不是在 W09 才開始做。每週作業都是建議書的一章,照這張表做,W09 只需要「組裝與演練」。W6–W8 存進成果收件匣的內容,可以在 UNIT 07 提案總覽一鍵匯出成提案素材包,直接當寫建議書的底稿。

週次平時作業成為期中的哪一部分
W01選題、A4 主題發想企劃書建議書第 0 章:需求理解的原料
W02Persona、競品 SWOT、功能規格清單(P0/P1)第 3 章前半:受眾洞察、功能範疇
W03–04Figma/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期中報告組裝、演練、上傳、發表
1-2

三個角色:誰負責什麼

視覺擔當VISUAL

情緒板、精稿、設計系統;建議書與簡報的版面一致性。

企劃/文案擔當PLANNING

需求理解、受眾洞察、專案管理章、簡報故事線與講稿。

互動/AI 技術擔當BUILD

Figma Prototype、QR 與備案影片、模擬評審 Q&A。

發表時每位組員都要開口(至少負責一個段落);Q&A 由對應角色回答。

// Examples

範例解剖:看懂每一頁在做什麼、怎麼準備

下面是兩份真實的範例:島嶼新浪潮(本課程示範,Figma Agent 產出的 A4 建議書 20 頁+16:9 簡報 15 頁)與學長姐的期中簡報(114-1,題目為網站改版案)。點頁面,看這頁在做什麼、怎麼準備、常見錯誤、對應哪個評分項目。

閱讀方法 1

建議書 vs 簡報:同一件事(例如設計系統),建議書放完整表格,簡報只放色票+一句話。

閱讀方法 2

每頁都有「依據」:數字、案例、檢核結果都能指到來源,評審才會相信。

閱讀方法 3

對照評分:每頁標了 A–E,看看哪一個評分項目靠這一頁拿分。

2-1

學長姐簡報 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 檔在 島嶼新浪潮示範檔 ↗(「服務建議書與簡報」分頁)。

// How to prepare

怎麼準備:倒推時程+三個指令工作台

準備的順序是:匯出提案素材包 → 先排時間 → 排建議書頁序 → 把建議書濃縮成簡報 → 用 UNIT 07 的交稿前審稿檢查 → 用 Claude 練 Q&A。下面先倒推時程,再用三個工作台把「該下什麼指令」直接做出來。

3-1

倒推時程:從 11/05 往前排

改日期,所有節點的日期會跟著變;做完一項就勾起來(進度會存在你的瀏覽器)。紅框代表日期已過、還沒勾。

3-2

工作台 1:服務建議書規劃器(Figma Agent)

先排「頁序與章節」,再交給 Agent 建立 A4 版型。每章顏色一致,翻頁時知道自己在哪一章。

3-3

工作台 2:提案簡報計時濃縮(Figma Slides/Agent)

簡報最容易出的問題是超時與塞字。先算好每頁秒數與字級下限,再讓 Agent 建骨架。

3-4

工作台 3:模擬評審 Q&A(Claude)

評審的問題往往直指「值不值得、做不做得完、做不做得出來」。事先被問過,現場才不會卡住。

// Rubric

評分標準:五個項目,滿分 100(加分另計)

評審依下面五項打分。先用自評器找出你們最弱的一項,優先補強;每一項的四個等級都寫出了具體差異,讓你知道「做到什麼程度」會拿高分。

項目配分主要看什麼在哪裡拿分
A 需求理解與策略20RFP 3 個核心需求、Persona/SWOT 結論、品牌關鍵字建議書第 0 章、簡報 3–4、8–9 頁
B UI/UX 與 RWD 設計成果30Sitemap/User Flow/線框、設計系統、桌機+手機精稿、十項無障礙測試、Figma 結構與 Prototype建議書第 3 章、Figma 檔案、簡報 11–14 頁
C 專案管理與可行性15甘特圖、組織圖與職掌、交付項目、MoSCoW 範疇建議書第 4 章、簡報 7、12 頁
D 文件與簡報品質20版面一致、資訊層級、一頁一重點、故事線建議書與簡報整體
E 發表與 Q&A1510 分鐘內、分工順暢、三類提問應對現場表現
4-1

自評器:你們現在大概落在哪裡?

4-2

加分與扣分

+ 加分(上限 5 分)
  • Figma Prototype 可現場操作(簡報附 QR)
  • 完整保留 AI 協作紀錄(可用本頁「匯出指令包」)
  • 建議書與簡報的設計一致性特別突出
- 扣分(以課堂公告為準)
  • 缺少必交項目(建議書、簡報、Figma 連結)
  • 遲交;Figma 連結沒有開放檢視權限
  • 超時(超過 10 分鐘 30 秒以上)
  • 編造數字或案例、未標示來源;放入真實個資

期中成績占學期成績的比例依教學大綱公告;本頁的分項配分為期中內部評分參考。

// Submission

繳交與格式規範

項目規格檔名範例(點一下複製)
服務建議書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 協作紀錄用本頁「匯出指令包」或附對話連結/截圖
5-1

上傳前自我檢核

檢核通過
0 / 12
建議書服務建議書
簡報提案簡報與發表
檔案繳交
// Q&A · Hand-off

評選提問攻防,與給期末的銜接

6-1

三大攻防議題:評審通常怎麼問

資源與成本BUDGET & ROI

問:「設計系統要花時間,值得嗎?」
答法:不降價,講「價值」與「階段性」——設計系統省下之後的修改成本;提供只做 Must 的精簡方案。

範疇與時程SCOPE

問:「時程緊,怎麼確保如期完成?」
答法:用 MoSCoW 分級:Must 100% 到位;Should/Could 排第二階段,交期清楚。

技術可行性FEASIBILITY

問:「這麼複雜,工程做得出來嗎?」
答法:展示變數綁定、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。

6-2

常見問題

Q我們這組沒有真實案例,代表性實績怎麼辦?

可以放課堂作品或個人作品,但要標示「課堂作品」或「示意資料」,並仍然附一個可量化的指標(例如作品瀏覽數、測試用戶完成率)。不要編造不存在的客戶或數字。

Q建議書一定要 20 頁嗎?

不用。15–20 頁都可以。重點是五個章節都有,而且 UI/UX 與 RWD 章(占 30 分)有足夠的篇幅。用工作台 1 可以預覽頁數分配。

Q價格分析、資安附錄要做嗎?

本次期中不要求報價單,價格分析與資安附錄屬於選配。示範案例有放是因為它是完整標案的樣子。時間不夠,優先做必備頁。

Q現場網路不穩,Prototype 打不開?

簡報最後放一頁隱藏的備案頁(操作截圖+30–60 秒錄影)。也可以在 Figma 桌面版事先打開 Prototype 的 Present 模式備用。Prototype 屬加分項,沒有它也不會影響必交項目。

Q可以用 AI 生成內容嗎?要注意什麼?

可以,而且鼓勵(本課程就是用 Figma Agent)。但:數字與案例必須能說出來源;AI 編的內容要自己檢查;保留指令紀錄(匯出指令包)。評審會追問「這個數字哪來的」。