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

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

1.Diker Bau

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

Diker是一(yi)家位于德國柏林的建(jian)筑規劃(hua)集團。設(she)計師突出了以精選(xuan)(xuan)圖(tu)(tu)來概述品牌標識的主要特(te)征和屬性。精選(xuan)(xuan)圖(tu)(tu)被用(yong)(yong)作整(zheng)個(ge)網站結構和架構的基礎(chu)。由于此布局(ju)中缺少其他(ta)元素(su)，精選(xuan)(xuan)圖(tu)(tu)會引(yin)起(qi)用(yong)(yong)戶對產(chan)品的完全關(guan)注(zhu)。

如果(guo)你(ni)想設(she)計一(yi)(yi)個可以(yi)快速銷售產品(pin)(pin)的網站，那么(me)就可以(yi)使用這種(zhong)布局。精選圖可以(yi)與訪客建(jian)立情(qing)感聯系，一(yi)(yi)張(zhang)大而得體的照片或插圖會產生強(qiang)烈(lie)的共鳴并(bing)創造出(chu)令人難忘(wang)的第一(yi)(yi)印象(xiang)。當(dang)你(ni)只需展(zhan)示一(yi)(yi)種(zhong)產品(pin)(pin)或服務(wu)，并(bing)將用戶的全部注意力(li)集中在其上時，此布局非常有用。

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

2. Chekhov

網站布局思路：分屏(ping)布局

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

如(ru)果你的(de)(de)網站需要提供兩(liang)種截然不同(tong)的(de)(de)用(yong)戶旅程變體(ti)(ti)，那么(me)使用(yong)拆(chai)分(fen)屏幕(mu)的(de)(de)布局(ju)吧。但是要避免在(zai)拆(chai)分(fen)部分(fen)添加太多(duo)內(nei)容。如(ru)果內(nei)容過(guo)長過(guo)多(duo)，分(fen)屏設計不能很好地擴展(zhan)，會影響體(ti)(ti)驗(yan)。因此，如(ru)果你需要在(zai)拆(chai)分(fen)部分(fen)提供大(da)量(liang)文本(ben)或視覺信息，則(ze)不適合這種布局(ju)。

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

3. Timothee Roussilhe

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

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

如果(guo)你想設計一個看起來很酷(ku)，富有創意和令人印象深刻的網(wang)站，那就(jiu)添加一個視差效果(guo)。但是(shi)不要(yao)把它搞得一團糟，保持布局簡(jian)單并使用更干凈(jing)的配色(se)方(fang)案。

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

4. Happiness Abscissa

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

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

此(ci)布局適用(yong)于(yu)導航選項數量相對有限的網(wang)站。當用(yong)戶(hu)進入頁面(mian)時，所(suo)有選項最好都(dou)在視線范圍內。側(ce)邊欄還可以(yi)包含菜單以(yi)外的內容，例如社交媒體鏈接，聯系信息或你希望訪問(wen)者輕松查找的任何(he)內容。

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

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

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

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

此布(bu)局非常(chang)適合(he)構建內容(rong)較多的(de)網(wang)站(zhan)，且具(ju)有相(xiang)同層次結構的(de)項目。

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

6. Medium

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

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

對(dui)于頁面上具有大量內容又具有復雜(za)層次結構的(de)網(wang)站，柵欄(lan)布局是一(yi)個不錯的(de)選擇。如(ru)果沒有有效使用(yong)網(wang)格，主頁上的(de)所有內容可能會顯(xian)得更加混亂(luan)和組織化。

訪問網站：//medium.com/

7. Beverages

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

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

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

8. Casangelina

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

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

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

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

9. Tinkerwatches

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

此布(bu)局(ju)的核心元(yuan)素是張用作(zuo)頁面背(bei)景的大照(zhao)(zhao)片。該(gai)照(zhao)(zhao)片用于向訪問(wen)者介紹網站(zhan)內容。這(zhe)種布(bu)局(ju)可(ke)以(yi)(yi)(yi)創(chuang)造出強(qiang)烈(lie)的第(di)一印(yin)象，并(bing)和(he)用戶產(chan)生互(hu)動(dong)(dong)。明確的CTA是關鍵(jian)，引(yin)導用戶互(hu)動(dong)(dong)。如果你想要(yao)以(yi)(yi)(yi)最(zui)簡潔的方式展示更多(duo)的信息，這(zhe)種布(bu)局(ju)可(ke)以(yi)(yi)(yi)考(kao)慮，就像(xiang)是無聲(sheng)(sheng)勝有聲(sheng)(sheng)。但要(yao)仔細(xi)選擇(ze)背(bei)景圖像(xiang)。

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