在網(wǎng)站設(shè)計(jì)工作中，排版布局既可以是最簡(jiǎn)單的工作之一，但也可能是最棘手的工作。設(shè)計(jì)師有時(shí)候可以在幾分鐘內(nèi)完成一個(gè)驚人的布局，但是同一位設(shè)計(jì)師優(yōu)勢(shì)互可能會(huì)在一天的大部分時(shí)間里為同樣的任務(wù)而絞盡腦汁。

不可否認(rèn)每一個(gè)網(wǎng)站建設(shè)項(xiàng)目都是獨(dú)一無二的，都需要一個(gè)獨(dú)特的解決方案，尤其是對(duì)定制型站點(diǎn)來說。但我發(fā)現(xiàn)牢記一些堅(jiān)如磐石且用途廣泛的排版布局很有幫助，可以避免我在遇到困難時(shí)崩潰的情況。

所以，當(dāng)你在進(jìn)行設(shè)計(jì)工作但是沒有想到最佳的頁面布局時(shí)，下面的十種布局可能足以讓你度過難關(guān)。

保持簡(jiǎn)單（Keeping It Simple）

頁面布局是藝術(shù)和科學(xué)的完美結(jié)合。創(chuàng)造具有視覺吸引力和獨(dú)特性的東西需要藝術(shù)家的眼睛，但是，你可以使用一些非常容易遵循的指南來創(chuàng)建適用于任何情況的可靠布局。這些原則包括選擇和堅(jiān)持統(tǒng)一的對(duì)齊方式、正確地構(gòu)造你的空間，并通過大小、定位等突出重要元素等。

設(shè)計(jì)師經(jīng)常對(duì)布局的過程過于在意。我們傾向于處理一個(gè)項(xiàng)目，同時(shí)認(rèn)為它需要在各個(gè)方面都一定要完全獨(dú)特，才能值得我們所花費(fèi)的時(shí)間、精力，當(dāng)然還有客戶花在上面的預(yù)算。

但是，如果你仔細(xì)瀏覽在線的網(wǎng)站設(shè)計(jì)，你可能會(huì)發(fā)現(xiàn)情況有時(shí)候并非如此。漂亮的網(wǎng)站通常使用相當(dāng)簡(jiǎn)單的布局，而且一點(diǎn)也不獨(dú)特。誠(chéng)然，設(shè)計(jì)師通常想要設(shè)計(jì)能夠打破常規(guī)的“非主流”網(wǎng)站，但客戶可能更多的只想要一些可用、干凈和專業(yè)的東西。

在本文中，我們將介紹十種非常常見的布局，你幾乎可以在各大網(wǎng)站上看到它們的身影。請(qǐng)注意，這些網(wǎng)站的樣式（即顏色、圖形和字體）可能是獨(dú)一無二的，但網(wǎng)站本身的基本結(jié)構(gòu)是基于已經(jīng)經(jīng)過驗(yàn)證的網(wǎng)頁設(shè)計(jì)布局方法。我們將通過首先向你展示一個(gè)簡(jiǎn)單的布局輪廓來強(qiáng)調(diào)這一點(diǎn)，以便你可以將自己的想法和設(shè)計(jì)關(guān)聯(lián)到上面，然后我們將用一兩個(gè)使用該布局的真實(shí)網(wǎng)站示例進(jìn)行說明。

如果你是網(wǎng)頁設(shè)計(jì)師，歡迎將此頁面添加為書簽，并在下次遇到頁面布局困境時(shí)回到這里尋找一下靈感。請(qǐng)記住，以下每個(gè)布局都只代表你可以塑造和調(diào)整的基本建議，我們希望你不要按原樣使用它們，而是根據(jù)項(xiàng)目的需要自行調(diào)整它們。

1.三框布局（Three Boxes）

這可能是排版列表最簡(jiǎn)單的布局了。事實(shí)上，你可能會(huì)認(rèn)為它太簡(jiǎn)單了，無法滿足你的需求。如果有這種想法的話，在深入考慮一下這種排版的真正用途，你會(huì)感到驚訝。

這種布局包含一個(gè)主要的主內(nèi)容區(qū)域和兩個(gè)較小的副內(nèi)容區(qū)域。每一個(gè)都可以用圖形、文本塊或兩者的混合來填充。此布局中的主內(nèi)容區(qū)域通常會(huì)處理成一個(gè)幻燈片，以便展示盡可能多的內(nèi)容。

頂部區(qū)域可用于作為L(zhǎng)ogo、公司名稱、導(dǎo)航、搜索欄以及通常在網(wǎng)站上的任何其他信息和功能內(nèi)容的區(qū)域。

這種設(shè)計(jì)非常適合用于內(nèi)容元素比較豐富的頁面或者是那些偏向于用圖片來吸引注意力的頁面。每個(gè)圖像都可以是一個(gè)鏈接，指向一個(gè)更大、更復(fù)雜的內(nèi)頁。

示例網(wǎng)站

這是一個(gè)很容易上手的概念，以下是兩個(gè)處理的比較好的例子。

Hurst非常有效地使用了三框布局。正如你在此示例中看到的那樣，布局可以很好地突出業(yè)務(wù)及其產(chǎn)品，而不會(huì)給設(shè)計(jì)添加混亂感。

Bloom是另一個(gè)很好的例子，它使用設(shè)計(jì)概念來創(chuàng)建有吸引力的組合設(shè)計(jì)。這種設(shè)計(jì)充分利用屏幕來創(chuàng)建一個(gè)組織良好的網(wǎng)站以便很好的展示你的作品。

2.3D幻燈片（3D Screenshots）

隨著開發(fā)人員的腦洞大開，越來越多的效果將網(wǎng)站設(shè)計(jì)變得更加豐富和吸引人，下面看到的 3D 幻燈片布局或它的一些變體變得越來越流行。

這種類型經(jīng)常出現(xiàn)在一些用來展示作品集的網(wǎng)站中，可以很好的在第一時(shí)間抓住瀏覽者的注意力。

示例網(wǎng)站

CSS目前可以很輕松的創(chuàng)建這種 3D 效果，你所要做的就是釋放你的想象力，在網(wǎng)站建設(shè)中創(chuàng)建令人著迷的 3D 幻燈片和交互式效果。

例如，We Build就是一個(gè)很好的例子，你很容易就會(huì)被這種 3D 交互設(shè)計(jì)所吸引并不自覺的參與進(jìn)交互中。

3.高級(jí)網(wǎng)格（Advanced Grid）

你將在本文中看到的許多布局都遵循非常嚴(yán)格的網(wǎng)格對(duì)齊方式。但是，在大多數(shù)情況下，它們并不僅僅只是一個(gè)充滿統(tǒng)一縮略圖的頁面。例如，下面的布局混合了不同大小的內(nèi)容區(qū)域以避免視覺上的過于統(tǒng)一。

與三框布局很類似，頁面上方有一個(gè)主內(nèi)容區(qū)域，接下來是就是對(duì)非統(tǒng)一網(wǎng)格想法的簡(jiǎn)單改動(dòng)。該空間將水平跨度原本的四個(gè)正方形版塊的其中兩個(gè)版塊進(jìn)行組合，以便頁面的左半部分與右半部分出現(xiàn)不同。

正如我們?cè)诘谝粋€(gè)布局中提到的，塊不一定是圖像。例如，你也可以將其想象為左側(cè)是文本塊，而右側(cè)是方形的圖像。

示例網(wǎng)站

你可以采用多種方法來設(shè)計(jì)基于網(wǎng)格的網(wǎng)站。高級(jí)網(wǎng)格布局主要在一些作品集類型的網(wǎng)站設(shè)計(jì)中比較流行。

Leedo是一個(gè)很好的例子，它向你展示了如何使用高級(jí)網(wǎng)格布局制作一個(gè)干凈的網(wǎng)站。

Minimalism以不同的方式使用網(wǎng)格設(shè)計(jì)來展示其作品集。

這個(gè)概念是多變的，所以讓這個(gè)概念成為你自己的概念吧。

4.讓圖像煥然一新（Featured Graphic）

如果你沒有足夠的內(nèi)容，而僅僅是想展示一個(gè)圖標(biāo)、照片甚至是符號(hào)，你會(huì)怎么做？下面的布局是一個(gè)非常簡(jiǎn)單的解決方案，非常受歡迎，并且由于簡(jiǎn)單，不管是在視覺上還是在可讀性上都非常好用。

這種布局是大膽的，但是在內(nèi)容和元素是上堅(jiān)持極簡(jiǎn)以及干凈。它所希望展示的內(nèi)容是強(qiáng)有力的，不可能錯(cuò)過的，只要確保你的圖形足夠突出。

示例網(wǎng)站

此概念是網(wǎng)站設(shè)計(jì)中最常用的趨勢(shì)之一，尤其是在專題和產(chǎn)品頁面中經(jīng)常會(huì)被使用到。

Lamira向你展示了如何有效地利用這一趨勢(shì)在網(wǎng)站主頁上推廣你的產(chǎn)品，它非常適合用于展示你的主推產(chǎn)品。

這個(gè)概念也適用于商業(yè)網(wǎng)站。FinWin使用圖像來突顯自己的專業(yè)性。

5.五框布局（Five Boxes）

五框布局是三框布局的演變。所有相同的邏輯都適用，只是經(jīng)過修改以容納更多內(nèi)容。它也可以很容易地調(diào)整為四框，這取決于你要展示的內(nèi)容。

顯然，隨著你添加到布局中的內(nèi)容越來越多，副內(nèi)容版塊的空間會(huì)變得越來越小，因此對(duì)于大多數(shù)用途來說，五框布局可能會(huì)接近是此類布局的極限。

就像三框布局一樣，這個(gè)布局非常通用，幾乎可以在任何類型的網(wǎng)站上使用。增加這種布局的效果，比如添加大背景圖形、圓角、添加陰影、添加水平混動(dòng)按鈕都可以讓你變得與眾不同。

示例網(wǎng)站

五框布局是一個(gè)需要掌握度的概念，你不會(huì)像以前那樣經(jīng)常看到它。但是你如果注意的話還是會(huì)發(fā)些一些非常出色地使用這種策略的網(wǎng)站。

ECOSHOP是一個(gè)電子商務(wù)類型的站點(diǎn)，它使用五框布局的概念來創(chuàng)建一個(gè)很酷的網(wǎng)格狀網(wǎng)頁設(shè)計(jì)。

當(dāng)然，你也可以將它用于像作品集或者Blog的站點(diǎn)中，Voku 是一個(gè)很好的例子。

6.固定側(cè)邊欄（Fixed Sidebar）

目前為止，我們看到的幾乎所有網(wǎng)站設(shè)計(jì)使用的都是頂部導(dǎo)航。另一個(gè)開始慢慢流行起來的選項(xiàng)當(dāng)然是垂直導(dǎo)航，它有助于在頁面左側(cè)創(chuàng)建一個(gè)功能強(qiáng)大的垂直列。通常這是一個(gè)固定元素，當(dāng)頁面的其余部分滾動(dòng)時(shí)，它會(huì)保持在原來的位置。這樣做的原因是，導(dǎo)航可以從站點(diǎn)的任何位置進(jìn)行輕松訪問。

其余內(nèi)容可以借用此文中的其他布局之一。請(qǐng)注意，我修改了三框布局，這次是四框布局。閱讀完本文后，請(qǐng)?jiān)俅尾榭此胁季郑⑺伎既绾位旌虾推ヅ溥@些想法以創(chuàng)建新布局。

示例網(wǎng)站

固定側(cè)邊欄是作品集類型網(wǎng)站設(shè)計(jì)中常用的設(shè)計(jì)。它同時(shí)對(duì)于 CV 風(fēng)格的個(gè)人網(wǎng)站也特別有用。

Sonex是一個(gè)簡(jiǎn)介的作品集站點(diǎn)，它有一個(gè)固定的側(cè)邊欄。允許你以創(chuàng)造性的方式添加菜單和設(shè)置你的社交媒體快捷方式。

Moler向您展示使用固定側(cè)邊欄概念的另一種表達(dá)方式。

7.標(biāo)題和圖庫(kù)（Headline & Gallery）

每個(gè)人都喜歡一個(gè)看起來舒服的畫廊類型的頁面。從布局的角度來看，還有什么比這更簡(jiǎn)單的呢？你所需要的只是一個(gè)統(tǒng)一的、堅(jiān)持到底的圖像網(wǎng)格，以及帶有可選子標(biāo)題的標(biāo)題空間。這里的關(guān)鍵是讓你的標(biāo)題足夠大。

此示例使用長(zhǎng)方形來模擬真實(shí)情況下的站點(diǎn)，但是可以并且應(yīng)該對(duì)其進(jìn)行修改以適應(yīng)你所要展示的任何內(nèi)容。這里的重點(diǎn)是讓你跳出框框思考而不是覺得只能默使用正方形，也許你可以在自己的布局中使用垂直矩形甚至圓形！

示例網(wǎng)站

這個(gè)概念非常適合為設(shè)計(jì)機(jī)構(gòu)和攝影師制作網(wǎng)站。如果使用得當(dāng)，這個(gè)概念非常適合創(chuàng)建現(xiàn)代簡(jiǎn)約的網(wǎng)站設(shè)計(jì)。

Satie是一個(gè)很棒的站點(diǎn)，它向你展示了它是如何工作的。

Park是另一個(gè)你可以從中獲得靈感來創(chuàng)建作品集網(wǎng)站的例子。

8.精選圖片（Featured Photo）

下面的這種布局非常常見，尤其是在攝影界。這里的基本想思路是通過一個(gè)大圖像顯示你的設(shè)計(jì)或攝影（任何東西），同時(shí)可能使用左側(cè)垂直導(dǎo)航。

導(dǎo)航的內(nèi)容可能左對(duì)齊是最合適的，但可以隨意嘗試使用中心對(duì)齊甚至是右對(duì)齊，以和右側(cè)的圖像進(jìn)行呼應(yīng)。

示例網(wǎng)站

當(dāng)然，這是一個(gè)非常普遍的概念。但挑戰(zhàn)是，你能用這個(gè)概念創(chuàng)造出多大的創(chuàng)意？

以Centrix 為例，看看它如何使用一個(gè)人的照片作為整個(gè)網(wǎng)站的背景。

或者你可以使用相同的概念來創(chuàng)建電子商務(wù)類型的網(wǎng)站，例如Flatsome。

9.混合布局（Power Grid）

混合布局是本文中最復(fù)雜的布局，但對(duì)于需要包含各種相關(guān)內(nèi)容的頁面，它是我見過的最有效的布局之一。從圖像到文本和視頻，你可以在此布局中放入幾乎任何內(nèi)容，并且保持有序和相關(guān)。

關(guān)鍵在于上半部分和下半部分的分界。請(qǐng)注意，這種布局實(shí)際上有一個(gè)包含一系列矩形的大容器，這個(gè)容器為你的空間提供了邊界，你放置在里面的所有內(nèi)容都應(yīng)該被格式化成一個(gè)強(qiáng)大但多樣的網(wǎng)格，這與本文開頭的高級(jí)網(wǎng)格布局不同。

示例網(wǎng)站

新聞網(wǎng)站、雜志和博客使用這種方法來設(shè)計(jì)布局，他們可以在其中盡可能多地填充信息，而不會(huì)造成混亂。

在Newspaper網(wǎng)頁設(shè)計(jì)中，你會(huì)在從 BBC 到 CNN、赫芬頓郵報(bào)等許多知名新聞網(wǎng)站上看到相同的布局。

10.全屏照片（Fullscreen Photo）

此布局同樣比較適合攝影師或者設(shè)計(jì)師的網(wǎng)站，同時(shí)也適用于任何需要通過比較大的視覺來增加吸引力但是內(nèi)容有限的網(wǎng)站。

將內(nèi)容放在背景圖像上時(shí)可能很難閱讀，因此這里的基本想法是創(chuàng)建一個(gè)不透明（或幾乎不透明）的版塊區(qū)域。

甚至你可以嘗試將其分成幾個(gè)不同的部分。可以通過改變背景顏色、添加一些微妙的垂直線作為分隔線來完成，甚至可以像我上面所做的那樣將大盒子分成更小的不連貫的盒子。

示例網(wǎng)站

這種網(wǎng)站布局也是一種常見的設(shè)計(jì)趨勢(shì)，可以在從作品集到個(gè)人網(wǎng)站的各種網(wǎng)站中看到。

Charles是一個(gè)用于商業(yè)咨詢網(wǎng)站。它使用全屏照片概念為網(wǎng)站創(chuàng)建更引人注目的標(biāo)題部分。

你也可以使用相同的設(shè)計(jì)布局來制作其他類型的網(wǎng)站。例如，AppStorm是一個(gè)應(yīng)用登陸頁面網(wǎng)站，它展示了你可以通過這種設(shè)計(jì)理念獲得多大的創(chuàng)意。

結(jié)論

我想在結(jié)束時(shí)重申幾點(diǎn)。首先，即使頁面布局絕對(duì)不一定是“一刀切”的做法，但它有一種科學(xué)可以在極其龐大的情況下快速輕松地應(yīng)用。

接下來，上面介紹的布局想法并不主張你設(shè)計(jì)千篇一律的網(wǎng)站，而只是為你提供一個(gè)基本的畫布的參考思路，你完全可以在其上構(gòu)建一個(gè)特別獨(dú)特的成品設(shè)計(jì)。

最后，成功實(shí)施這些想法的關(guān)鍵是要記住它們不是一成不變的。每個(gè)都應(yīng)該適當(dāng)調(diào)整以適合你的特定項(xiàng)目，甚至可以混合和匹配以創(chuàng)造新的想法！

----圖文來自：design shack 

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)