建議本篇文章結(jié)合視頻觀看，效果更佳??

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

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

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

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

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

所以對于UI設(shè)計師來說，要求具備一定的 “編程” 能力，并不過分。但編程范圍這么廣，是不需要我們精通萬國語言的，只需要掌握網(wǎng)頁前端的基礎(chǔ)即可，即 HTML 和 CSS。

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

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

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

HTML 和 CSS 它們最大的特點，就是 —— 簡單。嚴格意義上來講，它們都不是 ”編程語言“，因為它們無法完成高級編程語言的條件運算、函數(shù)定義等處理。而在前端中，這部分任務(wù)是交給 Javascript 語言來完成的，那就是另外一個話題了。

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

• 具備前端開發(fā)思路，了解頁面的實現(xiàn)過程

• 降低和程序員溝通的成本，提升協(xié)作效率

• 提高設(shè)計稿落地性，加快項目執(zhí)行進程

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

HTML 也叫做超文本標記語言，是一種對內(nèi)容進行結(jié)構(gòu)化標記的工具。比如我們在一個 TXT 文檔中，輸入了下面兩行文字：

• 超人的干貨上新

• 關(guān)于HTML和CSS入門詳解

對于我們來講，這兩段文字的身份分別是 ”標題“ 和 ”正文“，但對于電腦來說，它們都只是一系列文本而已。所以，我們需要賦予它們合法的 ”身份“，讓電腦可以正確對待他們。

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

• <h1>超人的干貨上新</h1>

• <p>關(guān)于HTML和CSS入門詳解</p>

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

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

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

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

• <h1> Hello World！</h1>

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

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

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

對于 HTML 的每一個標簽和元素，都包含一系列的屬性和默認值，比如我們在 Sketch 中置入一個正方形，那么它肯定就會包含位置、長寬、色彩、描邊、圓角等屬性，我們可以通過在屬性面板中對它們分別進行設(shè)置來實現(xiàn)樣式的變更。

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

• font-color: red;

• font-size: 50px;

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

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

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

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

• Trident：微軟 IE 為首使用的內(nèi)核

• Blink：谷歌 Chrome 使用的內(nèi)核

• Webkit：蘋果 Safari 為首使用的內(nèi)核

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

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

接著就是代碼編輯器了，代碼編輯器就是一個專門用來寫代碼的工具，雖然我們可以用 Windows 自帶的文本工具寫 (MacOS 的文本編輯器比較特殊，具體見視頻)，但那個寫起來太不得勁了，沒有對不同的代碼元素進行區(qū)分，缺乏閱讀感。

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

http://brackets.io

聲明一點，學(xué)習(xí)前端一定要記得拒絕使用 Dreamweaver (DW) 這個工具，因為它完全是個累贅，不僅軟件體積大，使用起來卡頓，沒用的功能還特別多，最終會演變成從學(xué)習(xí)代碼變成在學(xué)習(xí)軟件。和很多設(shè)計師學(xué)做原型結(jié)果變成在學(xué) Axure 的大量雞肋功能一樣沒有意義。

從公眾號中輸入 ”前端“ 獲取這兩個軟件并進行安裝，那么我們就完成了學(xué)習(xí) HTML CSS 的準備工作了。

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

結(jié)尾

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

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

B端產(chǎn)品設(shè)計全能班新一期早鳥預(yù)約中，有需要的同學(xué)記得聯(lián)系我～

往期課程介紹查看??