作為一名零基礎的人想學習網頁設計，該如何系統的學習？

01-06

我是一個零基礎的人。
想學習網頁設計本身是一種興趣，而且剛好要改版一個網頁，就是修改一下主頁的樣式。
問題一，我想了解下現今網頁的類型。
問題二，我該如何去系統學習網頁設計。

網頁設計的改版，得根據運營需求來改吧。作為零基礎的同學，要系統學習網頁設計，自然離不開一套系統的網頁設計教程。你可以先從三大構成的基礎理論學起，也可以從Photoshop軟體開始，因為這是進入設計行業必修的基本功。

現如今，常見的網頁設計類型有：1.企業站。如：某某公司的網站，以展現公司形象以及業務信息為主。2.門戶站。如新浪，搜狐，以大量圖文信息為主。3.專題活動頁面，如每年天貓雙11的活動促銷頁面，或者新品發售的宣傳頁面。以上三類網頁，都是以信息呈現為主，是我們平日里最常見的三種。除此之外還有論壇、地圖、音樂、網站後台界面等，以功能型為主的網頁設計。

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

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

▽圖例：優秀的網頁設計作品。類型：企業站。來源：Behance

1、網頁設計的製作流程

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

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

▽圖例：優秀的網頁設計作品。類型：專題活動頁面。來源：http://t.cn/R5pKsVA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(6).拓展學習網站優化、開發、後台數據處理常識（加分項目！）

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

二、通過視頻教程和書籍，來系統學習網頁設計。

1.網頁設計書籍推薦

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

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

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

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

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

2.網頁設計視頻教程

(1).【基礎】視覺設計基礎理論：學習三大構成、素描基礎。

(2).【基礎】必備網頁設計軟體：學習Photoshop視頻教程、Dreamweaver視頻教程。

(3).【核心】網頁設計專業知識：學習網頁設計設計概述、製作流程、視覺元素、色彩搭配、以網頁布局排版、切圖、交互知識等。

(4).【核心】網頁設計視覺提高：學習網頁設計思路，將文案創意到視覺化呈現的全過程，以及畫面光影細節刻畫的技能提高。

(5).【拓展】更好的團隊協作：學習HTML+CSS網頁前端課程。

學習流程參考：http://www.xxriji.cn/career/7.html

其中視頻教程和書籍，裡面涉及到的知識點有少許重合，開卷有益，希望大家學有所成！

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

（完）

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

1、HTML 系列教程這個網站系統的看一遍

2、找個自己喜歡的網站，模仿之

下面是我學習網站搭建的流程，分享給樓主，希望對你有用！

1. 學習html語言，學會使用dreamweaver來設計簡單頁面，學會上傳網頁並成功訪問。

2. 學會用表格布局網頁，學會優化網頁結構，優化視覺效果。

3. 開始學習CSS，並逐漸過渡到用代碼來寫網頁。學會調整網頁的樣式，來獲得最佳的用戶體驗。

4. 學習photoshop，學以網路圖片的優化，重點是圖片的壓縮和裁剪以及格式轉換。學會結合css來設計網頁。

5. 加深對CSS的掌握程度，了解不同瀏覽器下的代碼兼容性問題，以及怎麼解決這些問題。最後學學css3.0的一些簡單動畫。

6. 學習javascript的簡單知識，了解一些基本概念和調用方式，目標是學會剝

離網頁的js代碼並放到自己的網頁中。

7. 開始學習動態網頁技術建議，學習PHP，推薦安裝wamp伺服器環境。學會php代碼的書寫，學會資料庫鏈接等等基本操作。並能成功搭建一個自己的博客。

8. 學習一個php框架，推薦ThinkPHP框架，然後基本就可以搭建各種小型網站了。多練幾次，你就是一個很厲害的碼農了！

加油！

想要系統學習，無非三種方式！第一：在學校主修網頁設計，輔修的話宣和網頁設計相關的專業！第二：自學！在網上自己找教程自學！很多好的內容！第三:找培訓學校系統學習！但是這三種無論哪一種你都需要明白一下一些問題！

學習網頁設計需要了解的基本問題。

一、軟體的基本操作和學習

相關的軟體有：PS（photoshop） Ai（Illustrator）ID(InDesign) CD(CorelDraw)可能會設計的幾個軟體，設計的比較多的是PS和Ai，軟體的學習重點在多操作，當你把快捷鍵都運用到極致時，在你思路上就能跟上你的操作了。

二，多鍛煉技能，動手聯繫找一些自己喜歡好看的圖標、APP、網站截圖等，可以自己在私下臨摹複製出來。（培訓班的話，老師上課以外都會布置作業，如果你想學習的更好的話，不妨多花點時間和精力多動手多做沒這樣能力培養起來也會更快些。）

三、提高審美、拓展思路、開闊眼界

網頁設計在把基本軟體運用完以後還需要一定的思維能力，色彩搭配，創新意識，這樣開始肯定都是沒有的，那麼你可以多看些相關的網站。瀏覽各種設計類的網站（站酷，優設、UI中國。。。）看別人的學習經驗。

找培訓需要注意的問題：

一，老師是否實力 ：既然想學習平面設計，找的機構師資一定是要過硬的，怎麼看老師好不好了。一方面了解老師有沒有一線項目開發經驗，有沒有自己的實戰的項目。另一方面，了解有沒有耐心和責任心，這也是一個好的老師的基本準則。

二，課程是否有針對性：所謂術業有專攻，一家專業的機構肯東會對自己的課程安排上顧忌的比較全面。也可以根據自身條件把有針對性的班。

三，價格對比：想要系統的學習UI設計，費用肯定會有大致範圍在那，如果價格太低，並承諾可以短期速成的，這種基本可以不用考慮了。

四，親身體驗：很多培訓機構都會有自己試聽課，可以去了多方了解，憑自己的第一感覺，或者是多了解幾家機構，貨比三家，看多了，自己心裡肯定會有評判好壞的標準。

如果不清楚自己學網頁計的興趣有多大，不妨通過這個簡單30秒職業性格測試看看自己適不適合學設計：

(電腦版)：http://t.cn/RMMyHxc

(手機版)：http://t.cn/RMMyTho

本農無意散步到此，忍不住多言幾句：網頁設計師應該了解網站設計規範：

主目錄下應有一個help目錄,存放說明文件。說明文件包括：

目錄說明

文件列表說明：存放位置、文件名稱、功能及處理邏輯描述、所涉及的庫表、調用關係。

資料庫說明：資料庫位置、空間分配要求、表設計、關係設計、視圖設計、存儲過程設計等。

更多規範可以參考：網頁設計經驗分享

一系列經驗的分享：

網頁設計的標準尺寸

網頁設計工具

網頁設計的色彩思考

相關的資料下載：

網頁版式設計原理 ppt版本

《訪客至上的網頁設計秘笈》pdf全本

可以上網下教程，也可以報培訓班，不過我個人覺得報培訓班學的更深入一些，像西安瑪雅動畫呀這些學校都是比較專業的，出來以後能直接上手，你可以比較下哪個更適合你。

無所謂系統，你去學 HTML/CSS，接著熟悉一下 Bootstrap，做到隨便給你個網頁你可以重構出來。接下來去找平面設計領域的書，重點圍繞 Grid System，色彩理論與 Typography 這三部分，了解平面設計領域有哪些 common practice。這個過程中注意兩點，第一要勤於觀察與練習，多寫 demo；第二當你決定打破某些規則時，一定要清楚地知道你打破的是什麼規則。

培訓！培訓！培訓！重要的事情說三遍，您剛好需要，我剛好專業！！！或許有人會說了，我培訓幹啥，我自己學習就可以了；

自學or培訓？那你首先要清楚自學以及培訓的區別：自學，很簡單就是自己抽空餘的時間閑散的時間，來找一些資料進行學習，但是你會發現一個問題，自學的時間會很久，自學中遇到問題一下得不到解決，更別說做項目了，自己完全沒有那個能力，導致最後僅有的熱情有可能都被消耗乾淨了，也就是我們常遇到的自學的，後期堅持不下去，就不學了。培訓，就是找到一個正規的行業的學校進行一個職業技能的培訓，時間周期不會像自學那麼冗長，有考核，有老師在一旁指導，老師帶著做項目，團隊項目小組進行開發，積累項目經驗。後期還有就業方面的指導，最重要的是學習的課程比較系統，新穎實用。

題主你說你該如何？