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

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

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

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

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

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

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

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

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

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

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

• Div

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

• 圖片、背景底圖、Banner

• 對(duì)齊、float

•  

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

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

Banner：「如果你要把一張照片大圖當(dāng)成底圖、底圖上要壓一張 Logo 圖和一行標(biāo)語(yǔ)，那要跟我說(shuō)怎么對(duì)齊，比如置中。」

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

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

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

Grid

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

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

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