設計是(shi)很靈(ling)活的(de)(de)，但(dan)同一個項目/產(chan)品的(de)(de)設計，就必須要有它(ta)的(de)(de)規(gui)范(fan)，而這(zhe)些規(gui)范(fan)，必須要遵循設計的(de)(de)原理，對自己而言(yan)，以后再同一項目做更新優化時(shi)能用更快的(de)(de)時(shi)間搞定，對他人(ren)而言(yan)，不讓人(ren)噴的(de)(de)同時(shi)認同你(ni)是(shi)個專業(ye)的(de)(de)設計師。

最近咨詢(xun)網頁前(qian)端設(she)計(ji)的(de)(de)朋(peng)友(you)比較多，當(dang)然大(da)部(bu)分是(shi)求PSD~，授人以魚不如授人以漁，是(shi)時候分享一些干貨給(gei)大(da)家了(le)。這篇文(wen)章是(shi)出于對客觀的(de)(de)理解加(jia)上小編的(de)(de)設計經驗(yan)，因此有(you)些(xie)地方(fang)可(ke)能會跟大家的(de)(de)想法(fa)有(you)出入，不對的(de)(de)地方(fang)請指出。

前端(duan)設(she)(she)計也是屬于網頁(ye)設(she)(she)計的(de)(de)一(yi)部分，自(zi)從(cong)有了(le)H5，網頁(ye)設(she)(she)計的(de)(de)展現形式真是千變(bian)萬(wan)化，但是要做一(yi)個讓大(da)部分非(fei)IT的(de)(de)人操作(zuo)的(de)(de)PC端(duan)前端(duan)，你把(ba)它做的(de)(de)很炫，請問用戶答應嗎？前端(duan)和開發都不想答應。當然，對于一(yi)些控件(jian)/元件(jian)是可以做一(yi)些輕動畫交互。

居中對齊的網頁
這個(ge)尺寸的(de)網頁(ye)尺寸很好把握(wo)，新建(jian)畫(hua)布(bu)A（白色(se)圖(tu)(tu)層），然后新建(jian)另外(wai)一個(ge)網頁(ye)有(you)效(xiao)區(qu)的(de)畫(hua)布(bu)B(黃色(se)圖(tu)(tu)層)，把畫(hua)布(bu)B的(de)圖(tu)(tu)層拖到畫(hua)布(bu)A，居中對齊，然后拖兩條(tiao)參考線，刪除黃色(se)圖(tu)(tu)層，這個(ge)時候就可以在這個(ge)畫(hua)布(bu)上大展身手了。

那(nei)么，畫布(bu)A的(de)(de)(de)寬度(du)(du)到(dao)底應(ying)該是(shi)多少分辨率呢？很(hen)(hen)明(ming)顯，只要大(da)于(yu)有(you)效(xiao)(xiao)區即可。因為這種網頁(ye)(ye)設(she)(she)計尺寸是(shi)固(gu)(gu)定(ding)的(de)(de)(de)，控件和(he)元件等的(de)(de)(de)都設(she)(she)置一個固(gu)(gu)定(ding)值(zhi)，比如(ru)間距剛(gang)剛(gang)好(hao)是(shi)30px，按鈕剛(gang)剛(gang)好(hao)是(shi)100px，表格剛(gang)剛(gang)好(hao)是(shi)700px等。網頁(ye)(ye)有(you)效(xiao)(xiao)區的(de)(de)(de)寬度(du)(du)從以前(qian)的(de)(de)(de)600px漲到(dao)現在1200px，甚至更高(gao)，因此(ci)，結合我們(men)當前(qian)使用的(de)(de)(de)主流顯示(shi)器(qi)，例，做一個1200px寬度(du)(du)的(de)(de)(de)網頁(ye)(ye)，那(nei)么畫布(bu)B就(jiu)是(shi)要設(she)(she)置的(de)(de)(de)寬度(du)(du)，而畫布(bu)A則(ze)是(shi)大(da)于(yu)1200px寬度(du)(du)，就(jiu)算網頁(ye)(ye)的(de)(de)(de)有(you)效(xiao)(xiao)區已經固(gu)(gu)定(ding)，然而很(hen)(hen)多時(shi)候，你肯定(ding)會設(she)(she)計通欄的(de)(de)(de)banner，用上(shang)1920分辨率顯示(shi)器(qi)的(de)(de)(de)你，當然是(shi)用1920的(de)(de)(de)寬度(du)(du)比較爽比較任性好(hao)嗎(ma)？

版面分辨率的設置，常見的網頁結構(gou)(gou)類型科學(xue)的網頁結構(gou)(gou)能夠(gou)更(geng)(geng)好(hao)地展現(xian)網站(zhan)信(xin)息(xi)，讓任務的完(wan)成更(geng)(geng)容(rong)易(yi)，對內容(rong)的存取更(geng)(geng)直接。網頁結構(gou)(gou)的科學(xue)性和藝術(shu)性，可易(yi)于信(xin)息(xi)的管理(li)。 

常見的(de)網頁(ye)布局結構主要有以(yi)下(xia)幾(ji)種：

1.“T”形布局
所謂“T”形(xing)布局(ju)就是指頁面(mian)頂部為(wei)橫條(tiao)網站標志與廣(guang)告條(tiao)，下方(fang)左面(mian)為(wei)主(zhu)菜(cai)單，右面(mian)顯示內(nei)容(rong)的布局(ju)，因(yin)為(wei)菜(cai)單條(tiao)背景較(jiao)深，整(zheng)體效(xiao)果類(lei)似(si)，英文字母“T”，所以我們稱之(zhi)為(wei)“T”形(xing)布局(ju)，這是網頁設計(ji)中用(yong)得(de)廣(guang)泛的一(yi)種布局(ju)方(fang)式。這種布局(ju)的優點是頁面(mian)結構清晰，主(zhu)次(ci)分明，是初學者容(rong)易上(shang)手的布局(ju)方(fang)法。缺點是規矩呆板(ban)，如果細節色(se)彩上(shang)不注意加工，很容(rong)易讓人“看之(zhi)無味”。

2.“口”形布局
這是一(yi)(yi)個(ge)象形的說法，一(yi)(yi)般就是頁面上下各有一(yi)(yi)個(ge)廣告(gao)條，左(zuo)面是主(zhu)(zhu)菜單，右面放友情鏈接等，中(zhong)間是主(zhu)(zhu)要內容。這種布局(ju)的優點是充分(fen)利(li)用(yong)版面，信(xin)息量大(da)。缺(que)點是頁面擁擠，不夠靈活。也有將四邊(bian)空出，只用(yong)中(zhong)窗口形布局(ju)。

3.“三”形布局
這種布局多(duo)(duo)為(wei)(wei)國外站點(dian)使用，國內(nei)用得不多(duo)(duo)。特(te)點(dian)是頁面上(shang)橫(heng)向兩條(tiao)色塊，將頁面整體(ti)分(fen)割為(wei)(wei)三部分(fen)，色塊中大多(duo)(duo)放廣告條(tiao)。 

4.對稱對比布局
顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，般用于設計型(xing)站點，優點是視(shi)覺沖擊力強，缺(que)點是對兩部(bu)分進行有機的結合比(bi)較(jiao)困難。

5.POP布局
POP引自(zi)廣告術語，就是指(zhi)頁面布(bu)局像(xiang)一張宣傳海(hai)報，以(yi)一張精美(mei)圖片作為頁面的設計中心。這(zhe)種布(bu)局常用(yong)于(yu)時尚(shang)類站點，優點顯(xian)而易見：漂亮(liang)，吸引人。缺點就是速度慢。

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

自適(shi)(shi)應是根據(ju)瀏(liu)(liu)覽(lan)器的分(fen)辨率(lv)大小自動(dong)適(shi)(shi)配尺寸布(bu)滿全屏，它所呈現(xian)的樣(yang)式一(yi)直都是一(yi)個終端的（如PC端）效果，通常前(qian)端會(hui)給(gei)這種網頁設定一(yi)個最小值(zhi)（min-width），當(dang)瀏(liu)(liu)覽(lan)器的分(fen)辨率(lv)小于(yu)這個值(zhi)的時候，瀏(liu)(liu)覽(lan)器會(hui)出現(xian)橫(heng)向(xiang)滾動(dong)條。

另外一種(zhong)就是(shi)近幾年超流行的(de)(de)人(ren)們常(chang)說(shuo)的(de)(de)H5響應式布局（柵格化布局），一般把瀏覽器分辨率三等(deng)分，在每個(ge)等(deng)分區間(jian)展示(shi)的(de)(de)布局都不盡相同(tong)，也就是(shi)我們說(shuo)手機端、平板、PC端的(de)(de)展示(shi)，并且在每一個(ge)區間(jian)的(de)(de)分辨率的(de)(de)縮(suo)放也應包括了自適應。因(yin)此(ci)在設計這種(zhong)網(wang)頁時，通常(chang)要做(zuo)三種(zhong)尺(chi)寸的(de)(de)設計。

響應式(shi)布(bu)局網頁固然有(you)很(hen)大(da)的(de)(de)優勢(shi)，但是在很(hen)多約束的(de)(de)現實情況(kuang)，后(hou)臺設計(ji)（一般指信(xin)息(xi)/數據型的(de)(de)管理系統）并不(bu)會(hui)(hui)采取這種(zhong)方式(shi)，而是選擇自適應的(de)(de)PC端(duan)設計(ji)，當然如(ru)果產品(pin)需要，一般開(kai)發上(shang)會(hui)(hui)分開(kai)做成兩種(zhong)形(xing)式(shi)，PC端(duan)和(he)移動端(duan)。正因為是PC端(duan)的(de)(de)后(hou)臺，它(ta)的(de)(de)分辨(bian)率(lv)（瀏(liu)覽器(qi)分辨(bian)率(lv)）仍然有(you)大(da)有(you)小，全屏自適應的(de)(de)布(bu)局會(hui)(hui)根據分辨(bian)率(lv)的(de)(de)大(da)小而改變。PC端(duan)后(hou)臺界面(mian)會(hui)(hui)設計(ji)一個最小寬度min-width，如(ru)果瀏(liu)覽器(qi)小于(yu)這個值，那(nei)么(me)只能用滾(gun)動條拖動了。

既然(ran)是(shi)(shi)布滿全屏的(de)(de)(de)網頁(ye)，那(nei)么新建的(de)(de)(de)畫布尺(chi)寸就可以更主觀了(le)，一般就按照自己使用的(de)(de)(de)顯示(shi)器的(de)(de)(de)更佳 分辨率來設置，至于在什(shen)么樣的(de)(de)(de)尺(chi)寸展示(shi)什(shen)么樣的(de)(de)(de)布局，那(nei)是(shi)(shi)前(qian)端(duan)的(de)(de)(de)技術，設計只提供各個分辨率展示(shi)的(de)(de)(de)效(xiao)果(guo)圖，但是(shi)(shi)，你(ni)必須理(li)解其中(zhong)的(de)(de)(de)原理(li)，否則前(qian)端(duan)直接跟(gen)你(ni)說做不(bu)了(le)你(ni)也沒轍。

對于后(hou)臺(tai)設計，布(bu)滿全屏的網頁尺寸在(zai)當下的環境顯得更(geng)(geng)為主流，因為后(hou)臺(tai)的更(geng)(geng)新(xin)優化實(shi)在(zai)是太頻繁了(le)，固定寬度有時候很難滿足交(jiao)互需(xu)求。