如何讓公司的平面設計師交出可以用的WEB圖

 

　　@Akane_Lee ：在演講的 QA 時間，有幾位 F2E(前端工程師) 跑來問我這個問題，看來這是許多人心中的痛啊…甚至連圖都不讓設計師切了、直接自己來，卻還是狀況連連…如何讓公司的平面設計師交出可以用的 web 圖呢?

　　問了這幾位 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 去做、就退件，起碼圖文影音是對齊的，不會東突一塊西凹一塊…