網(wǎng)頁設(shè)計(jì)師必備技能

本文格式為Word版，下載可任意編輯——網(wǎng)頁設(shè)計(jì)師必備技能網(wǎng)頁設(shè)計(jì)師必備技能

不少做平面的設(shè)計(jì)師想轉(zhuǎn)行走網(wǎng)頁設(shè)計(jì)這條路，做網(wǎng)頁和做平面是完全不同的思維，加上還要熟諳或了解html和CSS代碼，所以就很考驗(yàn)設(shè)計(jì)師的自學(xué)才能了。而且還有一點(diǎn)，我們在設(shè)計(jì)網(wǎng)頁的過程中，并不是你想怎么設(shè)計(jì)都可以的，還要考慮編碼實(shí)現(xiàn)和用戶體驗(yàn)。以下是我為大家探尋整理的網(wǎng)頁設(shè)計(jì)師必備技能，夢想能給大家?guī)矸鲋?更多精彩內(nèi)容請實(shí)時(shí)關(guān)注我們我!

想轉(zhuǎn)型成為網(wǎng)頁設(shè)計(jì)師，需要必備的一些技能學(xué)識(shí)點(diǎn)：

Photoshop

Illustrator

HTML

CSS

Responsive

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

Photoshop

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

Grid

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

切圖

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

Illustrator

既然都是平面設(shè)計(jì)師想轉(zhuǎn)型，這套確定用的分外熟諳，悵然我對這套的定義就是「送印刷廠」用。在我的`制圖過程中，全體能用向量繪制的部份我都會(huì)用向量。PS的向量工具不太好操作，遇到對比繁雜的圖型我會(huì)在AI里畫好、貼進(jìn)PS為外形圖層，再來調(diào)整圖層樣式。所以AI只會(huì)用到畫向量的功能，其他全進(jìn)PS處理。

HTML

推舉：HTML5

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

想當(dāng)個(gè)網(wǎng)頁設(shè)計(jì)師，W3C是確定要懂的。當(dāng)然分外多的元素不會(huì)每個(gè)都記得，把這個(gè)網(wǎng)址當(dāng)目次用吧，不懂或忘卻就跑來查一下。AllStandardsandDraftsW3C

補(bǔ)充：

W3SchoolsOnlineWebTutorials

W3FoolsAW3SchoolsIntervention

CSS

推舉：CSScurrentworkhowtoparticipate

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

圓角框：CSSBorderRadiusGenerator

陰影：BoxShadowCSSGenerator

按鈕：ButtonsAbuttonlibrarybuiltwithSassandCompass

可以看browser對html、css等等的支持度：CanIuseSupporttablesforHTML5,CSS3,etc

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

Responsive

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

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

結(jié)論

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

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

網(wǎng)頁設(shè)計(jì)和F2E職務(wù)范圍部份重迭，都要寫Html、Css，提防使用者體驗(yàn)等等。最大的區(qū)別在于網(wǎng)頁設(shè)計(jì)師要畫Flow、Wireframe、Mockup、切圖、標(biāo)示文件，會(huì)寫JS特效最好，不會(huì)寫也沒關(guān)系。但F2E就要