曾經有人說過，“布(bu)(bu)局(ju)雖然只是(shi)內容的(de)(de)(de)(de)表現(xian)形式(shi)，但卻能決定(ding)瀏覽者(zhe)對內容的(de)(de)(de)(de)態度(du)”，從(cong)這句話中(zhong)就足(zu)以看出布(bu)(bu)局(ju)在(zai)設(she)計(ji)中(zhong)的(de)(de)(de)(de)重要(yao)性。從(cong)網(wang)(wang)頁(ye)的(de)(de)(de)(de)布(bu)(bu)局(ju)中(zhong)就能看出一(yi)個設(she)計(ji)師的(de)(de)(de)(de)設(she)計(ji)水準，以往的(de)(de)(de)(de)網(wang)(wang)頁(ye)布(bu)(bu)局(ju)大(da)家(jia)都(dou)會依(yi)照黃金比(bi)例的(de)(de)(de)(de)原則去排版設(she)計(ji)，所以大(da)多數(shu)網(wang)(wang)頁(ye)也(ye)都(dou)千篇一(yi)律，而現(xian)在(zai)，中(zhong)規中(zhong)矩的(de)(de)(de)(de)網(wang)(wang)頁(ye)布(bu)(bu)局(ju)已(yi)經不由(you)得讓瀏覽者(zhe)產生了(le)視覺疲勞，因(yin)此必須做出一(yi)些改變，以此來順應未(wei)來的(de)(de)(de)(de)設(she)計(ji)趨勢，在(zai)布(bu)(bu)局(ju)中(zhong)加入更多的(de)(de)(de)(de)創(chuang)意(yi)。

       1、第一(yi)個(ge)案例(li)是U2 Lighting定制的(de)(de)展(zhan)示型官方網站(zhan)。網站(zhan)的(de)(de)排版布局(ju)比較簡約大氣，在加上“零(ling)線框”的(de)(de)處(chu)理，讓整體看起來(lai)更舒適。設計師(shi)利用(yong)黑與(yu)亮的(de)(de)反差突出(chu)了產(chan)品的(de)(de)特色，同時(shi)制造出(chu)時(shi)尚神秘的(de)(de)氛圍。

       2、Syropia的網站看起來(lai)會有點亂，但是(shi)單從布(bu)(bu)局上來(lai)講其(qi)實并(bing)沒有什么(me)問題(ti)，而造成(cheng)頁(ye)面雜亂的主要(yao)原(yuan)因在于設計師使(shi)用了過(guo)多(duo)的修飾性(xing)元(yuan)素，比如字體，幾何元(yuan)素等。從這個(ge)案(an)例中我(wo)們可以(yi)看出，再簡單的布(bu)(bu)局也無(wu)法(fa)中和過(guo)多(duo)的修飾。

       3、這個網(wang)站的(de)布(bu)局(ju)方(fang)式比較少見(jian)，從(cong)整(zheng)體來看層疊(die)有序統一。設計師將重要的(de)文字內容(rong)浮在濾鏡背景上方(fang)，搭配高(gao)透明度的(de)色塊更加(jia)增強了這些(xie)文字的(de)閱讀(du)性，小細節(jie)成就的(de)效果讓頁面結構(gou)變得更加(jia)清(qing)晰。

     ;  4、方(fang)形的(de)(de)圖(tu)案能(neng)給人一種正式、規則(ze)的(de)(de)感(gan)覺，對稱的(de)(de)效果也加深(shen)了(le)整個(ge)網(wang)頁的(de)(de)平衡(heng)感(gan)和(he)協調性。文字與圖(tu)片之間的(de)(de)安(an)排錯落有致，留白的(de)(de)面(mian)積和(he)頁面(mian)整體單色調的(de)(de)使用也很適中，瀏(liu)覽時給人以一種溫和(he)的(de)(de)感(gan)覺。

       5、這個案例使(shi)用了真實的人(ren)物背(bei)景，使(shi)用人(ren)物背(bei)景的網(wang)頁的布局一(yi)般都很(hen)(hen)極(ji)簡，在色彩上也(ye)不會采用很(hen)(hen)多的顏(yan)色來(lai)修飾，因此需要一(yi)些元素的幫助讓網(wang)頁更有邏輯，卡片(pian)式(shi)的設計(ji)理念(nian)就很(hen)(hen)好(hao)的填補了這方面的空(kong)白，讓頁面看起(qi)來(lai)不再(zai)單調。

       6、這個案(an)例使用的(de)是(shi)圖片環繞文(wen)字的(de)布局(ju)方(fang)式，圖片數量多(duo)容易造(zao)成瀏覽時忽略文(wen)字內(nei)容，因(yin)此設計師將主文(wen)字字體(ti)加粗，按鈕采用幽靈設計，既不顯(xian)得很(hen)突兀(wu)，也(ye)與網站整體(ti)基調(diao)很(hen)相符。

       7、BENJ&SOTO是(shi)一(yi)(yi)個國外(wai)的(de)電(dian)子(zi)商務(wu)網(wang)站(zhan)(zhan)，一(yi)(yi)般(ban)來(lai)說，電(dian)商網(wang)站(zhan)(zhan)都是(shi)中規(gui)中矩的(de)，各大網(wang)站(zhan)(zhan)在形式(shi)上基本沒有什(shen)么很大的(de)出(chu)入，尤其是(shi)商品(pin)(pin)詳(xiang)情頁(ye)，排(pai)列(lie)的(de)順(shun)序都表現出(chu)驚人(ren)的(de)相 似。而案(an)例中的(de)網(wang)站(zhan)(zhan)卻(que)打破了(le)這樣的(de)常規(gui)布局(ju)方(fang)式(shi)，商品(pin)(pin)的(de)左(zuo)側是(shi)一(yi)(yi)些(xie)基本信息；右側以圖片為主，給用(yong)戶一(yi)(yi)種更加全方(fang)位了(le)解商品(pin)(pin)的(de)心理感(gan)受。

       8、該(gai)案(an)例(li)的(de)(de)設計理念來源于教(jiao)室中的(de)(de)黑板形象，布局(ju)上也體現了一些層疊感(gan)，粉筆效(xiao)果也讓臨時信息的(de)(de)展(zhan)示變得很自然(ran)親和。

       9、網頁設計中(zhong)的(de)圓形元(yuan)素能自然的(de)給人(ren)一種柔和溫暖的(de)安全感，案(an)例(li)中(zhong)的(de)漢堡圖標(biao)也融入(ru)了這(zhe)一元(yuan)素。大(da)片(pian)的(de)文字會令網頁顯得有(you)些沉悶，幾何(he)圖案(an)正好彌補了這(zhe)一點。

       10、這(zhe)個網(wang)站采(cai)用了(le)網(wang)格布局(ju)的設(she)計，讓網(wang)頁變得更(geng)加(jia)干(gan)凈(jing)整潔(jie)。雖然內(nei)容種類很多，文(wen)字、圖片(pian)，甚(shen)至(zhi)流媒體，但是合理的布局(ju)讓這(zhe)些(xie)內(nei)容絲毫不凌亂。

       網(wang)(wang)(wang)頁(ye)布局在(zai)網(wang)(wang)(wang)頁(ye)設計中(zhong)起到了很大的作用(yong)，不僅能讓(rang)網(wang)(wang)(wang)頁(ye)整體看起來更協調，還能提(ti)升網(wang)(wang)(wang)站本身內容的質量。