三週提案講義：用 AI 助理與 Figma Agent，從架構圖一路做到精稿與簡報
Figma Agent 從網站架構圖、線框稿、情緒板，一路做到精稿與設計系統，再串接 Figma Make 讓互動地圖和篩選功能真的能動，也涵蓋行動端 RWD 轉化，最後包裝成可以投標的服務建議書與提案簡報。
資訊架構（IA）是什麼？為什麼要先做它
資訊架構（Information Architecture, IA）要回答三個問題：內容放哪裡？叫什麼名字？使用者怎麼走過去？它決定網站「好不好找」，而不是「好不好看」。好看的介面救不了找不到東西的網站。
IA 的三根支柱
把內容依「主題、任務、對象、地理、時間」其中一種原則分組。一個網站通常以一種為主、其他為輔。
例：行程列表依「地區」與「類型」分選單、按鈕、頁面標題的用字。使用者看到名字就能預測點進去會看到什麼。
例：「聯絡我們」勝過「飛鴿傳書」主導覽、次導覽、麵包屑、頁尾連結與搜尋，讓使用者隨時知道「我在哪、能去哪」。
例：從任何頁面都能 1 次點擊回到首頁IA 決定「放哪裡、叫什麼、怎麼走」，UI 決定「長什麼樣」。線框稿與精稿都是 IA 的「穿衣服」，結構錯了，衣服再好看也得拆掉重來。
IA 在專案流程的位置：先結構，後視覺
為什麼不能跳過：修改成本會一路放大。在 Sitemap 上改一個節點只要換一個方框，到了精稿階段要重畫好幾個頁面，上線後甚至要動到網址與程式。
同一批內容，換個「分類切角」，L1 就完全不同
下面是同樣 12 張內容卡。點不同的切角，看看 L1 主導覽會長成什麼樣子。沒有唯一正解，要看你的使用者想完成什麼事。
動手：卡片分類（Card Sorting）
卡片分類是業界最常用的 IA 研究方法：請使用者把內容卡分成他們覺得合理的群組，再從結果歸納 L1。下面你先自己做一次；做完後請找 2–3 位同學重做，比較差異，這就是最小版的卡片分類測試。
IA 的三份產出物
| 產出物 | 回答的問題 | 在 Figma 怎麼做 | 後續用在哪裡 |
|---|---|---|---|
| Sitemap 網站地圖 | 有哪些頁面？誰是誰的上一層？ | FigJam 或 Figma Design 的 02 IA 頁：方框＋連接線，每層一種顏色 | 線框稿 Frame 命名、主導覽內容、服務建議書的架構圖 |
| User Flow 任務流程 | 使用者完成一件事要經過哪些頁面？ | 同一頁用圓角矩形、矩形、菱形畫橫向流程 | 決定 CTA 位置、檢查步驟是否太多、簡報的使用者旅程 |
| 功能與內容清單 | 每個頁面放什麼？哪些是 P0、哪些 P1？ | 在節點上標 P0／P1；或貼表格截圖到 01 Research | 專案範疇（Scope）、時程、報價的依據 |
網站地圖（Site Map）與樹狀結構設計
資訊架構（Information Architecture, IA）就像建築師的「空間藍圖」。網頁的資訊層級通常是「樹狀分枝」結構，合理的層級深度能大幅提升使用體驗。
網站的入口。
通常 5～7 個核心區塊，例如關於我們、最新消息、主題展區、服務指引、聯絡我們。
例如「主題展區」底下的「線上展廳」、「實體特展」。
例如單一展覽的詳細介紹與購票頁。
點點看：每個頁面距離首頁有多遠？
點任何一個節點，右邊會顯示麵包屑路徑與點擊深度；點有 ▾ 的節點可以收合
資訊架構（IA）五大黃金法則
資訊架構不只是「分類列表」，而是預測使用者的心理模型，提供最低認知阻力的視覺路徑。視覺的美感必須建立在健康的資訊架構上，否則再炫目的動效與配色，都會因為使用者「找不到資訊」而失去商業價值。
廣度 vs 深度平衡法則
Breadth vs Depth網站結構的「寬度（L1 主選單項目數）」和「深度（層級往下套幾層）」之間有嚴格的取捨關係。心理學依據是米勒定律（人類短期記憶容量約 7 ± 2 個資訊塊）和席克定律（選擇越多，決策時間呈對數成長）。
L1 主選單：建議 5～7 個，超過 8 個會造成視覺擁擠與選擇麻痺。
樹狀深度：建議 3 層以內（L0～L2/L3），超過 4 層以上，使用者流失率會大幅提升 60% 以上。
現代三點擊與「低摩擦力」法則
Frictionless Click傳統的「三點擊原則（3-Click Rule）」要求使用者在 3 次點擊內找到資訊；現代 UX 把它昇華為：點擊的質量比次數更重要。兩個按鈕都按按看，感受差別：
P0 核心任務（立即報名、尋找票價）：1～2 次點擊內完成，或直接放在主頁橫幅（Hero）。
P1／P2 次要資訊（條款細節、歷史背景）：可以放在 2～3 次點擊深度內。
語意化與「別讓我思考」標籤法則
Semantic Labeling「Don't Make Me Think.」——UX 大師 Steve Krug。視覺設計師常為了追求詩意或獨特感，用讓人困惑的字眼當選單名稱。在資訊架構裡，直覺清晰遠比創意文字重要。切換看看同一條導覽列：
想找「聯絡電話」，你會點哪一個？是不是要停下來想一下？
| 選單類型 | ❌ 避用的創意／模糊標籤 | ✅ 推薦的語意化直覺標籤 | 效益分析 |
|---|---|---|---|
| 品牌介紹 | 靈魂基地／我們的起點 | 關於我們 (About Us) | 降低思考時間 |
| 產品／展覽 | 視覺盛宴／精彩碰撞 | 主題展區 (Exhibitions) | 符合搜尋心理 |
| 服務與幫助 | 解憂雜貨店／疑難雜症 | 常見問題 (FAQ)／服務指引 | 提升找解答速度 |
| 聯絡方式 | 飛鴿傳書／傳送心意 | 聯絡我們 (Contact) | 提升轉換率 (CTA) |
漸進式揭露法則
Progressive Disclosure這是現代 UI/UX 處理海量資訊最重要的技巧：不要一次把所有細節塞給使用者，而是像剝洋蔥一樣層層呈現。依序點按鈕，體驗三層結構：
目的：讓使用者 1 秒內判斷有沒有興趣。
- 時間
- 09:00–12:30
- 集合
- 北港碼頭
- 費用
- NT$ 1,200／人
- 無障礙
- 步道可輪椅通行
不跳頁就看到次要資訊，操作不中斷。
完整文章與數據表格
完整文案、行程地圖、附件下載（PDF 行程表）、延伸連結與相關遊程推薦。
目的：滿足深入研究型的受眾。
定位與路徑錨點法則
Orientation & Findability使用者從任何子頁面進入網站時（例如從 Google 直接點進 L3 內頁），網站都要隨時回答三個問題：我在哪裡？我從哪裡來？我可以去哪裡？上面 1-1 的樹狀圖，右側的麵包屑就是在回答這三個問題。
導覽列當前狀態：用底線、變色或 Highlight 標出使用者目前所在的章節（就像本頁左側的章節導覽）。
麵包屑導航：顯示完整階層路徑（首頁 ➔ 主題展區 ➔ 線上展廳 ➔ 單一展覽介紹），方便隨時往上跳。
關聯內容推薦：在頁尾提供「下一篇」或「相關展覽」卡片，延長停留時間（就像本頁最下面的單元切換）。
用 Figma 製作資訊架構：Sitemap、User Flow 到線框頁面
這一章不再用外部工具，所有 IA 成果都在 Figma 裡完成：FigJam 畫 Sitemap 與流程，Figma Design 建立頁面 Frame。從第一個方框開始，名稱、顏色與連結都為下一步的線框與精稿鋪好路。
為什麼 IA 也要在 Figma 做
Sitemap 的節點可以連到線框 Frame，線框再複製成精稿。不必在不同工具間複製貼上。
組員可以同時在白板上貼便利貼、改節點、留言。討論 IA 時最需要的就是大家一起動手。
節點 ID＝Frame 名稱。之後 Figma Agent 或組員只要說出名字，就知道是哪一頁。
Figma 檔案怎麼規劃：每一頁放什麼
先把檔案分成幾個 Page，後面每一個 UNIT 的成果就有固定的地方放。點左邊每一頁看說明：
FigJam 是另一種檔案（白板）：適合發想、便利貼、連接線與流程圖，團隊討論最方便。Figma Design 是設計檔：適合 Frame、Auto Layout、元件。建議：Sitemap 與 User Flow 在 FigJam 畫，線框稿以後在 Figma Design；兩邊用連結互相指向。檔案數量不多時，也可以直接在 Design 的「02 IA」頁用方框與線條畫。
五個步驟：從第一個方框到線框 Frame
STEP 1：在白板上放好每一頁的方框
- 開檔：在 Figma 首頁
Create→ FigJam board 開一張白板；或在 Figma Design 檔案新增 Page「02 IA」直接畫（兩種都可以，下面 3-2 說明差別）。 - 放方框：用左下工具列的 Shapes（圓角矩形），在方框內打上頁面名稱。選取後按
Cmd／Ctrl + D複製，一次把同一層做完。 - 由上到下、由粗到細：先放 L0 首頁，再放 L1，最後 L2；同一層用對齊工具排在同一條水平線上。
- 名稱要短：頁名是「標籤」，要讓人一看就懂（見 2-2 法則 3），例如「線上預約」而不是「開啟你的旅程」。
STEP 2：顏色代表層級，名稱代表編號
- 固定色彩語言：L0 深色、L1 主色、L2 淺色、L3 米色。顏色只用來表示層級，不要拿來表示別的意思。
- 節點加編號：每個方框的名稱用
L1-02_行程與預約這種格式（層級-流水號_頁名）。這個 ID 之後會直接變成線框 Frame 的名稱。 - 用 Section 分組：把同一個 L1 和它的子頁框進一個 Section，方便折疊、討論與分工（誰負責哪一區）。
- 用下方 3-4 的產生器：輸入縮排文字，自動算出編號、檢查層級並產生命名表。
STEP 3：讓階層與重要性一眼看得出來
- 用連接線（Connector）：從父節點連到子節點，選直角（elbow）樣式。連接線會吸附在方框上，移動方框時線會跟著走。
- P0 實心、P1 虛線：P0 頁面用實心填色並加「P0」標籤；P1 頁面只用虛線外框。評審一眼就知道重點在哪。
- 標出捷徑：重要任務的「直達路徑」（例如首頁 CTA 直接到線上預約）用虛線連接並標示 CTA，提醒線框稿一定要放這顆按鈕。
- 檢查：L1 是否 5–7 項？最深是否在 L3 以內？P0 是否都在 L2 以內？
STEP 4：從使用者的任務看架構順不順
- 挑 3 個核心任務：例如「找行程並預約」「查船班」「使用無障礙功能」，一個任務一條橫向流程。
- 圖形語言：圓角矩形＝起點／終點；矩形＝頁面；菱形＝判斷（是／否各一條出口）。
- 每個頁面對應一個節點：流程裡的頁名要和 Sitemap 的 ID 一致，不要出現 Sitemap 裡沒有的頁面。
- 步驟太多就改架構：核心任務超過 4–5 個頁面，回頭檢查是否可以把入口放到首頁，或合併頁面。
STEP 5：Sitemap 變成 Figma Design 裡的頁面骨架
- 建立頁面：在 Figma Design 檔案新增 Page「03 Wireframe」，按
F畫 Frame，右側面板選 Desktop（1440）或 Phone（375）尺寸。 - 沿用 ID 命名：Frame 名稱就用 Sitemap 的
L1-02_行程與預約，之後線框、精稿、Agent 指令都靠這個名字找到同一頁。 - 套用 Auto Layout：選取 Frame 按
Shift + A，讓區塊間距一致（不熟請看補充講義 UNIT 13）。 - 把 Sitemap 變成可點的目錄：在 Frame 上按右鍵 → Copy/Paste as → Copy link，回到 FigJam 選取對應節點，按
Cmd／Ctrl + K貼上連結。
互動：Sitemap 產生器（輸入縮排文字，產生命名與提示詞）
你不需要先在 Figma 一個一個擺方框。先在這裡把架構打成文字，檢查沒有問題，再照命名表去 Figma 建立；也可以複製提示詞請 FigJam AI 或 Figma Agent 生成。上面卡片分類的結果可以一鍵帶進來。
User Flow：任務流程怎麼畫
Sitemap 看的是「有哪些頁面」，User Flow 看的是「使用者要做一件事，會經過哪些頁面」。選一個任務，看流程與圖形語言：
想更快？交給 AI，但你負責驗收
貼上 3-4 產生的提示詞，請它生成架構圖。適合快速產出第一版，再自己調整分層顏色與連接線。
在 Figma Design 用 Agent 依 Sitemap 建立 Page 與 Frame。完整做法、驗收清單與補救指令，見 UNIT 05 Lv.3 網站架構圖。
AI 只能幫你畫出來，不能替你判斷：哪些頁面是 P0、L1 該不該少一項、標籤對不對使用者的語言，仍然要你自己決定，這也是這個單元前面兩章在練的事。
Figma 製作檢核清單
從競標思維到視覺化提案：服務建議書架構與撰寫全攻略
評選委員通常要在 15 分鐘內看過好幾份提案。視覺設計師要學會用「結構化」的文字與圖表展示專業。
動筆前的四大準備方向
翻牌看看：每個準備方向，對應評選委員心中的哪個疑問
服務建議書與簡報檔的呈現重點
評選委員要在短時間內讀完多份提案，視傳系同學要發揮資訊設計（Information Design）的專長，把枯燥的文字轉成易讀的視覺語言：
遵守字體大小、行距、頁碼與章節階層標示，保持畫面乾淨專業。
頁數不是越多越好，重點在邏輯緊湊，每一頁都要有明確的資訊價值。
少用長篇大論，多用流程圖、架構圖、Bento Grid 模組圖、比較表格與 Mood Board；關鍵數據、設計亮點與時程節點用粗體或顏色強調。
簡報檔是服務建議書的「精華濃縮版」，目的是畫龍點睛，引導評委快速找到服務建議書的重點章節。
服務建議書目錄與內容建議（五大章節）
建議各組以下面五大章節編排撰寫。內容與配分依不同專案而定，點章節切換說明與範例圖。
相關經驗、實績與團隊能力
A公司簡介與基本資訊
- 基本資料：公司名稱、成立日期、資本額、員工人數、主要經營項目與業務範圍。
- 組織架構圖（Org Chart）：呈現公司內部部門分工。
B承做本案之經驗與代表性實績
- 案例列表：列出近 3 年執行過的相關專案（專案名稱、委託單位、執行年份）。
- 代表案例深度剖析：選出 1～2 個最具代表性的作品，展示網站縮圖、RWD 響應式畫面與無障礙網頁執行經驗。
公司簡介：就算是 3～4 人的學生小組，也要畫出組織架構圖，標出 PM、UI 設計與前端技術的分工。
代表性實績：把過去的課堂作業或實習作品「包裝」起來，強調 RWD、無障礙規範與 AI 工具應用等亮點。
團隊成員與認證：明確寫出各職位的職掌與技能證明（如 Figma 認證、競賽獲獎、無障礙培訓），大幅提升可信度。
專案需求之規劃與建議及其技術能力
提案最核心的章節這一章要展現完整的 UI/UX 設計邏輯與技術開發可行性，分成三個部分：
- 內容分析：重整現有網站資訊，提出清晰的資訊架構（IA）。
- 視覺風格定位：提供 Mood Board（色彩計畫、字體規範、品牌意象）。
左欄（內容分析與 IA）：強調「減法原則」與「樹狀層級（Sitemap）」，附上 Mini Sitemap 視覺圖，展示專業的 UX 規劃力。
右欄（視覺風格定位）：包含 Mood Board 與 Color Tokens 示範，並強調公家機關標案非常重視的 WCAG 2.1 AA 級無障礙對比度。
- UX 使用者路徑：展示 Persona（目標受眾畫像）與 Wireframe（線框圖）。
- RWD 斷點規劃：說明 Desktop／Tablet／Mobile 跨裝置版型轉化邏輯。
Persona 痛點對接：說明網站如何依目標受眾（如年輕旅客或樂齡族群）的認知習慣，設計對應的 UI 元件。
Figma 線框圖：展示從心智地圖到具體網頁組件（Hero 區塊、Bento Grid 卡片）的堆疊過程。
標準斷點：Desktop ≥ 1200px Tablet 768–1199px Mobile < 768px
網格轉化圖解（Grid Shift）：用小圖示範 3 欄如何在平板變 2 欄、手機變 1 欄垂直堆疊，並說明觸控規範（Touch Target ≥ 44px）。
說明團隊如何運用現代 AI 工具協同開發，維持高效率與高品質：
專案管理與維運能力
工作項目與時程規劃（甘特圖 Gantt Chart）
清楚標出各階段關鍵檢核點（Milestones），例如：W3 服務建議書繳交 ➔ W9 Figma 設計稿確認 ➔ W15 網站測試 ➔ W18 正式上線。點色條看每個階段的任務與交付物。
專案人員管理與職掌分工
學生團隊規模小，一人可能兼任多項職掌（例如專案主持人兼 UI 設計師），請在表格中標明分工與專業經歷：
| 專案職稱 | 成員 | 專案職掌與主要工作項目 | 專業經驗與技能證明 |
|---|---|---|---|
| 專案主持人（PM） | OOO | 專案進度管控、客戶溝通、服務建議書撰寫、範疇與風險管理。 | 3 年專案管理經驗，曾參與政府數位入口網建置案。 |
| UI/UX 視覺設計總監 | XXX | 網站視覺風格定位、Design System 建立、Figma RWD 排版與動態原型製作。 | 視傳系 UI 專攻、Figma 認證、國內設計競賽獲獎經歷。 |
| 前端與 AI 技術負責人 | YYY | AI 前端工具（v0／Framer）整合、RWD 程式碼微調、無障礙規範檢測與雲端發布。 | 熟悉 Web 基礎架構、精通 No-code 與 AI 網頁生成工具應用。 |
價格合理性與成本分析
評選委員要審查費用編列的合理性，請提供結構化的成本分析表。點色條看每一項的細節。
專案 PM、UI/UX 設計師與前端開發人員的工時估算費用（主要人力成本）。
軟體訂閱費用（Figma、Claude、Vercel 等）及團隊營運分攤。
商業字型授權、合規圖庫購入、網域（Domain）與無障礙檢測費。
團隊合理利潤（公費）及 5% 營業稅金。
創意表現與加值服務
加分項展現網站核心價值的創意：提出能替客戶品牌大加分的特色功能，例如沉浸式 3D 展廳、AI 智慧客服對話框、語音無障礙導覽。
後續擴充建議：說明網頁架構具備模組化彈性，方便未來新增二期功能。
本週作業：服務建議書摘要
「服務建議書摘要（Proposal Executive Summary）」
第 4 週上課前完成繳交（作為期中簡報的評分項目）。
參照真實「官網改版案評選標準」，完成含資訊架構、專案範疇、開發時程與團隊分工的摘要。
PDF。全面資訊視覺化：多用圖表、流程圖、樹狀圖與清單，減少密集純文字。
必備五大核心內容模組
專案範疇（Project Scope）：先玩再看表
範疇寫不清楚，客戶就會不斷追加需求（Scope Creep）。判斷看看，下面這些項目該「納入」還是「排除」？
表格專案範疇與交付清單標準格式（Project Scope Table）
| 專案階段 | 納入服務範疇（In-Scope） | 關鍵交付項目（Deliverables） | 排除範疇（Out-of-Scope） |
|---|---|---|---|
| 一、企劃與資訊架構 | RFP 解讀與 Persona 分析 Site Map 網站地圖設計（L0~L2） Figma 線框稿（Frame 依 Sitemap ID 命名） User Flow 任務流程 | 1. 服務建議書摘要 2. 網站地圖樹狀圖 3. Figma Wireframe 檔 | 企業 CIS／Logo 重設 線下實體行銷活動 |
| 二、視覺與 UI/UX 設計 | Mood Board 與色彩計畫規範 UI Design System 建立（Auto Layout） 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. 後台操作維運手冊 | 客戶端實體伺服器採購 期滿後之二期全新開發 |
服務建議書架構與標案評選標準對照
這份作業的產出，會直接對應競標標案的評分大項。點色條看每一章要寫什麼：
公司簡介、專案組織架構圖、成員認證與 CSR 指標。
資訊架構（IA）、UI/UX 視覺風格（Mood Board）、RWD 斷點與無障礙 AA 級落實。
工作項目、甘特圖（Gantt Chart）、資安防護與保固承諾。
成本分析表（薪資人月、管理費、公費與稅捐）。
前沿 AI 技術（v0／Stitch）導入與二期模組化擴充建議。