9款經(jīng)典網(wǎng)頁布局設計

林小新

現(xiàn)在，越來越多的人想要建立自己的網(wǎng)站，通過自助建站，系統(tǒng)就可以自己進行網(wǎng)頁制作了。這無疑是一件好事，但是，很多設計師，尤其是新手設計師或者壓根兒就不是設計師的小白，都在網(wǎng)頁設計上走過不少彎路。

網(wǎng)頁制作最重要的就是網(wǎng)頁布局，先布局，后細節(jié)，只有在選擇了合適的網(wǎng)站布局以后，才可以順利的進行接下來的工作。你要問網(wǎng)站布局有哪些？這里精選了9款不同的經(jīng)典網(wǎng)站布局設計案例，希望給大家?guī)盱`感。

1. Diker Bau網(wǎng)站

網(wǎng)站布局思路：精選圖片展示品牌標識

Diker是一家位于德國柏林的建筑規(guī)劃集團。設計師突出了以精選圖來概述品牌標識的主要特征和屬性。精選圖被用作整個網(wǎng)站結(jié)構和架構的基礎。由于此布局中缺少其他元素，精選圖會引起用戶對產(chǎn)品的完全關注。

如果你想設計一個可以快速銷售產(chǎn)品的網(wǎng)站，那么就可以使用這種布局。精選圖可以與訪客建立情感聯(lián)系，一張大而得體的照片或插圖會產(chǎn)生強烈的共鳴并創(chuàng)造出令人難忘的第一印象。當你只需展示一種產(chǎn)品或服務，并將用戶的全部注意力集中在其上時，此布局非常有用。

2. Chekhov

網(wǎng)站布局思路：分屏布局

該網(wǎng)站使用了分屏布局，這種布局可以同時展示兩個同等重要的內(nèi)容信息。此外，設計師將兩種信息相互對立，創(chuàng)造出完美的對比，以吸引更多訪客的目光。分屏布局，再加上呼應的動畫，該網(wǎng)站創(chuàng)建出更加精致的體驗。

如果你的網(wǎng)站需要提供兩種截然不同的用戶旅程變體，那么使用拆分屏幕的布局吧。但是要避免在拆分部分添加太多內(nèi)容。如果內(nèi)容過長過多，分屏設計不能很好地擴展，會影響體驗。因此，如果你需要在拆分部分提供大量文本或視覺信息，則不適合這種布局。

3. Timothee Roussilhe

網(wǎng)站布局思路：視差滾動布局

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

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

4. Happiness Abscissa

網(wǎng)站布局思路：側(cè)邊欄導航

該網(wǎng)站使用了一個固定的側(cè)邊欄導航來顯示整個布局。導航無疑是任何網(wǎng)站的關鍵部分，主菜單是大多數(shù)用戶在導航時首先要查找的內(nèi)容。除了頂部水平導航外，你還可以通過將菜單選項放在固定的側(cè)邊欄中來布局。側(cè)邊欄應該選擇頁面左側(cè)或右側(cè)的垂直列。對于此布局，側(cè)邊欄保持靜止并始終保持可見，而其余頁面隨著用戶向下滾動頁面而更改。還要確保這種導航具有可訪問性。

此布局適用于導航選項數(shù)量相對有限的網(wǎng)站。當用戶進入頁面時，所有選項最好都在視線范圍內(nèi)。側(cè)邊欄還可以包含菜單以外的內(nèi)容，例如社交媒體鏈接，聯(lián)系信息或你希望訪問者輕松查找的任何內(nèi)容。

5. Assemble

網(wǎng)站布局思路：網(wǎng)格卡片布局

Assemble通過在豐富的主頁上使用網(wǎng)格結(jié)構來顯示多姿多彩的欄目?？ㄆ梢砸砸紫姆绞匠尸F(xiàn)大量可點擊信息。它可以幫助訪問者找到他們喜歡的內(nèi)容，并通過點擊或點擊卡片來深入了解詳細信息。

這種布局是無限可操作的，網(wǎng)格的大小、間距和列數(shù)可以不同，卡片的樣式可根據(jù)屏幕大小而變化（可以重新排列以適合任何屏幕）。因此，網(wǎng)格卡卡在響應式設計中運用很廣。

此布局非常適合構建內(nèi)容較多的網(wǎng)站，且具有相同層次結(jié)構的項目。

6. Medium

網(wǎng)站布局思路：柵欄布局

Medium是一個很受歡迎的博客網(wǎng)站，它以易于理解的方式向讀者提供大量閱讀信息。與紙質(zhì)雜志類似，該網(wǎng)站使用多列網(wǎng)格，可以創(chuàng)建復雜的層次結(jié)構并集成文本和插圖。主要目標是讓訪問者能夠快速瀏覽，閱讀和理解頁面。但值得一提的是，Medium文章內(nèi)面又是采用了單欄布局，這是為了方便讀者可以沒有障礙地滾動鼠標進行閱讀。

對于頁面上具有大量內(nèi)容又具有復雜層次結(jié)構的網(wǎng)站，柵欄布局是一個不錯的選擇。但如果沒有有效使用網(wǎng)格線，主頁上的所有內(nèi)容可能會顯得更加混亂和無組織化。

7. Beverages

網(wǎng)站布局思路：盒子布局

Beverages是一個100%響應的網(wǎng)站模板，其餐廳主題適用于任何食品和飲料網(wǎng)站的設計。所謂的盒子布局，就是一個大標題寬度框加一些較小的盒子，每個盒子都占據(jù)了屏幕大空間的一部分。較小的盒子數(shù)量可以2～ 5不等。每個盒子都可以是一個鏈接，通向更細節(jié)，更復雜的頁面。

8. Casangelina

網(wǎng)站布局思路：不對稱布局

Hotel Casangelina酒店是世界十大懸崖酒店之一，位于阿馬爾菲海岸的懸崖上?？腿丝梢栽诰频曷杜_上的全景室外游泳池放松身心。通過極簡主義UI設計，滾動區(qū)域中圖片和字體的融合增強了網(wǎng)頁瀏覽的沉浸感。這是UI設計和用戶體驗的完美結(jié)合。背景音樂和動態(tài)酒店全景視頻增添了視覺真實感，讓用戶通過網(wǎng)頁設計感受整個酒店的優(yōu)雅。

現(xiàn)在講講不對稱布局，就是頁面的布局兩邊缺乏平等。不對稱是藝術界長期以來最喜歡的技術，在網(wǎng)頁設計師中很受歡迎。但要注意不要將不對稱與不平衡混為一談，不對稱的目標是在不可能或不希望對兩個部分使用相同的權重時創(chuàng)造平衡。使用不對稱性可以創(chuàng)建張力和動態(tài)，并且把用戶的注意力集中在各個對象（焦點）上。

9. Tinkerwatches

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

此布局的核心元素是一張用作頁面背景的大照片。該照片用于向訪問者介紹網(wǎng)站內(nèi)容。這種布局可以創(chuàng)造出強烈的第一印象，并和用戶產(chǎn)生互動。明確的CTA是關鍵，引導用戶互動。如果你想要以最簡潔的方式展示更多的信息，這種布局可以考慮，就像是無聲勝有聲。但要仔細選擇背景圖像。

以上就是Mockplus為大家精選的9款網(wǎng)站布局設計了，希望對大家有所幫助。當然啦，心動不如行動，馬上使用Mockplus開始你的網(wǎng)站布局設計吧。Mockplus有大量的封裝圖標和組件，可以直接拖拽使用，界面布局即刻呈現(xiàn)。如果怕位置不準，使用Mockplus的網(wǎng)格和參考線，精確到每一個細節(jié)，實現(xiàn)更完美的布局。