問了這幾位 F2E 他們用什么軟件切圖，答案是 Illustrator ，聽到的當下就覺得不妙。我非常不支持拿 Illustrator 做任何給屏幕用的檔案，切圖不便、對 PX 的支持度也很差，Illustrator 是印刷用軟件。當公司只給你平面設計師、沒有 UI 的時候，所有 Mockup 都出自平面設計手中，F2E 要如何自力救濟？網頁版面結構 通常平面設計會交出不能實做的檔案、絕大部份都是因為「他不懂」。但要等到他自己學會 Html、Css 的時候，八成也準備換工作了。等平面設計學會怎么做網頁，不如自己先花個半小時教他網頁的版面構成方式，通常平面搞懂原理后出怪圖的機會就會降低。 找幾個之前做過的案子、實際用列表機印出來成紙本，或是網絡上找幾個比較有規律性的網站都可以當教學模板，準備幾支不同顏色的筆、就可以抓平面設計進來聽課了。 舉個例子：rainstep.co（網頁我做的） 非常常見的版面構成，NavBar、大圖 Banner、內文、聯絡人、Footer。
第一版拿給平面設計師當范例的網站越簡單越好，太難的他們聽不懂，不要開口就是Div、Class、Tag、Header 之類。他們會把注意力放在「搞懂術語」上，F2E 真正想傳達「我會這樣切圖」、「我會這樣構成版面」就不太容易被聽進去。請把專業用語放一邊，設想「今天我要對我媽說明我的工作是怎么完成的」，你就不會用太多只有行內人才懂的用字，盡量淺顯口語化。 （千萬不要講英文，會被設計師翻白眼。你的任務是教會他們看懂網頁構成、不是讓他們把你當成會點技術了不起的技術。） 拿出剛剛要你準備多種顏色的筆，開始畫框框。 這 4 點是一定要分不同顏色講清楚的部份，尤其是「Div」。
- Div
- 文字、標題、內文
- 圖片、背景底圖、Banner
- 對齊、float
上圖可以看到我約略拉的框圖會長什么樣，基本平面設計師看到這樣子的圖、你再仔細說明一遍大概都會懂。有鑒于我被老公的詞不達意整過太多次，舉幾個「這樣說應該都聽得懂」的說話方式： NavBar：「這塊黑底我會拉成像這的一個框框，黑底置頂，左右兩邊也會自動延伸到底，可以在這個黑底框里放圖片和文字。」 Banner：「如果你要把一張照片大圖當成底圖、底圖上要壓一張 Logo 圖和一行標語，那要跟我說怎么對齊，比如置中。」 內文：「通常圖片和文字對齊方式是跟著方框跑，可以在方框外或內加上留白間距，在方框里的圖文可以設定靠左、靠中、或靠右對齊，也就只能設定這三種對齊方式。」 （Padding、Margin 這兩種初學者容易混淆、不懂網頁技術的平面設計師有些人也不會想知道這 2 個屬性有什么差別，犯不著花大把力氣說明，跟他們說方框里外都可以設定留白就好。）
（如果有遇到真心想學的設計師，這次教學結束后再找時間慢慢教，不要操之過急，平面設計師沒有技術的思維方式，要留點時間培養轉換心情。） Grid 實在沒時間或不方便教的話、網絡上有很多跟Grid有關的教學，搜集幾個「中文」教學請他們閱讀并照做。平面設計師一定知道怎么拉參考線，不管是 AI 或是 PS，強烈要求他照 Grid 公式設計網頁。
如果你家平面設計師教了還是聽不懂、或根本不想學，那一定要事先聲明他們出的圖如果沒有照 Grid 去做、就退件，起碼圖文影音是對齊的，不會東突一塊西凹一塊…
