我想成為專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師，該如何起步？

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

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

我想成為專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師，該如何起步？：你現(xiàn)在最需要的，就是大量練習(xí)和實(shí)踐，先把網(wǎng)頁(yè)設(shè)計(jì)師所需的職業(yè)技術(shù)給掌握了，然后再專研一下網(wǎng)頁(yè)設(shè)計(jì)背后的業(yè)務(wù)問題“為什么這么設(shè)計(jì)”？帶著這樣的思路，你做出來(lái)的網(wǎng)頁(yè)，會(huì)具有更高的體驗(yàn)度！

我也是從印刷類平面設(shè)計(jì)職業(yè)，過渡到網(wǎng)頁(yè)設(shè)計(jì)的。注意這里的用詞是“過渡”而非“轉(zhuǎn)行”，因?yàn)槲矣X得這兩者，其本質(zhì)都是解決業(yè)務(wù)宣傳，以及與用戶溝通的問題，很多基礎(chǔ)的設(shè)計(jì)理論、美學(xué)原理都是共通的。

那么，成為一名專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)，需要做好哪些功課呢？接下來(lái)，且聽我慢慢道來(lái)。以下內(nèi)容，皆是我從業(yè)以來(lái)的學(xué)習(xí)成長(zhǎng)的心路歷程，希望對(duì)大家有所幫助！

寫在前面

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

然后再慢慢的上升到對(duì)產(chǎn)品的理解、對(duì)數(shù)據(jù)轉(zhuǎn)化率的理解，去解析業(yè)務(wù)需求，然后推導(dǎo)出合適的網(wǎng)頁(yè)設(shè)計(jì)來(lái)。以下內(nèi)容，你可以看作是「如何自學(xué)網(wǎng)頁(yè)設(shè)計(jì)」的實(shí)操攻略，要學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的朋友也可參考參考一二。

一、學(xué)習(xí)網(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)練，方能夠更高效率的入門網(wǎng)頁(yè)設(shè)計(jì)。

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

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

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

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

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

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

自學(xué)網(wǎng)頁(yè)設(shè)計(jì)的核心任務(wù)是學(xué)習(xí)“視覺設(shè)計(jì)”相關(guān)的知識(shí)點(diǎn)。用什么樣的排版，或者富有創(chuàng)意的表現(xiàn)形式，才能如何更加高效的傳達(dá)版面信息？如何規(guī)劃頁(yè)面路徑？用什么樣的顏色，以及多大的字號(hào)？這是新手學(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ù)考慮的。視覺+交互，是網(wǎng)頁(yè)設(shè)計(jì)師的核心競(jìng)爭(zhēng)力。

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

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

網(wǎng)頁(yè)制作在協(xié)作流程上，緊跟設(shè)計(jì)之后。這部分工作通常是由WEB前端工程師來(lái)完成的，工程師通常會(huì)運(yùn)用到HTML、CSS、以及JavaScript、jQuery等網(wǎng)頁(yè)前端代碼，來(lái)還原網(wǎng)頁(yè)設(shè)計(jì)師的“視覺設(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)，在沒有認(rèn)清“視覺設(shè)計(jì)”前，要當(dāng)心自己是不是越位到Web前端開發(fā)這個(gè)坑里去了。

▽圖例：優(yōu)秀的電商網(wǎng)頁(yè)設(shè)計(jì)作品，視覺合成。作者：尚云

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

4、那么問題來(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)成，掌握視覺基礎(chǔ)規(guī)律（構(gòu)成、透視、光影）

(3).掌握網(wǎng)頁(yè)設(shè)計(jì)規(guī)范、設(shè)計(jì)創(chuàng)意的表達(dá)思路流程。了解常見的網(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)化、開發(fā)、后臺(tái)數(shù)據(jù)處理常識(shí)（加分項(xiàng)目?。?br>
前四個(gè)是基本功，后面的是加分項(xiàng)。越靠前越重要！

二、從這里開始著手，系統(tǒng)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)。

1.從設(shè)計(jì)書籍著手，學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)理論。

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

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

(3).色彩搭配實(shí)踐書籍：《互聯(lián)網(wǎng)產(chǎn)品(Web/移動(dòng)Web/APP)視覺設(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.從視頻教程著手，學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐技能。

學(xué)習(xí)路線參考：http://www.xxriji.cn/career/7.html

(1).【基礎(chǔ)】視覺設(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ì)概述、制作流程、視覺元素、色彩搭配、以網(wǎng)頁(yè)布局排版、切圖、交互知識(shí)等。

(4).【核心】網(wǎng)頁(yè)設(shè)計(jì)視覺提高：學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)思路，將文案創(chuàng)意到視覺化呈現(xiàn)的全過程，以及畫面光影細(xì)節(jié)刻畫的技能提高。

(5).【拓展】更好的團(tuán)隊(duì)協(xié)作：學(xué)習(xí)HTML+CSS網(wǎng)頁(yè)前端課程。

知識(shí)的學(xué)習(xí)并非一成不變，不同公司的崗位職責(zé)、業(yè)務(wù)工作內(nèi)容各不相同，以上只是從最基礎(chǔ)的層面談到了一些通識(shí)的東西，希望對(duì)初學(xué)者有所幫助！開卷有益，祝大家學(xué)有所成！

(完)

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