進階網頁設計｜課程講義

Advanced Web Page Design

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

Author

JinJin Wang

September 16, 2026

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

・ 什麼是 RFP（Request for Proposal）？

在業界，當政府機關或大型企業想要建置一個網站時，他們會公開一份名為 RFP（需求說明書） 的文件。這份文件就像是客戶發出的「招募挑戰書」，裡面記載了這個網站必須做什麼、預算多少、什麼時候要交貨。

・設計師必看的 RFP 四大關鍵盲點：

許多視傳背景的同學接專案時只看「要放什麼圖片」，結果常常做白工。看懂 RFP，你要抓的是以下四個指標：

  1. 專案預算與範疇（Budget & Scope）：
    預算 30 萬跟 300 萬的網站作法完全不同。30 萬著重於套用標準模組與快速上線；300 萬則需要客製化視覺、微互動動效與完整的 UX 使用者測試。
  2. 履約時程（Timeline）：
    什麼時候要交 Figma 稿？什麼時候要上線測試？這決定了我們該選用哪種 AI 工具加速（例如：時間太緊就必須直接導入 Framer 範本開發）。
  3. 系統與技術規範（Technical Specs）：
    是否規定要通過 無障礙網頁標章（AA級）？是否指定要做 RWD 響應式？是否要串接舊系統資料庫？
  4. 評選標準（Evaluation Criteria）：
    • 通常評選比重為：履約能力與企劃架構 (40%) + 視覺與 UX 設計 (30%) + 技術可行性 (20%) + 價格 (10%)。
    • 重點： 單靠「好看」只能拿 30 分！你必須靠「企劃力」把剩下的 70 分拿滿。
「競標不是比誰把圖畫得最炫，而是比誰最懂客戶的痛，並且能提出最有邏輯的解決方案。」

・ 需求說明書（RFP）案例

案例一：需求說明書（RFP）詳細範例
模擬標案名稱：【「島嶼新浪潮：地方創生與數位觀光入口網」建置案】
【專案背景】

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

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

・ 需求說明書（RFP）解析講義：
視覺為主之官網改版案評選標準與提案策略

・ 評選配分總覽表（Evaluation Weightage）

在真實標案中，評選委員是手持「評分表」逐項給分的。配分越高的項目，服務建議書中的頁數與比重就必須越多。

評選大項 配分比例 核心審查重點
一、 專案需求規劃與技術能力 40% 網站整體架構、UI/UX 與視覺設計、RWD、無障礙、Web API 銜接、效能與資安防護。
二、 專案管理與維運能力 20% 工作項目與查核點、時程規劃、品質保證、資安異常處理、教育訓練與保固服務。
三、 廠商經驗與專案組織能力 20% 公司簡介與營運狀況、大型網站/RWD/無障礙執行實績、團隊成員分工與專業認證、CSR 指標。
四、 價格及成本分析 20% 整體費用編列合理性、成本分析表（薪資、管理費、公費及稅捐等細項）。
加分項：創意表現與加值服務 加分/整合 展現網站核心價值之創意突破、創新技術導入（如 AI 應用）與後續擴充建議。

・ 五大評選維度與服務建議書（Proposal）對應撰寫要點

  1. 維度一：專案需求之規劃與建議及其技術能力（占比 40%）—— 提案核心靈魂

    2. 這是視傳背景拿分的主戰場，必須展現完整的「視覺力」、「設計邏輯」與「技術可行性」。

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

    3. 評委關心的是「你們能不能按時交貨？出了事誰負責？」。

    1. 工作項目與時程檢核（Milestones）：
      • 列出明確的甘特圖（Gantt Chart），標註各階段關鍵查核點（如：Figma 稿確認、Beta 版測試、正式上線）。
    2. 品質保證與風險控管：
      • 資安與異常預防： 網站斷線、遭駭客攻擊時的緊急應變標準作業流程（SOP）。
      • 測試機制： 跨瀏覽器測試（Safari/Chrome）與裝置相容性檢測。
    3. 後續維運、訓練與保固：
      • 教育訓練： 提供客戶後台操作手冊與實體/線上教學時數。
      • 保固服務： 說明免費保固期限（通常為 1 年）及保固期內修復響應時間。
      • 後續增修與擴充建議： 預留未來功能升級（如增加 AI 客服）的模組化彈性。
  3. 維度三：廠商經驗與專案組織能力（占比 20%）—— 展現團隊實力

    4. 此區塊用以建立客戶的信心，說明團隊有足夠能力承接大型專案。

    1. 團隊實績與實例（Track Record）：
      • 展示近 3 年公司/團隊運營狀況與經營範疇。
      • 重點列舉「國內外大型網站執行經驗」、「RWD 響應式實作案例」及「無障礙網站建置實績」。
    2. 專案人員管理、職掌與分工：
      • 提供專案組織架構圖，明列專案主持人（PM）、UI/UX 設計師、前端工程師等職務。
      • 檢附專案組員之履歷、學經歷、年資與相關專業認證（如：Figma 認證、無障礙培訓證書）。
    3. 企業社會責任（CSR）指標：
      • 說明團隊在綠色數位（降低網頁碳排）、無障礙平權或社會創新上的投入。
  4. 維度四：價格及成本分析（占比 20%）—— 預算編列合理性

    5. 評委需要確認「每一筆錢都花得有道理」，避免盲目漫天要價或低價惡性競爭。

    成本分析項目 費用內涵與編列說明
    1. 直接薪資
    (Direct Labor)    		 專案 PM、UI/UX 設計師、前端開發人員之人月（Man-Month）工時費用。
    2. 管理費用 (Overhead) 團隊日常行政營運、辦公設備攤提、軟體訂閱（如 Figma/Relume/Framer 授權費）。
    3. 其他直接費用 (Direct Expenses) 雲端主機測試費、圖庫授權費、字型授權費、無障礙標章檢測規費。
    4. 公費與稅捐
    (Profit & Taxes)    		 企業合理利潤（公費）及 5% 營業稅。
  5. 💡 加分維度：創意表現與加值服務（創新突破點）

    6. 在比分接近時，這部分是決定是否能高分勝出（得標）的亮點。

    • 網站核心價值之創意突破： 提出超越 RFP 需求的動態視覺體驗或故事化（Storytelling）互動。
    • 前沿 AI 技術導入： 說明如何運用當代 AI 技術（如 v0.dev / Stitch.withgoogle）加速開發流程，大幅縮短交付時程並降低後續維護成本。

・ 參考網址資源庫

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

  1. 需求說明書參考
  2. 政府標案與規範參考網站
  3. 網站架構與 AI 網頁工具鏈網址

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

當你看完厚厚幾十頁的 RFP 後，第二步就是把客戶散亂的需求，轉化為工程與設計都看得到懂的「網站功能清單（Function List）」。

功能清單通常包含三大區塊：

・ 前台視覺與互動功能（User-Facing Features）

  1. 前台視覺與互動功能（User-Facing Features）
    • 導覽與搜尋：
      RWD 漢堡選單、全文檢索、多重條件篩選器（Filter）。
    • 內容展示區塊：
      主頁橫幅（Hero Section）、Bento Grid 便當盒佈局、瀑布流列表、圖文彈跳視窗（Modal）。
    • 互動表單：
      線上報名系統、意見回饋表單、地圖定位服務（Google Maps API）。
  2. 後台管理需求（CMS / Back-end Requirements）
    • 內容管理系統（CMS）：
      公告發布、圖片上傳庫、分類標籤管理。
    • 資料導出：
      報名表單資料匯出（CSV/Excel）。
  3. 非功能性需求（Non-Functional Requirements）
    • 效能與安全性：
      首頁加載時間 < 2 秒、全站 SSL 安全加密（https）。
    • 響應式斷點（RWD Breakpoints）：
      • 桌機版 (Desktop): ≥ 1200px
      • 平板版 (Tablet):768px ～ 1199px
      • 手機版 (Mobile): < 768px

網站功能清單（Function List）視覺規格範本

網站功能清單是將 RFP 轉化為實作項目的關鍵工具。以下提供適用於專案提案的標準功能清單格式：

模組類別 功能名稱 詳細功能規格與互動邏輯 優先級 建議 AI / 開發工具
公共導覽 (Header) RWD 彈性導覽列 桌機版顯示橫向選單；手機版自動切換為滿版漢堡選單（Hamburger Menu），包含多國語言切換鈕。 P0 (核心) Figma / Framer AI
首頁 (Home) Bento Grid 便當盒區塊 採用非對稱幾何卡片排版，呈現最新活動、氣象與主推景點。Hover 時具備卡片微放大與陰影浮起效果。 P0 (核心) Relume AI ➔ Figma
景點探索 多重條件篩選器 使用者點擊「主題 tag（如：手作、自然）」時，下方列表無需重新刷新頁面（AJAX），自動滑暢過濾卡片。 P1 (重要) v0.dev (React 組件)
互動服務 遊程預約表單 包含日期選擇器、人數欄位、自動計算預估金額，並具備前端 Email 格式即時校驗。 P1 (重要) Framer Forms / Stitch
頁尾 (Footer) 無障礙與版權宣告 包含政府機關標誌、無障礙 AA 級標章圖示、隱私權政策連結與社群媒體 Icon。 P2 (次要) Figma Component
event design
網站功能清單（Function List）UI 設計稿

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

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

・ 使用 ChatGPT / Claude / Gemini
——挖掘目標受眾（Persona）提示詞範例

    【提示詞模板：Persona 生成】

    「你是一位資深的 UX 研究員。我們正在參與競標 『[請輸入專題主題，例：新世代地方創生觀光入口網]』。請幫我產出 2 位最具代表性的目標受眾（Persona）。格式需包含：

    1. 基本背景（年齡、職業、數位工具熟練度）
    2. 瀏覽該網站的主要目標（Goal）
    3. 目前使用類似網站時遇到的痛點（Pain Points）
    4. 他們最希望在手機版網站上獲得的一項核心體驗。」

・ 利用 AI 進行競品 SWOT 與突破點分析提示詞範例

【提示詞模板：競品分析】

「我們要針對 [請輸入現有競品網站名稱或網址] 進行競標分析。請站在視傳系 UI/UX 設計師的角度，列出該網站的：

  1. 資訊架構上的 2 個致命缺點
  2. 視覺風格上的 2 個老舊問題
  3. 請提供 3 個『能讓評選委員眼睛一亮』的視覺突破策略。」

・本週課堂實作與作業

・ 【課堂 30 分鐘分組實作】

  1. 確定投標題目：
    各組鎖定一項模擬標案（例如：地方創生網、AI 推廣網、雙年展虛擬展廳）。
  2. AI 腦力激盪：
    組員共同開啟 ChatGPT / Claude / Gemini ，輸入上述 Prompt，產出 2 位專屬 Persona 與競品分析缺點。

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

各組需於下週上課前繳交一份 「專題網站功能清單規格書（Excel 或 Notion 格式）」，需包含：
  1. 專題名稱與標案目標。
  2. 核心 Persona 摘要（簡述受眾痛點）。
  3. 前台與後台功能清單表（至少包含 8 項主要功能規格，並標註 P0 必要 / P1 重要）。
  • 這份清單將直接作為下週 W3 使用 Relume AI 生成 Sitemap 與 Wireframe 的輸入素材！
  • 繳交時程： 下週上課前上傳至Moodle。