平面設(shè)計(jì)師如何轉(zhuǎn)型做網(wǎng)頁設(shè)計(jì)

平面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)是兩個(gè)不同的領(lǐng)域，但相互間也有相通之處。

網(wǎng)頁版面結(jié)構(gòu)

通常平面設(shè)計(jì)會交出不能實(shí)做的檔案、絕大部份都是因?yàn)椤杆欢?。但要等到他自己學(xué)會 Html、Css 的時(shí)候，八成也準(zhǔn)備換工作了。等平面設(shè)計(jì)學(xué)會怎么做網(wǎng)頁，不如自己先花個(gè)半小時(shí)教他網(wǎng)頁的版面構(gòu)成方式，通常平面搞懂原理后出怪圖的機(jī)會就會降低。

找?guī)讉€(gè)之前做過的案子、實(shí)際用列表機(jī)印出來成紙本，或是網(wǎng)絡(luò)上找?guī)讉€(gè)比較有規(guī)律性的網(wǎng)站都可以當(dāng)教學(xué)模板，準(zhǔn)備幾支不同顏色的筆、就可以抓平面設(shè)計(jì)進(jìn)來聽課了。

舉個(gè)例子：rainstep.co

非常常見的版面構(gòu)成，NavBar、大圖 Banner、內(nèi)文、聯(lián)絡(luò)人、Footer。

第一版拿給平面設(shè)計(jì)師當(dāng)范例的網(wǎng)站越簡單越好，太難的他們聽不懂，不要開口就是Div、Class、Tag、Header 之類。他們會把注意力放在「搞懂術(shù)語」上，F(xiàn)2E 真正想傳達(dá)「我會這樣切圖」、「我會這樣構(gòu)成版面」就不太容易被聽進(jìn)去。請把專業(yè)用語放一邊，設(shè)想「今天我要對我媽說明我的工作是怎么完成的」，你就不會用太多只有行內(nèi)人才懂的用字，盡量淺顯口語化。

（千萬不要講英文，會被設(shè)計(jì)師翻白眼。你的任務(wù)是教會他們看懂網(wǎng)頁構(gòu)成、不是讓他們把你當(dāng)成會點(diǎn)技術(shù)了不起的技術(shù)。）

拿出剛剛要你準(zhǔn)備多種顏色的筆，開始畫框框。

這 4 點(diǎn)是一定要分不同顏色講清楚的部份，尤其是「Div」。

• Div

• 文字、標(biāo)題、內(nèi)文

• 圖片、背景底圖、Banner

• 對齊、float

•  

上圖可以看到我約略拉的框圖會長什么樣，基本平面設(shè)計(jì)師看到這樣子的圖、你再仔細(xì)說明一遍大概都會懂。有鑒于我被老公的詞不達(dá)意整過太多次，舉幾個(gè)「這樣說應(yīng)該都聽得懂」的說話方式：

NavBar：「這塊黑底我會拉成像這的一個(gè)框框，黑底置頂，左右兩邊也會自動(dòng)延伸到底，可以在這個(gè)黑底框里放圖片和文字?！?/p>

Banner：「如果你要把一張照片大圖當(dāng)成底圖、底圖上要壓一張 Logo 圖和一行標(biāo)語，那要跟我說怎么對齊，比如置中?！?/p>

內(nèi)文：「通常圖片和文字對齊方式是跟著方框跑，可以在方框外或內(nèi)加上留白間距，在方框里的圖文可以設(shè)定靠左、靠中、或靠右對齊，也就只能設(shè)定這三種對齊方式?！?/p>

（Padding、Margin 這兩種初學(xué)者容易混淆、不懂網(wǎng)頁技術(shù)的平面設(shè)計(jì)師有些人也不會想知道這 2 個(gè)屬性有什么差別，犯不著花大把力氣說明，跟他們說方框里外都可以設(shè)定留白就好。）
 

（如果有遇到真心想學(xué)的設(shè)計(jì)師，這次教學(xué)結(jié)束后再找時(shí)間慢慢教，不要操之過急，平面設(shè)計(jì)師沒有技術(shù)的思維方式，要留點(diǎn)時(shí)間培養(yǎng)轉(zhuǎn)換心情。）

Grid

實(shí)在沒時(shí)間或不方便教的話、網(wǎng)絡(luò)上有很多跟Grid有關(guān)的教學(xué)，搜集幾個(gè)「中文」教學(xué)請他們閱讀并照做。平

面設(shè)計(jì)師一定知道怎么拉參考線，不管是 AI 或是 PS，強(qiáng)烈要求他照 Grid 公式設(shè)計(jì)網(wǎng)頁。

如果你家平面設(shè)計(jì)師教了還是聽不懂、或根本不想學(xué)，那一定要事先聲明他們出的圖如果沒有照 Grid 去做、就退件，起碼圖文影音是對齊的，不會東突一塊西凹一塊…