設(shè)計(jì)是很靈活的，但同一個(gè)項(xiàng)目/產(chǎn)品的設(shè)計(jì)，就必須要有它的規(guī)范，而這些規(guī)范，必須要遵循設(shè)計(jì)的原理，對自己而言，以后再同一項(xiàng)目做更新優(yōu)化時(shí)能用更快的時(shí)間搞定，對他人而言，不讓人噴的同時(shí)認(rèn)同你是個(gè)專業(yè)的設(shè)計(jì)師。

最近咨詢網(wǎng)頁前端設(shè)計(jì)的朋友比較多，當(dāng)然大部分是求PSD~，授人以魚不如授人以漁，是時(shí)候分享一些干貨給大家了。這篇文章是出于對客觀的理解加上小編的設(shè)計(jì)經(jīng)驗(yàn)，因此有些地方可能會(huì)跟大家的想法有出入，不對的地方請指出。

前端設(shè)計(jì)也是屬于網(wǎng)頁設(shè)計(jì)的一部分，自從有了H5，網(wǎng)頁設(shè)計(jì)的展現(xiàn)形式真是千變?nèi)f化，但是要做一個(gè)讓大部分非IT的人操作的PC端前端，你把它做的很炫，請問用戶答應(yīng)嗎？前端和開發(fā)都不想答應(yīng)。當(dāng)然，對于一些控件/元件是可以做一些輕動(dòng)畫交互。

居中對齊的網(wǎng)頁
這個(gè)尺寸的網(wǎng)頁尺寸很好把握，新建畫布A（白色圖層），然后新建另外一個(gè)網(wǎng)頁有效區(qū)的畫布B(黃色圖層)，把畫布B的圖層拖到畫布A，居中對齊，然后拖兩條參考線，刪除黃色圖層，這個(gè)時(shí)候就可以在這個(gè)畫布上大展身手了。

那么，畫布A的寬度到底應(yīng)該是多少分辨率呢？很明顯，只要大于有效區(qū)即可。因?yàn)檫@種網(wǎng)頁設(shè)計(jì)尺寸是固定的，控件和元件等的都設(shè)置一個(gè)固定值，比如間距剛剛好是30px，按鈕剛剛好是100px，表格剛剛好是700px等。網(wǎng)頁有效區(qū)的寬度從以前的600px漲到現(xiàn)在1200px，甚至更高，因此，結(jié)合我們當(dāng)前使用的主流顯示器，例，做一個(gè)1200px寬度的網(wǎng)頁，那么畫布B就是要設(shè)置的寬度，而畫布A則是大于1200px寬度，就算網(wǎng)頁的有效區(qū)已經(jīng)固定，然而很多時(shí)候，你肯定會(huì)設(shè)計(jì)通欄的banner，用上1920分辨率顯示器的你，當(dāng)然是用1920的寬度比較爽比較任性好嗎？

版面分辨率的設(shè)置，常見的網(wǎng)頁結(jié)構(gòu)類型科學(xué)的網(wǎng)頁結(jié)構(gòu)能夠更好地展現(xiàn)網(wǎng)站信息，讓任務(wù)的完成更容易，對內(nèi)容的存取更直接。網(wǎng)頁結(jié)構(gòu)的科學(xué)性和藝術(shù)性，可易于信息的管理。 

常見的網(wǎng)頁布局結(jié)構(gòu)主要有以下幾種：

1.“T”形布局
所謂“T”形布局就是指頁面頂部為橫條網(wǎng)站標(biāo)志與廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景較深，整體效果類似，英文字母“T”，所以我們稱之為“T”形布局，這是網(wǎng)頁設(shè)計(jì)中用得廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，主次分明，是初學(xué)者容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意加工，很容易讓人“看之無味”。

2.“口”形布局
這是一個(gè)象形的說法，一般就是頁面上下各有一個(gè)廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大。缺點(diǎn)是頁面擁擠，不夠靈活。也有將四邊空出，只用中窗口形布局。

3.“三”形布局
這種布局多為國外站點(diǎn)使用，國內(nèi)用得不多。特點(diǎn)是頁面上橫向兩條色塊，將頁面整體分割為三部分，色塊中大多放廣告條。 

4.對稱對比布局
顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，般用于設(shè)計(jì)型站點(diǎn)，優(yōu)點(diǎn)是視覺沖擊力強(qiáng)，缺點(diǎn)是對兩部分進(jìn)行有機(jī)的結(jié)合比較困難。

5.POP布局
POP引自廣告術(shù)語，就是指頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。這種布局常用于時(shí)尚類站點(diǎn)，優(yōu)點(diǎn)顯而易見：漂亮，吸引人。缺點(diǎn)就是速度慢。

布滿全屏的網(wǎng)頁
對于全屏展示的網(wǎng)頁，又分為自適應(yīng)和響應(yīng)式。

自適應(yīng)是根據(jù)瀏覽器的分辨率大小自動(dòng)適配尺寸布滿全屏，它所呈現(xiàn)的樣式一直都是一個(gè)終端的（如PC端）效果，通常前端會(huì)給這種網(wǎng)頁設(shè)定一個(gè)最小值（min-width），當(dāng)瀏覽器的分辨率小于這個(gè)值的時(shí)候，瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條。

另外一種就是近幾年超流行的人們常說的H5響應(yīng)式布局（柵格化布局），一般把瀏覽器分辨率三等分，在每個(gè)等分區(qū)間展示的布局都不盡相同，也就是我們說手機(jī)端、平板、PC端的展示，并且在每一個(gè)區(qū)間的分辨率的縮放也應(yīng)包括了自適應(yīng)。因此在設(shè)計(jì)這種網(wǎng)頁時(shí)，通常要做三種尺寸的設(shè)計(jì)。

響應(yīng)式布局網(wǎng)頁固然有很大的優(yōu)勢，但是在很多約束的現(xiàn)實(shí)情況，后臺(tái)設(shè)計(jì)（一般指信息/數(shù)據(jù)型的管理系統(tǒng)）并不會(huì)采取這種方式，而是選擇自適應(yīng)的PC端設(shè)計(jì)，當(dāng)然如果產(chǎn)品需要，一般開發(fā)上會(huì)分開做成兩種形式，PC端和移動(dòng)端。正因?yàn)槭荘C端的后臺(tái)，它的分辨率（瀏覽器分辨率）仍然有大有小，全屏自適應(yīng)的布局會(huì)根據(jù)分辨率的大小而改變。PC端后臺(tái)界面會(huì)設(shè)計(jì)一個(gè)最小寬度min-width，如果瀏覽器小于這個(gè)值，那么只能用滾動(dòng)條拖動(dòng)了。

既然是布滿全屏的網(wǎng)頁，那么新建的畫布尺寸就可以更主觀了，一般就按照自己使用的顯示器的更佳 分辨率來設(shè)置，至于在什么樣的尺寸展示什么樣的布局，那是前端的技術(shù)，設(shè)計(jì)只提供各個(gè)分辨率展示的效果圖，但是，你必須理解其中的原理，否則前端直接跟你說做不了你也沒轍。

對于后臺(tái)設(shè)計(jì)，布滿全屏的網(wǎng)頁尺寸在當(dāng)下的環(huán)境顯得更為主流，因?yàn)楹笈_(tái)的更新優(yōu)化實(shí)在是太頻繁了，固定寬度有時(shí)候很難滿足交互需求。

http://ywxrmy.cn/wangzhansheji/3510.html 響應(yīng)式網(wǎng)頁前端的設(shè)計(jì)尺寸標(biāo)準(zhǔn)