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

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

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

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

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

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

網(wǎng)站的布局是構(gòu)建和設(shè)計(jì)網(wǎng)站的框架。可以將其視為網(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)單的方式為用戶傳達(dá)這些資產(chǎn)。

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

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

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

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

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

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

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

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

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

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

2. Z形（或鋸齒形）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.分屏
62管理層

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

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

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

6.卡片
YouTube的

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

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

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

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

7.不對(duì)稱
章魚八達(dá)通

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

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

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

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

8.單列
使命

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

您的所有資產(chǎn)都放在您網(wǎng)站上的一欄中。而已。它只需要一列，所有用戶需要做的就是向下滾動(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)航按鈕，以便您的用戶可以輕松地瀏覽該網(wǎng)站，無論它們?cè)陧撁嫔系氖裁次恢谩?/p>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)。

微軟

提示：使用您的盒子將它們編織在一起即可促銷產(chǎn)品。在上圖中，Microsoft使用每個(gè)框來升級(jí)Surface。每個(gè)盒子都可以通過展示配件產(chǎn)品或?qū)⒂脩舳ㄏ虻剿麄兛梢粤私飧嘤嘘P(guān)Surface的地方來工作。

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

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

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

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

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

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

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

SaaS 社論 個(gè)人

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

SaaS布局

SaaS產(chǎn)品的網(wǎng)站通常遵循一種布局：Z形。這有助于吸引用戶注意頁面的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í)讓用戶可以自由選擇他們想要瀏覽的內(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)容。如果您有要銷售的產(chǎn)品，則可能要使用完整照片或Z形，因?yàn)樗鼈兎浅＿m合展示產(chǎn)品并呼吁用戶采取行動(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://muchs.cn/news36/208036.html

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

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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í)需注明來源： 創(chuàng)新互聯(lián)