響應式網頁(yè)前端的設計尺寸标準

設計是很(hěn)靈活的，但同一個項目/産(chǎn)品的設計，就必須要有(yǒu)它的規範，而這些規範，必須要遵循設計的原理(lǐ)，對自己而言，以後再同一項目做更新(xīn)優化時能(néng)用(yòng)更快的時間搞定，對他(tā)人而言，不讓人噴的同時認同你是個專業的設計師。

最近咨詢網頁(yè)前端設計的朋友比較多(duō)，當然大部分(fēn)是求PSD~，授人以魚不如授人以漁，是時候分(fēn)享一些幹貨給大家了。這篇文(wén)章是出于對客觀的理(lǐ)解加上小(xiǎo)編的設計經驗，因此有(yǒu)些地方可(kě)能(néng)會跟大家的想法有(yǒu)出入，不對的地方請指出。

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

居中(zhōng)對齊的網頁(yè)
這個尺寸的網頁(yè)尺寸很(hěn)好把握，新(xīn)建畫布A（白色圖層），然後新(xīn)建另外一個網頁(yè)有(yǒu)效區(qū)的畫布B(黃色圖層)，把畫布B的圖層拖到畫布A，居中(zhōng)對齊，然後拖兩條參考線(xiàn)，删除黃色圖層，這個時候就可(kě)以在這個畫布上大展身手了。

那麽，畫布A的寬度到底應該是多(duō)少分(fēn)辨率呢(ne)？很(hěn)明顯，隻要大于有(yǒu)效區(qū)即可(kě)。因為(wèi)這種網頁(yè)設計尺寸是固定的，控件和元件等的都設置一個固定值，比如間距剛剛好是30px，按鈕剛剛好是100px，表格剛剛好是700px等。網頁(yè)有(yǒu)效區(qū)的寬度從以前的600px漲到現在1200px，甚至更高，因此，結合我們當前使用(yòng)的主流顯示器，例，做一個1200px寬度的網頁(yè)，那麽畫布B就是要設置的寬度，而畫布A則是大于1200px寬度，就算網頁(yè)的有(yǒu)效區(qū)已經固定，然而很(hěn)多(duō)時候，你肯定會設計通欄的banner，用(yòng)上1920分(fēn)辨率顯示器的你，當然是用(yòng)1920的寬度比較爽比較任性好嗎？

版面分(fēn)辨率的設置，常見的網頁(yè)結構類型科(kē)學(xué)的網頁(yè)結構能(néng)夠更好地展現網站信息，讓任務(wù)的完成更容易，對内容的存取更直接。網頁(yè)結構的科(kē)學(xué)性和藝術性，可(kě)易于信息的管理(lǐ)。 

常見的網頁(yè)布局結構主要有(yǒu)以下幾種：

1.“T”形布局
所謂“T”形布局就是指頁(yè)面頂部為(wèi)橫條網站标志(zhì)與廣告條，下方左面為(wèi)主菜單，右面顯示内容的布局，因為(wèi)菜單條背景較深，整體(tǐ)效果類似，英文(wén)字母“T”，所以我們稱之為(wèi)“T”形布局，這是網頁(yè)設計中(zhōng)用(yòng)得廣泛的一種布局方式。這種布局的優點是頁(yè)面結構清晰，主次分(fēn)明，是初學(xué)者容易上手的布局方法。缺點是規矩呆闆，如果細節色彩上不注意加工(gōng)，很(hěn)容易讓人“看之無味”。

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

3.“三”形布局
這種布局多(duō)為(wèi)國(guó)外站點使用(yòng)，國(guó)内用(yòng)得不多(duō)。特點是頁(yè)面上橫向兩條色塊，将頁(yè)面整體(tǐ)分(fēn)割為(wèi)三部分(fēn)，色塊中(zhōng)大多(duō)放廣告條。 

4.對稱對比布局
顧名(míng)思義，采取左右或者上下對稱的布局，一半深色，一半淺色，般用(yòng)于設計型站點，優點是視覺沖擊力強，缺點是對兩部分(fēn)進行有(yǒu)機的結合比較困難。

5.POP布局
POP引自廣告術語，就是指頁(yè)面布局像一張宣傳海報，以一張精(jīng)美圖片作(zuò)為(wèi)頁(yè)面的設計中(zhōng)心。這種布局常用(yòng)于時尚類站點，優點顯而易見：漂亮，吸引人。缺點就是速度慢。

布滿全屏的網頁(yè)
對于全屏展示的網頁(yè)，又(yòu)分(fēn)為(wèi)自适應和響應式。

自适應是根據浏覽器的分(fēn)辨率大小(xiǎo)自動适配尺寸布滿全屏，它所呈現的樣式一直都是一個終端的（如PC端）效果，通常前端會給這種網頁(yè)設定一個最小(xiǎo)值（min-width），當浏覽器的分(fēn)辨率小(xiǎo)于這個值的時候，浏覽器會出現橫向滾動條。

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

響應式布局網頁(yè)固然有(yǒu)很(hěn)大的優勢，但是在很(hěn)多(duō)約束的現實情況，後台設計（一般指信息/數據型的管理(lǐ)系統）并不會采取這種方式，而是選擇自适應的PC端設計，當然如果産(chǎn)品需要，一般開發上會分(fēn)開做成兩種形式，PC端和移動端。正因為(wèi)是PC端的後台，它的分(fēn)辨率（浏覽器分(fēn)辨率）仍然有(yǒu)大有(yǒu)小(xiǎo)，全屏自适應的布局會根據分(fēn)辨率的大小(xiǎo)而改變。PC端後台界面會設計一個最小(xiǎo)寬度min-width，如果浏覽器小(xiǎo)于這個值，那麽隻能(néng)用(yòng)滾動條拖動了。

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

對于後台設計，布滿全屏的網頁(yè)尺寸在當下的環境顯得更為(wèi)主流，因為(wèi)後台的更新(xīn)優化實在是太頻繁了，固定寬度有(yǒu)時候很(hěn)難滿足交互需求。

/wangzhansheji/3510.html 響應式網頁(yè)前端的設計尺寸标準