UNIT 02 Advanced Web Page Design // 需求分析

解讀標案 RFP 與需求分析：
從客戶痛點到網站規格定義

競標不是比誰把圖畫得最炫，而是比誰最懂客戶的痛。這一頁帶你讀懂需求說明書（RFP）、看懂評審手上的評分表，再把散亂的需求整理成一份工程與設計都看得懂的「網站功能清單」。

最新更新 2026 年 10 月 JinJin Wang 閱讀約 25 分鐘 內含 6 個互動練習
開始閱讀 直接看本週作業 Claude 解析版
// What is RFP

什麼是政府標案？解讀需求說明書（RFP）

RFP = Request for Proposal

RFP 就像客戶發出的「招募挑戰書」

在業界，政府機關或大型企業想建置網站時，會公開一份名為 RFP（需求說明書）的文件，裡面記載網站必須做什麼、預算多少、什麼時候要交貨。我們要做的，是寫一份「服務建議書（Proposal）」回應它，並在評選中勝出。

客戶發 RFP 廠商寫服務建議書 評審依評分表給分 最高分者得標
1-1

設計師必看的 RFP 四大關鍵指標

許多視傳背景的同學接專案時只看「要放什麼圖片」，結果常常做白工。看懂 RFP，你要抓的是這四個指標——等一下的 RFP 範例會用四種螢光筆把它們標出來。

專案預算與範疇BUDGET & SCOPE

預算 30 萬跟 300 萬的網站，作法完全不同。下面切換看看差在哪。

履約時程TIMELINE

什麼時候交 Figma 稿？什麼時候上線測試？這決定該用哪種 AI 工具加速（例如時間太緊，就直接導入 Framer 範本開發）。

系統與技術規範TECHNICAL SPECS

是否規定要通過無障礙網頁標章（AA 級）？是否指定 RWD 響應式？是否要串接舊系統資料庫？

評選標準EVALUATION CRITERIA

評審照評分表逐項給分。單靠「好看」通常只拿得到其中一小塊——下面的計算器算給你看。

切換預算，看作法怎麼變

30萬
  • 套用標準模組
  • 著重快速上線
300萬
  • 客製化視覺
  • 微互動動效
  • 完整的 UX 使用者測試
score-calculator勾選你做得到的
30 / 100

※ 常見配分示意：企劃 40% ＋ 視覺 30% ＋ 技術 20% ＋ 價格 10%。實際比例以各案評分表為準（見第 02 章）。

競標不是比誰把圖畫得最炫，而是比誰最懂客戶的痛，並且能提出最有邏輯的解決方案。

// 本單元核心
1-2

RFP 案例：「島嶼新浪潮：地方創生與數位觀光入口網」建置案

打開螢光筆，練習從 RFP 裡把四大指標找出來

RFP_島嶼新浪潮_建置案.pdf模擬標案需求說明書
螢光筆
「島嶼新浪潮：地方創生與數位觀光入口網」建置案
需求說明書 REQUEST FOR PROPOSAL · 模擬觀光處
00專案背景

本局（模擬觀光處）為推動在地文化與地方創生，擬建置全新數位入口網站。本案旨在透過當代設計美感與動態響應式體驗，整合在地遊程、店家故事與即時交通資訊，打造國際級的數位體驗。

01專案基本資訊
  • 預算金額：新臺幣 1,800,000 元整
  • 履約期限：決標日起 120 日曆天內完成上線測試
  • 目標受眾：國內外自由行旅客（60%）、在地商家與創生團隊（25%）、公務及媒體單位（15%）
02視覺設計與 UI/UX 規範
  • 品牌視覺語言：需建立專屬設計系統（Design System），採用當代簡約風格，打破傳統公家機關死板排版。
  • 響應式排版（RWD）：需全面支援 Desktop（≥ 1200px）、Tablet（768px～1199px）及 Mobile（< 768px）自動彈性調適。
  • 無障礙規範：需通過國家無障礙網頁規範（W3C WCAG 2.1）AA 級認證，文字與背景色對比度需高於 4.5:1。
03前台功能需求
  • 主頁橫幅（Hero Section）：具備微動效及流暢的 CTA（Call to Action）導引。
  • 主題便當盒佈局（Bento Grid）：以模組化卡片呈現「最新活動」、「焦點創生店家」及「即時天氣」。
  • 景點與遊程篩選器：支援依「地區」、「主題類型（美食／手作／自然）」及「可存取性」進行即時動態篩選。
  • 互動地圖整合：串接第三方地圖 API，提供景點定位與路徑指引。
  • 響應式聯絡與報名表單：支援表單格式驗證與自動確認信件發送。
04非功能性與系統規格
  • 效能要求：Google Lighthouse 效能評分需達 85 分以上，首頁加載時間 < 2 秒。
  • 資安規範：全站強制部署 SSL 加密（HTTPS），並具備基本的 SQL injection 防護機制。
05專案交付項目（Deliverables）
  • 服務建議書與企劃架構書（PDF／簡報檔）
  • Figma 高保真 RWD 設計稿與原型（含 Design System 規範）
  • 正式發布上線之網站（具備完整原始碼或部署平台管理者權限）
  • 無障礙標章檢測報告
06評選項目與配分

依評選配分總覽表逐項評分——下一章完整拆解。

捲動閱讀全文 ↕
// Evaluation

評選標準與提案策略：每一分該怎麼拿

真實標案裡，評選委員是拿著「評分表」逐項給分的。配分越高的項目，服務建議書裡的頁數與比重就要越多。點下面的配分條，看每個項目審查什麼、服務建議書該怎麼寫。

點選各區塊切換說明（也可以用鍵盤方向鍵）

40%

維度一：專案需求之規劃與建議及其技術能力

提案核心靈魂

審查重點：網站整體架構、UI/UX 與視覺設計、RWD、無障礙、Web API 銜接、效能與資安防護。這是視傳背景拿分的主戰場，要展現完整的「視覺力」、「設計邏輯」與「技術可行性」。

A網站整體服務架構與內容規劃建議
  • 內容分析：梳理現有網站痛點，提供新版資訊架構（IA）與內容重整建議。
  • 資料轉換：說明新舊系統資料備份、轉移與接軌的具體作法。
B視覺與 UI/UX 規劃設計
  • 視覺分析：提供風格企劃（Mood Board）、色彩與字體系統（Design System）規範。
  • UI/UX 佈局：產出線框圖（Wireframe）與原型（Prototype），強調使用者路徑的順暢度。
  • RWD 響應式設計：說明跨裝置（Desktop／Tablet／Mobile）的斷點設定與流動版型邏輯。
C前端技術與系統銜接能力
  • Web API 銜接：說明前後端分離架構或第三方資料串接方式。
  • 無障礙規劃：提出通過無障礙網頁規範（AA 級）的具體檢測方案與完成時程。
  • SEO 搜尋優化：網頁標籤（Meta Tag）、結構化資料與搜尋引擎友善架構規劃。
D系統硬體、效能與資安防護
  • 硬體與環境架構：網站代管（Hosting）、雲端架構配置。
  • 效能提升：圖片壓縮優化、快取機制、Google Lighthouse 效能達標承諾。
  • 安全防護：SSL 安全加密、防止 SQL 注入（Injection）、防範 DDoS 的資安機制。
2-1

參考網址資源庫

真實政府標案查詢系統、無障礙規範官方網站，以及現代網頁設計與 AI 輔助開發的關鍵參考連結。

// Function List

網站功能清單（Function List）與規格定義

看完厚厚幾十頁的 RFP 後，第二步是把客戶散亂的需求，轉成工程與設計都看得懂的「網站功能清單」。功能清單通常包含三大區塊：

前台視覺與互動功能USER-FACING
導覽與搜尋
RWD 漢堡選單、全文檢索、多重條件篩選器（Filter）
內容展示區塊
主頁橫幅（Hero）、Bento Grid 便當盒佈局、瀑布流列表、圖文彈跳視窗（Modal）
互動表單
線上報名系統、意見回饋表單、地圖定位服務（Google Maps API）
後台管理需求CMS / BACK-END
內容管理系統（CMS）
公告發布、圖片上傳庫、分類標籤管理
資料導出
報名表單資料匯出（CSV／Excel）
非功能性需求NON-FUNCTIONAL
效能與安全性
首頁加載時間 < 2 秒、全站 SSL 安全加密（https）
響應式斷點
Desktop ≥ 1200pxTablet 768–1199pxMobile < 768px
3-1

斷點實測：拖拉看看這三個斷點

rwd-breakpoints依本案 RFP 規格
island-wave.gov.tw
3-2

網站功能清單視覺規格範本

功能清單是把 RFP 轉成實作項目的關鍵工具。點左邊任一項功能，右邊的網站預覽會自動跳到它在網站上的位置，並產出那一區的設計——每一區都可以實際操作。也可以依優先級篩選：P0 是一定要做的核心，時程不夠時先砍 P2。

FUNCTION LIST × SITE PREVIEW島嶼新浪潮｜網站功能清單
網站預覽
https://island-wave.gov.tw
中 / EN
島嶼探索遊程地圖預約中 / EN
島嶼新浪潮地方創生 × 數位觀光入口網開始探索 →
本週焦點 hover 試試
最新活動漁村市集・10/12
即時天氣24°C 晴
主推景點玄武岩海岸
焦點創生店家老屋咖啡・手作陶
景點探索 點 tag 篩選
玄武岩海岸#自然
漁港海鮮#美食
藍染工坊#手作
濕地賞鳥#自然
陶藝體驗#手作
老街小吃#美食
遊程預約 試著填寫
輸入 Email，前端會即時檢查格式
預估金額（NT$ 1,200／人）NT$ 2,400送出預約
模擬觀光處 無障礙 AA隱私權政策© 2026
網站功能清單（Function List）的 UI 設計稿範例
網站功能清單（Function List）UI 設計稿｜點擊放大
// AI Research

利用 AI 進行競品分析與目標受眾挖掘

過去做使用者研究（User Research）要發問卷、做訪談，花上數週。現在可以把 AI 當成專案的市調研究員，在 15 分鐘內產出高品質的受眾畫像（Persona）與競品缺點分析。

P
挖掘目標受眾（Persona）ChatGPT／Claude／Gemini 都適用
Persona 生成prompt
你是一位資深的 UX 研究員。我們正在參與競標『請輸入專題主題，例：新世代地方創生觀光入口網』。請幫我產出 2 位最具代表性的目標受眾（Persona）。格式需包含： 1. 基本背景（年齡、職業、數位工具熟練度） 2. 瀏覽該網站的主要目標（Goal） 3. 目前使用類似網站時遇到的痛點（Pain Points） 4. 他們最希望在手機版網站上獲得的一項核心體驗。
S
競品 SWOT 與突破點分析先找一個現有的競品網站
競品分析prompt
我們要針對 請輸入現有競品網站名稱或網址 進行競標分析。請站在視傳系 UI/UX 設計師的角度，列出該網站的： 1. 資訊架構上的 2 個致命缺點 2. 視覺風格上的 2 個老舊問題 3. 請提供 3 個「能讓評選委員眼睛一亮」的視覺突破策略。
TIP

輸入的專題名稱只會存在你自己的瀏覽器裡。下面第 05 章的 6 組作業提示詞，也會一起帶入。

// Assignment

本週課堂實作與作業

5-1

課堂 30 分鐘分組實作

STEP 1 · 10 MIN
確定投標題目
  • 各組鎖定一項模擬標案（例如：地方創生網、AI 推廣網、雙年展虛擬展廳）。
STEP 2 · 20 MIN
AI 腦力激盪
  • 組員一起打開 ChatGPT／Claude／Gemini，用第 04 章的提示詞，產出 2 位專屬 Persona 與競品分析缺點。
5-2

課後作業：繳交「網站功能清單規格初稿」

各組需於下週上課前繳交一份「專題網站功能清單規格書（PDF）」。這份清單會直接當作下週 W03 生成 Sitemap 與 Wireframe 的輸入素材！

內容規格書需包含
上傳Moodle 需繳交
5-3

課後作業 02：AI 企劃溝通提示詞（僅供參考）

六組提示詞依規格書的四個區塊排列。藍色字 會帶入你在第 04 章輸入的專題名稱；每組都附上 AI 實際回應範例（以「客家文化數位典藏」為例），寫完可以對照看看。

01
專題命名與標案痛點切入產出兼具設計感、又符合政府採購語彙的專題名稱與核心目標。
ChatGPT / Claudeprompt
你是一位資深的數位網站企劃總監。我們目前正在參與一個政府標案專題：「輸入領域，如：客家文化數位典藏與體驗網站建置案」。 請幫我擬定： 1. 3 個兼具「設計美學質感」與「官方正式感」的專題網站名稱。 2. 以簡潔切中痛點的文字，撰寫「專題目標與標案效益」（約 200 字），內容必須包含：提升使用者數位體驗、文化傳達效益以及數位轉型指標。
看 AI 回應範例
【專題名稱建議】 1. 客影尋綜｜客家文化數位典藏與沉浸式體驗網（推薦） 2. 客紋新浪｜台灣客家意象數位再造計劃 3. Hakka Verse｜客家文藝數位圖譜 platform 【專題目標與標案效益】 針對傳統客家文化典藏網站「資訊零碎、介面陳舊、缺乏青年吸引力」之痛點，提出全新數位建置策略。重構客家文物與聚落資訊架構，導入現代 RWD 介面與生成式微互動技術，達成三大效益： • 視覺體驗重塑：建立質感專屬客家視覺設計系統（Design System）。 • 文化傳達倍增：互動地圖與動態卡片提升青年訪客停留時間 50% 以上。 • 數位轉型標竿：符合 WCAG AA 無障礙規範與極速加載標準。
02
服務建議書（Proposal）摘要生成把專題概念轉成標準服務建議書的前言與範疇說明。
Claudeprompt
請扮演政府標案審查顧問。請針對主題「輸入主題，如：永續農產品綠色電商網站」，寫一段「服務建議書（Proposal）之專題背景與執行範疇說明」。 要求：使用列點方式說明此網站建置案能解決的三大實務痛點（如資訊分散、缺乏動態互動、手機端體驗不佳），並說明預計呈現的視覺設計策略。
看 AI 回應範例
【服務建議書（Proposal）前言與執行範疇】 一、專題背景：現行典藏系統普遍面臨「瀏覽體驗不佳、行動端適應力弱、文化符碼缺乏現代轉譯」等問題。本團隊提出《客影尋綜》建置案，讓沉寂的文化資產轉化為具吸引力的數位資產。 二、欲解決之三大痛點： 1. 資訊架構混亂：提供三階層語意化 Site Map（年代、地區、文物類別）精準檢索。 2. 行動端體驗斷裂：採 Mobile-First 佈局，確保手機與平板上的瀏覽流暢度。 3. 靜態圖檔缺乏吸引力：導入微互動與轉場特效，賦予圖紋與聚落故事數位生命力。