網(wǎng)頁(yè)設(shè)計(jì)師到底要不要懂代碼？

摘要：網(wǎng)頁(yè)設(shè)計(jì)師到底要不要學(xué)寫代碼？這個(gè)問題很有趣，但是卻很少被大家提及。因?yàn)樵谝粋€(gè)網(wǎng)站開發(fā)中，網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)和前端的布局代碼（比如用CSS，HTML）是分別是由美工和前端開發(fā)人員完成的。兩者之間涇渭分明，在業(yè)界，幾乎也從沒有逾越這個(gè)界線。當(dāng)然，這個(gè)問題的答案就需要仁者見仁了。不過(guò)，你可以閱讀下文，或許你能從中找到一些啟發(fā)。

這是個(gè)有趣的話題，不過(guò)網(wǎng)頁(yè)設(shè)計(jì)師們卻很少討論這個(gè)問題。以Photoshop作為起點(diǎn)難度大，在完成第一個(gè)項(xiàng)目之后，你會(huì)感覺興奮又緊張。但是，如果你不會(huì)寫代碼，網(wǎng)站的原型設(shè)計(jì)的用處又有多大用處？

設(shè)計(jì)師理所當(dāng)然地認(rèn)為不需要懂任何編程語(yǔ)言。設(shè)計(jì)工作僅僅是把圖像里的漂亮像素組合在一起。但是，許多有才華的人都紛紛都花時(shí)間去學(xué)習(xí)設(shè)計(jì)和編程。在今后的工作，我們會(huì)討論一些該話題的觀點(diǎn)，也許能從中找出網(wǎng)頁(yè)設(shè)計(jì)師找出兩者之間的平衡點(diǎn)。

問題

在理想世界里，我們能創(chuàng)建圖片，并且輕易地把它導(dǎo)入到程序中，之后編譯到網(wǎng)站，桌面應(yīng)用程序?？杀氖?，事情并非這樣簡(jiǎn)單，這并不是任何地方都會(huì)發(fā)生的。目前，網(wǎng)頁(yè)設(shè)計(jì)是和開發(fā)人員必須并肩作戰(zhàn)，才能做出漂亮的視覺效果以及滿足功能的項(xiàng)目。

因?yàn)楫?dāng)幾個(gè)專業(yè)人員一起工作時(shí)，合作關(guān)系很重要，大家會(huì)去注意誰(shuí)的技術(shù)更過(guò)硬。但是，這個(gè)界線應(yīng)該如何制定呢？這完全取決于你的團(tuán)隊(duì)和個(gè)人情況。

我認(rèn)為，那些能熟練地做出漂亮的網(wǎng)絡(luò)圖片的人應(yīng)該能夠懂得，甚至是很少的HTML/CSS內(nèi)容。如果你從未接觸過(guò)開發(fā)語(yǔ)言，那么剛開始的時(shí)候會(huì)很困難。但是，給定幾周的時(shí)間去學(xué)習(xí)，任何人都能學(xué)會(huì)HTML/CSS的基本知識(shí)，并且今后你絕對(duì)不會(huì)后悔學(xué)習(xí)這些內(nèi)容。

你的責(zé)任是什么？

如果你只靠一個(gè)成功的設(shè)計(jì)作品，就僥幸得到一個(gè)不錯(cuò)的職位，這是非常走運(yùn)的。大部分項(xiàng)目經(jīng)理認(rèn)為每一位網(wǎng)頁(yè)設(shè)計(jì)師都應(yīng)該去了解前端開發(fā)語(yǔ)言，這樣才能把他們的想法付諸到瀏覽器中。正都如前面所說(shuō)，你可以從零開始學(xué)習(xí)HTML，幾周之內(nèi)就能掌握基本知識(shí)（也許1到2月，這要因人而異）。

CSS要麻煩一點(diǎn)，你需要明白其中的定位元素。雖然，完全吃透這些概念可能花的時(shí)間較長(zhǎng)，但這些都是網(wǎng)頁(yè)布局必備的。我相信大多數(shù)已經(jīng)了解了這些前端開發(fā)語(yǔ)言的設(shè)計(jì)師們會(huì)拍著胸脯說(shuō)，相比只進(jìn)行圖片處理，這對(duì)自己是一個(gè)重大的提升。

網(wǎng)頁(yè)腳本

前端網(wǎng)頁(yè)開發(fā)語(yǔ)言一直被認(rèn)為是動(dòng)態(tài)內(nèi)容的灰色區(qū)域。JavaScript是最受歡迎的腳本語(yǔ)言，支持當(dāng)下所有瀏覽器。不過(guò)網(wǎng)頁(yè)設(shè)計(jì)師卻覺得不需要去學(xué)習(xí)它。但是，這種異常強(qiáng)大的語(yǔ)言可以為你的設(shè)計(jì)增添靈性。

為了提升庫(kù)結(jié)構(gòu)的普及程度，比如jQuery學(xué)習(xí)起來(lái)就非常容易。事實(shí)上，大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師根本不會(huì)寫JavaScript，jQuery容易得多，只需很少幾行代碼就能處理相同的任務(wù)。但是，我必須得承認(rèn)它的語(yǔ)法結(jié)構(gòu)比HTML或CSS更像是編程語(yǔ)言。

如果你真的有興趣挑戰(zhàn)前端代碼，可以花時(shí)間去學(xué)學(xué)jQuery。這對(duì)你以后加入創(chuàng)意團(tuán)隊(duì)是非常有利的條件！這年頭，既能進(jìn)行原型設(shè)計(jì)，又能編寫動(dòng)態(tài)頁(yè)面代碼的網(wǎng)頁(yè)設(shè)計(jì)師是非常稀罕的。通常，設(shè)計(jì)和代碼是分別由設(shè)計(jì)師和前端開發(fā)人員完成的。

但是，學(xué)了這些編程語(yǔ)言，你在展示自己時(shí)，可以同時(shí)充當(dāng)設(shè)計(jì)師和開發(fā)者兩個(gè)角色，這會(huì)為你加分。

慢慢來(lái)

如果你是剛加入這個(gè)行業(yè)，沒有任何網(wǎng)頁(yè)編程的基礎(chǔ)知識(shí)。那么會(huì)異常困難。不要在第一天就期望用HTML語(yǔ)言建立你的網(wǎng)站！在你記住常見的網(wǎng)頁(yè)元素和CSS屬性之前，你要花一點(diǎn)時(shí)間去專心學(xué)習(xí)才行。但是，一兩周時(shí)間足以讓你讀懂HTML。

不要忘記，你是要?jiǎng)?chuàng)建一個(gè)合適的網(wǎng)站，同時(shí)還要遵守語(yǔ)義規(guī)則。如果有比網(wǎng)頁(yè)設(shè)計(jì)師不懂寫代碼更糟的事，那就是網(wǎng)頁(yè)設(shè)計(jì)師的代碼寫得很爛。

HTML5的最新說(shuō)明非常易懂，建立文檔大綱也更容易。我們收集了一些HTML5的網(wǎng)站模板供大家免費(fèi)下載，其中的源代碼可隨意修改。一旦你掌握了HTML中基礎(chǔ)知識(shí)，這會(huì)對(duì)你的學(xué)習(xí)是莫大幫助。深入了解 同行業(yè)的專業(yè)人士的代碼可從中學(xué)到一些布局的技巧。

自由職業(yè)的穩(wěn)定性

如果你只會(huì)使用Photoshop進(jìn)行布局設(shè)計(jì)，客戶也沒有花錢請(qǐng)前端網(wǎng)頁(yè)開發(fā)人員寫代碼，僅憑一己之力是無(wú)法接手這個(gè)任務(wù)的。這樣就會(huì)導(dǎo)致你的利益受損。

我自己從事過(guò)許多自由職業(yè)。我最樂于接這類客戶的活兒：在基本的網(wǎng)站設(shè)計(jì)中用到非常復(fù)雜的JavaScript腳本語(yǔ)言實(shí)現(xiàn)動(dòng)畫或下拉效果。我現(xiàn)在工作中掌握的大部分技能都是通過(guò)自由職業(yè)期間所學(xué)到。現(xiàn)在通過(guò)google可以搜索到許多這樣的資源，比以往任何時(shí)期都多。

但是，即便你對(duì)自由職業(yè)不感冒，依舊鐘情于為設(shè)計(jì)機(jī)構(gòu)工作。當(dāng)你創(chuàng)建了一個(gè)網(wǎng)站原型圖，但它并不能準(zhǔn)確反映出網(wǎng)站的界面元素時(shí)，問題就會(huì)接踵而至，團(tuán)隊(duì)中的開發(fā)人員會(huì)提出更改，項(xiàng)目也會(huì)處于長(zhǎng)期中斷。

工作流程會(huì)被一些莫明奇妙的小事打亂。在Photoshop中和HTML/CSS中進(jìn)行開發(fā)會(huì)加大了你對(duì)最終的成品控制力度。這為PHP和JavaScript開發(fā)經(jīng)驗(yàn)的開發(fā)者帶來(lái)了機(jī)會(huì)，他們可以用HTML作為模板寫出更多的定制的腳本。

未來(lái)目標(biāo)

最終，“設(shè)計(jì)師究竟應(yīng)不應(yīng)寫代碼”這個(gè)問題的答案是因人而異的。這也是提出這個(gè)有趣的討論的原因。你需要考慮今后的目標(biāo)以及代碼對(duì)你建站是否有幫助。

你可以從事的設(shè)計(jì)工作有很多，比如從事跟品牌元素相關(guān)的標(biāo)志，矢量圖，圖標(biāo)，吉祥物以及其它產(chǎn)品的設(shè)計(jì)。但是，即使是數(shù)碼畫師也希望有一天建立屬于自己的網(wǎng)站，這時(shí)候，你所儲(chǔ)備的HTML知識(shí)便于建站。

如果你希望了解更多該話題，可以點(diǎn)擊閱讀我們之前的文章《設(shè)計(jì)師應(yīng)該如何寫代碼》。再次強(qiáng)調(diào)，這都取決于你的個(gè)人偏好以及產(chǎn)品設(shè)計(jì)的需求。

總結(jié)

到底學(xué)習(xí)哪種技能，怎樣強(qiáng)化你的知識(shí)，這是問題都留待你自己考慮。現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)師幾乎都被認(rèn)為有一定的HTML和CSS代碼知識(shí)。首次開始設(shè)計(jì)時(shí)，很難同時(shí)兼顧這兩個(gè)方面。但是過(guò)幾個(gè)月，你處理起來(lái)就會(huì)得心應(yīng)手。

希望本文能對(duì)你有幫助。