現在，越來(lai)越多的人(ren)想要建(jian)(jian)立自(zi)己(ji)的網(wang)站，通(tong)過(guo)自(zi)助建(jian)(jian)站系(xi)統就可以自(zi)己(ji)進行網(wang)頁制作了。這無疑是一件好(hao)事，但(dan)是，很多設(she)計(ji)師，尤其是新手(shou)設(she)計(ji)師或者壓(ya)根兒就不是設(she)計(ji)師的小(xiao)白，都在網(wang)頁設(she)計(ji)上(shang)走過(guo)不少彎路(lu)。

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

1.Diker Bau

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

Diker是一家位于(yu)(yu)德國柏林的建(jian)筑規劃集團。設計師突出(chu)了(le)以精(jing)選圖來概述品牌(pai)標識的主要(yao)特(te)征和(he)屬性。精(jing)選圖被用作整個網站(zhan)結構和(he)架(jia)構的基礎。由于(yu)(yu)此布局中缺(que)少(shao)其他元素，精(jing)選圖會引起用戶對產品的完全關注。

如果你想設計一個可以(yi)快速銷售產(chan)品(pin)的(de)網(wang)站，那么就可以(yi)使(shi)用(yong)這種(zhong)布(bu)局。精選圖(tu)可以(yi)與(yu)訪客(ke)建立(li)情感聯(lian)系，一張大而(er)得體的(de)照片或(huo)插圖(tu)會產(chan)生強烈(lie)的(de)共(gong)鳴并創(chuang)造出令(ling)人難(nan)忘的(de)第一印(yin)象。當你只需展示一種(zhong)產(chan)品(pin)或(huo)服(fu)務，并將用(yong)戶的(de)全部注(zhu)意(yi)力集中(zhong)在其上時，此布(bu)局非常有用(yong)。

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

2. Chekhov

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

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

如(ru)果(guo)(guo)你的網站需要提供兩種截然不(bu)同(tong)的用戶旅(lv)程變體，那(nei)么(me)使用拆分屏(ping)幕的布(bu)局(ju)吧。但是(shi)要避免在拆分部分添加(jia)太多內容(rong)。如(ru)果(guo)(guo)內容(rong)過長過多，分屏(ping)設計不(bu)能很好地擴展，會(hui)影響體驗。因此，如(ru)果(guo)(guo)你需要在拆分部分提供大量文本或視覺信(xin)息，則不(bu)適合這種布(bu)局(ju)。

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

3. Timothee Roussilhe

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

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

如果你想設計一個(ge)看起來很酷，富有(you)創(chuang)意和令(ling)人印象深(shen)刻的網(wang)站，那(nei)就添加一個(ge)視(shi)差效果。但是(shi)不要把它搞得一團(tuan)糟，保持布(bu)局(ju)簡單(dan)并(bing)使用(yong)更干(gan)凈的配色方案。

訪(fang)問網站：//timroussilhe.com/

4. Happiness Abscissa

網站布局思路(lu)：側邊欄導航

該(gai)網站使用(yong)了(le)一(yi)個(ge)固(gu)(gu)定的(de)側(ce)邊(bian)(bian)欄(lan)導(dao)(dao)航(hang)(hang)來顯示整個(ge)布局。導(dao)(dao)航(hang)(hang)無疑是(shi)(shi)任何(he)網站的(de)關鍵部分，主菜單是(shi)(shi)大(da)多(duo)數用(yong)戶(hu)在導(dao)(dao)航(hang)(hang)時首(shou)先要查找的(de)內容。除了(le)頂部水平導(dao)(dao)航(hang)(hang)外，你還可(ke)以(yi)通過將菜單選項放在固(gu)(gu)定的(de)側(ce)邊(bian)(bian)欄(lan)中來布局。側(ce)邊(bian)(bian)欄(lan)應該(gai)選擇頁面(mian)左側(ce)或右側(ce)的(de)垂直列(lie)。對(dui)于此(ci)布局，側(ce)邊(bian)(bian)欄(lan)保(bao)持靜止并始終保(bao)持可(ke)見，而其余頁面(mian)隨著(zhu)用(yong)戶(hu)向下(xia)滾動(dong)頁面(mian)而更改。還要確保(bao)這(zhe)種導(dao)(dao)航(hang)(hang)具(ju)有可(ke)訪問性。

此布局(ju)適(shi)用(yong)于導航選(xuan)項(xiang)數(shu)量相對有限的(de)網站。當用(yong)戶進入頁(ye)面(mian)時(shi)，所(suo)有選(xuan)項(xiang)最(zui)好都(dou)在視線范(fan)圍內(nei)。側(ce)邊(bian)欄還可以(yi)包含菜單以(yi)外的(de)內(nei)容，例如社交媒體鏈接，聯(lian)系(xi)信息或(huo)你希望訪(fang)問者輕松查找的(de)任何內(nei)容。

訪(fang)問網站：//www.happinessabscissa.com/

5. Assemble網站布(bu)局思路(lu)：網格卡片(pian)布(bu)局

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

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

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

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

6. Medium

網站布(bu)局思(si)路：柵欄(lan)布(bu)局

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

對于頁(ye)面上(shang)(shang)具有(you)(you)大量內(nei)容(rong)又具有(you)(you)復雜(za)層次結構(gou)的(de)網站，柵欄布局是一(yi)個不錯的(de)選(xuan)擇。如果(guo)沒有(you)(you)有(you)(you)效使用網格，主頁(ye)上(shang)(shang)的(de)所有(you)(you)內(nei)容(rong)可(ke)能會顯得(de)更加混亂和組織(zhi)化。

訪問網站：//medium.com/

7. Beverages

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

Beverages是一個(ge)100％響應的(de)網站模板，其餐廳(ting)主(zhu)題適用(yong)于任何食品和飲(yin)料網站的(de)設計。所謂(wei)的(de)盒(he)(he)子(zi)(zi)布(bu)局，就是一個(ge)大(da)標題寬度框加一些較(jiao)小(xiao)的(de)盒(he)(he)子(zi)(zi)，每個(ge)盒(he)(he)子(zi)(zi)都占據了屏幕大(da)空間的(de)一部(bu)分。較(jiao)小(xiao)的(de)盒(he)(he)子(zi)(zi)數量可以從 2 到 5 不等。每個(ge)盒(he)(he)子(zi)(zi)都可以是一個(ge)鏈(lian)接，通向更細節，更復(fu)雜的(de)頁(ye)面。

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

8. Casangelina

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

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

現在講(jiang)講(jiang)不(bu)(bu)(bu)對(dui)(dui)稱布局，就是(shi)(shi)頁面的(de)布局兩(liang)邊(bian)缺(que)乏平(ping)等。不(bu)(bu)(bu)對(dui)(dui)稱是(shi)(shi)藝術(shu)界長期以來最喜(xi)歡的(de)技術(shu)，在網頁設計師(shi)中(zhong)很(hen)受歡迎。但要注意(yi)不(bu)(bu)(bu)要將不(bu)(bu)(bu)對(dui)(dui)稱與不(bu)(bu)(bu)平(ping)衡(heng)混為一(yi)談，不(bu)(bu)(bu)對(dui)(dui)稱的(de)目標是(shi)(shi)在不(bu)(bu)(bu)可(ke)能或不(bu)(bu)(bu)希望對(dui)(dui)兩(liang)個部(bu)分使(shi)用相(xiang)同的(de)權重時創造(zao)平(ping)衡(heng)。使(shi)用不(bu)(bu)(bu)對(dui)(dui)稱性可(ke)以創建張(zhang)力和動(dong)態，并且把用戶的(de)注意(yi)力集(ji)中(zhong)在各個對(dui)(dui)象(xiang)（焦點）上。

訪問頁面：//www.casangelina.com/

9. Tinkerwatches

網站(zhan)布局思路：大圖(tu)配帶(dai)明確CTA

此布局的(de)核(he)心(xin)元(yuan)素是張用(yong)(yong)作頁面背景的(de)大照(zhao)片。該(gai)照(zhao)片用(yong)(yong)于向訪問者(zhe)介紹網站內容。這(zhe)種(zhong)布局可以(yi)創造出強烈的(de)第一印象，并和(he)用(yong)(yong)戶產生互(hu)動(dong)。明確(que)的(de)CTA是關鍵，引導用(yong)(yong)戶互(hu)動(dong)。如果你想要以(yi)最簡潔的(de)方式(shi)展示更(geng)多的(de)信(xin)息，這(zhe)種(zhong)布局可以(yi)考慮，就像(xiang)是無(wu)聲勝有聲。但要仔細選擇背景圖像(xiang)。

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