・ 課程介紹
這堂課的定位，要訓練具備「策略思考」的數位設計總監（Design Director）。
這學期，我們將以「真實政府/企業標案」為情境，從最前端的網站企劃、寫服務建議書（提案報告）開始，一路走到 Figma 視覺設計。最酷的是，後段我們會直接導入現在最前沿的 AI 生成技術，讓 AI 幫我們把美感直接變成可動、可上線的 RWD（響應式網頁）。
・ 網站設計產業現況：
視覺設計師的危機與轉機
・ 網頁視覺設計師的危機與轉機
現在的網頁設計產業，正在經歷一場巨大的洗牌。
傳統網頁設計的流程是：
設計師畫好圖 ➔ 切圖交給前端工程師 ➔ 工程師寫程式碼 ➔ 測試上線。
在這個流程中，設計系學生常遇到的痛點：
美感打折：
你在 Figma 畫得再漂亮，工程師一句「這做不出來」或「這會破版」，你的心血就被妥協了。缺乏商業邏輯：
很多設計師只考慮「好不好看」，卻不知道客戶（尤其是政府機關）要的是「資訊架構是否清晰」、「有沒有符合法規（如無障礙網頁）」。「美工化」危機：純視覺的價值被稀釋
只要輸入 Prompt，AI 可以在幾秒鐘內吐出符合主流美感的網頁排版。如果設計師只會調顏色、排版面，沒有策略思考，很容易被便宜、快速的 AI 工具取代。靜態思維與動態網頁的衝突
許多平面背景的設計師習慣用「固定尺寸」思考。當設計稿放到不同尺寸的手機螢幕、或是遇到需要滾動產生的互動特效時，畫面就會「破版」或失去美感，導致設計師與工程師溝通時充滿挫折。無法交付「可動成品」的焦慮
現在的客戶期望越來越高、耐性越來越低。只看 Figma 原型（Prototype）已經無法滿足他們，客戶希望看到「能點擊、能開合、甚至能上線」的網址。這讓不會寫程式的視覺設計師壓力倍增。
產業關鍵字：RWD（Responsive Web Design，響應式網頁設計）
現在的使用者有 60% 以上是用手機看網站。因此，我們不能只畫「桌機版（Desktop）」，必須同時思考設計在手機、平板上的彈性流動。這也是為什麼我們需要具備結構化思考的原因。
這場產業洗牌確實來得又快又猛。傳統「設計歸設計、程式歸程式」的瀑布式（Waterfall）流程，在 AI 與無程式碼（No-code）工具爆發的今天已經顯得太慢且脫節。
現在的網頁設計產業，核心思維已經從「繪製靜態畫面」轉變為「建構動態系統」。以下為您全面解析現代的網頁設計流程、視覺設計師的困境，以及必須補齊的技能包。
・ 現代網頁設計流程：AI 協同與即時化
現代的流程不再是單向的接力賽，而是一個「以設計工具為核心，AI 雙向加速」的循環生態：
概念與結構生成（AI 助跑）：
利用 Relume AI 或 ChatGPT 快速生成網站地圖（Sitemap）與基本的資訊架構，幾分鐘內產出 Wireframe（線框圖）並直接匯入 Figma。組件化視覺設計（Figma 核心）：
設計師不再一頁一頁畫死，而是先建立 Design System（設計系統）。利用 Figma Make 等 AI 功能生成局部視覺靈感與元件，設計師專注於品牌美感、細節微調與 RWD（響應式）佈局的流動性。雙軌制實作與轉譯（AI 程式生成）：
視覺/品牌導向：
直接將 Figma 稿「複製貼上」到 Framer，利用 AI 微調動態與斷點，一鍵發布。功能/規格導向：
利用 v0.dev 或 Lovable.dev 生成高互動性的前端組件（如複雜表單），再透過 Stitch 等工具進行無痛組裝。
AI 除錯與雲端發布：
透過 AI 進行跨裝置相容性檢查、效能優化（Lighthouse），並透過 Vercel 或 Netlify 即時部署上線。
・ 網頁視覺設計師必備的新技能與知識
為了在 AI 時代站穩「數位設計總監」的位置，視傳系學生必須開始投資以下技能：
結構化設計思維（Design Logic）Auto Layout 與彈性佈局（Flexbox 觀念）
這不是單純的 Figma 功能，它本質上就是網頁程式碼的排版邏輯。
設計師必須理解什麼是「內距（Padding）」、「外距（Margin）」與「流體拉伸」，畫出來的圖才能無痛轉為網頁。響應式網頁（RWD）斷點邏輯：
必須清楚桌機（Desktop）、平板（Tablet）、手機（Mobile）之間的視覺流動規律（如：三欄如何變一欄），而不是瞎猜。
AI 工具的「導演能力」（AI Co-Working）
UI 提示詞工程（Prompt Engineering）：
學會如何精準對 Framer AI 或 v0.dev 下指令（例如：「請生成一個具備毛玻璃效果（Glassmorphism）、深色模式、符合 AAA 無障礙規範的導覽列」）。AI 元件組裝能力：
知道如何把 AI 生成的程式碼片段，透過像 Stitch 這樣的平台拼圖式地整合進自己的網頁中。
網頁策略與商務能力（Strategy）
資訊架構（IA）與 UX 寫作：
懂得如何規劃網站的「資訊層級」，讓使用者一眼看到重點。同時具備基本的使用者引導文案（Microcopy）撰寫能力。解讀規格與標案提案：
看得懂客戶的需求書（RFP），知道怎麼把設計理念包裝成「解決客戶痛點的商業方案」，這才是 AI 無法取代的「大腦價值」。
當今世代，一個懂結構、懂策略、會用 AI 實作的設計師，產值將會抵過過去一整家小型網頁設計公司。
・ AI 網站生成技術發展：我們的最強外掛
「我不會寫 JavaScript，我做得出酷炫的網站嗎？」
答案是：絕對可以，而且會比傳統做法更快、更精美。
2026 年的現在，AI 在網頁設計領域已經發展到「語意即轉化」的階段。
本門課將會學到三大 AI 核心工具鏈：
企劃期 ➔ Relume AI / ChatGPT：
過去光是想網站要有什麼按鈕、什麼分頁（資訊架構），就要花兩週。現在我們可以用 AI 快速吐出網站地圖（Site Map），讓我們有更多時間專注在視覺風格的突破。設計期 ➔ Figma Make (AI 整合工具)：
只要輸入文字敘述（Prompt），AI 就會幫你生成局部的 UI 元件與基礎佈局。視傳系的同學只要負責進去調色、優化字體、把靈感精緻化，效率提升 300%。實作期 ➔ Stitch.withgoogle & AI 前端工具（v0.dev / Framer）：
利用 Google 的 Stitch 技術與當代 AI 生成科技，我們可以把設計好的組件像拼樂高一樣組合起來，AI 會自動幫我們補齊網頁底層的 RWD 程式碼，直接生成可以實際上線的網址。
・ 專題網站案例分析：
什麼是「有商業價值的設計」？
「好看的設計」如何轉化為「好用且具備商業價值的網站」，以下規劃兩個極具代表性的專題網站詳細案例分析。
這兩個案例分別對應課程實作期的「雙軌策略」：一個是功能與資訊導向的公共標案型網站（適合 v0.dev + Stitch 路線），另一個是視覺與動態導向的沉浸體驗型網站（適合 Framer 路線）。
・ 案例一：公共標案與數位轉型典範
——「國家級永續觀光島嶼入口網」
本案例模擬高金額政府標案，著重於「龐大資訊的視覺化整頓」與「無障礙規範」
【核心衝突】政府要塞入海量政令宣導與風景照片 ➔ 設計師要維持國際級的優雅美感與流暢UX。
標案需求書（RFP）核心痛點
- 多客群需求： 網站必須同時滿足「外國背包客（查交通）」、「本國銀髮族（看福利與字體大）」、「投資廠商（下載簡報）」。
- 嚴格法規： 必須通過國家 AA 級無障礙網頁檢測（對字體對比度、鍵盤操作有死規定）。
- 響應式要求： 70% 的使用者會在海島現場用手機瀏覽，網頁加載速度必須在 2 秒內。
資訊架構（IA）與 UX 策略
減法原則：
傳統政府網站喜歡把所有按鈕平鋪在首頁（俗稱擺地攤）。本案導入 Relume AI 重新梳理，將首頁精簡為四大核心意圖：「島嶼探索」、「行程規劃」、「交通票券」、「商務公告」。模組化設計（Bento Grid）：
首頁中央採用現今最流行的「便當盒佈局（Bento Grid）」，利用不同大小的幾何方塊，將「即時天氣」、「船班動態」、「熱門景點」進行視覺層級分明地切割。視覺與技術實作分析（Figma to AI）
色彩與字體系統：
為了符合無障礙規範（對比度 4.5:1），設計師放棄了低彩度的文青灰，改用高飽和度的深海洋藍（#0F2C59）作為網頁主色，搭配明亮的珊瑚橘作為 CTA（呼籲行動）按鈕。AI 前端落地（v0.dev 應用）：
「交通票券聯營訂位系統」是設計師的噩夢（涉及日期選擇、人數、票種）。設計師在 Figma 畫好精美的介面截圖後，直接餵給 v0.dev，輸入 Prompt：
『請幫我做一個符合這張設計圖的 RWD 船票搜尋組件，使用 Tailwind CSS，且必須完全符合 W3C 無障礙鍵盤操作規範。』
AI 在 30 秒內生成了乾淨、具備動態開合效果的 React 組件，直接解決了視傳系學生寫不出複雜表單的痛點。
・ 案例二：品牌形象與極致視覺展現
——「當代美術館：數位雙年展虛擬展廳」
本案例模擬當代藝術、時尚品牌、設計工作室專案，著重於「視覺張力」與「沉浸式動態」
【核心衝突】網頁不能只是死板的格子 ➔ 設計師要打破網格，用滾動與特效讓網頁變成一件藝術品。
專案核心目標
- 情感共鳴： 網站本身就是展覽的一部分，必須在上線第一秒就震撼觀者。
- 跨裝置流暢： 在桌機上要有華麗的滑鼠跟隨特效，但在手機上要自動轉化為好滑、不卡頓的流動排版。
視覺與版面大膽突破（Break the Grid）
動態排版（Typography as Image）：
拋棄傳統網頁導覽列，將大膽的巨大無襯線字體（如 Impact 或 Syne）作為視覺主體。字體會隨著使用者的滑鼠游標產生「液態變形（Liquid Distortion）」或「反轉色」效果。非對稱式視覺流：
圖片不再乖乖排列，而是隨著使用者的滾動（Scroll），產生速度不同的滾動視差（Parallax Scrolling），創造出前後景深的立體空間感。技術實作與 AI 加速（Figma to Framer）
零程式碼視覺直落：
視傳系學生在 Figma 中利用 Auto Layout 與進階圖層結構完成這套天馬行空的作品後，不需要交給工程師。Framer AI 的魔法：
學生直接將設計稿複製貼上到 Framer。利用 Framer 內建的 AI 助理，直接選取圖片並下達指令：- Framer AI 會自動在畫布後方生成對應的 CSS Motion 程式碼。學生不需理解背後複雜的 window.addEventListener('scroll') 程式，就能在預覽視窗中看到完美的藝術級動效，並一鍵發布成真實網址。
『當使用者滾動頁面時，這張圖片要從透明度 0、旋轉 5 度，漸進放大到 100%。』
網頁設計三維度評估表
解析案例時，可以用「網頁設計三維度評估表」，拆解任何一個現存的優秀網站：
| 評估維度 | 分析重點（視傳系學生的思考轉換） | 案例一（公共標案）的表現 | 案例二（數位展廳）的表現 |
|---|---|---|---|
| 企劃力 (UX) | 網站到底解決了使用者的什麼問題？功能好不好找？ | 極高。3步內查到船班，老人家也能輕鬆看懂。 | 中等。刻意製造探索感，重在體驗而非尋找資訊。 |
| 設計力 (UI) | 字體層級、色彩計畫、品牌個性與 RWD 彈性。 | 嚴謹。模組化便當盒排版，在手機上自動縮成單欄，極度整齊。 | 極高。打破常規、大膽用色與字體，充滿視覺實驗性。 |
| 技術力 (AI/Code) | 動態流暢度、加載速度、互動特效的合理性。 | 穩定。透過 v0 生成標準組件，確保效能與法規過關。 | 驚艷。透過 Framer 實現視差滾動與滑鼠微互動，炫目且順暢。 |
「不要再把網頁當成海報畫了！海報是死的，網頁是活的。好的網頁設計師，是在設計一個會隨著螢幕大小『呼吸變形』、會隨著滑鼠點擊『給予回饋』的有機體。」
・作業說明
・ 學期專題說明：模擬政府標案
本學期的評分重點是「專題網站提案與實作成品」。
各組將模擬一家「數位設計公司」，去競標一個真實的專案。
競標題目選項（擇一）：
- OO縣市「新世代地方創生與觀光島嶼」官方入口網建置案
- 數位發展部「AI 世代全民數位素養推廣」主題專題網
- 台灣當代美術館（MoCA）「虛擬國際雙年展」線上展覽館
- 自定義題目
你需要交付的成果：
期中：
服務建議書（包含網站規劃書）+ Figma RWD 高保真提案稿。期中：
實際發佈上線、可操作的 RWD 專題網站 + 模擬標案現場簡報。
・本週課後作業（Assignment 01）
【任務一：尋找你的設計戰友（分組）】
- 請自由尋找組員，每組 2 - 4 人。
- 建議團隊內要有角色分工（例如：視覺擔當、企劃/文案擔當、互動/AI技術研究擔當）。
【任務二：專題主題發想與RFP提案邀請書（Request for Proposal）解讀】
- 從上述競標題目中，選擇一個你們最感興趣的主題。
- 各組利用 ChatGPT/Claude 進行第一次腦力激盪，並繳交一份 A4 一頁的「主題發想企劃書」，內容需包含：
- 暫定網站名稱與核心理念。
- 目標受眾（誰會想來看這個網站？他們有什麼痛點？）。
- 你們組預計想在視覺上挑戰什麼風格（附上 3 張參考風格圖）。
- 以AI完成視覺模擬
- 繳交時程： 下週上課前上傳至Moodle。