@Akane_Lee：演講 QA 時，多位前端工程師（F2E）詢問同一問題——如何讓平面設計師交出可用的 Web 圖？甚至連切圖都不讓設計師做、自己來，仍狀況連連。問他們用什麼軟體切圖，答 Illustrator，當下就覺得不妙。我極不支持用 Illustrator 做任何螢幕用檔案：切圖不便、對 PX 支援差，AI 本質是印刷軟體。當公司只有平面設計師、無 UI 時，所有 Mockup 皆出自平面設計手中，F2E 該如何自救？

一、半小時教會平面設計師「網頁版面結構」

平面設計交出不可實作檔案，絕大多數因為「不懂」。等他自學 HTML/CSS 可能已準備換工作。不如花半小時教他網頁版面構成原理，平面搞懂原理後出怪圖機率大降。

找幾個過往案例或網上規律性強的網站當教學模板，列印成紙本，備幾支不同顏色筆，拉平面設計師來聽課。舉例：rainstep.co（我做的頁面），典型結構：NavBar、大圖 Banner、內文、聯絡人、Footer。

第一版范例越簡單越好，太難聽不懂。別一上來講 Div、Class、Tag、Header 等術語，他們會把注意力放在「搞懂術語」上，真正想傳達的「我會怎麼切圖、怎麼構成版面」反而聽不進去。請放下專業術語，設想「今天我要對媽媽說明工作怎麼完成」，用淺顯口語化表達（千萬別講英文，會被翻白眼）。

拿出彩色筆，開始畫框框。以下 4 點一定要分色講清，尤其是「Div」：

• Div（區塊容器）
• 文字、標題、內文
• 圖片、背景底圖、Banner
• 對齊、float

上圖是我約略拉的框圖，平面設計師看這樣子、再仔細說明一遍大概都會懂。舉幾個「這樣說都聽得懂」的話術：

NavBar：「這塊黑底我會拉成一個框框，黑底置頂，左右自動延伸到底，框裡可放圖片文字。」
Banner：「若要用大圖當底圖、上頭壓 Logo 與標語，要跟我說怎麼對齊，如置中。」
內文：「通常圖文對齊跟著方框跑，框內外可加留白間距，框內圖文只能靠左、靠中、靠右三種對齊。」
（Padding、Margin 兩屬性初學易混淆，非技術背景平面設計師有些也不想知差別，犯不著花大力氣講，跟他們說方框裡外都能設定留白就好。）

若遇真心想學的設計師，教學結束後再找時間慢慢教，別操之過急，平面設計師無技術思維，需留時間轉換心情。

二、Grid 系統：強制對齊的底線

實在沒時間或不方便教，網上有大量 Grid 中文教學，搜集幾個叫他們閱讀並照做。平面設計師一定會拉參考線（AI 或 PS 都行），強制要求照 Grid 公式設計網頁。

若教了還聽不懂、或根本不想學，務必事先聲明：出圖若未照 Grid 做，就退件。起碼圖文影音對齊，不會東突西凹……