網(wǎng)頁設(shè)計入門之前的知識，多年設(shè)計經(jīng)驗所總結(jié)。圍繞平面與網(wǎng)頁設(shè)計之間的不同差異和共同點講解一些平面與網(wǎng)頁知識點、從字體、像素、版式、色彩、如何學(xué)習(xí)等角度講解。

大家對于網(wǎng)頁設(shè)計的認(rèn)識有多少呢？知道網(wǎng)頁和平面的區(qū)別嗎？那么學(xué)習(xí)網(wǎng)頁又要從哪些地方學(xué)起呢？需學(xué)習(xí)哪些軟件呢？如何快速成為一名網(wǎng)頁設(shè)計師等等。有一部分的網(wǎng)頁設(shè)計新手會有疑惑，我就與大家聊一聊網(wǎng)頁設(shè)計和平面設(shè)計的區(qū)別。想入門網(wǎng)頁設(shè)計都需要掌握什么軟件以及技巧。

屏幕顯示視覺傳達動態(tài)    傳統(tǒng)紙類視覺傳達設(shè)計

設(shè)計 技術(shù)的呈現(xiàn)方式    設(shè)計 工藝的呈現(xiàn)方式

兩個同樣是視覺傳達的設(shè)計但是之間的差異性在于

網(wǎng)頁和平面印刷使用色彩模式完全不同， 平面后期實現(xiàn)依賴于印刷，所以采用CMYK的色彩模式；而網(wǎng)頁設(shè)計根據(jù)屏幕顯像方式使用RGB格式 。有一些平面設(shè)計師用習(xí)慣了CMYK 模式，但當(dāng)用CMYK去做banner或者是網(wǎng)頁的時候顏色色差很大。無論是CMYK模式還是RGB模式，同樣是為了設(shè)計而服務(wù)，只要根據(jù)設(shè)計的需求遵循色彩模式標(biāo)準(zhǔn)就可以了，這也算是在入門網(wǎng)頁設(shè)計的時候最基礎(chǔ)的知識。

在平面設(shè)計中會涉及到一些印刷品設(shè)計。比如展架、噴繪布、宣傳手冊、LOGO設(shè)計、DM單、折頁、臂貼、地貼、角旗、車貼、海報、等等，一般根據(jù)設(shè)計需求而設(shè)定像素，不同尺寸的平面設(shè)計設(shè)置不同的分辨率。

例一：

設(shè)計一個噴繪布，10M長5M寬，那么根據(jù)自己的電腦硬件來考慮設(shè)置分辨率，一般會選擇 30像素、 45像素、 50像素，如果你電腦硬件條件很好則嘗試72像素也行，（但是那么大的噴繪布好像很少有用這么高的像素）

當(dāng)然了設(shè)計設(shè)置分辨率也不是很絕對的，還要根據(jù)情況而定，但是有一個要記住就是：畫面越大分辨率的值就相對于越低,畫面越小分辨率的值就要相對于越高。

隨著互聯(lián)網(wǎng)的發(fā)展、網(wǎng)頁設(shè)計、UI設(shè)計也熱門起來、首先是PC/移動端,其中包含了專題設(shè)計、欄目設(shè)計、門戶設(shè)計、電商設(shè)計、詳情頁設(shè)計、banner廣告設(shè)計、H5設(shè)計、APP設(shè)計,無論是其中的哪種設(shè)計設(shè)置72像素即可、這是因為最早的圖形設(shè)計是在mac電腦上進行的，mac本身的顯示器分辨率就是72,PS中把圖像DPI也設(shè)成72，便于設(shè)計。之后72像素顯示器分辨率逐漸成為一種默認(rèn)的行業(yè)標(biāo)準(zhǔn)，這套規(guī)則就這么沿用下來。

平面設(shè)計中設(shè)計海報、展架、畫冊等都有統(tǒng)一的尺寸規(guī)則，網(wǎng)頁設(shè)計尺寸隨著不同時期的流行趨勢，尺寸也同樣在變化?？梢晠^(qū)域內(nèi)從早期的網(wǎng)頁680像素、800像素、960像素、 980像素、1000像素、1200像素在門戶網(wǎng)站、專題設(shè)計中應(yīng)用。經(jīng)過了互聯(lián)網(wǎng)的發(fā)展、網(wǎng)頁設(shè)計尺寸也有所不同、電商網(wǎng)站為了展示更好、更大的圖片產(chǎn)品內(nèi)容、在設(shè)計的時候可視范圍設(shè)置成1200、1090、1230等甚至更大尺寸、追求設(shè)計扁平化、全屏設(shè)計、大背景圖設(shè)計也是個主流的方式、響應(yīng)式網(wǎng)站也同樣熱門于網(wǎng)頁設(shè)計當(dāng)中、通欄整潔設(shè)計、讓用戶有更好的用戶體驗、在各個終端演示觀看都是一個出彩的效果、還有滾動式、滾動視覺差形式、多種方式同樣展示出最終效果、設(shè)計形式根據(jù)時期趨勢追求大圖、大視頻、大背景設(shè)計手法、更讓瀏覽者有更好的視覺體驗。

從版式的布局上來說，平面設(shè)計和網(wǎng)頁設(shè)計有很多可以互用的表達手法。左右布局、上下布局、中心布局、對稱布局為最常規(guī)的設(shè)計版式、排版多樣化，最終呈現(xiàn)的效果根據(jù)自己的感覺來進行設(shè)計。但是很重要的一點，就是在網(wǎng)頁設(shè)計中一定要模塊化，就算是不規(guī)則的排版方式，也要做到有理有據(jù)。

無論是平面設(shè)計也好,網(wǎng)頁設(shè)計也罷，在字體應(yīng)用上需要注意如下幾點：

文字適合性，根據(jù)標(biāo)題主題選擇，字體樣式。

 可識別性、在文字設(shè)計應(yīng)用設(shè)計同時要注重文字的識別性、一定要讓瀏覽者在不失美觀的程度下有更好的閱讀主題。

文字的美觀程度、在運用字體的時候一定要字體具有一定的美觀度。整體的效果也會有提升

文字個性化一般都運用在頭圖或一些大標(biāo)題上、具有一些文字圖形上的變化、雖然變化但是一定要在保持識別性的情況下去做文字圖形的修改、文字不只是圖形裝飾，也是一種文字圖形的一種表達方式。

在網(wǎng)頁內(nèi)容正文中一般文字選擇性都很小，在正文中，為了讓輸出的成品大小不對服務(wù)器造成壓力，一般正文文字都不建議用圖片演示、基本是手打字、基于HTML的特性，字體都根據(jù)用戶操作系統(tǒng)默認(rèn)字體而定。

平面設(shè)計一般會通過紙質(zhì)進行宣傳，這樣宣傳范圍小、具有局限性且成本較高，相比而言網(wǎng)頁的信息傳達能力非常強，互聯(lián)網(wǎng)的科技發(fā)展使得大家從網(wǎng)絡(luò)平臺上獲取更多的信息，而網(wǎng)頁大家對于視覺上的享受也有所要求，之前大家對網(wǎng)頁是以視覺的而看重，而近幾年大家可能更加看重用戶體驗。從比較寫實、厚重的頁面到現(xiàn)在簡約、大氣、扁平化、更讓人利于操作、更帶來視覺享受。在用戶體驗的前提下還要注重用戶的交互功能的實現(xiàn)，網(wǎng)頁界面不僅能融入絢麗HTML5動態(tài)交互效果還能插入視頻，這是平面不能體現(xiàn)的。

從事設(shè)計專業(yè)的人，大多數(shù)都有過繪畫的基礎(chǔ)，比如：手繪、素描、水粉、速寫等，這些都可以幫助設(shè)計師提高色彩能力、審美能力、造型能力。把這些學(xué)習(xí)的運用在設(shè)計當(dāng)中同時也學(xué)習(xí)理論的平面構(gòu)成、色彩構(gòu)成、立體構(gòu)成，等一些技法，都是對設(shè)計有所幫助。

那么在這些能力具備的前提下就是軟件操作的技能，在網(wǎng)頁設(shè)計當(dāng)中、軟件操作要精通的有：Photoshop 、Illustrator等、這兩個是必須要掌握的軟件，現(xiàn)在對用戶體驗的不同需求，在設(shè)計技術(shù)上也不同的升級，F(xiàn)LASH在網(wǎng)頁設(shè)計中已經(jīng)不是很重要的地位。

除此之外，還有更多技術(shù)運用在網(wǎng)頁設(shè)計中，如：3D技術(shù)、AE技術(shù)、C4D技術(shù)、插畫技法等，更加滿足現(xiàn)在的視覺需求，讓網(wǎng)頁上的視覺更加具有沖擊力，更加的有交互性。

軟件操作性都熟練之后，UI圖標(biāo)、網(wǎng)頁設(shè)計、H5設(shè)計，多練習(xí)、多看、多臨摹。從臨摹過程中提取出一些經(jīng)驗，如何用的排版、留白、版式、字體、顏色、字號、等。

另外，如時間允許也可以學(xué)習(xí)一下Dreamweaver軟件，或者學(xué)習(xí)HTML豐富一下知識儲備。

學(xué)習(xí)一下Dreamweaver軟件的功能、操作性。然后在學(xué)習(xí)HTML，了解一些基礎(chǔ)的標(biāo)簽，比如比如

、標(biāo)簽等。至少知道這些標(biāo)簽是起到什么作用，接著了解一下DIv+CSS樣式表。比如：類選擇器、ID選擇器、相對定位、絕對定位。邊框、內(nèi)邊、外邊等、給網(wǎng)頁增加一些版式樣式。除此之外如果有精力還可以學(xué)習(xí)一下javas cript。從而可以實現(xiàn)更好的網(wǎng)頁交互性、學(xué)習(xí)一定要有一個路徑、循序漸進、通過系統(tǒng)的學(xué)習(xí)，相信你一定能成為一個優(yōu)秀的設(shè)計師。

原文出處：厚孜網(wǎng)絡(luò)