進階網頁設計｜課程講義

Advanced Web Page Design

資訊架構（IA）設計
Relume AI 實戰與服務建議書撰寫

Author

JinJin Wang

September 16, 2026

・ 網站地圖（Site Map）與樹狀結構設計

資訊架構（Information Architecture, IA）就像是建築師的「空間藍圖」。沒有清晰的 IA，使用者進入網站就會像走進迷宮。

・ 什麼是網站樹狀結構？

網頁的資訊層級通常呈現「樹狀分枝」結構，合理的層級深度能大幅提升 UX 體驗：

  • L0（Root/Home）： 網站首頁（入口）。
  • L1（Primary Navigation）： 主導覽列（通常 5 ~ 7 個核心區塊，如：關於我們、最新消息、主題展區、服務指引、聯絡我們）。
  • L2（Secondary Navigation）： 次級選單 / 分類頁面（如：「主題展區」下的「線上展廳」、「實體特展」）。
  • L3（Detail Page）： 內容內頁（如：單一展覽的詳細介紹與購票頁）。
event design
網站樹狀結構（Site Map）示意圖

・資訊架構（IA）五大黃金法則：完整拆解與設計實務

在網頁 UI/UX 與資訊架構（IA, Information Architecture）領域中，資訊架構不只是「分類列表」，而是預測使用者的心理模型，並提供最低認知阻力的視覺路徑。

對於設計系的學生來說，視覺的美感必須建立在健康的資訊架構上。否則再炫目的動效與配色，都會因為使用者「找不到資訊」而失去商業價值。

  1. 廣度 vs. 深度平衡法則（Breadth vs. Depth Balance）
    網站結構的「寬度（L1 主選單項目數量）」與「深度（層級延伸套疊的幾層）」之間存在著嚴格的權衡關係（Trade-off）。
    • 心理學依據：米勒定律（Miller's Law）與 席克定律（Hick's Law）
      • 人類短期記憶容量為 7 ± 2 個資訊塊。
      • 席克定律指出：選擇越多，決策需要的時間就呈對數成長。
    • 黃金比例公式：
      • L1 主選單項目： 建議控制在 5 ～ 7 個。超過 8 個會造成視覺擁擠與選擇麻痺。
      • 樹狀層級深度： 建議控制在 3 層以內（L0 ～ L2/L3）。超越 4 層以上的結構，使用者流失率將大幅提升 60% 以上。
    event design
    網站架構的三種型態對比
  2. 現代三點擊與「低摩擦力」法則（Frictionless Click Rule）
    傳統 UI 教條常強調「三點擊原則（3-Click Rule）」，即使用者必須在 3 次點擊內找到需要的資訊。但在現代網頁 UX 中，這個原則被昇華為：「點擊的質量比次數更重要」。
    • 心理學依據：米勒定律（Miller's Law）與 席克定律（Hick's Law）
      • 無痛點擊（Frictionless Click）：
        如果每一次點擊的目的性極其明確、回應速度快（≤ 0.3 秒），且頁面不必重新整理，使用者點擊 4 次都不會感到厭煩。
      • 高認知阻力點擊（High-Friction Click）：
        如果按鈕名稱模糊不清、需要停頓思考、或是載入緩慢，使用者點擊第 2 次就會放棄離去。
      • 實務準則：
        • P0 核心任務（如：立即報名、尋找票價）： 必須在 1 ～ 2 次點擊或直接顯露於主頁橫幅（Hero Section）。
        • P1/P2 次要資訊（如：條款細節、歷史背景）： 可安排於 2 ～ 3 次點擊深度內。
    event design
    現代三點擊與低摩擦力法則 (Modern 3-Click & Low-Friction Rule)
  3. 語意化與「別讓我思考」標籤法則（Semantic Labeling）
    4. 「Don't Make Me Think.（別讓我思考）」—— UX 大師 Steve Krug

    視覺設計師常為了追求「詩意」或「獨特感」，使用讓使用者困惑的字眼作為選單名稱。在資訊架構中，直覺清晰遠比創意文字重要。

    選單類型 ❌ 避用的創意/模糊標籤 ✅ 推薦的語意化直覺標籤 效益分析
    品牌介紹 靈魂基地 / 我們的起點 關於我們 (About Us) 降低思考時間
    產品/展覽 視覺盛宴 / 精彩碰撞 主題展區 (Exhibitions) 符合搜尋心理
    服務與幫助 解憂雜貨店 / 疑難雜症 常見問題 (FAQ) / 服務指引 提升找解答速度
    聯絡方式 飛鴿傳書 / 傳送心意 聯絡我們 (Contact) 提升轉換率 (CTA)
  4. 漸進式揭露法則（Progressive Disclosure）
    這是現代 UI/UX 處理海量資訊時最重要的設計技巧。不要一次把所有細節全都塞給使用者，而是像剝洋蔥一樣，層層遞進地呈現資訊。

    5. 漸進式揭露的三層展示結構：

    • 第一層：摘要與強視覺（L0 / Cards）
      • 畫面呈現： 大圖 + 精簡標題 + 一句話摘要 + 明確的 CTA 按鈕（如：「了解更多」）。
      • 目的： 吸引注意力，讓使用者在 1 秒內判斷是否有興趣。
    • 第二層：互動式展開（L1 / Accordion / Modals）
      • 畫面呈現： 使用者點擊或懸停（Hover）時，透過手風琴折疊選單（Accordion）、彈窗（Modal）或 Bento Grid 卡片展開詳細規格。
      • 目的： 不跳轉頁面的情況下提供次要資訊，維持操作連貫性。
    • 第三層：完整內容內頁（L2/L3 / Detail Page）
      • 畫面呈現： 獨立的完整文章或數據表格，包含完整文案、附件下載與完整延伸連結。
      • 目的： 滿足深入研究型受眾的需求。
  5. 定位與路徑錨點法則（Orientation & Findability）
    當使用者進入網頁的任何一個子頁面時（例如從 Google 搜尋結果直接點進 L3 內頁），網站系統必須隨時回答使用者心中的三個終極問題：
    1. 我在哪裡？（Where am I?）
    2. 我從哪裡來？（Where have I been?）
    3. 我可以去哪裡？（Where can I go?）
    設計師必須提供的視覺路徑錨點：
    1. 導航列當前狀態（Active State）：
      在選單中以底線、變色或 Highlight 標註使用者當前身處的章節。
    2. 麵包屑導航（Breadcrumbs）：
      顯示完整階層路徑（例如：首頁 ➔ 主題展區 ➔ 線上展廳 ➔ 單一展覽介紹），方便使用者隨時往上跳轉。
    3. 關聯內容推薦（Related Links / Next Steps）：
      在文章或產品頁末端，提供「下一篇文章」或「相關展覽」的卡片，延長使用者在網站內的停留時間。
    event design
    導航列當前狀態、麵包屑導航 與 關聯內容推薦 三大核心要素

・ Relume AI 實戰操作指南：
從 Prompt 到 Figma Wireframe

・視覺化工作流概覽

以下繪製 Relume AI 從需求輸入到 Figma 自動化的 4 步驟極速開發工作流：

視覺化工作流概覽
event design
Relume AI 網頁鋼骨架構生成流程 (Sitemap to Figma Wireframe)

・4 步驟詳細操作實務指南

  1. STEP 1：需求指令輸入與 AI 語意解構（Prompt Engineering）
    2. 進入 Relume AI（relume.io）註冊登入後，點擊 "Create New Project"。
    系統會跳出 Prompt 輸入框。

    視傳系學生常犯錯誤： 輸入太簡單的句子（如：「請幫我做一個觀光網站」），這樣 AI 產出的結構只會是標準模板，缺乏專題個性。

    💡 高品質 Prompt 撰寫公式：

    【專案類型】 + 【目標受眾 (Persona)】 + 【關鍵核心功能 (RFP需求)】 + 【資訊頁面風格】

    實戰 Prompt 範例（可直接複製修改）：

    『我們要參加『島嶼新浪潮：地方創生與數位觀光入口網』的標案競標。

    主要目標受眾為 20-35 歲喜歡自由行與在地體驗的年輕族群，以及老年無障礙使用者。

    請幫我生成一個網站架構，必須包含：

    1. 首頁：強烈視覺主頁橫幅 Hero Section、Bento Grid 焦點創生店家區塊、即時天氣與船班動態。
    2. 景點與遊程探索頁：具備多重標籤（Tag）動態篩選器。
    3. 線上體驗預約頁：含預約日期表單與價格試算。
    4. 無障礙服務說明與宣告頁。

      5. 請確保階層控制在 3 層（L0~L2）以內，維持極簡與低認知阻力的 UX 邏輯。』

    event design
    STEP 1：需求指令輸入與 AI 語意解構（Prompt Engineering）
  2. STEP 2：Sitemap 樹狀圖審查與手動邏輯校正

    3. 點擊 "Generate Sitemap" 後，AI 會在 10 秒內生成整座網站的樹狀地圖。此時設計師要擔任「總編輯」的角色進行審查：

    1. 檢查階層深度： 確認主選單（L1）是否維持在 5 ~ 7 個 項目。
    2. 節點增刪與重命名：
      • 點擊節點上的 "+" 號可以新增子頁面（例如在「主題展區」下新增「線上展廳」）。
      • 將 AI 生成的英文標籤，依據第二週學到的語意化法則改為直覺中文（例如：將 About Us 改為 關於我們；將 Explore 改為 景點探索）。
    3. 複製與調整排序： 滑鼠拖曳節點即可更換選單順序（如將最核心的「預約服務」移至選單右側顯眼位置）。
    event design
    STEP 2：Sitemap 樹狀圖審查與手動邏輯校正
  3. STEP 3：Wireframe 區塊（Components）自動堆疊與微調

    4. 當 Sitemap 確認無誤後，點擊右上方 "Generate Wireframe"。Relume AI 會為每一個頁面，自動挑選並堆疊符合 UX 邏輯的網頁區塊（Section Components）：

    核心區塊微調技巧：
    1. 更改區塊樣式（Swap Component）：
      如果 AI 幫首頁（Home）產出的 Hero 區塊是「純文字」，但你的標案需求需要「大圖與影片背景」，點擊該區塊右側的 "Refresh / Swap" 按鈕，Relume 會自動切換成不同的版型結構（如：Hero / Header Section， 1 到 30 種變型）。
    2. 新增 Bento Grid 便當盒卡片區：
      選取內頁區塊，搜尋 Bento Grid 或 Feature Section，加入多卡片組合，用來呈現多樣化的觀光亮點或展覽卡片。
    3. 預覽 RWD 響應式：
      點擊右上角切換 Desktop（桌機） 與 Mobile（手機） 視圖，觀察 AI 自動調適的單欄手機版排版是否順暢。
    event design
    STEP 3：Wireframe 區塊（Components）自動堆疊與微調
  4. STEP 4：一鍵匯入 Figma，接軌 Auto Layout 設計系統

    5. 這是將企劃轉化為視覺最震撼的一步：

    1. 安裝 Plugin：
      在 Figma 開啟新檔案，搜尋並安裝 "Relume Library" 插件。
    2. 複製連結/Token：
      在 Relume 網頁右上角點擊 "Export to Figma"，複製專案連結或 Token。
    3. 在 Figma 中貼上生成：
      開啟 Figma 插件，點擊 "Import"，AI 產出的全站 Wireframe 矩陣就會在 1 分鐘內直接在 Figma 畫布上全部排開！
    event design
    STEP 4：一鍵匯入 Figma，接軌 Auto Layout 設計系統
    匯入 Figma 後的專業接軌檢核表（Design System Ready）

    當 Wireframe 匯入 Figma 後，應立即進行以下結構整理，為階段二（W6-W9）的視覺彩繪打好底子：

    檢核項目 Figma 實務操作要點 對下一階段視覺設計的效益
    1. Auto Layout 結構確認 檢查每個 Component 的間距（Gap）與內距（Padding）是否已自動套用 Auto Layout（如：`Vertical` / `Horizontal`）。 更換文字與圖片時，容器會自動推擠彈性縮放，完全不破版。
    2. Style Guide 樣式綁定 將 Relume 預設的灰色系與黑白色，批量替換為 W4 規劃好的色彩變數（Color Tokens/Variables）。 一鍵將全站黑白線框圖升級為品牌全彩視覺。
    3. 替代圖片佔位符 (Placeholders) 利用 Unsplash 插件或 Midjourney 生成的影像，批量填入 Relume 預留的灰底圖片框。 快速產出高保真（High-Fi）提案畫面。
    4. 製作微互動 Prototype 在 Figma 內將 L1 選單節點與對應的 L2 頁面畫布用箭頭拉出 Prototype 點擊連結。 在 W5 期中簡報時，能直接開出可點擊示範的原型稿給評委觀看。

    「Relume AI 不是幫你偷懶，而是把原本要花兩週拉骨架的枯燥工時，壓縮成 15 分鐘！省下來的時間，我們要拿去思考更強大、更驚豔的視覺意象與動態體驗！」

・ 從競標思維到視覺化提案
——服務建議書架構與撰寫全攻略

標案的決策者（評選委員）通常要在 15 分鐘內看過好幾份提案。視覺設計師要學會用「結構化」的文字與圖表展示專業。

・ 撰寫服務建議書前的四大準備方向

在動筆寫提案前，團隊必須先收集並釐清以下四大核心資料，這四個方向直接對應了評選委員最在意的審查指標：

服務建議書四大準備方向
四大準備方向 核心準備內容與資料 評選委員心中的疑問
1. 廠商規模、信譽與實績 公司基本資料、組織架構圖、近 3 年營運狀況、過往代表性網站建置案例（特別是大型網站、RWD 與無障礙經驗）。 「這家公司穩不穩定？以前有沒有做過類似規模的專案？」
2. 人員經驗與能力證明 計畫主持人（PM）、UI/UX 設計師、前端工程師之履歷、學經歷、年資與相關專業認證證明文件。 「實際負責我們案子的人是誰？能力夠不夠？」
3. 服務計畫與執行內容 需求理解、資訊架構（IA）、UI/UX 規劃、視覺風格提案、RWD 版型、開發流程、資安與維運計畫。 「他們提的方案有沒有打中我們的痛點？能不能做出來？」
4. 價格完整性與合理性 詳細成本分析表（直接薪資、管理費用、其他直接費用、公費與稅捐）。 「這筆預算花得合不合理？有沒有亂報價或漏報費用？」

・ 服務建議書與簡報檔的呈現重點

「評選委員通常要在短時間內閱讀多份提案，視覺傳達設計系學生應發揮資訊設計（Information Design）的專長，將枯燥的文字轉換為易讀的視覺語言：

  1. 符合基本寫作格式：
    遵守字體大小、行距、頁碼與章節階層標示，保持畫面乾淨專業。
  2. 配置精簡合理，切忌濫竽充數：
    頁數不是越多越好，重點在於邏輯緊湊。每一頁都必須有明確的資訊價值。
  3. 全面圖面化（Diagramming & Visualization）：
    • 少用長篇大論，多用圖表說明： 善用流程圖、架構圖、Bento Grid 模組圖、比較表格與 Mood Board。
    • 凸顯重點： 關鍵數據、設計亮點與時程節點採用 bold（加粗）或顏色強調。
  4. 簡報檔（Pitch Deck）雙軌搭配：
    • 簡報檔是服務建議書的「精華濃縮版」，目標是畫龍點睛、引導評委快速瀏覽服務建議書的重點章節。

・ 服務建議書目錄與內容建議

建議各組以以下五大章節結構進行編排與撰寫：
內容與配分，依不同專案而定

event design
服務建議書（Proposal）章節目錄與架構圖

  1. 第一章：相關經驗、實績與團隊能力
    1. 公司簡介與基本資訊
      • 基本資料： 公司名稱、成立日期、資本額、員工人數、主要經營項目與業務範圍。
      • 組織架構圖（Org Chart）： 呈現公司內部部門分工。
    2. 承做本案之經驗與代表性實績
      • 案例列表： 列出近 3 年執行過之相關專案（註明專案名稱、委託單位、執行年份）。
      • 代表案例深度剖析： 選出 1~2 個最有代表性的作品，展示其網站縮圖、RWD 響應式畫面及無障礙網頁執行經驗。
    event design
    相關經驗、實績與團隊能力」視覺化架構圖
    💡 課堂應用說明
    1. 第一欄（公司簡介與規模）： 引導學生繪製組織架構圖（Org Chart），即使是 3~4 人的學生小組，也能明確標示 PM、UI 設計與前端技術的分工。
    2. 第二欄（代表性實績）： 教導學生將過去課堂作業或實習作品進行「包裝」，強調 RWD 響應式、無障礙規範 與 AI 工具應用 等亮點。
    3. 第三欄（團隊成員與認證）： 明確呈現各職位的關鍵職掌與技能證明（如 Figma 認證、競賽獲獎或無障礙培訓），大幅增加提案的可信度。
  2. 第二章：專案需求之規劃與建議及其技術能力

    3. 這是提案中最核心的章節，必須展現完整的 UI/UX 設計邏輯與技術開發可行性。

    1. 網站內容與視覺設計規劃分析
      • 內容分析： 重整現有網站資訊，提出清晰的資訊架構（IA）。
      • 視覺風格定位： 提供 Mood Board（色彩計畫、字體規範、品牌意象）。
      event design
      網站內容與視覺設計規劃分析
      💡 課堂應用說明
      1. 左欄（網站內容分析與資訊架構）： 強調「減法原則」與「樹狀層級 (Sitemap)」，並附上 Mini Sitemap 視覺圖，提示如何在服務建議書中展示專業的 UX 規劃力。
      2. 右欄（視覺風格定位與規範）： 包含 Mood Board 定位與 Color Tokens（色彩計畫）展示示範，並強調公家機關標案極其重視的 WCAG 2.1 AA 級無障礙對比度規範。
      視覺風格定位提案示意圖 (Mood Board & Design System)
      event design
      視覺風格定位提案示意圖 (Mood Board & Design System)
    2. UI/UX 規劃與 RWD 響應式設計
      • UX 使用者路徑： 展示 Persona（目標受眾畫像）與 Wireframe（線框圖）。
      • RWD 斷點規劃： 說明 Desktop / Tablet / Mobile 跨裝置版型轉化邏輯。
      event design
      UI/UX 規劃與 RWD 響應式設計
      💡 課堂應用說明
      1. 左欄 PART 3（UX 使用者路徑與 Wireframe）：
        • Persona 痛點對接： 引導說明專題網站如何根據目標受眾（如年輕旅客或樂齡族群）的認知習慣，設計對應的 UI 元件。
        • Relume 線框圖 (Wireframe)： 展示從心智地圖到具體網頁組件（Hero 區塊、Bento Grid 卡片）的堆疊過程。
        RWD 響應式設計提案示意圖 (Responsive Web Design)
        event design
        RWD 響應式設計提案示意圖
      2. 右欄 PART 4（RWD 跨裝置斷點與轉化）：
        • 標準斷點定義： Desktop (桌面網頁)：≥ 1200px，Tablet (平板設備)：768px ~ 1199px，Mobile (行動裝置)：< 768px ）三大斷點規範。
        • 網格轉化圖解 (Grid Shift)： 以視覺小圖示範多欄（3欄）排版如何在平板（2欄）與手機（1欄垂直堆疊）自動流動調適，說明符合手持設備觸控規範（Touch Target ≥ 44px）的設定邏輯。
    3. 網站視覺化設計與開發流程

      4. 說明團隊如何運用現代 AI 工具協同開發，維持高效率與高品質：

    event design
    網站視覺化設計與開發流程
  3. 第三章：專案管理與維運能力
    1. 工作項目與時程規劃（甘特圖 Gantt Chart）

      2. 清楚標註各階段關鍵檢核點（Milestones），例如：W3 服務建議書繳交 ➔ W9 Figma 設計稿確認 ➔ W15 網站測試 ➔ W18 正式上線。

      週次與階段 核心任務重點 階段性關鍵交付物 (Milestone)
      第 1 - 5 週：
      需求企劃期      		 解讀 RFP、確定 Persona、利用 Relume AI 生成 Sitemap 與 Wireframe，撰寫服務建議書。 期中提案簡報 (Pitch)
      第 6 - 9 週：
      視覺設計期      		 建立 Figma Design System、Auto Layout 排版、Figma Make 靈感生成、原型互動製作。 Figma 高保真 RWD 設計稿
      第 10 - 15 週：
      AI 前端實作期      		 導入 Framer / v0.dev / Stitch 進行雙軌開發、動態微互動優化、無障礙與效能除錯。 可測試之網頁 Beta 版本
      第 16 - 18 週：
      上線與總決審      		 雲端部署上線、網域綁定、最終專案展示影片製作與模擬競標審查。 正式網址與期末發表
    2. 專案人員管理與職掌分工

      3. 由於學生團隊規模較小，一人可能兼任多項職掌（例如專案主持人兼任 UI 設計師），請在表格中明確標示分工與成員專業經歷：

      專案職稱 成員姓名 專案職掌與主要工作項目 專業經驗與技能證明
      專案主持人 (PM) OOO 專案進度管控、客戶溝通、服務建議書撰寫、範疇與風險管理。 3 年專案管理經驗，曾參與政府數位入口網建置案。
      UI/UX 視覺設計總監 XXX 網站視覺風格定位、Design System 建立、Figma RWD 排版與動態原型製作。 視傳系 UI 專攻、Figma 認證、國內設計競賽獲獎經歷。
      前端與 AI 技術負責人 YYY AI 前端工具（v0/Framer）整合、RWD 程式碼微調、無障礙規範檢測與雲端發布。 熟悉 Web 基礎架構、精通 No-code 與 AI 網頁生成工具應用。
    3. 第四章：價格合理性與成本分析

      4. 評選委員需要審查費用編列的合理性，請提供結構化的成本分析表：

      成本分析項目 細項內容與費用說明 預算佔比 / 備註
      1. 直接薪資
      (Direct Labor)      		 專案 PM、UI/UX 設計師與前端開發人員之工時估算費用。 約佔 55%
      （主要人力成本）
      2. 管理費用 (Overhead) 軟體訂閱費用（Figma, Relume, Framer, Vercel）及團隊營運分攤。 約佔 15%
      3. 其他直接費用 (Direct Expenses) 商業字型授權、合規圖庫購入、網域（Domain）與無障礙檢測費。 約佔 15%
      4. 公費與稅捐
      (Profit & Taxes)      		 團隊合理利潤（公費）及 5% 營業稅金。 約佔 15%
    4. 第五章：創意表現與加值服務
      • 展現網站核心價值之創意： 提出能為客戶品牌大加分的特色功能（例如：沉浸式 3D 展廳體驗、AI 智慧客服對話框、語音無障礙導覽等）。
      • 後續擴充建議： 說明網頁架構具備模組化彈性，方便未來新增二期功能。

・本週作業

本週課後作業（Assignment 03）

  1. 一、 作業基本資訊與繳交要件
    1. 作業名稱：
      「服務建議書摘要（Proposal Executive Summary）」
    2. 繳交期限：
      第 4 週上課前 完成繳交（作為期中簡報之評分項目）。
    3. 核心目標：
      參照真實「官網改版案評選標準」，完成具備完整資訊架構、專案範疇、開發時程與團隊分工的服務建議書摘要。
    4. 呈報要求：
      全面落實資訊設計視覺化（Visualization），多用圖表、流程圖、樹狀圖與清單呈現，減少密集的純文字。
    5. 繳交格式：
      PDF
  2. 二、 必備五大核心內容模組
    3. 核心模組 具體撰寫與準備內容 視覺化與產出要求
    1. 專案核心理念與需求解讀 痛點分析、目標受眾（Persona）畫像、低摩擦力使用路徑與視覺風格定位（Mood Board 概念）。 Persona 卡片、Mood Board 意象拼貼格與色彩計畫。
    2. 資訊架構與 Wireframe 連結 完整網站樹狀圖（控制於 L0~L2 三層內），並附上由 Relume AI 匯入 Figma 的 Wireframe 連結。 Site Map 樹狀圖、Figma 線框圖原型 (Prototype) 連結。
    3. 專案範疇與交付清單 明確劃分各階段的執行範疇，避免後續範疇蔓延（Scope Creep）。 條理分明的 **Project Scope 表格**（區分 In-Scope 與 Out-of-Scope）。
    4. 專案時程與檢核點 列出各階段關鍵里程碑（Milestones），如：Wireframe 確認、Beta 版測試、無障礙檢測與正式上線。 時程甘特圖 (Gantt Chart) 或里程碑時間軸。
    5. 團隊組織與職掌分工 專案主持人（PM）、UI/UX 設計師與前端工程師等職務分工及技能認證。 組織架構圖 (Org Chart) 與成員履歷卡片。
  3. 三、 專案範疇與交付清單標準格式（Project Scope Table）

    4. 為確保作業呈現專業度，請參照以下結構整理專案範疇清單：

    專案階段 納入服務範疇 (In-Scope) 關鍵交付項目 (Deliverables) 排除範疇 (Out-of-Scope)
    一、 企劃與資訊架構 • RFP 解讀與 Persona 分析
    • Site Map 網站地圖設計（L0~L2）
    • Relume AI 鋼骨 Wireframe 堆疊    		 1. 服務建議書摘要
    2. 網站地圖樹狀圖
    3. Figma Wireframe 檔    		 • 企業 CIS/Logo 重設
    • 線下實體行銷活動
    二、 視覺與 UI/UX 設計 • Mood Board 與色彩計畫規範
    • UI Design System 建立（Auto Layout 3.0）
    • RWD 斷點版型設計（Desktop / Mobile）    		 1. UI Design System 庫
    2. Figma RWD 高保真稿
    3. Figma 互動原型連結    		 • 實體印刷宣傳品輸出
    • 商業影片拍攝
    三、 前端開發與系統整合 • AI 工具建置（Framer / v0.dev / Stitch）
    • 無障礙 AA 級對比度與鍵盤導覽落實
    • Web API 資料串接與預約表單開發    		 1. 前端網頁原始碼
    2. 可測試之 RWD 網站 URL
    3. 無障礙自我評估表    		 • 大型第三方金流串接
    • 行動裝置 App 開發
    四、 測試、部署與保固 • 跨瀏覽器相容性與 Google Lighthouse 測試
    • 雲端代管部署（Vercel/Framer）與 SSL 憑證
    • 1 年期網站保固與後台操作教學    		 1. 正式發布之網站 URL
    2. Lighthouse 效能報告
    3. 後台操作維運手冊    		 • 客戶端實體伺服器採購
    • 期滿後之二期全新開發
  4. 四、 服務建議書（Proposal）六大架構與標案評選標準對照

      5. 本作業產出將直接對應競標標案的評分大項：

    1. 第一章：相關經驗、實績與團隊能力（占比 20%）
      — 公司簡介、專案組織架構圖、成員認證與 CSR 指標。
    2. 第二章：專案需求規劃與技術實作能力（占比 40%）
      — 資訊架構 (IA)、UI/UX 視覺風格 (Mood Board)、RWD 斷點與無障礙 AA 級落實。
    3. 第三章：專案管理、維運能力與時程規劃（占比 30%）
      — 工作項目、甘特圖 (Gantt Chart)、資安防護與保固承諾。
    4. 第四章：價格合理性與成本分析（占比 10%）
      — 成本分析表（薪資人月、管理費、公費與稅捐）。
    5. 第五章：創意表現與加值服務（加分項）
      — 前沿 AI 技術（v0/Stitch）導入與二期模組化擴充建議。