選擇一個用戶友好的布局有助于確保您的用戶想要停留在周圍并查看您所提供的內容。

這就是為什么我們要引導您完成10種常見的網站布局，以用于下一個設計。我們將解釋每個步驟，并舉例說明滿足網站需求和適當布局的方式。

繼續閱讀有關以下內容的更多信息：

什么是網站布局？ 下一個設計的10個網站布局 3種類型的網站及其使用的布局 什么是網站布局？

首先，了解網站布局是很重要的。

網站的布局是構建和設計網站的框架。可以將其視為網站建筑的藍圖。就像藍圖如何確定建筑物的外觀（房間在哪里，墻壁在哪里等）一樣，網站布局可以告訴您所有資產的位置，從照片到文本再到logo。

總體而言，良好的網站布局通常會遵循以下重要原則：保持簡單，友好。

根據Hubspot進行的一項研究，有76％的消費者表示簡單和易于導航是網站設計中排名*的很重要因素。這意味著選擇一種布局，該布局將能夠獲取您需要的所有資產并以簡單的方式為用戶傳達這些資產。

看起來像什么？我很高興你問。

下一個設計的10個網站布局

以下是您可以用于下一個設計的10個網站布局，每種布局代表不同的設計風格和用戶體驗。

您將能夠找到無數不同網站中正在使用的這些布局。繼續閱讀直到*，我們將探討如何將網站樣式與設計布局配對！

1. F形
芝加哥論壇報

F形網站布局非常普遍，它是基于UX研究咨詢公司Nielsen Norman Group進行的研究而建立的，該研究進行了眼球追蹤研究，發現人們通常以F模式閱讀文本和資產塊。

尼爾森眼研究的熱圖揭示了一些常見發現

上圖是數千張熱圖記錄的匯總。顯然，在檢查側面信息之前，讀者傾向于在兩條水平線上進行掃描，從而形成F或E模式。

許多網站希望提供許多不同的選項供用戶單擊時使用F形圖案。考慮一下Google搜索結果的布局方式，或者大多數新聞網站將如何展示其內容。

提示：在設計頁面之前，請先確定內容的優先級。這意味著首先要確定要向用戶介紹的最重要的元素。這將決定您如何安排信息。

2. Z形（或鋸齒形）

與F形一樣，Z形布局也旨在跟蹤用戶的觀看習慣。用戶從左上到右上掃描，然后從對角線到左下到右下掃描，這與您閱讀書籍的方式大致相同。

此形狀與F形的區別在于Z形的網站布局最適合有目標的頁面，例如用于注冊新聞稿或服務的登錄頁面。

考慮到這一點，這是一個Z形網站的示例。

從Facebooklogo到登錄區域，再到著陸頁復制和注冊區域，整個頁面的視線都呈自然的Z形。

提示：Z形網站適合復制和內容最少的頁面，并且當眼睛向下移動時，圖像會展示出來。將其與帶有多張圖片的滑塊配合使用，您將能夠使讀者的注意力集中在頁面上。

3.雜志風格
大西洋組織

雜志樣式的布局常用于媒體出版物。布局基于網格，該網格向用戶提供了內容負載，而不會壓倒它們。

這種布局還使網站管理員可以為其文章分配易于掌握的層次結構，從而幫助用戶輕松地理解閱讀時哪些文章更重要或最新，以及瀏覽頁面并浸入其他內容。

如果您的網站內容豐富（例如博客或新聞出版物），請考慮采用雜志式的布局。

提示：不要在圖像上睡magazine雜志風格的布局在很大程度上取決于各種優質圖像以及標題，以吸引讀者的眼球。確保為您的文章的每個縮略圖選擇*的。

4.完整照片（或精選圖片）

全圖片的網站布局為用戶提供了較大的特色圖片，其頂部還包含少量內容。如果您有想要展示的特定產品（例如餐廳食物），那就太好了。

要拍攝精美的照片和圖像，這是必須的。為了正確展示您的產品，您的圖片必須具有吸引力和動態性-只有這樣，您才能吸引用戶的注意力并將其留在網站上。

提示：請記住，您的圖片也必須與移動用戶兼容。在臺式機上看起來不錯的東西在手機上可能看起來很殘酷。

5.分屏
62管理層

此布局指的是水平或垂直分割的屏幕，或者兩者都分割，就像上面一樣！

這種布局通常用于網站（如電子商務商店和模特經紀公司）將其報價分為男性，女性，成人和兒童。

提示：使用分屏顯示時將內容保持在*限度。由于用戶的關注點應該只集中在您的已拆分信息上，因此您不想將一堆內容和無關的圖像擠入他們的視野。

6.卡片
YouTube的

使用卡片（另一種網格）非常適合托管大量非層次內容的網站。

該網站布局通常用于新聞，博客，投資組合和視頻網站，這些網站需要以有組織，可定制的簡單方式展示大量內容。

提示：請確保提供足夠的空格。不夠，您的用戶將不知所措，并且會錯過您嘗試突出顯示的所有內容。

[標題：天哪。為什么？]

7.不對稱
章魚八達通

正如弗蘭克·辛納屈（Frank Sinatra）曾經說過的：“戴上帽子-角度就是態度。” 除了是個藍眼睛的騙子，他似乎還是不對稱網站布局的擁護者。

不對稱非常有助于在網站布局中增加張力和動力，并且可以幫助設計人員將用戶的注意力吸引到網站布局的特定部分。

這種布局通常利用對比色來突出顯示內容。另一個顯著特征是它可以提供給頁面的深度級別。它最常用于希望與眾不同的投資組合網站以及創新大膽的品牌。

提示：請確保不對稱的布局不僅適合您的品牌，還適合您的內容資產。此布局最適合內容較少的網站。

8.單列
使命

單列網站就這么簡單。

您的所有資產都放在您網站上的一欄中。而已。它只需要一列，所有用戶需要做的就是向下滾動以查看更多內容。

它是Tumblr和Medium等極簡博客平臺或Instagram和Twitter等社交媒體平臺的流行網站布局，其中帖子按以下一個因素自動排序：日期。

提示：在您自己的網站上使用此布局時，請考慮放置浮動導航按鈕，以便您的用戶可以輕松地瀏覽該網站，無論它們在頁面上的什么位置。

9.方框（或縮略圖）
SBNation

這種基于盒子的網站布局非常適合強調不同內容的博客和新聞網站。

它通常以三種不同的內容資產的形式排列在盒子中，其中一個較大的內容資產位于其他兩個內容的頂部。較大的“功能”框有時帶有滑塊，可在不同圖像之間滾動。

微軟

提示：使用您的盒子將它們編織在一起即可促銷產品。在上圖中，Microsoft使用每個框來升級Surface。每個盒子都可以通過展示配件產品或將用戶定向到他們可以了解更多有關Surface的地方來工作。

10.固定的側邊欄（或固定的導航）
2創意

固定的側邊欄網站布局具有以下確切含義：左側或右側的固定導航欄，使用戶無論在網頁上的位置如何，都可以輕松地導航該站點。這是在設計網站時牢記用戶需求的一個很好的例子。

但是，這樣做確實要付出代價：固定的側邊欄將占據頁面的更多空間，這意味著其他資產的空間將減少。盡管如果導航欄消失，直到用戶將光標移到該導航欄上，也可以在某種程度上緩解此問題。同樣，在2000年代初期的iframe時代，這是一件大事。

Protip：請記住，側邊欄可以幫助導航當前頁面上的資產，以及將讀者帶到其他地方，例如您的社交媒體供稿和About頁面。

3種類型的網站及其布局

既然您已經知道可以在下一個項目中使用的一些常見網站布局，那么我們將逐步指導您進行操作。

以下是網站的三種示例類型：

SaaS 社論 個人

對于每個網站，我們還提供了五個網站及其使用的布局的示例。希望它們能幫助激發您的項目，無論其形狀如何。

SaaS布局

SaaS產品的網站通常遵循一種布局：Z形。這有助于吸引用戶注意頁面的CTA。

對于以下內容，通常是為了注冊該網站提供的服務。

Evernote（Z形）
Mailchimp（Z形）
集線器（Z形）
松弛（Z形）
Salesforce（Z形）
編輯版面

出版物傾向于傾向于讀者友好的網站布局，例如雜志風格或F形。這些布局使網站所有者可以確定內容層次結構，同時讓用戶可以自由選擇他們想要瀏覽的內容。

邊緣（雜志風格）
有線（雜志風格）
洛杉磯時報（雜志風格）
個人網站布局

特別是在設計自己的網站時，網站布局的選擇應反映您的身份，這對您和您的目標都是*的。

例如，如果您有一個博客，則可能要使用單列或框式布局，因為這些布局特別適合展示內容。如果您有要銷售的產品，則可能要使用完整照片或Z形，因為它們非常適合展示產品并呼吁用戶采取行動。

杰拉爾丁·德魯特（Geraldine DeRuiter）（完整照片/特色照片）
加里·盛（完整照片/精選圖片）
托尼·德奧里奧（完整照片/精選圖像）
尼克·瓊斯（網格）
選擇適合您的布局

現在我們想知道：您喜歡的網站布局是什么？為什么？請聯系我們。我們可能會在以后的網站設計文章中添加它。

新聞標題：下一個網站設計項目的10個網站布局
當前路徑：http://m.newbst.com/news36/208036.html

成都網站建設公司_創新互聯，為您提供商城網站、軟件開發、域名注冊、App開發、外貿建站、標簽優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯