有不少同學討論過，在找工作時老是看見招聘信息要求懂代碼，覺得是不是要懂代碼纔可以當UI設計師，爲什麼做設計還需要編程？

爲了解決這個問題，我們就來分享一個有關設計師和 “編程” 的系列乾貨，用所有人能看懂的講解方式，幫助大家掌握這門基礎，再也不會被這類招聘要求難倒。

UI設計師和編程的關係

理論上來說，術業有專攻，現代團隊只有分工明確纔有生產效率。但爲什麼要求設計師也要懂 「編程」 呢？

簡單概括就是代碼的實現邏輯是制約UI設計的重要因素，掌握得越多，對於設計可用性的理解也就越深。就像建築設計必須需要了解工程力學、產品設計必須瞭解材料學和生產工藝。

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

所以對於UI設計師來說，要求具備一定的 「編程」 能力，並不過分。但編程範圍這麼廣，是不需要我們精通萬國語言的，只需要掌握網頁前端的基礎即可，即 HTML 和 CSS。

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

再深入解釋，就是一個常規的網站，想要爲用戶提供正常的服務，就包含兩個部分，客戶端（前端）和服務器端（後端）。

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

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

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

  • 具備前端開發思路，瞭解頁面的實現過程
  • 降低和程序員溝通的成本，提升協作效率
  • 提高設計稿落地性，加快項目執行進程

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

HTML的基本認識

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

  • 超人的乾貨上新
  • 關於HTML和CSS入門詳解

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

而 HTML 的標籤，就是賦予它們對應身份的銘牌，在 HTML 下的展示就會是這樣，<h1>內是標題，<p>內是正文：

  • <h1>超人的乾貨上新</h1>
  • <p>關於HTML和CSS入門詳解</p>

這和我們日常寫作、筆記時使用的 Markdown 邏輯是非常近似的，只是語法上有一定的區別，且 HTML 提供了更多的功能，包括輸入框、單選、多選、佈局等類型的標籤。

有了身份的標識，我們纔可以使用 CSS 或者 JS 來對這些身份的人發號命令，這就是 HTML 最基本的作用。並且，HTML 還會通過標籤的相互包含，來完成對內容層級結構的制定，我們會在後面具體展開討論。

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

之後，對它右鍵使用文本編輯器打開，就可以輸入有關的代碼內容了，比如：

<h1> Hello World！</h1>

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

CSS的基本認識

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

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

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

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

  • font-color: red;
  • font-size: 50px;

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

學習的準備工作

瞭解了它們的基本概念，接下來，我們就要爲具體的學習做準備工作了。對於 HTML CSS 來說，準備工作相當的簡單，核心只有兩件事：瀏覽器、編輯器。

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

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

  • Trident：微軟 IE 爲首使用的內核
  • Blink：谷歌 Chrome 使用的內核
  • Webkit：蘋果 Safari 爲首使用的內核

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

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

接着就是代碼編輯器了，代碼編輯器就是一個專門用來寫代碼的工具，雖然我們可以用 Windows 自帶的文本工具寫，但那個寫起來太不得勁了，沒有對不同的代碼元素進行區分，缺乏閱讀感。

所以，根據我自己的使用經驗，牆裂推薦一款非常適合設計師學習前端的軟件 Brackets，它搭配 Chrome 瀏覽器可以實現代碼所見即所得的功效。

△ http://brackets.io

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

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

結尾

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

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

最後，現在已經開始新的 UI 課程預約了，作爲一個只輸出硬核乾貨的團隊，如果你們想轉行或者系統性的提升相關基礎的話就可以掃碼來了解一下了。

拓展閱讀：

歡迎關注作者的微信公衆號：「超人的電話亭」

相關文章