怎么自學(xué)網(wǎng)頁設(shè)計？

時間：2022-09-01 07:45:01 | 來源：網(wǎng)站運營

時間：2022-09-01 07:45:01 來源：網(wǎng)站運營

一、自學(xué)網(wǎng)頁設(shè)計之前，你需要知道的事。

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

▽圖例：優(yōu)秀的網(wǎng)頁設(shè)計作品。來源：Behance

1、網(wǎng)頁設(shè)計的制作流程

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

很多初學(xué)網(wǎng)頁設(shè)計的朋友，對這兩者的關(guān)系往往是傻傻分不清楚的狀態(tài)，對自己的專業(yè)定位沒有清晰的認識。這就導(dǎo)致學(xué)設(shè)計的同學(xué)，后來干到了“前端工程師”的崗位，學(xué)前端的孩子開始猛補“設(shè)計知識”。

▽圖例：優(yōu)秀的網(wǎng)頁設(shè)計作品。來源：Behance

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

2、網(wǎng)頁設(shè)計，是以視覺設(shè)計為主工作。

自學(xué)網(wǎng)頁設(shè)計的核心任務(wù)是學(xué)習(xí)“視覺設(shè)計”相關(guān)的知識點。 如何更加高效的傳達版面信息？如何規(guī)劃頁面路徑？用什么樣的排版，或者富有創(chuàng)意的表現(xiàn)形式？用什么樣的顏色，以及多大的字號？這是新手學(xué)習(xí)網(wǎng)頁設(shè)計應(yīng)該畫下的重點。

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

▽圖例：優(yōu)秀的網(wǎng)頁、平面視覺設(shè)計作品。來源： http://irradie.com

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

3、網(wǎng)頁制作，是以前端代碼為主。

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

“前端工程師”除了要配合網(wǎng)頁設(shè)計師外，還要配合做后端工程師，做好網(wǎng)頁端的數(shù)據(jù)收集處理等工作。如果你要勵志成為一個優(yōu)秀的網(wǎng)頁設(shè)計師，請牢記自己的崗位職責(zé)和學(xué)習(xí)重點，在沒有認清“視覺設(shè)計”前，要當(dāng)心自己是不是越位到Web前端開發(fā)這個坑里去了。

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

4、那么問題來了，新手學(xué)習(xí)網(wǎng)頁設(shè)計要學(xué)些什么？

▽圖例：優(yōu)秀的網(wǎng)頁設(shè)計作品。來源：Behance

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

(2).深入學(xué)習(xí)排版設(shè)計、色彩構(gòu)成，掌握視覺基礎(chǔ)規(guī)律（構(gòu)成、透視、光影）

(3).掌握網(wǎng)頁設(shè)計規(guī)范，了解常見的網(wǎng)頁布局形式，學(xué)習(xí)交互設(shè)計等基礎(chǔ)知識。

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

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

(6).拓展學(xué)習(xí)網(wǎng)站優(yōu)化、開發(fā)、后臺數(shù)據(jù)處理常識（加分項目?。?br>
前四個是基本功，后面的是加分項。越靠前越重要！

二、關(guān)于網(wǎng)頁設(shè)計行業(yè)，以及自學(xué)資源分享。

5.關(guān)于網(wǎng)頁設(shè)計行業(yè)

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

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

6、系統(tǒng)學(xué)習(xí)網(wǎng)頁設(shè)計——視頻教程

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

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

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

講解作為一個網(wǎng)站美工所必備的基礎(chǔ)知識和技能，讓學(xué)生從單一軟件的學(xué)習(xí)中走出來，轉(zhuǎn)化為多元化的實際應(yīng)用。選取的案例均是當(dāng)前網(wǎng)頁美工領(lǐng)域?qū)嵱玫陌咐┎逯v解相關(guān)理論。

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

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

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

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

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

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

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

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

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

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

7、系統(tǒng)學(xué)習(xí)網(wǎng)頁設(shè)計——書籍推薦

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

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

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

這是一門影響了一代設(shè)計師的經(jīng)典巨著，無論是UI設(shè)計、網(wǎng)頁設(shè)計、平面設(shè)計領(lǐng)域，都被廣大設(shè)計師所推崇，是入門設(shè)計行業(yè)的必備書籍！

(3).色彩搭配實踐書籍：《互聯(lián)網(wǎng)產(chǎn)品(Web/移動Web/APP)視覺設(shè)計·配色篇》

本書旨在介紹網(wǎng)站及移動網(wǎng)站/APP等互聯(lián)網(wǎng)產(chǎn)品界面色彩搭配的知識與方法。內(nèi)容既涉及色彩屬性等基礎(chǔ)知識，也包括了有關(guān)互聯(lián)網(wǎng)產(chǎn)品界面色彩設(shè)計的系統(tǒng)完整的實用技巧。

(4).網(wǎng)頁交互設(shè)計經(jīng)典：《簡約至上：交互式設(shè)計四策略》

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

(5).如何制作響應(yīng)式網(wǎng)頁：《響應(yīng)式Web設(shè)計實踐》

面對不斷涌現(xiàn)的設(shè)備尺寸，Web設(shè)計的適應(yīng)性已經(jīng)成為設(shè)計師們所面臨的最為艱巨的挑戰(zhàn)。這本《響應(yīng)式Web設(shè)計實踐》書籍當(dāng)中，給出了一系列完善的解決方案。

(6).打造網(wǎng)頁形式感：《形式感+:網(wǎng)頁視覺設(shè)計創(chuàng)意拓展與快速表現(xiàn)》

這是國內(nèi)網(wǎng)頁設(shè)計書籍中，賣地最好的書籍之一。本書可以幫助有一定基礎(chǔ)的網(wǎng)頁設(shè)計初學(xué)者或在職者，在遇到設(shè)計創(chuàng)意瓶頸時，能夠在較短的時間內(nèi)解決設(shè)計上的創(chuàng)意和視覺形式感的問題。

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

真誠推薦，望以對初學(xué)者有所啟發(fā)！

（完）

未經(jīng)許可禁止轉(zhuǎn)載，侵權(quán)必究！