想自學(xué)網(wǎng)頁設(shè)計(jì)與制作，有沒有比較系統(tǒng)的教程？
時(shí)間：2022-08-30 20:39:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2022-08-30 20:39:01 來源：網(wǎng)站運(yùn)營(yíng)
想自學(xué)。但是網(wǎng)上都是什么“一點(diǎn)通”，“從入門到精通”，“新手必看”等等，感覺教程一點(diǎn)都不系統(tǒng)。求大神推薦！關(guān)注者
22被瀏覽
51,5164 個(gè)回答
李汶駿?從平面入行到網(wǎng)頁UI設(shè)計(jì)，Web前端愛好者！
想要自學(xué)網(wǎng)頁設(shè)計(jì)，你首先得了解網(wǎng)站的制作流程，有了全局的概覽后，再做有針對(duì)性的學(xué)習(xí)訓(xùn)練，才能事半功倍，后面有比較系統(tǒng)的教程推薦。
0、網(wǎng)頁設(shè)計(jì)的制作流程
通常情況下，任何一網(wǎng)站的建立，都會(huì)經(jīng)過“策劃階段—交互設(shè)計(jì)—視覺設(shè)計(jì)—前端制作—后端制作—測(cè)試上線”六個(gè)環(huán)節(jié)。題主上面所說的【網(wǎng)頁設(shè)計(jì)】與「網(wǎng)頁制作」則分別對(duì)應(yīng)著六個(gè)環(huán)節(jié)中的【視覺設(shè)計(jì)】與「前端制作」工作。
1、網(wǎng)頁設(shè)計(jì)，是以視覺設(shè)計(jì)為主的工作。
自學(xué)網(wǎng)頁設(shè)計(jì)的核心任務(wù)是學(xué)習(xí)“視覺設(shè)計(jì)”相關(guān)的知識(shí)點(diǎn)。 如何更加高效的傳達(dá)版面信息？如何規(guī)劃頁面路徑？用什么樣的排版，或者表現(xiàn)形式？用什么樣的顏色，以及多大的字號(hào)？這是新手學(xué)習(xí)網(wǎng)頁設(shè)計(jì)應(yīng)該畫下的重點(diǎn)。
一個(gè)網(wǎng)頁被設(shè)計(jì)出來，是給人用，給人看的。 要好看（簡(jiǎn)潔）、要好用（高效）這才是一個(gè)設(shè)計(jì)師需要反復(fù)考慮的。視覺+交互，是網(wǎng)頁設(shè)計(jì)師的核心競(jìng)爭(zhēng)力。
其中“視覺設(shè)計(jì)”的依據(jù)，源于前面的策劃和交互設(shè)計(jì)。最后出具的“視覺設(shè)計(jì)稿”得符合品牌定位，滿足生產(chǎn)運(yùn)營(yíng)、以及用戶需求，這是網(wǎng)頁設(shè)計(jì)師必修的基本功！
2、網(wǎng)頁制作，是以前端代碼為主的工作。
網(wǎng)頁制作在流程上，是在設(shè)計(jì)之后。這部分工作通常是由WEB前端工程師來完成的，工程師通常會(huì)運(yùn)用到HTML以及CSS等前端代碼，來還原網(wǎng)頁設(shè)計(jì)師的“視覺設(shè)計(jì)稿”。
如果你要?jiǎng)?lì)志成為一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)師，在沒有認(rèn)清“視覺設(shè)計(jì)”時(shí)，要當(dāng)心自己是不是越位到Web前端開發(fā)這個(gè)坑里去了。優(yōu)化網(wǎng)站所需的JS、SEO、Ajax等技術(shù)能知道便可，更無需你動(dòng)手實(shí)踐。
3、那么問題來了，新手學(xué)習(xí)網(wǎng)頁設(shè)計(jì)要學(xué)些什么？
(1).首先要精通設(shè)計(jì)軟件，把Photoshop玩轉(zhuǎn)，這是網(wǎng)頁設(shè)計(jì)的主力工具！
(2).深入學(xué)習(xí)排版設(shè)計(jì)、色彩構(gòu)成，掌握視覺基礎(chǔ)規(guī)律（構(gòu)成、透視、光影）
(3).掌握網(wǎng)頁設(shè)計(jì)規(guī)范，了解常見的網(wǎng)頁布局形式，學(xué)習(xí)交互設(shè)計(jì)等基礎(chǔ)知識(shí)。
(4).了解前端代碼HTML、CSS、JS、JQuery的運(yùn)用，學(xué)一款代碼編輯軟件（如：Dreamweaver）
(5).了解你設(shè)計(jì)網(wǎng)站的公司及產(chǎn)品，熟悉這個(gè)公司及其產(chǎn)品面向的人群！
(6).拓展學(xué)習(xí)網(wǎng)站優(yōu)化、開發(fā)、后臺(tái)數(shù)據(jù)處理常識(shí)（加分項(xiàng)目?。?br>
前四個(gè)是基本功，后面的是加分項(xiàng)。越靠前越重要！
4、系統(tǒng)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的視頻教程和書籍
(1). 書籍推薦
網(wǎng)頁設(shè)計(jì)實(shí)踐暢銷：《界面設(shè)計(jì)模式(第2版)》
設(shè)計(jì)入門啟蒙書籍：《寫給大家看的設(shè)計(jì)書(第4版)》
色彩搭配實(shí)踐書籍：《互聯(lián)網(wǎng)產(chǎn)品(Web/移動(dòng)Web/APP)視覺設(shè)計(jì)·配色篇》
網(wǎng)頁交互設(shè)計(jì)經(jīng)典：《簡(jiǎn)約至上：交互式設(shè)計(jì)四策略》
如何制作響應(yīng)式網(wǎng)頁：《響應(yīng)式Web設(shè)計(jì)實(shí)踐》
(2). 視頻推薦
地址：網(wǎng)頁設(shè)計(jì)自學(xué)教程 - 來自BAT網(wǎng)頁設(shè)計(jì)師的實(shí)力巨獻(xiàn) (http://www.xxriji.cn/career/7.html)
上述網(wǎng)頁設(shè)計(jì)教程分為四個(gè)部分，從視覺理論基礎(chǔ)，到網(wǎng)頁設(shè)計(jì)軟件技法，再逐步深入到視覺設(shè)計(jì)提高及思維訓(xùn)練，最后再是拓展HTML、CSS等前端基礎(chǔ)知識(shí)。相信大家能從中系統(tǒng)的掌握網(wǎng)頁設(shè)計(jì)這門技能。
其中視頻教程和書籍，里面涉及到的內(nèi)容知識(shí)點(diǎn)很少有重合的，開卷有益，希望大家學(xué)有所成！
真誠(chéng)推薦，望以上，有所幫助！
在線咨詢