網(wǎng)頁(yè)設(shè)計(jì)學(xué)到什么程度才算得上精通？

時(shí)間：2024-02-15 00:25:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-15 00:25:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)學(xué)到什么程度才算得上精通？：中國(guó)有句古話：泉水挑不干，知識(shí)學(xué)不完。作為設(shè)計(jì)師，很難做到樣樣精通。在不同的學(xué)習(xí)階段，把最能排上用場(chǎng)的知識(shí)掌握好，做到精通，這就是最有效的學(xué)習(xí)。學(xué)習(xí)的過(guò)程，就是不斷地去補(bǔ)齊木桶最短的那一塊板，然后這個(gè)木桶能裝下的水，自然會(huì)越來(lái)越多！

△圖例：學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的木桶理論示意圖。

一、明確網(wǎng)頁(yè)設(shè)計(jì)需要學(xué)些什么

軟件技能、創(chuàng)意表達(dá)、視覺(jué)刻畫，這是網(wǎng)頁(yè)設(shè)計(jì)師的核心技能。網(wǎng)頁(yè)設(shè)計(jì)是生產(chǎn)運(yùn)營(yíng)中的一個(gè)技術(shù)支撐環(huán)節(jié)，其最終輸出的作品，都是在為企業(yè)或商業(yè)產(chǎn)品做服務(wù)。

所以學(xué)會(huì)理解你的服務(wù)對(duì)象，將企業(yè)的文化價(jià)值、產(chǎn)品的功能屬性準(zhǔn)確傳遞給潛在客戶，這就是網(wǎng)頁(yè)設(shè)計(jì)的目的。通過(guò)不同類目學(xué)科知識(shí)的學(xué)習(xí)，也將豐富你對(duì)網(wǎng)頁(yè)設(shè)計(jì)的理解維度，作為初級(jí)網(wǎng)頁(yè)設(shè)計(jì)，能把軟件技法、創(chuàng)意表達(dá)、視覺(jué)刻畫這三個(gè)維度做好，也算得上是精通了。

二、網(wǎng)頁(yè)設(shè)計(jì)師的工作日常

1.信息的收集整理（前期調(diào)研階段、競(jìng)品分析、受眾分析）

說(shuō)人話：首先要分析理解自己的設(shè)計(jì)內(nèi)容，設(shè)計(jì)初期可以先收集一些同行、或競(jìng)品相關(guān)的網(wǎng)頁(yè)設(shè)計(jì)、或者圖片素材做參考。

2.信息的歸納提煉（策劃設(shè)計(jì)階段）

說(shuō)人話：把收集來(lái)的信息加以提煉，歸納整理出適合自己的網(wǎng)頁(yè)設(shè)計(jì)的有用信息，以此來(lái)把握整體的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格及大的方向。

3.信息的視覺(jué)化表現(xiàn)（軟件制作及執(zhí)行傳播階段）

說(shuō)人話：信息的視覺(jué)化表現(xiàn)也就是，在Photoshop軟件中完成排版布局、頁(yè)面的icon設(shè)計(jì)、圖片的合成處理等，以及推廣banner海報(bào)的設(shè)計(jì)，然后切圖交接給web前端開(kāi)發(fā)。

三、網(wǎng)頁(yè)設(shè)計(jì)的常見(jiàn)類型

△房地產(chǎn)官網(wǎng)設(shè)計(jì)，作者：騰訊-郭亮，來(lái)源：網(wǎng)頁(yè)設(shè)計(jì)高級(jí)教程

目前，關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的常見(jiàn)類型及方向有：淘寶天貓類型的電商視覺(jué)設(shè)計(jì)、企業(yè)官網(wǎng)的設(shè)計(jì)、新品宣傳、活動(dòng)專題類型的網(wǎng)頁(yè)設(shè)計(jì)、后臺(tái)管控類的網(wǎng)頁(yè)端UI設(shè)計(jì)。在日常的工作中這幾種也許你都會(huì)接觸到。在學(xué)習(xí)之初你還得從軟件技能、排版布局、圖像處理、切圖輸出等這些具體的點(diǎn)著手熟悉。

四、學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的具體知識(shí)點(diǎn)

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

(2).深入學(xué)習(xí)排版設(shè)計(jì)，以及三大構(gòu)成中的平面構(gòu)成、色彩構(gòu)成、立體構(gòu)成，掌握一定的素描基礎(chǔ)，以明確：光影變化、透視結(jié)構(gòu)、構(gòu)圖平衡的基本視覺(jué)規(guī)律。

(3).掌握網(wǎng)頁(yè)設(shè)計(jì)規(guī)范，學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)概述、制作流程、視覺(jué)元素、色彩搭配、以網(wǎng)頁(yè)布局排版、切圖、交互知識(shí)等。

(4).學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意表達(dá)的思路流程，如何將文案創(chuàng)意具體到視覺(jué)化呈現(xiàn)的全過(guò)程，以及畫面光影細(xì)節(jié)刻畫的技能提高。請(qǐng)參考：網(wǎng)頁(yè)設(shè)計(jì)高級(jí)教程。

(5).了解一點(diǎn)前端代碼HTML、CSS的運(yùn)用，學(xué)一款代碼編輯軟件，推薦網(wǎng)頁(yè)設(shè)計(jì)師用Dreamweaver。

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

(7).拓展學(xué)習(xí)網(wǎng)站優(yōu)化、開(kāi)發(fā)、后臺(tái)數(shù)據(jù)處理常識(shí)（加分項(xiàng)目?。?br>

五、學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)，你要知道的以下三點(diǎn)。

1、網(wǎng)站的制作流程

引用于：自學(xué)網(wǎng)頁(yè)設(shè)計(jì)，需要了解的網(wǎng)站開(kāi)發(fā)流程

通常情況下，任何一網(wǎng)站的建立，都會(huì)經(jīng)過(guò)“分析策劃—交互設(shè)計(jì)—視覺(jué)設(shè)計(jì)—前端制作—后端制作—測(cè)試上線”6個(gè)環(huán)節(jié)。

在實(shí)際的工作崗位中，一般由“網(wǎng)頁(yè)設(shè)計(jì)師”負(fù)責(zé)「視覺(jué)設(shè)計(jì)」板塊，即我們平常所說(shuō)的「網(wǎng)頁(yè)設(shè)計(jì)」。而「前端制作」環(huán)節(jié)則主要有“前端工程師”來(lái)負(fù)責(zé)，即用代碼來(lái)重構(gòu)還原設(shè)計(jì)師的視覺(jué)稿，這一環(huán)節(jié)也就是我們平常所說(shuō)的「網(wǎng)頁(yè)制作」。

很多初學(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é)奏。

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)。用什么樣的排版，去梳信息的層次邏輯，用什么樣的顏色，以及多大的字號(hào)？如何讓畫面表現(xiàn)更具視覺(jué)創(chuàng)意、交互體驗(yàn)會(huì)更好，這是新手學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該畫下的重點(diǎn)。

一個(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、前端制作，是以前端代碼為主。

前端制作在流程上，是在視覺(jué)設(shè)計(jì)之后。這部分工作通常是由WEB前端工程師來(lái)完成的，工程師通常會(huì)運(yùn)用到HTML、CSS、以及JavaScript、jQuery等網(wǎng)頁(yè)前端代碼，來(lái)重構(gòu)網(wǎng)頁(yè)設(shè)計(jì)師的“視覺(jué)設(shè)計(jì)稿”，以及交互動(dòng)畫等。

“前端工程師”除了要配合網(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è)友好。

再往后

上面所說(shuō)的，都是網(wǎng)頁(yè)設(shè)計(jì)師必須掌握或了解的基本功。在基本功掌握扎實(shí)了以后，則可圍繞著創(chuàng)意表達(dá)、營(yíng)銷傳播、用戶心理、交互體驗(yàn)的維度在進(jìn)行深入學(xué)習(xí)探討，以指導(dǎo)你做出更好的設(shè)計(jì)。這一階段，則是思維層面的提升，可購(gòu)買相關(guān)領(lǐng)域書籍進(jìn)行學(xué)習(xí)。

—

原創(chuàng)回答，禁止轉(zhuǎn)載！圖片版權(quán)歸原作者所有。