乾貨：內容至上的11種經典頁面布局

最新 01-23

為何用戶會訪問網站？在大多數情況下，訪問的主要原因是內容。內容是最重要的，每個設計師都希望以最實用、最直觀的方式呈現它。因此，設計師在開始新項目時首先要做的事情之一就是為內容選擇合適的布局。

許多設計師認為他們所設計的每個網站的布局應該是完全獨一無二的，以滿足項目的目標，但這與事實相去甚遠。如果你訪問流行的網站，你會發現很多網站都使用類似的布局。這不是一個巧合，也不是出於懶惰，而是因為這些布局有三個顯著的優勢：

可用：常見的布局之所以非常普遍，是因為它們證明了用戶可以很好地使用。

熟悉：通過建立熟悉感，可以創建良好的用戶體驗。當用戶看到他們熟悉的功能時，他們會感到一種愉快的似曾相識的感覺。因此，人們會花時間來消化內容，而不是專註於頁面的獨特設計。

省錢：復用現有的布局可以節省時間。設計師們將花更少的時間來試驗布局，並將更多地關注視覺層次和設計的其他方面，這些設計對用戶體驗有直接的影響。

雖然每個項目都是獨特的，需要單獨的方法，但是熟悉公共布局是很有幫助的。在這篇文章中，我們將討論11個非常常見的布局，你可以在無數的網站上找到。

1.單列布局

單列布局將主要內容呈現在一個垂直的列中。這種類型的布局可能是列表中最簡單的，也是用戶最容易導航的，訪問者只需向下滾動查看更多內容。

儘管簡單，單列布局在很多網站中都很流行。移動端的迅猛發展也促進了這種布局的流行——單列布局完全適配於手機屏幕。

適用場景：這個布局常見於許多基於極簡設計原則的個人博客中。這是Tumblr等微博的常見布局。

設計技巧

長頁面考慮吸頂/底導航。由於單列布局經常用於長頁面，所以需要保持導航始終可見，以避免需要滾動到頁面頂部才能查看導航。

2.分屏布局

分屏布局對於有兩個重要內容的頁面來說是很貼合的。它可以同時展示這兩項，並同時他們同等的權重。

圖片來源：62 models

適用場景：當網站提供了兩種截然不同的用戶旅程時，比如兩種不同類型的指令，如下面Dropbox的例子中一樣。

分屏布局可以有效地進行對比，因此經常使用這種布局來將兩個項目相互對立。

圖片來源：Google Star Wars Customisations

設計技巧

避免使用過多的內容。隨著內容的增長，分屏設計不能很好地擴展，因此當需要呈現大量的文本或可視信息時，最好避免選擇這種類型的布局。

考慮添加動畫。你可以通過結合動畫細節來創造一個更有活力的體驗。

3.不對稱布局

不對稱是兩邊不平等分布的布局。在藝術界中，不對稱一直備受青睞，最近在網路設計中同樣流行了起來。

很多人把不對稱和不平衡混淆在一起，但事實上，不對稱的目標是在兩部分內容無法使用相同的權重情況下，運用不對稱手法來創造平衡。使用不對稱可以產生張力和動力，而且可以通過將用戶的注意力集中在單個物體(焦點)上，從而促進更好的瀏覽行為。通過改變內容的寬度、比例和顏色，可以促進用戶的沉浸式體驗。

適用場景：當設計師想要創建有趣的、創意的布局時可以使用這種布局方式，同時它還可以提供方向上的引導。適當的應用不對稱可以創造出活躍的氛圍，引導視線從一個元素移動到另一個元素上。思考一下Dropbox是如何在下面的例子中清楚地顯示出重點的。

設計技巧

確保內容適合呈現在不對稱的布局中。不對稱布局對並不適用於任何網站，對於極簡主義的布局來說，這可能是較好的選擇。

通過顏色添加焦點。不對稱的根源在於，一個具有更大視覺重量的部分會首先引起人們的注意。你可以通過使用強烈的顏色對比的元素，在設計的特定部分增加視覺重量。

圖片來源：Culture PL

4.柵格化卡片式布局

卡片是可容納可點擊信息的大容器——它能以一種易於理解的方式呈現大量信息。小的預覽(通常是一個圖片和一個簡短的描述)幫助用戶找到他們喜歡的內容並通過點擊卡片進入詳情頁。

柵格化布局很重要的特點是它的無限可操作性。它可以根據大小、間距和列的數量而變化，並且卡片的樣式還可以根據屏幕大小而變化(卡片可以重新排列以適合任何屏幕)。因此它能在響應式設計中發揮出色的作用。

適用場景：柵格化布局適用於重內容的網站，它可以展示許多具有相同層級的項目。

圖片來源：Youtube

圖片來源：Pinterest

設計技巧

讓整個卡片可點擊，而不僅僅是特定的部分。當用戶不需要精確地點擊卡片的標題或圖像來訪問內容細節時，交互就會更加舒適。

如果你的卡片中包含圖像，考慮小屏上的適配。若在小屏上不能很好地進行縮放，會導致用戶體驗不佳。

注意卡片之間的空白，因為它會影響用戶瀏覽的方式。卡片之間的間隔空間會讓瀏覽速度變慢，但會使用戶更加註意每張卡片。小的間隔可以加速瀏覽，同時也增加了用戶可能忽略某些內容的風險。

與動畫反饋結合。使卡片作為一個可點擊的元素呈現。

5.雜誌式布局

這可能是本文中提到的最複雜的布局。顧名思義，這種布局最初是由報紙和雜誌來普及的，它有難以一種易於遵循的方式向讀者呈現大量的信息。為實現這個目的，平面設計師使用了網格系統。布局是使用模塊化的網格構建的，它也可以靈活運用——在多列布局使用不同的視覺權重來區分信息的優先順序。

圖片來源：New York Times

與紙質雜誌類似，電子雜誌使用了多欄網格，從而創建一個複雜的層次結構以整合文字和插圖。其主要目標是相同的——是用戶能夠快速瀏覽、閱讀和理解頁面。設計師努力創造一種視覺節奏，試圖讓視線更容易地瀏覽頁面上的各個部分，讓視線自然地從一個部分轉移到另一個部分，同時避免在不同的內容之間干擾注意力。

適用場景：對於具有複雜層次結構、頁面上有大量內容的出版物，雜誌布局是一個不錯的選擇。如果沒有網格的有效使用，頁面上的內容可能會顯得更雜亂，缺乏組織。

設計技巧

這個布局強調標題和圖片。標題/圖像的大小直接影響用戶的注意力。更突出的元素會更快地吸引用戶的注意力。以紐約時報為例，頁面上最重要的內容有更大的縮略圖、更大的標題和更詳細的文本。

圖片來源：New York Times

鋪設柵格需要注意水平和垂直的節奏，如果你想要創造一個好的布局，它們同樣重要。考慮以下示例的不同之處：在第一個例子中，網格與列寬和水平間距一致，但是不同的垂直間距產生了視覺干擾。在第二個例子中，水平列間距和垂直元素間距是一致的，這使得整體結構看起來更乾淨，更適合於用戶閱讀內容。

6.箱式（Boxes）布局

這種布局有一個很大的頭圖寬度的大盒子，還有幾個小盒子，每個盒子都佔據了大盒子寬度的一部分，數量可以從2個到5個不等。每個盒子都可以是一個鏈接，從而形成一個更大、更複雜的頁面。

適用場景：這個布局用途非常多，既可以用於個人作品網站，也可以用於公司/電子商務網站。

圖片來源：mrporter

設計技巧

聯繫盒子來講述一個故事。大盒子可以用來展示產品，而小盒子可以提供產品的更多信息。

圖片來源：Microsoft Surface

7.固定的側邊欄

導航對於任何網站都是一個關鍵的部分——大多數用戶想要導航時，第一件事就是要找主菜單。除了頂部的水平導航，還可以將菜單選項放置在固定的邊欄中。側邊欄是頁面左邊或右邊的垂直列。在這個布局中，當用戶滾動頁面時，雖然頁面的其他部分會發生變化，但側邊欄保持不變，從而使導航始終可見可操作。

圖片來源：measponte

設計技巧

側欄還可以包含除菜單之外的內容，如社交媒體鏈接、聯繫信息，或任何你想讓訪問者輕鬆找到的內容。

圖片來源：Trefecta

8.特色的圖像

這種布局是基於這樣一種理念：在設計中使用圖像是銷售產品的最快方式。圖像有機會與用戶建立情感聯繫——一張巨大的、大膽的照片或插畫能對產品做出強有力的陳述，並創造出令人深刻的第一印象。

使用場景：當你需要只展示一個產品/服務，並將用戶的全部注意力集中在上面時。

圖片來源：Apple

利用這種布局，我們可以建立一種真正的沉浸式的情感體驗。Species in Pieces是一個很好的例子，它向我們提供豐富的經驗並提高對瀕危物種的認識。

圖片來源：Species in Pieces

設計技巧

確保圖像足夠好，成為突出的特色。圖像、照片或插畫應該與要傳達的信息相關且高質量。

斟酌排版。排版需伴隨著圖像，通過字體、大小和顏色等字體的屬性來加強設計。

9.F型布局

這種布局是基於用戶在web上閱讀內容的方式創建的。F型瀏覽模式最初由NNGroup定義，指出用戶通常瀏覽大塊的內容模式看起來像字母F或E。我們的視線起始於頁面的右上角，水平掃描後下降到下一行，並以同樣的方式重複，直到發現吸引我們注意力的內容(有趣的內容)。這種瀏覽模式不僅適用於Web端，也適用於移動端。

適用場景：這個布局適用於需要呈現許多不同選項並允許用戶快速瀏覽的頁面。這種布局仿照了自然的瀏覽行為模式，因此用戶會對F模式的布局做出更好的反應。例如對於包含搜索結果的頁面或新聞類的主頁都很適合這種布局。