有不少同學(xué)討論過(guò)，在找工作時(shí)老是看見(jiàn)招聘信息要求懂代碼，覺(jué)得是不是要懂代碼才可以當(dāng)UI設(shè)計(jì)師，為什么做設(shè)計(jì)還需要編程？

為了解決這個(gè)問(wèn)題，我們就來(lái)分享一個(gè)有關(guān)設(shè)計(jì)師和 "編程" 的系列干貨，用所有人能看懂的講解方式，幫助大家掌握這門基礎(chǔ)，再也不會(huì)被這類招聘要求難倒。

UI設(shè)計(jì)師和編程的關(guān)系

理論上來(lái)說(shuō)，術(shù)業(yè)有專攻，現(xiàn)代團(tuán)隊(duì)只有分工明確才有生產(chǎn)效率。但為什么要求設(shè)計(jì)師也要懂 「編程」 呢？

簡(jiǎn)單概括就是代碼的實(shí)現(xiàn)邏輯是制約UI設(shè)計(jì)的重要因素，掌握得越多，對(duì)于設(shè)計(jì)可用性的理解也就越深。就像建筑設(shè)計(jì)必須需要了解工程力學(xué)、產(chǎn)品設(shè)計(jì)必須了解材料學(xué)和生產(chǎn)工藝。

任何設(shè)計(jì)行業(yè)只懂畫(huà)圖的設(shè)計(jì)師注定殘缺的，莫得靈魂的，因?yàn)樵O(shè)計(jì)是建立在一系列限制下的視覺(jué)解決方案。

所以對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，要求具備一定的 「編程」 能力，并不過(guò)分。但編程范圍這么廣，是不需要我們精通萬(wàn)國(guó)語(yǔ)言的，只需要掌握網(wǎng)頁(yè)前端的基礎(chǔ)即可，即 HTML 和 CSS。

簡(jiǎn)單介紹一下，即網(wǎng)頁(yè)視覺(jué)樣式的呈現(xiàn)和排版是通過(guò)這兩種代碼實(shí)現(xiàn)的。HTML是用來(lái)梳理網(wǎng)頁(yè)內(nèi)容類型的標(biāo)記，而CSS是控制不同內(nèi)容外觀的腳本。

再深入解釋，就是一個(gè)常規(guī)的網(wǎng)站，想要為用戶提供正常的服務(wù)，就包含兩個(gè)部分，客戶端（前端）和服務(wù)器端（后端）。

前端負(fù)責(zé)我們?cè)O(shè)備中呈現(xiàn)出來(lái)的網(wǎng)頁(yè)樣式、布局、交互內(nèi)容，而后端則主要是遠(yuǎn)程服務(wù)器上對(duì)數(shù)據(jù)進(jìn)行處理和傳輸。一個(gè)簡(jiǎn)單的例子就是在網(wǎng)頁(yè)中登錄賬號(hào)，需要通過(guò)前端展示的頁(yè)面內(nèi)容進(jìn)行輸入，信息會(huì)上傳給服務(wù)器做驗(yàn)證，服務(wù)器再將驗(yàn)證結(jié)果返回給客戶端然后進(jìn)入下一步操作。

HTML 和 CSS 它們最大的特點(diǎn)，就是 —— 簡(jiǎn)單。嚴(yán)格意義上來(lái)講，它們都不是 」編程語(yǔ)言「，因?yàn)樗鼈儫o(wú)法完成高級(jí)編程語(yǔ)言的條件運(yùn)算、函數(shù)定義等處理。而在前端中，這部分任務(wù)是交給 Javascript 語(yǔ)言來(lái)完成的，那就是另外一個(gè)話題了。

所以設(shè)計(jì)師掌握 HTML 和 CSS 的入門基礎(chǔ)，是非常容易的事情，且可以獲得遠(yuǎn)超投入的收益：

• 具備前端開(kāi)發(fā)思路，了解頁(yè)面的實(shí)現(xiàn)過(guò)程
• 降低和程序員溝通的成本，提升協(xié)作效率
• 提高設(shè)計(jì)稿落地性，加快項(xiàng)目執(zhí)行進(jìn)程

下面，我們就更具體的介紹一下 HTML 和 CSS 的基礎(chǔ)概念。

HTML的基本認(rèn)識(shí)

HTML 也叫做超文本標(biāo)記語(yǔ)言，是一種對(duì)內(nèi)容進(jìn)行結(jié)構(gòu)化標(biāo)記的工具。比如我們?cè)谝粋€(gè) TXT 文檔中，輸入了下面兩行文字：

• 超人的干貨上新
• 關(guān)于HTML和CSS入門詳解

對(duì)于我們來(lái)講，這兩段文字的身份分別是 「標(biāo)題」 和 「正文」，但對(duì)于電腦來(lái)說(shuō)，它們都只是一系列文本而已。所以，我們需要賦予它們合法的「身份 」，讓電腦可以正確對(duì)待他們。

而 HTML 的標(biāo)簽，就是賦予它們對(duì)應(yīng)身份的銘牌，在 HTML 下的展示就會(huì)是這樣，<h1>內(nèi)是標(biāo)題，<p>內(nèi)是正文：

• <h1>超人的干貨上新</h1>
• <p>關(guān)于HTML和CSS入門詳解</p>

這和我們?nèi)粘?xiě)作、筆記時(shí)使用的 Markdown 邏輯是非常近似的，只是語(yǔ)法上有一定的區(qū)別，且 HTML 提供了更多的功能，包括輸入框、單選、多選、布局等類型的標(biāo)簽。

有了身份的標(biāo)識(shí)，我們才可以使用 CSS 或者 JS 來(lái)對(duì)這些身份的人發(fā)號(hào)命令，這就是 HTML 最基本的作用。并且，HTML 還會(huì)通過(guò)標(biāo)簽的相互包含，來(lái)完成對(duì)內(nèi)容層級(jí)結(jié)構(gòu)的制定，我們會(huì)在后面具體展開(kāi)討論。

當(dāng)然，HTML 代碼需要在 HTML 文檔中才能起作用，否則我們?cè)?doc、txt 中寫(xiě) HTML 代碼和標(biāo)簽是沒(méi)有意義的，這需要我們新建一個(gè) txt 文件，將后綴改成 .html，來(lái)完成文檔的創(chuàng)建。

之后，對(duì)它右鍵使用文本編輯器打開(kāi)，就可以輸入有關(guān)的代碼內(nèi)容了，比如：

<h1> Hello World！</h1>

輸入完之后，再雙擊用瀏覽器打開(kāi)這個(gè)文檔，你就可以看見(jiàn)文字對(duì)應(yīng)的顯示效果了，這就是你的第一段代碼，是不是特別容易？

CSS的基本認(rèn)識(shí)

上面的案例中，Hello World 是一段黑色的標(biāo)題，但我想修改它的大小、色彩、粗細(xì)、位置怎么辦？

這就需要更改它對(duì)應(yīng)的屬性了，在最初，這種更改的只需要用 HTML 的功能就可以完成，但效率實(shí)在是太低了（后面也會(huì)說(shuō)），于是，分離出了 CSS 作為專門控制樣式的替代品。

對(duì)于 HTML 的每一個(gè)標(biāo)簽和元素，都包含一系列的屬性和默認(rèn)值，比如我們?cè)?Sketch 中置入一個(gè)正方形，那么它肯定就會(huì)包含位置、長(zhǎng)寬、色彩、描邊、圓角等屬性，我們可以通過(guò)在屬性面板中對(duì)它們分別進(jìn)行設(shè)置來(lái)實(shí)現(xiàn)樣式的變更。

而 CSS 的實(shí)現(xiàn)原理，就是指定元素的屬性并賦予對(duì)應(yīng)值的過(guò)程。比如還是上面的案例，我想要將它的字色（font-color）改成紅色，字號(hào)（font-size）改成50px，那么就可以添加這些內(nèi)容：

• font-color: red;

• font-size: 50px;

學(xué)習(xí) CSS，也就是學(xué)習(xí)在網(wǎng)頁(yè)中，元素具體包含哪些屬性，以及這些屬性可以如何進(jìn)行設(shè)置的方法上，將本來(lái)通過(guò)在軟件中使用屬性面板進(jìn)行的操作對(duì)等到通過(guò)輸入代碼的方式完成。

學(xué)習(xí)的準(zhǔn)備工作

了解了它們的基本概念，接下來(lái)，我們就要為具體的學(xué)習(xí)做準(zhǔn)備工作了。對(duì)于 HTML CSS 來(lái)說(shuō)，準(zhǔn)備工作相當(dāng)?shù)暮?jiǎn)單，核心只有兩件事：瀏覽器、編輯器。

HTML 文檔本身并沒(méi)有什么特別的，只是一個(gè) HTML 后綴的文本文件而已，需要用瀏覽器打開(kāi)才能顯示出具體內(nèi)容。比如把標(biāo)題文本渲染成 40px 大小、黑色、加粗的效果。

而這個(gè)渲染過(guò)程，更準(zhǔn)確的講是由瀏覽器內(nèi)核完成的，就像瀏覽器的操作系統(tǒng)，而市面上主要的瀏覽器只有下面這三種：

• Trident：微軟 IE 為首使用的內(nèi)核
• Blink：谷歌 Chrome 使用的內(nèi)核
• Webkit：蘋果 Safari 為首使用的內(nèi)核

之所以提這個(gè)，原因是因?yàn)闉g覽器的內(nèi)核擁有對(duì)前端代碼的解釋權(quán)，而不同的內(nèi)核對(duì)相同的代碼解釋起來(lái)有差異。就像同一段英文，你用牛津英漢和朗文當(dāng)代詞庫(kù)的翻譯結(jié)果是不會(huì)完全一致的。而這就是前端工程師針對(duì)瀏覽器的適配工作之一。

作為設(shè)計(jì)師來(lái)說(shuō)，我們不需要具體去研究它們差異的細(xì)節(jié)，意識(shí)到有這個(gè)問(wèn)題即可。所以為了確保我們后續(xù)的演示和你們自己學(xué)習(xí)的順暢，請(qǐng)確保使用 Chrome 瀏覽器進(jìn)行學(xué)習(xí)。

接著就是代碼編輯器了，代碼編輯器就是一個(gè)專門用來(lái)寫(xiě)代碼的工具，雖然我們可以用 Windows 自帶的文本工具寫(xiě)，但那個(gè)寫(xiě)起來(lái)太不得勁了，沒(méi)有對(duì)不同的代碼元素進(jìn)行區(qū)分，缺乏閱讀感。

所以，根據(jù)我自己的使用經(jīng)驗(yàn)，墻裂推薦一款非常適合設(shè)計(jì)師學(xué)習(xí)前端的軟件 Brackets，它搭配 Chrome 瀏覽器可以實(shí)現(xiàn)代碼所見(jiàn)即所得的功效。

△ http://brackets.io

聲明一點(diǎn)，學(xué)習(xí)前端一定要記得拒絕使用 Dreamweaver (DW) 這個(gè)工具，因?yàn)樗耆莻€(gè)累贅，不僅軟件體積大，使用起來(lái)卡頓，沒(méi)用的功能還特別多，最終會(huì)演變成從學(xué)習(xí)代碼變成在學(xué)習(xí)軟件。和很多設(shè)計(jì)師學(xué)做原型結(jié)果變成在學(xué) Axure 的大量雞肋功能一樣沒(méi)有意義。

還有一些額外的素材我會(huì)在后面的文章更新中同步更新。

結(jié)尾

今天第一篇分享就寫(xiě)到這里了，雖然 HTML CSS 相對(duì)真正的編程來(lái)說(shuō)真的非常簡(jiǎn)單，但是，要用小白能看懂的方法來(lái)分享，就需要我精簡(jiǎn)非常多的內(nèi)容，還是一件挺麻煩的事情。

希望這篇分享能讓大家對(duì) HTML 和 CSS 有一個(gè)初步的了解，不用再糾結(jié)于設(shè)計(jì)師為什么要學(xué)代碼這種粗淺的問(wèn)題上。如果有疑問(wèn)，可以在下方進(jìn)行留言，具體的教學(xué)我會(huì)在后面的章節(jié)中展開(kāi)，敬請(qǐng)留意。

拓展閱讀：

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」