現在，越來(lái)越多(duō)的(de)人(rén)想要建立自己的(de)網站，通(tōng)過自助建站系統就可(kě)以自己進行網頁制作了(le)。這(zhè)無疑是一件好事，但是，很多(duō)設計師，尤其是新手設計師或者壓根兒(ér)就不是設計師的(de)小白，都在網頁設計上走過不少彎路。

網頁制作最重要的(de)就是網頁布局，先布局，後細節，隻有在選擇了(le)合适的(de)網站布局以後，才可(kě)以順利的(de)進行接下(xià)來(lái)的(de)工作。

1.Diker Bau

網站網站布局思路：精選圖片展示品牌标識

Diker是一家位于德國柏林(lín)的(de)建築規劃集團。設計師突出了(le)以精選圖來(lái)概述品牌标識的(de)主要特征和(hé)屬性。精選圖被用(yòng)作整個(gè)網站結構和(hé)架構的(de)基礎。由于此布局中缺少其他(tā)元素，精選圖會引起用(yòng)戶對(duì)産品的(de)完全關注。

如果你想設計一個(gè)可(kě)以快(kuài)速銷售産品的(de)網站，那麽就可(kě)以使用(yòng)這(zhè)種布局。精選圖可(kě)以與訪客建立情感聯系，一張大(dà)而得(de)體的(de)照(zhào)片或插圖會産生強烈的(de)共鳴并創造出令人(rén)難忘的(de)第一印象。當你隻需展示一種産品或服務，并将用(yòng)戶的(de)全部注意力集中在其上時(shí)，此布局非常有用(yòng)。

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

2. Chekhov

網站布局思路：分(fēn)屏布局

該網站使用(yòng)了(le)分(fēn)屏布局，這(zhè)種布局可(kě)以同時(shí)展示兩個(gè)同等重要的(de)内容信息。此外，設計師将兩種信息相互對(duì)立，創造出完美(měi)的(de)對(duì)比，以吸引更多(duō)訪客的(de)目光(guāng)。分(fēn)屏布局，再加上呼應的(de)動畫(huà)，該網站創建出更加精緻的(de)體驗。

如果你的(de)網站需要提供兩種截然不同的(de)用(yòng)戶旅程變體，那麽使用(yòng)拆分(fēn)屏幕的(de)布局吧。但是要避免在拆分(fēn)部分(fēn)添加太多(duō)内容。如果内容過長(cháng)過多(duō)，分(fēn)屏設計不能很好地擴展，會影(yǐng)響體驗。因此，如果你需要在拆分(fēn)部分(fēn)提供大(dà)量文本或視覺信息，則不适合這(zhè)種布局。

訪問網站：https://chekhov.withgoogle.com/alive#home

3. Timothee Roussilhe

網站布局思路：視差滾動布局

該網站是設計師Timothee Roussilhe的(de)一個(gè)簡單而富有創意的(de)簡曆網站。他(tā)增加了(le)視差效果，爲訪客提供更愉快(kuài)和(hé)令人(rén)印象深刻的(de)體驗。向下(xià)滾動時(shí)，會有很多(duō)個(gè)盒子移入和(hé)移出。令人(rén)驚奇的(de)是，所有的(de)盒子都增加了(le)視差效果，你會覺得(de)你正在看一場(chǎng)電影(yǐng)。

如果你想設計一個(gè)看起來(lái)很酷，富有創意和(hé)令人(rén)印象深刻的(de)網站，那就添加一個(gè)視差效果。但是不要把它搞得(de)一團糟，保持布局簡單并使用(yòng)更幹淨的(de)配色方案。

訪問網站：http://timroussilhe.com/

4. Happiness Abscissa

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

該網站使用(yòng)了(le)一個(gè)固定的(de)側邊欄導航來(lái)顯示整個(gè)布局。導航無疑是任何網站的(de)關鍵部分(fēn)，主菜單是大(dà)多(duō)數用(yòng)戶在導航時(shí)首先要查找的(de)内容。除了(le)頂部水(shuǐ)平導航外，你還(hái)可(kě)以通(tōng)過将菜單選項放在固定的(de)側邊欄中來(lái)布局。側邊欄應該選擇頁面左側或右側的(de)垂直列。對(duì)于此布局，側邊欄保持靜止并始終保持可(kě)見，而其餘頁面随著(zhe)用(yòng)戶向下(xià)滾動頁面而更改。還(hái)要确保這(zhè)種導航具有可(kě)訪問性。

此布局适用(yòng)于導航選項數量相對(duì)有限的(de)網站。當用(yòng)戶進入頁面時(shí)，所有選項最好都在視線範圍内。側邊欄還(hái)可(kě)以包含菜單以外的(de)内容，例如社交媒體鏈接，聯系信息或你希望訪問者輕松查找的(de)任何内容。

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

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

Assemble通(tōng)過在豐富的(de)主頁上使用(yòng)網格結構來(lái)顯示多(duō)姿多(duō)彩的(de)欄目。卡片可(kě)以以易消化(huà)的(de)方式呈現大(dà)量可(kě)點擊信息。它可(kě)以幫助訪問者找到他(tā)們喜歡的(de)内容，并通(tōng)過點擊或點擊卡片來(lái)深入了(le)解詳細信息。

這(zhè)種布局是無限可(kě)操作的(de)，網格的(de)大(dà)小，間距和(hé)列數可(kě)以不同，卡片的(de)樣式可(kě)以根據屏幕大(dà)小而變化(huà)（卡片可(kě)以重新排列以适合任何屏幕）。因此，網格卡卡在響應式設計中運用(yòng)很廣。

此布局非常适合構建内容較多(duō)的(de)網站，且具有相同層次結構的(de)項目。

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

6. Medium

網站布局思路：栅欄布局

Medium是一個(gè)很受歡迎的(de)博客網站，它以易于理(lǐ)解的(de)方式向讀者提供大(dà)量閱讀信息。與紙質雜(zá)志類似，該網站使用(yòng)多(duō)列網格，可(kě)以創建複雜(zá)的(de)層次結構并集成文本和(hé)插圖。主要目标是讓訪問者能夠快(kuài)速浏覽，閱讀和(hé)理(lǐ)解頁面。但值得(de)一提的(de)是，Medium文章(zhāng)内面又是采用(yòng)了(le)單欄布局，這(zhè)是爲了(le)方便讀者可(kě)以沒有障礙地滾動鼠标進行閱讀。

對(duì)于頁面上具有大(dà)量内容又具有複雜(zá)層次結構的(de)網站，栅欄布局是一個(gè)不錯的(de)選擇。如果沒有有效使用(yòng)網格，主頁上的(de)所有内容可(kě)能會顯得(de)更加混亂和(hé)組織化(huà)。

訪問網站：https://medium.com/

7. Beverages

網站布局思路：盒子布局

Beverages是一個(gè)100％響應的(de)網站模闆，其餐廳主題适用(yòng)于任何食品和(hé)飲料網站的(de)設計。所謂的(de)盒子布局，就是一個(gè)大(dà)标題寬度框加一些較小的(de)盒子，每個(gè)盒子都占據了(le)屏幕大(dà)空間的(de)一部分(fēn)。較小的(de)盒子數量可(kě)以從 2 到 5 不等。每個(gè)盒子都可(kě)以是一個(gè)鏈接，通(tōng)向更細節，更複雜(zá)的(de)頁面。

訪問網站：https://p.w3layouts.com/demos_new/template_demo/07

8. Casangelina

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

Hotel Casangelina酒店(diàn)是世界十大(dà)懸崖酒店(diàn)之一，位于阿馬爾菲海岸的(de)懸崖上。客人(rén)可(kě)以在酒店(diàn)露台上的(de)全景室外遊泳池放松身心。通(tōng)過極簡主義UI設計，滾動區(qū)域中圖片和(hé)字體的(de)融合增強了(le)網頁浏覽的(de)沉浸感。這(zhè)是UI設計和(hé)用(yòng)戶體驗的(de)完美(měi)結合。背景音(yīn)樂(yuè)和(hé)動态酒店(diàn)全景視頻(pín)增添了(le)視覺真實感，讓用(yòng)戶通(tōng)過網頁設計感受整個(gè)酒店(diàn)的(de)優雅。因爲太喜歡這(zhè)個(gè)網站了(le)，所以多(duō)說了(le)幾句。

現在講講不對(duì)稱布局，就是頁面的(de)布局兩邊缺乏平等。不對(duì)稱是藝術界長(cháng)期以來(lái)最喜歡的(de)技術，在網頁設計師中很受歡迎。但要注意不要将不對(duì)稱與不平衡混爲一談，不對(duì)稱的(de)目标是在不可(kě)能或不希望對(duì)兩個(gè)部分(fēn)使用(yòng)相同的(de)權重時(shí)創造平衡。使用(yòng)不對(duì)稱性可(kě)以創建張力和(hé)動态，并且把用(yòng)戶的(de)注意力集中在各個(gè)對(duì)象（焦點）上。

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

9. Tinkerwatches

網站布局思路：大(dà)圖配帶明(míng)确CTA

此布局的(de)核心元素是張用(yòng)作頁面背景的(de)大(dà)照(zhào)片。該照(zhào)片用(yòng)于向訪問者介紹網站内容。這(zhè)種布局可(kě)以創造出強烈的(de)第一印象，并和(hé)用(yòng)戶産生互動。明(míng)确的(de)CTA是關鍵，引導用(yòng)戶互動。如果你想要以最簡潔的(de)方式展示更多(duō)的(de)信息，這(zhè)種布局可(kě)以考慮，就像是無聲勝有聲。但要仔細選擇背景圖像。

訪問網站：https://tinkerwatches.com/