課程定位與學期路線圖
這堂課要訓練的，是具備「策略思考」的
數位設計總監（Design Director）
我們以「真實政府／企業標案」為情境，從最前端的網站企劃、寫服務建議書（提案報告）開始，一路走到 Figma 視覺設計。後段直接導入最前沿的 AI 生成技術，讓 AI 幫我們把美感變成可動、可上線的 RWD（響應式網頁）。
一學期會走過的四個階段
點選階段，看看每一週在做什麼、直接跳到該單元
先想清楚，再動手畫
看懂產業與標案規則，把客戶的 RFP 轉成網站規格、資訊架構與視覺風格方向。這個階段的產出，會直接變成期中服務建議書的骨架。
產出：主題企劃書、需求分析、Sitemap、Style Guide把設計包裝成能得標的提案
用三週提案講義（W06–W08）的流程，從 RFP、架構圖一路做到精稿、互動原型與簡報素材，W09 整合成服務建議書與期中競標簡報。
產出：服務建議書＋提案簡報＋Figma 視覺提案稿把提案做成真的網站
工具收斂成 Claude 與 Figma Make 兩套：依專案性質選擇建置路線，把期中的精稿轉成可互動、可公開瀏覽的 RWD 網站並部署上線。
產出：公開網址的 RWD 專題網站證明提案被兌現了
以「模擬標案現場簡報」發表上線網站：期中提案回顧、提案 vs. 成品對照、Live Demo 與 AI 協作過程。
產出：上線網站＋期末簡報＋備用 Demo 影片網站設計產業現況：視覺設計師的危機與轉機
現在的網頁設計產業正在經歷一場巨大的洗牌。核心思維已經從「繪製靜態畫面」轉變為「建構動態系統」——下面一步步拆解：舊流程卡在哪、新流程長什麼樣子、你需要補齊哪些技能。
設計系學生最常遇到的 5 個痛點
點擊卡片翻面，看這門課怎麼幫你解決
傳統「設計歸設計、程式歸程式」的瀑布式流程，在 AI 與 No-code 工具爆發的今天已經太慢、也太脫節。
傳統流程 vs 現代 AI 協同流程
產業關鍵字：RWD 響應式網頁設計
現在有 60% 以上的使用者用手機看網站。我們不能只畫「桌機版（Desktop）」，必須同時思考設計在手機、平板上的彈性流動——這就是為什麼設計師需要具備結構化思考。
注意看：導覽列在手機上收成漢堡選單、三欄卡片依序變成兩欄、一欄。這就是「斷點（Breakpoint）」邏輯。
網頁視覺設計師必備的新技能包
想在 AI 時代站穩「數位設計總監」的位置，要開始投資以下三類能力。勾選你已經會的，期末再回來看看進步多少。
當今世代，一個懂結構、懂策略、會用 AI 實作的設計師，產值將會抵過過去一整家小型網頁設計公司。
AI 網站生成技術發展：我們的最強外掛
2026 年的現在，AI 在網頁設計領域已經發展到「語意即轉化」的階段——你說得清楚，AI 就做得出來。
過去光是想網站要有什麼按鈕、什麼分頁（資訊架構），就要花兩週。現在用 AI 快速吐出網站地圖（Site Map），把時間留給視覺風格的突破。
⏱ 兩週 → 幾分鐘輸入文字敘述（Prompt），AI 生成局部 UI 元件與基礎佈局。視傳系同學負責調色、優化字體、把靈感精緻化。
⚡ 效率提升 300%把設計好的組件像拼樂高一樣組合起來，AI 自動補齊網頁底層的 RWD 程式碼，直接生成可以上線的網址。
🚀 設計稿 → 上線網址最佳工作流搭配組合
AI 網頁開發工具探索器
依分類、上手門檻篩選，或直接搜尋工具名稱與用途
※「上手門檻」是給視傳系同學的參考：入門＝用對話／畫布就能完成；中階＝需要一點設定或前端概念；進階＝需要本機環境與程式基礎。
小測驗：這個情境該用哪個工具？
專題網站案例分析：什麼是「有商業價值的設計」？
「好看的設計」要怎麼轉化成「好用且有商業價值的網站」？以下兩個案例分別對應課程實作期的雙軌策略：功能與資訊導向的公共標案（v0.dev + Stitch 路線），以及視覺與動態導向的沉浸體驗網站（Framer 路線）。
國家級永續觀光島嶼入口網
模擬高金額政府標案，著重「龐大資訊的視覺化整頓」與「無障礙規範」。
RFP 核心痛點
- 多客群需求：同時滿足外國背包客（查交通）、本國銀髮族（看福利、字要大）、投資廠商（下載簡報）。
- 嚴格法規：必須通過國家 AA 級無障礙網頁檢測（字體對比度、鍵盤操作都有硬性規定）。
- 響應式要求：70% 使用者在海島現場用手機瀏覽，網頁必須在 2 秒內載入。
資訊架構（IA）與 UX 策略
- 減法原則：傳統政府網站喜歡把所有按鈕平鋪在首頁（俗稱擺地攤）。本案用 Relume AI 重新梳理，把首頁精簡成四大核心意圖：「島嶼探索」、「行程規劃」、「交通票券」、「商務公告」。
- 模組化設計（Bento Grid）：首頁中央採用「便當盒佈局」，用不同大小的方塊，把即時天氣、船班動態、熱門景點做出分明的視覺層級。
視覺與技術實作（Figma to AI）
- 色彩與字體系統：為了符合無障礙規範（對比度 4.5:1），設計師放棄低彩度的文青灰，改用高飽和度的深海洋藍（#0F2C59）當主色，搭配明亮的珊瑚橘作為 CTA（呼籲行動）按鈕。上面的檢查器可以自己換色看看哪些組合會不及格。
- AI 前端落地（v0.dev）：「交通票券聯營訂位系統」是設計師的噩夢（日期選擇、人數、票種）。設計師在 Figma 畫好介面截圖後，直接餵給 v0.dev：
當代美術館：數位雙年展虛擬展廳
模擬當代藝術、時尚品牌、設計工作室專案，著重「視覺張力」與「沉浸式動態」。
專案核心目標
- 情感共鳴：網站本身就是展覽的一部分，必須在上線第一秒就震撼觀者。
- 跨裝置流暢：桌機上要有華麗的滑鼠跟隨特效，手機上則自動轉成好滑、不卡頓的流動排版。
視覺與版面大膽突破（Break the Grid）
- 動態排版（Typography as Image）：拋棄傳統導覽列，用巨大的無襯線字體（如 Impact 或 Syne）當視覺主體，字體會隨游標產生「液態變形」或「反轉色」效果。
- 非對稱式視覺流：圖片隨使用者滾動產生不同速度的視差（Parallax Scrolling），創造前後景深的空間感。
技術實作與 AI 加速（Figma to Framer）
- 零程式碼視覺直落：在 Figma 用 Auto Layout 與進階圖層結構完成作品後，不需要交給工程師。
- Framer AI 的魔法：把設計稿直接複製貼上到 Framer，選取圖片後對內建 AI 助理下指令：
網頁設計三維度評估表
解析案例時，可以用這三個維度拆解任何一個優秀網站。下次看到喜歡的網站，也用這張表打分數看看。
網站解決了使用者什麼問題？功能好不好找？
3 步內查到船班，老人家也能輕鬆看懂。
刻意製造探索感，重在體驗而非尋找資訊。
字體層級、色彩計畫、品牌個性與 RWD 彈性。
模組化便當盒排版，在手機上自動縮成單欄，極度整齊。
打破常規、大膽用色與字體，充滿視覺實驗性。
動態流暢度、載入速度、互動特效的合理性。
透過 v0 生成標準組件，確保效能與法規過關。
透過 Framer 實現視差滾動與滑鼠微互動，炫目且順暢。
不要再把網頁當成海報畫了！海報是死的，網頁是活的。好的網頁設計師，是在設計一個會隨著螢幕大小「呼吸變形」、會隨著滑鼠點擊「給予回饋」的有機體。
// 本單元重點
學期專題與本週作業
本學期的評分重點是「專題網站提案與實作成品」。各組模擬一家數位設計公司，去競標一個真實的專案。
競標題目（擇一）
點選你們有興趣的題目，方便和組員討論（只會記在你的瀏覽器）
你需要交付的成果
提案階段
- 服務建議書＋提案簡報（以 三週提案講義的產出為主）
- Figma 視覺提案稿
上線階段
- 用 Claude／Figma Make 建置、公開上線的 RWD 網站
- 模擬標案現場簡報＋Live Demo
本週課後作業 Assignment 01
任務一尋找你的設計戰友（分組）
風格定位、Figma 精稿與設計系統
需求分析、資訊架構、服務建議書
研究 AI 工具，負責上線與互動