問了這幾位 F2E 他們用什么軟件切圖，答案是 Illustrator ，聽到的當(dāng)下就覺得不妙。我非常不支持拿 Illustrator 做任何給屏幕用的檔案，切圖不便、對(duì) PX 的支持度也很差，Illustrator 是印刷用軟件。當(dāng)公司只給你平面設(shè)計(jì)師、沒有 UI 的時(shí)候，所有 Mockup 都出自平面設(shè)計(jì)手中，F(xiàn)2E 要如何自力救濟(jì)？網(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è)之前做過的案子、實(shí)際用列表機(jī)印出來(lái)成紙本，或是網(wǎng)絡(luò)上找?guī)讉€(gè)比較有規(guī)律性的網(wǎng)站都可以當(dāng)教學(xué)模板，準(zhǔn)備幾支不同顏色的筆、就可以抓平面設(shè)計(jì)進(jìn)來(lái)聽課了。 舉個(gè)例子：rainstep.co（網(wǎng)頁(yè)我做的） 非常常見的版面構(gòu)成，NavBar、大圖 Banner、內(nèi)文、聯(lián)絡(luò)人、Footer。
第一版拿給平面設(shè)計(jì)師當(dāng)范例的網(wǎng)站越簡(jiǎn)單越好，太難的他們聽不懂，不要開口就是Div、Class、Tag、Header 之類。他們會(huì)把注意力放在「搞懂術(shù)語(yǔ)」上，F(xiàn)2E 真正想傳達(dá)「我會(huì)這樣切圖」、「我會(huì)這樣構(gòu)成版面」就不太容易被聽進(jìn)去。請(qǐng)把專業(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)備多種顏色的筆，開始畫框框。 這 4 點(diǎn)是一定要分不同顏色講清楚的部份，尤其是「Div」。
- Div
- 文字、標(biāo)題、內(nèi)文
- 圖片、背景底圖、Banner
- 對(duì)齊、float
上圖可以看到我約略拉的框圖會(huì)長(zhǎng)什么樣，基本平面設(shè)計(jì)師看到這樣子的圖、你再仔細(xì)說(shuō)明一遍大概都會(huì)懂。有鑒于我被老公的詞不達(dá)意整過太多次，舉幾個(gè)「這樣說(shuō)應(yīng)該都聽得懂」的說(shuō)話方式： NavBar：「這塊黑底我會(huì)拉成像這的一個(gè)框框，黑底置頂，左右兩邊也會(huì)自動(dòng)延伸到底，可以在這個(gè)黑底框里放圖片和文字?！?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í)間慢慢教，不要操之過急，平面設(shè)計(jì)師沒有技術(shù)的思維方式，要留點(diǎn)時(shí)間培養(yǎng)轉(zhuǎn)換心情。） Grid 實(shí)在沒時(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ì)師教了還是聽不懂、或根本不想學(xué)，那一定要事先聲明他們出的圖如果沒有照 Grid 去做、就退件，起碼圖文影音是對(duì)齊的，不會(huì)東突一塊西凹一塊…
