零基礎(chǔ)入門(mén)網(wǎng)頁(yè)設(shè)計(jì)難嗎？
時(shí)間：2022-07-31 05:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2022-07-31 05:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)設(shè)計(jì)關(guān)注者
246被瀏覽
98,80523 個(gè)回答
李汶駿?從平面入行到網(wǎng)頁(yè)UI設(shè)計(jì)，Web前端愛(ài)好者！
任何知識(shí)的學(xué)習(xí)都是入門(mén)容易，精通難！零基礎(chǔ)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)同樣也是如此，只能說(shuō)站在前人的肩膀上，按照相對(duì)正確的流程來(lái)系統(tǒng)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于入門(mén)，能夠變得相對(duì)輕松而已。后面有平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)整理的網(wǎng)頁(yè)設(shè)計(jì)入門(mén)教程推薦！
▽圖例：優(yōu)秀的電商網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)。作者：尚云。
一、關(guān)于網(wǎng)頁(yè)設(shè)計(jì)行業(yè)
現(xiàn)如今，常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)類型有：1.企業(yè)站。如：某某公司的網(wǎng)站，以展現(xiàn)公司形象以及業(yè)務(wù)信息為主。2.門(mén)戶站。如新浪，搜狐，以大量圖文信息為主。3.專題活動(dòng)頁(yè)面，如每年天貓雙11的活動(dòng)促銷頁(yè)面，或者新品發(fā)售的宣傳頁(yè)面。以上三類網(wǎng)頁(yè)，都是以信息呈現(xiàn)為主，是我們平日里最常見(jiàn)的三種。除此之外還有論壇、地圖、音樂(lè)、網(wǎng)站后臺(tái)界面等，以功能型為主的網(wǎng)頁(yè)設(shè)計(jì)。
行情：高級(jí)網(wǎng)頁(yè)設(shè)計(jì)師，平均工資8180，這個(gè)水平通常是3~5年的一個(gè)薪資待遇，而1~3年的新手則常停留在5k上下。隨著電商的興起，市場(chǎng)對(duì)網(wǎng)頁(yè)設(shè)計(jì)的需求量巨大，其中蘊(yùn)含著無(wú)窮商機(jī)！新公司企業(yè)建站、淘寶商品的介紹頁(yè)面、店鋪裝修、促銷專題頁(yè)面、括移動(dòng)端頁(yè)面等等，著都需要網(wǎng)頁(yè)設(shè)計(jì)這個(gè)崗位。
二、自學(xué)網(wǎng)頁(yè)設(shè)計(jì)之前，你需要知道的4件事。
自學(xué)網(wǎng)頁(yè)設(shè)計(jì)，你首先得了解網(wǎng)站的制作流程。在有了全局的概覽后，你才能對(duì)接下來(lái)所要學(xué)習(xí)的知識(shí)，做到了然于胸。然后再做有針對(duì)性的學(xué)習(xí)和訓(xùn)練，方能夠更高效率的入門(mén)網(wǎng)頁(yè)設(shè)計(jì)。當(dāng)然條條大路通羅馬，方法并非唯一，以下就結(jié)合自己的學(xué)習(xí)和工作經(jīng)歷做個(gè)總結(jié)，希望能對(duì)初學(xué)者有所幫助！
▽圖例：優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品。類型：企業(yè)站。來(lái)源：http://t.cn/R5qjT2v
1、網(wǎng)頁(yè)設(shè)計(jì)的制作流程
通常情況下，任何一網(wǎng)站的建立，都會(huì)經(jīng)過(guò)“分析策劃—交互設(shè)計(jì)—視覺(jué)設(shè)計(jì)—前端制作—后端制作—測(cè)試上線”6個(gè)環(huán)節(jié)。我們平常所說(shuō)的【網(wǎng)頁(yè)設(shè)計(jì)】與「網(wǎng)頁(yè)制作」則分別對(duì)應(yīng)著6個(gè)環(huán)節(jié)中的【視覺(jué)設(shè)計(jì)】與「前端制作」，在實(shí)際的工作崗位中，其分別由“網(wǎng)頁(yè)設(shè)計(jì)師”與“前端工程師”去執(zhí)行完成。
很多初學(xué)網(wǎng)頁(yè)設(shè)計(jì)的朋友，對(duì)這兩者的關(guān)系往往是傻傻分不清楚的狀態(tài)，對(duì)自己的專業(yè)定位沒(méi)有清晰的認(rèn)識(shí)。這就導(dǎo)致學(xué)設(shè)計(jì)的同學(xué)，后來(lái)干到了“前端工程師”的崗位，學(xué)前端的孩子開(kāi)始猛補(bǔ)“設(shè)計(jì)知識(shí)”，這個(gè)就是要走偏的節(jié)奏。
▽圖例：優(yōu)秀的網(wǎng)頁(yè)/平面視覺(jué)設(shè)計(jì)作品。來(lái)源：Behance
在這分工協(xié)作越來(lái)越明確的年代里，唯有專精自己所在的領(lǐng)域，才能脫穎而出，泛泛而學(xué)，只會(huì)變得平庸！如果想要成為多面手，那也得先精通一門(mén)核心技能！
2、網(wǎng)頁(yè)設(shè)計(jì)，是以視覺(jué)設(shè)計(jì)為主工作。
自學(xué)網(wǎng)頁(yè)設(shè)計(jì)的核心任務(wù)是學(xué)習(xí)“視覺(jué)設(shè)計(jì)”相關(guān)的知識(shí)點(diǎn)。 如何更加高效的傳達(dá)版面信息？如何規(guī)劃頁(yè)面路徑？用什么樣的排版，或者富有創(chuàng)意的表現(xiàn)形式？用什么樣的顏色，以及多大的字號(hào)？這是新手學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該畫(huà)下的重點(diǎn)。
▽圖例：優(yōu)秀的網(wǎng)頁(yè)/平面視覺(jué)設(shè)計(jì)作品。來(lái)源：Behance
一個(gè)網(wǎng)頁(yè)被設(shè)計(jì)出來(lái)，是給人用，給人看的。 要好看（簡(jiǎn)潔）、要好用（高效）這才是一個(gè)設(shè)計(jì)師需要反復(fù)考慮的。視覺(jué)+交互，是網(wǎng)頁(yè)設(shè)計(jì)師的核心競(jìng)爭(zhēng)力。
其中“視覺(jué)設(shè)計(jì)”的依據(jù)，源于前面的策劃和交互設(shè)計(jì)。最后出具的“視覺(jué)設(shè)計(jì)稿”得符合品牌定位，滿足生產(chǎn)運(yùn)營(yíng)、以及用戶需求，這是網(wǎng)頁(yè)設(shè)計(jì)師必修的基本功！
3、網(wǎng)頁(yè)制作，是以前端代碼為主。
網(wǎng)頁(yè)制作在流程上，是在設(shè)計(jì)之后。這部分工作通常是由WEB前端工程師來(lái)完成的，工程師通常會(huì)運(yùn)用到HTML、CSS、以及JavaScript、jQuery等前端代碼，來(lái)還原網(wǎng)頁(yè)設(shè)計(jì)師的“視覺(jué)設(shè)計(jì)稿”，以及交互動(dòng)畫(huà)等。
“前端工程師”除了要配合網(wǎng)頁(yè)設(shè)計(jì)師外，還要配合做后端工程師，做好網(wǎng)頁(yè)端的數(shù)據(jù)收集處理等工作。如果你要?jiǎng)?lì)志成為一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師，請(qǐng)牢記自己的崗位職責(zé)和學(xué)習(xí)重點(diǎn)，在沒(méi)有認(rèn)清“視覺(jué)設(shè)計(jì)”前，要當(dāng)心自己是不是越位到Web前端開(kāi)發(fā)這個(gè)坑里去了。
▽圖例：優(yōu)秀的電商網(wǎng)頁(yè)設(shè)計(jì)作品，視覺(jué)合成。作者：尚云
再比如優(yōu)化網(wǎng)站所需的SEO、Ajax等技術(shù)，雖無(wú)需你動(dòng)手實(shí)踐，但能做到了解一二，也是不錯(cuò)的加分項(xiàng)。在設(shè)計(jì)的時(shí)候，也可充分利用這些規(guī)則和技術(shù)來(lái)規(guī)劃你的版面，使其更加的專業(yè)友好。
4、那么問(wèn)題來(lái)了，新手學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)要學(xué)些什么？
(1).首先要精通設(shè)計(jì)軟件，把Photoshop玩轉(zhuǎn)，這是網(wǎng)頁(yè)設(shè)計(jì)的主力工具！
(2).深入學(xué)習(xí)排版設(shè)計(jì)、色彩構(gòu)成，掌握視覺(jué)基礎(chǔ)規(guī)律（構(gòu)成、透視、光影）
(3).掌握網(wǎng)頁(yè)設(shè)計(jì)規(guī)范，了解常見(jiàn)的網(wǎng)頁(yè)布局形式，學(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)化、開(kāi)發(fā)、后臺(tái)數(shù)據(jù)處理常識(shí)（加分項(xiàng)目?。?br>
前四個(gè)是基本功，后面的是加分項(xiàng)。越靠前越重要！
三、通過(guò)視頻教程和書(shū)籍，來(lái)系統(tǒng)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)。
1.網(wǎng)頁(yè)設(shè)計(jì)書(shū)籍推薦
(1).網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐暢銷：《界面設(shè)計(jì)模式(第2版)》
(2).設(shè)計(jì)入門(mén)啟蒙書(shū)籍：《寫(xiě)給大家看的設(shè)計(jì)書(shū)(第4版)》
(3).色彩搭配實(shí)踐書(shū)籍：《互聯(lián)網(wǎng)產(chǎn)品(Web/移動(dòng)Web/APP)視覺(jué)設(shè)計(jì)·配色篇》
(4).網(wǎng)頁(yè)交互設(shè)計(jì)經(jīng)典：《簡(jiǎn)約至上：交互式設(shè)計(jì)四策略》
(5).如何制作響應(yīng)式網(wǎng)頁(yè)：《響應(yīng)式Web設(shè)計(jì)實(shí)踐》
2.網(wǎng)頁(yè)設(shè)計(jì)視頻教程
學(xué)習(xí)流程參考：http://www.xxriji.cn/career/7.html
(1).【基礎(chǔ)】視覺(jué)設(shè)計(jì)基礎(chǔ)理論：學(xué)習(xí)三大構(gòu)成、素描基礎(chǔ)。
(2).【基礎(chǔ)】必備網(wǎng)頁(yè)設(shè)計(jì)軟件：學(xué)習(xí)Photoshop視頻教程、Dreamweaver視頻教程。
(3).【核心】網(wǎng)頁(yè)設(shè)計(jì)專業(yè)知識(shí)：學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)設(shè)計(jì)概述、制作流程、視覺(jué)元素、色彩搭配、以網(wǎng)頁(yè)布局排版、切圖、交互知識(shí)等。
(4).【核心】網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)提高：學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)思路，將文案創(chuàng)意到視覺(jué)化呈現(xiàn)的全過(guò)程，以及畫(huà)面光影細(xì)節(jié)刻畫(huà)的技能提高。
(5).【拓展】更好的團(tuán)隊(duì)協(xié)作：學(xué)習(xí)HTML+CSS網(wǎng)頁(yè)前端課程。
其中視頻教程和書(shū)籍，里面涉及到的知識(shí)點(diǎn)有少許重合，開(kāi)卷有益，希望大家學(xué)有所成！真誠(chéng)推薦，望以對(duì)初學(xué)者有所啟發(fā)！
(完)
未經(jīng)許可禁止轉(zhuǎn)載，侵權(quán)必究！
關(guān)鍵詞：設(shè)計(jì),基礎(chǔ),入門(mén)
在線咨詢