選擇一個(gè)用戶(hù)友好的布局有助于確保您的用戶(hù)想要停留在周?chē)⒉榭茨峁┑膬?nèi)容。

這就是為什么我們要引導(dǎo)您完成10種常見(jiàn)的網(wǎng)站布局，以用于下一個(gè)設(shè)計(jì)。我們將解釋每個(gè)步驟，并舉例說(shuō)明滿(mǎn)足網(wǎng)站需求和適當(dāng)布局的方式。

繼續(xù)閱讀有關(guān)以下內(nèi)容的更多信息：

什么是網(wǎng)站布局？ 下一個(gè)設(shè)計(jì)的10個(gè)網(wǎng)站布局 3種類(lèi)型的網(wǎng)站及其使用的布局 什么是網(wǎng)站布局？

首先，了解網(wǎng)站布局是很重要的。

網(wǎng)站的布局是構(gòu)建和設(shè)計(jì)網(wǎng)站的框架?？梢詫⑵湟暈榫W(wǎng)站建筑的藍(lán)圖。就像藍(lán)圖如何確定建筑物的外觀（房間在哪里，墻壁在哪里等）一樣，網(wǎng)站布局可以告訴您所有資產(chǎn)的位置，從照片到文本再到logo。

總體而言，良好的網(wǎng)站布局通常會(huì)遵循以下重要原則：保持簡(jiǎn)單，友好。

根據(jù)Hubspot進(jìn)行的一項(xiàng)研究，有76％的消費(fèi)者表示簡(jiǎn)單和易于導(dǎo)航是網(wǎng)站設(shè)計(jì)中排名*的很重要因素。這意味著選擇一種布局，該布局將能夠獲取您需要的所有資產(chǎn)并以簡(jiǎn)單的方式為用戶(hù)傳達(dá)這些資產(chǎn)。

看起來(lái)像什么？我很高興你問(wèn)。

下一個(gè)設(shè)計(jì)的10個(gè)網(wǎng)站布局

以下是您可以用于下一個(gè)設(shè)計(jì)的10個(gè)網(wǎng)站布局，每種布局代表不同的設(shè)計(jì)風(fēng)格和用戶(hù)體驗(yàn)。

您將能夠找到無(wú)數(shù)不同網(wǎng)站中正在使用的這些布局。繼續(xù)閱讀直到*，我們將探討如何將網(wǎng)站樣式與設(shè)計(jì)布局配對(duì)！

1. F形
芝加哥論壇報(bào)

F形網(wǎng)站布局非常普遍，它是基于UX研究咨詢(xún)公司Nielsen Norman Group進(jìn)行的研究而建立的，該研究進(jìn)行了眼球追蹤研究，發(fā)現(xiàn)人們通常以F模式閱讀文本和資產(chǎn)塊。

尼爾森眼研究的熱圖揭示了一些常見(jiàn)發(fā)現(xiàn)

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

許多網(wǎng)站希望提供許多不同的選項(xiàng)供用戶(hù)單擊時(shí)使用F形圖案?？紤]一下Google搜索結(jié)果的布局方式，或者大多數(shù)新聞網(wǎng)站將如何展示其內(nèi)容。

提示：在設(shè)計(jì)頁(yè)面之前，請(qǐng)先確定內(nèi)容的優(yōu)先級(jí)。這意味著首先要確定要向用戶(hù)介紹的最重要的元素。這將決定您如何安排信息。

2. Z形（或鋸齒形）

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

此形狀與F形的區(qū)別在于Z形的網(wǎng)站布局最適合有目標(biāo)的頁(yè)面，例如用于注冊(cè)新聞稿或服務(wù)的登錄頁(yè)面。

考慮到這一點(diǎn)，這是一個(gè)Z形網(wǎng)站的示例。

從Facebooklogo到登錄區(qū)域，再到著陸頁(yè)復(fù)制和注冊(cè)區(qū)域，整個(gè)頁(yè)面的視線都呈自然的Z形。

提示：Z形網(wǎng)站適合復(fù)制和內(nèi)容最少的頁(yè)面，并且當(dāng)眼睛向下移動(dòng)時(shí)，圖像會(huì)展示出來(lái)。將其與帶有多張圖片的滑塊配合使用，您將能夠使讀者的注意力集中在頁(yè)面上。

3.雜志風(fēng)格
大西洋組織

雜志樣式的布局常用于媒體出版物。布局基于網(wǎng)格，該網(wǎng)格向用戶(hù)提供了內(nèi)容負(fù)載，而不會(huì)壓倒它們。

這種布局還使網(wǎng)站管理員可以為其文章分配易于掌握的層次結(jié)構(gòu)，從而幫助用戶(hù)輕松地理解閱讀時(shí)哪些文章更重要或最新，以及瀏覽頁(yè)面并浸入其他內(nèi)容。

如果您的網(wǎng)站內(nèi)容豐富（例如博客或新聞出版物），請(qǐng)考慮采用雜志式的布局。

提示：不要在圖像上睡magazine雜志風(fēng)格的布局在很大程度上取決于各種優(yōu)質(zhì)圖像以及標(biāo)題，以吸引讀者的眼球。確保為您的文章的每個(gè)縮略圖選擇*的。

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

全圖片的網(wǎng)站布局為用戶(hù)提供了較大的特色圖片，其頂部還包含少量?jī)?nèi)容。如果您有想要展示的特定產(chǎn)品（例如餐廳食物），那就太好了。

要拍攝精美的照片和圖像，這是必須的。為了正確展示您的產(chǎn)品，您的圖片必須具有吸引力和動(dòng)態(tài)性-只有這樣，您才能吸引用戶(hù)的注意力并將其留在網(wǎng)站上。

提示：請(qǐng)記住，您的圖片也必須與移動(dòng)用戶(hù)兼容。在臺(tái)式機(jī)上看起來(lái)不錯(cuò)的東西在手機(jī)上可能看起來(lái)很殘酷。

5.分屏
62管理層

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

這種布局通常用于網(wǎng)站（如電子商務(wù)商店和模特經(jīng)紀(jì)公司）將其報(bào)價(jià)分為男性，女性，成人和兒童。

提示：使用分屏顯示時(shí)將內(nèi)容保持在*限度。由于用戶(hù)的關(guān)注點(diǎn)應(yīng)該只集中在您的已拆分信息上，因此您不想將一堆內(nèi)容和無(wú)關(guān)的圖像擠入他們的視野。

6.卡片
YouTube的

使用卡片（另一種網(wǎng)格）非常適合托管大量非層次內(nèi)容的網(wǎng)站。

該網(wǎng)站布局通常用于新聞，博客，投資組合和視頻網(wǎng)站，這些網(wǎng)站需要以有組織，可定制的簡(jiǎn)單方式展示大量?jī)?nèi)容。

提示：請(qǐng)確保提供足夠的空格。不夠，您的用戶(hù)將不知所措，并且會(huì)錯(cuò)過(guò)您嘗試突出顯示的所有內(nèi)容。

[標(biāo)題：天哪。為什么？]

7.不對(duì)稱(chēng)
章魚(yú)八達(dá)通

正如弗蘭克·辛納屈（Frank Sinatra）曾經(jīng)說(shuō)過(guò)的：“戴上帽子-角度就是態(tài)度?！?除了是個(gè)藍(lán)眼睛的騙子，他似乎還是不對(duì)稱(chēng)網(wǎng)站布局的擁護(hù)者。

不對(duì)稱(chēng)非常有助于在網(wǎng)站布局中增加張力和動(dòng)力，并且可以幫助設(shè)計(jì)人員將用戶(hù)的注意力吸引到網(wǎng)站布局的特定部分。

這種布局通常利用對(duì)比色來(lái)突出顯示內(nèi)容。另一個(gè)顯著特征是它可以提供給頁(yè)面的深度級(jí)別。它最常用于希望與眾不同的投資組合網(wǎng)站以及創(chuàng)新大膽的品牌。

提示：請(qǐng)確保不對(duì)稱(chēng)的布局不僅適合您的品牌，還適合您的內(nèi)容資產(chǎn)。此布局最適合內(nèi)容較少的網(wǎng)站。

8.單列
使命

單列網(wǎng)站就這么簡(jiǎn)單。

您的所有資產(chǎn)都放在您網(wǎng)站上的一欄中。而已。它只需要一列，所有用戶(hù)需要做的就是向下滾動(dòng)以查看更多內(nèi)容。

它是Tumblr和Medium等極簡(jiǎn)博客平臺(tái)或Instagram和Twitter等社交媒體平臺(tái)的流行網(wǎng)站布局，其中帖子按以下一個(gè)因素自動(dòng)排序：日期。

提示：在您自己的網(wǎng)站上使用此布局時(shí)，請(qǐng)考慮放置浮動(dòng)導(dǎo)航按鈕，以便您的用戶(hù)可以輕松地瀏覽該網(wǎng)站，無(wú)論它們?cè)陧?yè)面上的什么位置。

9.方框（或縮略圖）
SBNation

這種基于盒子的網(wǎng)站布局非常適合強(qiáng)調(diào)不同內(nèi)容的博客和新聞網(wǎng)站。

它通常以三種不同的內(nèi)容資產(chǎn)的形式排列在盒子中，其中一個(gè)較大的內(nèi)容資產(chǎn)位于其他兩個(gè)內(nèi)容的頂部。較大的“功能”框有時(shí)帶有滑塊，可在不同圖像之間滾動(dòng)。

微軟

提示：使用您的盒子將它們編織在一起即可促銷(xiāo)產(chǎn)品。在上圖中，Microsoft使用每個(gè)框來(lái)升級(jí)Surface。每個(gè)盒子都可以通過(guò)展示配件產(chǎn)品或?qū)⒂脩?hù)定向到他們可以了解更多有關(guān)Surface的地方來(lái)工作。

10.固定的側(cè)邊欄（或固定的導(dǎo)航）
2創(chuàng)意

固定的側(cè)邊欄網(wǎng)站布局具有以下確切含義：左側(cè)或右側(cè)的固定導(dǎo)航欄，使用戶(hù)無(wú)論在網(wǎng)頁(yè)上的位置如何，都可以輕松地導(dǎo)航該站點(diǎn)。這是在設(shè)計(jì)網(wǎng)站時(shí)牢記用戶(hù)需求的一個(gè)很好的例子。

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

Protip：請(qǐng)記住，側(cè)邊欄可以幫助導(dǎo)航當(dāng)前頁(yè)面上的資產(chǎn)，以及將讀者帶到其他地方，例如您的社交媒體供稿和About頁(yè)面。

3種類(lèi)型的網(wǎng)站及其布局

既然您已經(jīng)知道可以在下一個(gè)項(xiàng)目中使用的一些常見(jiàn)網(wǎng)站布局，那么我們將逐步指導(dǎo)您進(jìn)行操作。

以下是網(wǎng)站的三種示例類(lèi)型：

SaaS 社論 個(gè)人

對(duì)于每個(gè)網(wǎng)站，我們還提供了五個(gè)網(wǎng)站及其使用的布局的示例。希望它們能幫助激發(fā)您的項(xiàng)目，無(wú)論其形狀如何。

SaaS布局

SaaS產(chǎn)品的網(wǎng)站通常遵循一種布局：Z形。這有助于吸引用戶(hù)注意頁(yè)面的CTA。

對(duì)于以下內(nèi)容，通常是為了注冊(cè)該網(wǎng)站提供的服務(wù)。

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

出版物傾向于傾向于讀者友好的網(wǎng)站布局，例如雜志風(fēng)格或F形。這些布局使網(wǎng)站所有者可以確定內(nèi)容層次結(jié)構(gòu)，同時(shí)讓用戶(hù)可以自由選擇他們想要瀏覽的內(nèi)容。

邊緣（雜志風(fēng)格）
有線（雜志風(fēng)格）
洛杉磯時(shí)報(bào)（雜志風(fēng)格）
個(gè)人網(wǎng)站布局

特別是在設(shè)計(jì)自己的網(wǎng)站時(shí)，網(wǎng)站布局的選擇應(yīng)反映您的身份，這對(duì)您和您的目標(biāo)都是*的。

例如，如果您有一個(gè)博客，則可能要使用單列或框式布局，因?yàn)檫@些布局特別適合展示內(nèi)容。如果您有要銷(xiāo)售的產(chǎn)品，則可能要使用完整照片或Z形，因?yàn)樗鼈兎浅＿m合展示產(chǎn)品并呼吁用戶(hù)采取行動(dòng)。

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

現(xiàn)在我們想知道：您喜歡的網(wǎng)站布局是什么？為什么？請(qǐng)聯(lián)系我們。我們可能會(huì)在以后的網(wǎng)站設(shè)計(jì)文章中添加它。

新聞標(biāo)題：下一個(gè)網(wǎng)站設(shè)計(jì)項(xiàng)目的10個(gè)網(wǎng)站布局
當(dāng)前路徑：http://www.rwnh.cn/news36/208036.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、軟件開(kāi)發(fā)、域名注冊(cè)、App開(kāi)發(fā)、外貿(mào)建站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)