一、自學網頁設計之前，你需要知道的事。

  自學網頁設計，你首先得了解網站的制作流程。在有了全局的概覽后，你才能對接下來所要學習的知識，做到了然于胸。然后再做有針對性的學習和訓練，方能夠更高效率的入門網頁設計。當然條條大路通羅馬，方法并非唯一，以下就結合自己的學習和工作經歷做個總結，希望能對初學者有所幫助！

▽圖例：優秀的網頁設計作品。來源：Behance

1、網頁設計的制作流程

  通常情況下，任何一網站的建立，都會經過“分析策劃—交互設計—視覺設計—前端制作—后端制作—測試上線”6個環節。我們平常所說的【網頁設計】與「網頁制作」則分別對應著6個環節中的【視覺設計】與「前端制作」，在實際的工作崗位中，其分別由“網頁設計師”與“前端工程師”去執行完成。

  很多初學網頁設計的朋友，對這兩者的關系往往是傻傻分不清楚的狀態，對自己的專業定位沒有清晰的認識。這就導致學設計的同學，后來干到了“前端工程師”的崗位，學前端的孩子開始猛補“設計知識”。

▽圖例：優秀的網頁設計作品。來源：Behance

  在這分工協作越來越明確的年代里，唯有專精自己所在的領域，才能脫穎而出，泛泛而學，只會變得平庸！如果想要成為多面手，那也得先精通一門核心技能！

2、網頁設計，是以視覺設計為主工作。

  自學網頁設計的核心任務是學習“視覺設計”相關的知識點。 如何更加高效的傳達版面信息？如何規劃頁面路徑？用什么樣的排版，或者富有創意的表現形式？用什么樣的顏色，以及多大的字號？這是新手學習網頁設計應該畫下的重點。

  一個網頁被設計出來，是給人用，給人看的。 要好看（簡潔）、要好用（高效）這才是一個設計師需要反復考慮的。視覺+交互，是網頁設計師的核心競爭力。

▽圖例：優秀的網頁、平面視覺設計作品。來源： http://irradie.com

  其中“視覺設計”的依據，源于前面的策劃和交互設計。最后出具的“視覺設計稿”得符合品牌定位，滿足生產運營、以及用戶需求，這是網頁設計師必修的基本功！

3、網頁制作，是以前端代碼為主。

  網頁制作在流程上，是在設計之后。這部分工作通常是由WEB前端工程師來完成的，工程師通常會運用到HTML、CSS、以及JavaScript、jQuery等前端代碼，來還原網頁設計師的“視覺設計稿”，以及交互動畫等。

  “前端工程師”除了要配合網頁設計師外，還要配合做后端工程師，做好網頁端的數據收集處理等工作。如果你要勵志成為一個優秀的網頁設計師，請牢記自己的崗位職責和學習重點，在沒有認清“視覺設計”前，要當心自己是不是越位到Web前端開發這個坑里去了。

  再比如優化網站所需的SEO、Ajax等技術，雖無需你動手實踐，但能做到了解一二，也是不錯的加分項。在設計的時候，也可充分利用這些規則和技術來規劃你的版面，使其更加的專業友好。

4、那么問題來了，新手學習網頁設計要學些什么？

▽圖例：優秀的網頁設計作品。來源：Behance

  (1).首先要精通設計軟件，把Photoshop玩轉，這是網頁設計的主力工具！

  (2).深入學習排版設計、色彩構成，掌握視覺基礎規律（構成、透視、光影）

  (3).掌握網頁設計規范，了解常見的網頁布局形式，學習交互設計等基礎知識。

  (4).了解前端代碼HTML、CSS、JS、JQuery的運用，學一款代碼編輯軟件（如：Dreamweaver）

  (5).了解你設計網站的公司及產品，熟悉這個公司及其產品面向的人群！

  (6).拓展學習網站優化、開發、后臺數據處理常識（加分項目?。?/p>

  前四個是基本功，后面的是加分項。越靠前越重要！

二、關于網頁設計行業，以及自學資源分享。

5.關于網頁設計行業

  概述：常見的網頁設計類型有企業站（如：某某公司的網站）、門戶站（如新浪）、專題活動頁面（如每年的天貓雙11活動頁面）。這三類是我們平日里最常見的網頁形式，以下網頁設計教程也就是圍繞這幾類展開視覺設計。

  行情：高級網頁設計師，平均工資8180，這個水平通常是3~5年的一個薪資待遇，而1~3年的新手則常停留在5k上下。隨著電商的興起，市場對網頁設計的需求量巨大，其中蘊含著無窮商機！新公司企業建站、淘寶商品的介紹頁面、店鋪裝修、促銷專題頁面、括移動端頁面等等，著都需要網頁設計這個崗位。

6、系統學習網頁設計——視頻教程

  教程匯總：由騰訊、阿里網頁設計師錄制的視頻教程 (http://www.xxriji.cn/career/7.html)

  上述網頁設計教程分為四個部分，從視覺理論基礎，到網頁設計軟件技法，再逐步深入到視覺設計提高及思維訓練，最后再是拓展HTML、CSS等前端基礎知識。相信大家能從中系統的掌握網頁設計這門技能，其中的幾個核心教程如下。

  (1). 網頁設計基礎教程：網頁美工設計入門詳解，視頻地址：http://t.cn/R5pKsW1

講解作為一個網站美工所必備的基礎知識和技能，讓學生從單一軟件的學習中走出來，轉化為多元化的實際應用。選取的案例均是當前網頁美工領域實用的案例，穿插講解相關理論。

  (2). 網頁設計代碼：網頁設計Dreamweaver零基礎入門教程，視頻地址：http://t.cn/R5pVcC6

適用于網頁設計零基礎學員，需要會基本的Photoshop操作，幫助大家全面理解掌握DW的使用，以及HTML/CSS樣式/JavaScript/jQuery以及網頁交互效果的添加。

  (3). 【力薦】騰訊高級設計師主講：網頁設計高級教程（上），視頻地址：http://t.cn/R5pKsVA

騰訊游戲TGideas 高級設計師Gordan傾情打造，授課邏輯嚴謹，思路清晰，課程內容擁有強大的理論支撐，讓大家知其然，也知其所以然。屬于高級課程內容，適合對Photoshop軟件操作有一些使用經驗的學員。

  (4). 【力薦】騰訊高級設計師主講：網頁設計高級教程（下），視頻地址：http://t.cn/R5pKFHV

本套課程全案例講解，總共分為十章，適合Photoshop掌握比較熟練的學員。豐富的實例讓上篇中的理論落到實處，更深層次梳理創作思路，學完定能收獲頗豐，擁有獨立完成網頁設計任務的能力。

  (5). 【力薦】高大上的網頁設計教程：汽車互動網頁設計教程，視頻地址：http://t.cn/R5qjT2v

本教程講解了一個汽車互動網站從命題到思考到設計制作等全系列過程。課程共分為荒野篇、賽場篇以及雪地篇三個篇章，教到大家面對需求時，如何從不同的方向思考，并打造出三種不同場景恢弘大氣的互動稿。

  (6). 【電商】淘寶天貓店鋪裝修設計教程：電商視覺設計實戰教程 ，視頻地址：http://t.cn/RIjgj6e

以電商廣告設計為立足點，以Photoshop為軟件工具，結合豐富的設計理論知識和大量的精美案例，幫助大家快速、系統快速的掌握淘寶天貓電商設計的流程與方法。

7、系統學習網頁設計——書籍推薦

  (1).網頁設計實踐暢銷：《界面設計模式(第2版)》

在第一版中文版在推出后“技壓群芳”而大獲好評，一路暢銷。本書新增了社交媒體，移動設計方面的內容，切實地符合了當下的技術發展潮流,作者多年觀察、實踐與智慧的升華。

  (2).設計入門啟蒙書籍：《寫給大家看的設計書(第4版)》

這是一門影響了一代設計師的經典巨著，無論是UI設計、網頁設計、平面設計領域，都被廣大設計師所推崇，是入門設計行業的必備書籍！

  (3).色彩搭配實踐書籍：《互聯網產品(Web/移動Web/APP)視覺設計·配色篇》

本書旨在介紹網站及移動網站/APP等互聯網產品界面色彩搭配的知識與方法。內容既涉及色彩屬性等基礎知識，也包括了有關互聯網產品界面色彩設計的系統完整的實用技巧。

  (4).網頁交互設計經典：《簡約至上：交互式設計四策略》

書中闡釋了合理刪除、分層組織、適時隱藏和巧妙轉移這四個令交互式設計成果大程度簡單易用的策略。

  (5).如何制作響應式網頁：《響應式Web設計實踐》

面對不斷涌現的設備尺寸，Web設計的適應性已經成為設計師們所面臨的最為艱巨的挑戰。這本《響應式Web設計實踐》書籍當中，給出了一系列完善的解決方案。

  (6).打造網頁形式感：《形式感+:網頁視覺設計創意拓展與快速表現》

這是國內網頁設計書籍中，賣地最好的書籍之一。本書可以幫助有一定基礎的網頁設計初學者或在職者，在遇到設計創意瓶頸時，能夠在較短的時間內解決設計上的創意和視覺形式感的問題。

  上面給出的視頻教程和書籍，均是非常適合期望系統自學網頁設計的朋友，涉及到的內容知識點很少有重合，開卷有益，希望大家學有所成！

  真誠推薦，望以對初學者有所啟發！

  （完）

  未經許可禁止轉載，侵權必究！