現在，越(yue)(yue)來越(yue)(yue)多的人想要建(jian)立(li)自(zi)己的網(wang)站(zhan)，通過(guo)自(zi)助(zhu)建(jian)站(zhan)系統(tong)就可以自(zi)己進(jin)行網(wang)頁制(zhi)作了(le)。這無疑是一件好事，但是，很多設(she)計(ji)師(shi)，尤其是新手(shou)設(she)計(ji)師(shi)或者(zhe)壓根兒就不是設(she)計(ji)師(shi)的小白(bai)，都在網(wang)頁設(she)計(ji)上走過(guo)不少彎(wan)路(lu)。

網頁制作(zuo)(zuo)最重要的(de)就是網頁布(bu)局，先布(bu)局，后(hou)細(xi)節，只有在(zai)選擇了合適的(de)網站布(bu)局以后(hou)，才可以順利的(de)進行接下來的(de)工作(zuo)(zuo)。

1.Diker Bau

網站網站布局思路：精(jing)選圖片展示品牌標識(shi)

Diker是一家位(wei)于德國柏林的(de)建筑規(gui)劃集(ji)團(tuan)。設計(ji)師突出(chu)了以精選圖(tu)來(lai)概述品(pin)牌標識的(de)主要特征(zheng)和屬性。精選圖(tu)被用作整個網站結構和架(jia)構的(de)基礎。由于此(ci)布局中缺少(shao)其他元素，精選圖(tu)會引起用戶對(dui)產品(pin)的(de)完全關注(zhu)。

如果你(ni)想(xiang)設(she)計一個(ge)可以(yi)(yi)快速銷(xiao)售(shou)產品的網站(zhan)，那(nei)么就可以(yi)(yi)使用(yong)這種布(bu)(bu)局(ju)。精選圖可以(yi)(yi)與(yu)訪客建立(li)情感聯系，一張大而得體的照片或(huo)插圖會產生強烈的共鳴并創造出令人難忘(wang)的第一印象。當你(ni)只需展示(shi)一種產品或(huo)服務，并將用(yong)戶的全部(bu)注意力集中在(zai)其上時，此布(bu)(bu)局(ju)非(fei)常(chang)有用(yong)。

訪(fang)問網站：//www.behance.net/gallery/22105949/Diker-Bau

2. Chekhov

網站(zhan)布局思路(lu)：分屏布局

該網站使用了分(fen)屏布局，這種(zhong)布局可以同時展示兩(liang)個同等(deng)重要的(de)內容(rong)信息。此外，設計師將兩(liang)種(zhong)信息相互(hu)對立，創造出(chu)完美的(de)對比，以吸引更(geng)多訪客的(de)目(mu)光。分(fen)屏布局，再加(jia)上呼應(ying)的(de)動畫，該網站創建(jian)出(chu)更(geng)加(jia)精致(zhi)的(de)體驗。

如(ru)果你(ni)的(de)網站(zhan)需(xu)要提(ti)供(gong)兩種(zhong)截(jie)然不同的(de)用戶旅程變體，那么使用拆分屏(ping)幕的(de)布局(ju)吧。但是要避免在(zai)拆分部(bu)分添(tian)加(jia)太多(duo)內(nei)(nei)容(rong)。如(ru)果內(nei)(nei)容(rong)過(guo)長過(guo)多(duo)，分屏(ping)設計不能(neng)很好地擴展，會(hui)影響體驗(yan)。因(yin)此，如(ru)果你(ni)需(xu)要在(zai)拆分部(bu)分提(ti)供(gong)大量(liang)文本(ben)或視覺信息(xi)，則不適(shi)合(he)這種(zhong)布局(ju)。

訪問網站(zhan)：//chekhov.withgoogle.com/alive#home

3. Timothee Roussilhe

網站布局思(si)路：視差(cha)滾動布局

該(gai)網站是設計師Timothee Roussilhe的(de)一個簡單而富有創意的(de)簡歷網站。他(ta)增加了視差(cha)效果，為(wei)訪客提供(gong)更愉(yu)快和(he)令人印(yin)象深刻的(de)體驗。向下滾動時，會有很多個盒子移入和(he)移出。令人驚奇的(de)是，所有的(de)盒子都增加了視差(cha)效果，你會覺得你正在看一場電影。

如果你想(xiang)設計一(yi)(yi)個看起來很酷，富有創意和令人印象深(shen)刻的網站，那(nei)就添(tian)加一(yi)(yi)個視差效果。但(dan)是不要(yao)把它搞(gao)得(de)一(yi)(yi)團糟，保(bao)持(chi)布(bu)局(ju)簡(jian)單并使用更干凈的配(pei)色方案。

訪問網站：//timroussilhe.com/

4. Happiness Abscissa

網站布(bu)局思路：側(ce)邊欄(lan)導航

該(gai)網(wang)站使用(yong)(yong)了(le)一個(ge)固定的側(ce)(ce)邊欄導航(hang)(hang)來顯示整個(ge)布局。導航(hang)(hang)無疑(yi)是任(ren)何網(wang)站的關鍵(jian)部分(fen)，主菜單是大多數(shu)用(yong)(yong)戶在(zai)導航(hang)(hang)時首(shou)先要查找的內容。除了(le)頂部水(shui)平導航(hang)(hang)外(wai)，你還可(ke)以通過(guo)將菜單選(xuan)項放(fang)在(zai)固定的側(ce)(ce)邊欄中(zhong)來布局。側(ce)(ce)邊欄應(ying)該(gai)選(xuan)擇頁(ye)(ye)面(mian)左(zuo)側(ce)(ce)或右側(ce)(ce)的垂直列(lie)。對于此布局，側(ce)(ce)邊欄保持靜(jing)止并(bing)始終(zhong)保持可(ke)見，而其余頁(ye)(ye)面(mian)隨著用(yong)(yong)戶向下滾(gun)動(dong)頁(ye)(ye)面(mian)而更改。還要確(que)保這種導航(hang)(hang)具有可(ke)訪問性。

此(ci)布局適用于導航選(xuan)項(xiang)數量(liang)相對有(you)限的(de)網(wang)站。當用戶進入頁面時，所(suo)有(you)選(xuan)項(xiang)最(zui)好都在(zai)視(shi)線范圍內。側邊欄還(huan)可以包含菜單(dan)以外的(de)內容，例如社(she)交媒體(ti)鏈接，聯系信息或你希(xi)望訪問者輕松查找的(de)任何內容。

訪問網站：//www.happinessabscissa.com/

5. Assemble網站布局思路：網格卡(ka)片布局

Assemble通(tong)過(guo)在豐富的(de)主頁上使用(yong)網格結構來顯示多(duo)姿(zi)多(duo)彩(cai)的(de)欄目。卡(ka)片(pian)可(ke)以(yi)以(yi)易消化的(de)方式(shi)呈現大量可(ke)點(dian)擊信息(xi)(xi)。它(ta)可(ke)以(yi)幫(bang)助訪問(wen)者找到他們(men)喜歡的(de)內容(rong)，并通(tong)過(guo)點(dian)擊或點(dian)擊卡(ka)片(pian)來深入了解(jie)詳細信息(xi)(xi)。

這種布局是無限可操作的(de)(de)，網(wang)格(ge)的(de)(de)大小(xiao)，間距和列(lie)數可以(yi)不(bu)同，卡片的(de)(de)樣式(shi)可以(yi)根據屏幕大小(xiao)而變化（卡片可以(yi)重(zhong)新排列(lie)以(yi)適合任何屏幕）。因此，網(wang)格(ge)卡卡在響應式(shi)設(she)計中(zhong)運用很廣。

此(ci)布局非常適合構建內容較多(duo)的網站，且具有相(xiang)同(tong)層次結構的項(xiang)目(mu)。

訪問網站：//assemble.edge-themes.com/landing/

6. Medium

網站布局(ju)思路：柵欄布局(ju)

Medium是一個(ge)很受歡迎的(de)博客(ke)網站，它以(yi)易于理(li)(li)解的(de)方式向(xiang)讀(du)者(zhe)(zhe)提供大量閱讀(du)信息。與紙(zhi)質雜(za)志類似，該網站使用多列網格，可(ke)以(yi)創建復雜(za)的(de)層次(ci)結構并(bing)集成文本(ben)和插圖。主要目標(biao)是讓訪問者(zhe)(zhe)能夠快速瀏覽，閱讀(du)和理(li)(li)解頁(ye)面。但值得一提的(de)是，Medium文章內面又是采用了單欄布(bu)局，這是為了方便讀(du)者(zhe)(zhe)可(ke)以(yi)沒有障礙地(di)滾動鼠標(biao)進行閱讀(du)。

對于頁面上具有(you)大(da)量(liang)內容又具有(you)復雜層次結構(gou)的網站，柵(zha)欄布局(ju)是一個不錯(cuo)的選擇(ze)。如果沒有(you)有(you)效使(shi)用(yong)網格，主頁上的所(suo)有(you)內容可能會(hui)顯得更加(jia)混亂(luan)和(he)組織化。

訪問網站：//medium.com/

7. Beverages

網站布局(ju)思路：盒子布局(ju)

Beverages是一(yi)個(ge)(ge)100％響應(ying)的(de)網(wang)(wang)站(zhan)模(mo)板(ban)，其(qi)餐(can)廳主題(ti)適(shi)用于任(ren)何食品和飲料(liao)網(wang)(wang)站(zhan)的(de)設計。所謂的(de)盒子(zi)(zi)布局(ju)，就是一(yi)個(ge)(ge)大(da)標題(ti)寬(kuan)度框(kuang)加一(yi)些較(jiao)小的(de)盒子(zi)(zi)，每(mei)(mei)個(ge)(ge)盒子(zi)(zi)都占據了屏幕(mu)大(da)空間的(de)一(yi)部分。較(jiao)小的(de)盒子(zi)(zi)數量可(ke)以(yi)從 2 到 5 不等(deng)。每(mei)(mei)個(ge)(ge)盒子(zi)(zi)都可(ke)以(yi)是一(yi)個(ge)(ge)鏈(lian)接(jie)，通向更(geng)細節，更(geng)復雜的(de)頁面。

訪問網(wang)站：//p.w3layouts.com/demos_new/template_demo/07

8. Casangelina

網站布(bu)局(ju)思路：不對(dui)稱布(bu)局(ju)

Hotel Casangelina酒(jiu)店(dian)是(shi)世(shi)界十(shi)大懸崖(ya)酒(jiu)店(dian)之一，位于阿馬爾菲海岸的(de)(de)懸崖(ya)上。客人可以(yi)在酒(jiu)店(dian)露臺上的(de)(de)全景室外游(you)泳(yong)池放松身心。通(tong)過極(ji)簡主義UI設計(ji)(ji)，滾動(dong)區(qu)域中(zhong)圖片(pian)和(he)字體的(de)(de)融合(he)(he)增(zeng)強了(le)網頁(ye)瀏覽的(de)(de)沉(chen)浸感。這(zhe)是(shi)UI設計(ji)(ji)和(he)用戶(hu)體驗的(de)(de)完美結合(he)(he)。背景音樂和(he)動(dong)態(tai)酒(jiu)店(dian)全景視頻增(zeng)添(tian)了(le)視覺(jue)真(zhen)實感，讓用戶(hu)通(tong)過網頁(ye)設計(ji)(ji)感受整個酒(jiu)店(dian)的(de)(de)優(you)雅。因為太喜(xi)歡這(zhe)個網站(zhan)了(le)，所以(yi)多說了(le)幾句。

現(xian)在講講不(bu)(bu)對稱(cheng)布局(ju)，就是頁(ye)面的布局(ju)兩(liang)(liang)邊缺乏平等。不(bu)(bu)對稱(cheng)是藝術界長期以(yi)(yi)來最喜歡的技術，在網頁(ye)設(she)計師中很受歡迎。但(dan)要(yao)(yao)注(zhu)意(yi)不(bu)(bu)要(yao)(yao)將不(bu)(bu)對稱(cheng)與不(bu)(bu)平衡(heng)混為一談，不(bu)(bu)對稱(cheng)的目標是在不(bu)(bu)可能或不(bu)(bu)希望對兩(liang)(liang)個部(bu)分使(shi)用(yong)相同的權(quan)重時創(chuang)造(zao)平衡(heng)。使(shi)用(yong)不(bu)(bu)對稱(cheng)性可以(yi)(yi)創(chuang)建張力和動態(tai)，并且把用(yong)戶的注(zhu)意(yi)力集中在各個對象(xiang)（焦點）上。

訪(fang)問(wen)頁面：//www.casangelina.com/

9. Tinkerwatches

網站布局(ju)思(si)路：大圖配帶(dai)明(ming)確CTA

此布(bu)局的(de)(de)核心元素(su)是張(zhang)用作頁面(mian)背(bei)景的(de)(de)大照片。該照片用于向訪問(wen)者介(jie)紹網站內容。這(zhe)種(zhong)布(bu)局可以創造(zao)出強烈的(de)(de)第一印象(xiang)，并和用戶(hu)產生互動(dong)。明(ming)確的(de)(de)CTA是關(guan)鍵，引導(dao)用戶(hu)互動(dong)。如果你想要(yao)以最簡潔的(de)(de)方式(shi)展(zhan)示(shi)更多的(de)(de)信息，這(zhe)種(zhong)布(bu)局可以考(kao)慮，就像(xiang)(xiang)是無聲勝有聲。但要(yao)仔細選擇(ze)背(bei)景圖像(xiang)(xiang)。

訪問網(wang)站：//tinkerwatches.com/