你造嗎？網(wǎng)頁(yè)設(shè)計(jì)師的基本功

@Akane_Lee ：不少做平面的設(shè)計(jì)師想轉(zhuǎn)行走網(wǎng)頁(yè)設(shè)計(jì)這條路，做網(wǎng)頁(yè)和做平面是完全不同的思維，加上還要熟悉或了解html和CSS代碼，所以就很考驗(yàn)設(shè)計(jì)師的自學(xué)能力了。而且還有一點(diǎn)，我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，并不是你想怎么設(shè)計(jì)都可以的，還要考慮編碼實(shí)現(xiàn)和用戶(hù)體驗(yàn)。那么今天我們就來(lái)和您聊聊，想轉(zhuǎn)型成為網(wǎng)頁(yè)設(shè)計(jì)師，需要必備的一些技能知識(shí)點(diǎn)：

　　Photoshop

　　Illustrator

　　HTML

　　CSS

　　Responsive

　　加分：Bootstrap、Sass、Compass、Susy…等，會(huì)套用現(xiàn)成的 jquery 包、JS 包之類(lèi)也就差不多了。再深入就是F2E的領(lǐng)域。

　　Photoshop

　　基本中的基本，只要是任何單位是「PX」、給屏幕用的圖稿我都建議用 Photoshop 制作，Illustrator 是印刷用軟件，對(duì) PX 支持度很差。

　　Grid

　　現(xiàn)在新開(kāi)發(fā)的網(wǎng)頁(yè)通常會(huì)要求制作 Responsive ，為了要方便套用 Bootstrap 或 Susy ，Grid 就是一定要懂的觀念。

　　切圖

　　當(dāng)你會(huì)寫(xiě) Html、搞懂 Div、Css 后，你就知道怎么切圖了(無(wú)誤)，不會(huì)寫(xiě) Code 的視覺(jué)設(shè)計(jì)師切出來(lái)的圖常常被退貨也只是剛好…做個(gè)蛋糕需要糖和巧克力粉、材料供應(yīng)卻老給他鹽和胡椒粉，是想逼寫(xiě) Html 的人從種甘蔗和可可樹(shù)開(kāi)始嗎?

　　Illustrator

　　既然都是平面設(shè)計(jì)師想轉(zhuǎn)型，這套一定用的非常熟悉，可惜我對(duì)這套的定義就是「送印刷廠」用。在我的制圖過(guò)程中，所有能用向量繪制的部份我都會(huì)用向量。PS 的向量工具不太好操作，遇到比較復(fù)雜的圖型我會(huì)在 AI 里畫(huà)好、貼進(jìn) PS 為形狀圖層，再來(lái)調(diào)整圖層樣式。所以 AI 只會(huì)用到畫(huà)向量的功能，其他全進(jìn) PS 處理。

　　HTML

　　推薦：HTML5

　　不會(huì)切圖、不會(huì)手寫(xiě) Code 的不要說(shuō)自己是網(wǎng)頁(yè)設(shè)計(jì)師，做網(wǎng)頁(yè)只靠 Dreamweaver?和蒸飯箱蒸出來(lái)的便當(dāng)感覺(jué)差不多，勉強(qiáng)能入口但很難吃。有的 RD 會(huì)接受用 Dreamweaver 之類(lèi)可視化軟件產(chǎn)生的 Code，這要看和設(shè)計(jì)師配合的 RD 接受度到哪里。通常平面想轉(zhuǎn)網(wǎng)頁(yè)設(shè)計(jì)很大部份是薪水可以喊比較高，如果想拿更高的薪水就不要依賴(lài) DW ，老老實(shí)實(shí)的練英打吧。(推薦：死亡打字員)—— YouTube視頻，自備梯子。

　　想當(dāng)個(gè)網(wǎng)頁(yè)設(shè)計(jì)師， W3C 是一定要懂的。當(dāng)然非常多的元素不會(huì)每個(gè)都記得，把這個(gè)網(wǎng)址當(dāng)目錄用吧，不懂或忘記就跑來(lái)查一下。All Standards and Drafts – W3C

　　補(bǔ)充：

　　W3Schools Online Web Tutorials

　　W3Fools – A W3Schools Intervention

　　CSS

　　推薦：CSS current work & how to participate

　　margin、padding 是初學(xué)者最容易搞混的兩個(gè)值;Float 很常用但不小心就破版;熟悉 Background 可以玩出很多花樣…等等。在 CSS 細(xì)節(jié)部份就可以偷懶一點(diǎn)用現(xiàn)成的了，雖然產(chǎn)出的 Code 比較丑不優(yōu)雅，但 RD 比較少去動(dòng)到這一塊，所以還可以接受。我自己常用的偷懶工具如下：

　　圓角框：CSS Border Radius Generator

　　陰影：Box Shadow CSS Generator

　　按鈕：Buttons – A button library built with Sass and Compass

　　可以看 browser 對(duì) html、css 等等的支持度：Can I use… Support tables for HTML5, CSS3, etc

　　當(dāng)然很有很多其他在線生成或是外掛包，歡迎大家補(bǔ)充，好讓我能更偷懶一點(diǎn)…

　　Responsive

　　先把 Html 和 Css 練熟了再來(lái)看 Responsive 這個(gè)大難題。要做好一個(gè) RWD 從 Wireframe 就要規(guī)劃好。在 Wireframe 階段我習(xí)慣先設(shè)計(jì) Desktop 版本，功能最多最完善。但在寫(xiě) Code 的時(shí)候會(huì)是反過(guò)來(lái)、先從 Mobile 的尺寸開(kāi)始刻。剛接觸 RWD 的先套 Bootstrap 增加成就感和手感，等熟悉了覺(jué)得不夠用綁手綁腳的時(shí)候，差不多該踏進(jìn) Sass、Compass、Susy 的領(lǐng)域。

　　別用現(xiàn)成的軟件做 Responsive，除非是純靜態(tài)網(wǎng)頁(yè)不需要和 RD 合作，原始碼臟就臟沒(méi)關(guān)系反正不會(huì)有人看了。目前我看到「排排版就好」的軟件產(chǎn)出的 Code 沒(méi)有干凈的，只要是之后有人還要接手的產(chǎn)出、拜托維持它的干凈整齊。有沒(méi)有打開(kāi)廁所門(mén)看到一團(tuán)亂產(chǎn)生暈眩感臉色發(fā)青的經(jīng)驗(yàn)?看到惡心的 Code 就是這種感覺(jué)。

　　結(jié)論

　　以上寫(xiě)的非常粗淺，只能算是給個(gè)方向讓初學(xué)者知道要怎么學(xué)習(xí)。最好還是去找個(gè) F2E 拜師學(xué)藝一下，靠自己自學(xué)寫(xiě)出來(lái)的東西一定會(huì)被正規(guī) RD 嫌棄，我就被老公罵過(guò)「這是什么邪魔歪道」，邊哭邊學(xué)被他嫌棄了一整年才得到勉強(qiáng)及格的評(píng)語(yǔ)。

　　如果能把上述 5 項(xiàng)都練起來(lái)，就能自己接案賺外快了。只要和程序無(wú)關(guān)的靜態(tài)網(wǎng)頁(yè)都難不倒你。網(wǎng)絡(luò)上有些套裝的特效包可以拿來(lái)改一改套用，看起來(lái)也很炫。(遇到需要套程序接后臺(tái)的可以?xún)墒忠粩傉f(shuō)這超出網(wǎng)頁(yè)設(shè)計(jì)的領(lǐng)域要找 RD 配合。)

　　網(wǎng)頁(yè)設(shè)計(jì)和 F2E 職務(wù)范圍部份重迭，都要寫(xiě) Html、Css，注重使用者體驗(yàn)等等。最大的差別在于網(wǎng)頁(yè)設(shè)計(jì)師要畫(huà) Flow、Wireframe、Mockup、切圖、(標(biāo)示文件)，會(huì)寫(xiě) JS 特效最好，不會(huì)寫(xiě)也沒(méi)關(guān)系。但 F2E 就要對(duì) JS 很熟悉了。網(wǎng)頁(yè)設(shè)計(jì)師算是一腳踩在 UI/UX 圈、另一只腳踩在 F2E 邊在線的角色。千萬(wàn)小心在 Code 上不要和 F2E 起爭(zhēng)執(zhí)，請(qǐng)謙虛求教，沒(méi)事拿自己的弱項(xiàng)去撞別人的強(qiáng)項(xiàng)做什么?RD 寫(xiě) Code 輸給設(shè)計(jì)師是哪門(mén)子笑話?設(shè)計(jì)師強(qiáng)的當(dāng)然是視覺(jué)啊!