網(wǎng)頁的布局結(jié)構(gòu)的特點（網(wǎng)頁的布局結(jié)構(gòu)的特點是）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于網(wǎng)頁的布局結(jié)構(gòu)的特點的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、web端交互設(shè)計頁面布局對比分析2018-04-07

• 2、簡述網(wǎng)頁布局的優(yōu)點

• 3、常見的網(wǎng)站版面布局:T結(jié)構(gòu)布局，口型布局，對稱對比布局，POP布局，國型布局，標題正文型布局，變化

• 4、散開型網(wǎng)頁布局的特點

一、web端交互設(shè)計頁面布局對比分析2018-04-07

頁面布局

頁面布局大致可分為網(wǎng)頁（web）、軟件、手機三類，其中web和軟件有較大相似性，不作區(qū)分。軟件界面布局依功能而決定，布局復(fù)雜。因為定義種類的標準和方式不同，頁面布局類型分類較多，先總結(jié)比較常用和普遍的布局方式，以其他方式做補充。

頁面布局的定義 

頁面布局是指，在設(shè)計頁面的過程將頁面各要素通過合理、有效、統(tǒng)一的規(guī)則進行排版，產(chǎn)生很好的傳播信息的視覺效果。一般來說，都會基于下原則進行頁面布局設(shè)計：

（1）對比：是防止頁面元素過于單一或沒有差異性。假如空間、大小、形狀、字體、線條、顏色等設(shè)計元素都要各不相同，那么就要制造較大的差別，要讓頁面引人注目。

（2）重復(fù)：可W重復(fù)顏色、形狀、線寬、字體、大小和圖片等等。既能夠増加條理性，也可増強頁面的統(tǒng)一性。

（3）對齊：在頁面上，不同元素不能孤立存在，而應(yīng)當構(gòu)建特殊的視覺關(guān)聯(lián)效果，從外觀上給予用戶更為清爽、稽巧和情緒化的體驗。

（4）親密性：頁面上的元素不應(yīng)當孤立的存在，彼此之間存在親密性，形成一個視覺單元。這樣可有助于信息的架構(gòu)，減少信息組織的混亂。

網(wǎng)頁布局類型

網(wǎng)頁版式的基本類型主要有骨骼型、國字型、拐角型、框架型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、自由型等12種。

1. “國”字型布局

也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。

口字型、同字型、回字型都可歸屬于此類，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題、導(dǎo)航以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局的優(yōu)點是充分利用版面，信息量大，缺點是頁面擁擠，不夠靈活。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型，常用于門戶網(wǎng)站的設(shè)計。

2.拐角型 匡型布局或T型布局可歸于此類，在匡型布局中，常見的類型有上面是標題與導(dǎo)航，左側(cè)是展示圖片的類型和最上面是標題及廣告，右側(cè)是導(dǎo)航鏈接的類型。這種版式在韓國的網(wǎng)站中常見。T布局就是指頁面頂部為橫條網(wǎng)站標志與廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單背景色彩較深，整體效果類似英文字母T，所以稱之為T形布局。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，是初學(xué)者最容易上手的布局方法。缺點是規(guī)矩呆板，如果在細節(jié)色彩上不注意，則很容易讓人感覺枯燥無味。

2.1“匡”字型布局

這種結(jié)構(gòu)與上一種其實只是形式上的區(qū)別，它去掉了“國”字形布局的最右邊的部分，給主內(nèi)容區(qū)釋放了更多空間。這種布局上面是標題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。

2.2.T型布局

“T”結(jié)構(gòu)布局形式。所謂“T”結(jié)構(gòu)，就是指頁面頂部為橫條網(wǎng)站標志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，整體效果類似英文字母“T”，所以稱之為“T，形布局。這是網(wǎng)頁設(shè)計中用得最廣泛的一種布局方式。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，是初學(xué)者最容易上手的布局方法。缺點是規(guī)矩呆板，如果不注意細節(jié)色彩，很容易讓人”看之無味“

3. “三”字型布局

是一種簡潔明快的網(wǎng)頁布局，在國外用的比較多，國內(nèi)比較少見。這種布局的特點是在頁面上由橫向兩條色塊將網(wǎng)頁整體分割為三部分，色塊中大多放置廣告條與更新和版權(quán)提示。

4. “川”字型布局

整個頁面在垂直方向分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度地突出主頁的索引功能。

5， 封面型布局 （滿版型/海報型/POP型）

POP布局屬于此類。就是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，頁面以圖像充滿整版。主要以圖像為訴求點，將少量文字壓置于圖像之上。滿版型給人以舒展、大方的感覺，視覺傳達效果直觀而強烈，缺點就是速度慢。隨著當今網(wǎng)絡(luò)帶寬不斷變大，這種版式在商業(yè)網(wǎng)站設(shè)計尤其是網(wǎng)絡(luò)廣告中比較常見。

這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。

6. Flash布局

這種布局是指整個網(wǎng)頁就是一個Flash動畫，它本身就是動態(tài)的，畫面一般比較絢麗、有趣，是一種比較新潮的布局方式。其實這種布局與封面型結(jié)構(gòu)是類似的，不同的是由于Flash強大的功能，頁面所表達的信息更豐富。其視覺效果及聽覺效果如果處理得當，會是一種非常有魅力的布局

7. 標題文本型布局

標題文本型布局是指頁面內(nèi)容以文本為主，這種類型頁面最上面往往是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這一類。

8. 框架型布局 ,

采用框架布局結(jié)構(gòu)，常見的有左右框架型、上下框架型和綜合框架型。由于兼容性和美觀等因素，這種布局目前專業(yè)設(shè)計人員采用的已不多，不過在一些大型論壇上還是比較受青睞的，有些企業(yè)網(wǎng)站也有應(yīng)用。

框架型版式常用于功能型網(wǎng)站，例如郵箱、論壇、博客等。1）左右框架型這是一種左右分別為兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時最上面會有一個小塊標題或標志，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)，一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。

2）上下框架型與左右框架類似，區(qū)別僅僅在于這是一種上下分為兩頁的框架。

3）綜合框架型這是上述兩種結(jié)構(gòu)的結(jié)合，是一種相對復(fù)雜的下型框架結(jié)構(gòu)，較為常見的類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。常見的郵箱網(wǎng)站的版式都是綜合框架型。

9. 頂部大圖Banner+簡單的柵格

無論屏幕多大，這種布局都能夠為用戶展示充足的內(nèi)容，供用戶瀏覽和探索。雖然這種布局隨著屏幕、設(shè)備而有所差異，有的設(shè)計師會傾向于設(shè)計成固定寬或者橫跨整個頁面的布局，但是總體的模式都大同小異。

·導(dǎo)航欄·頂部大圖，圖片上疊有文字標題·2~4個分欄，承載不同類別的信息，有的會有圖標·主要的內(nèi)容區(qū)域·頁腳

這種布局設(shè)計干凈清爽，有足夠強的視覺表現(xiàn)力，并且常常采用的響應(yīng)式設(shè)計，斷點也很好控制。頂部大面積的輪播圖或者Banner 也有許多插件或者應(yīng)用來幫你實現(xiàn)。

原理：這種布局中，每個元素都各司其職，并且整個流程是富有邏輯的，頂部大圖足以營造氛圍，給予用戶特定的體驗，下面的次一級元素能夠做的很好的支撐。

相關(guān)趨勢：越來越多這類網(wǎng)頁開始采用色彩豐富的插畫式的圖標，而扁平化的設(shè)計和這種布局頁面有著天然的契合。

10. 單頁設(shè)計，單欄布局

單頁式設(shè)計這幾年非常火，它非常適宜于展現(xiàn)極簡的內(nèi)容，或者專注呈現(xiàn)一個主題。當網(wǎng)站的主題集中，內(nèi)容也比較固定的時候，無需復(fù)雜的布局來呈現(xiàn)，單頁單列式的布局足以應(yīng)付一切。

·導(dǎo)航·主要內(nèi)容區(qū)域，文字+圖片為主·頁腳

采用這種布局模式的時候，空間的控制至關(guān)重要，相當考驗設(shè)計師設(shè)計留白和布局平衡的功力。元素和元素之間的疏密關(guān)系是需要設(shè)計師反復(fù)推敲的，如果空間控制不合理會給用戶一種混亂的感覺，如果過于緊密則會產(chǎn)生局促感。

原理：單頁式設(shè)計適合于小網(wǎng)站或者小型項目的展示，它可以用來制造一個簡單的介紹頁面，讓簡單的內(nèi)容顯得不那么單調(diào)，強化內(nèi)容的形式感和重量感。對于內(nèi)容簡單的博客網(wǎng)站而言，單頁式設(shè)計也是不錯的選擇。

相關(guān)趨勢：和單頁設(shè)計結(jié)合最緊密的應(yīng)該是動效設(shè)計和視差滾動，他們可以讓單頁式設(shè)計更加生動有趣，淡化單調(diào)的設(shè)計，賦予頁面更強的生命力。

11 、自定義柵格

方塊元素被用來組織排列他的作品。這是組織排列任意數(shù)量內(nèi)容的簡單途徑，讓事物保持簡潔。

到處都是方塊，移動鼠標時還有個有趣的動畫效果。不過除了組織內(nèi)容之外，你會發(fā)現(xiàn)方塊元素也成為了設(shè)計風(fēng)格的一部分。它是這種風(fēng)格關(guān)鍵的決定性元素。

那些被整齊分割出來的網(wǎng)頁布局從來都沒有過時過。無論是分割得細碎的網(wǎng)頁區(qū)域還是大塊的頁面區(qū)塊，大多都需要借助一套干凈整齊的柵格來支撐。在此基礎(chǔ)上，內(nèi)容按部就班地被置于不同的區(qū)塊中，被精心地組織展示出來。

在設(shè)計師的作品集頁面中，你可以發(fā)現(xiàn)各種各樣自定義的柵格布局。自定義柵格展示內(nèi)容的優(yōu)勢在于，它可以同時呈現(xiàn)大量的視覺化的內(nèi)容，看起來足夠豐富又不會落于下乘。下面這個圖庫的效果看起來就相當震撼。

在柵格中填充色彩，還可以用來承載文字內(nèi)容。不同的區(qū)塊之間不一定非要用線條進行分割，可供選擇的方案有很多，不過千萬要控制好柵格尺寸和間距?？刂撇缓玫募毠?jié)，整個設(shè)計的平衡感可能會被破壞。

原理：柵格的優(yōu)勢在于它的組織性，對于用戶而言，它具有規(guī)律性和可預(yù)期性。一個漂亮的柵格系統(tǒng)能夠讓用戶更快找到需要的內(nèi)容，在視覺上也更加協(xié)調(diào)自然。

相關(guān)趨勢：柵格很容易被人視為卡片這樣的元素，可以為其加入翻轉(zhuǎn)等各式各樣的動效，呈現(xiàn)出更多的信息和視覺層次。

12. 經(jīng)典的F式布局

傳統(tǒng)的布局方式，依賴布置視覺線索，“控制”用戶的視覺路徑，相較之下，F(xiàn)式布局更加自然，更加友好。F式布局符合用戶的瀏覽習(xí)慣，更自然。符合“從上到下，從左到右”的閱讀模式。

研究表明，用戶在瀏覽網(wǎng)頁的時候，習(xí)慣于沿著F式的閱讀軌跡來瀏覽信息，也就是說，用戶喜歡從左到右閱讀，然后向下移動，再繼續(xù)從左到右閱讀。

這種F式的閱讀模式對應(yīng)的網(wǎng)頁布局就是F式布局，最關(guān)鍵的信息靠左顯示，從上到下盡量保持在一條線上。

·頁頭和導(dǎo)航·靠左的一欄相對較寬，展示主要的內(nèi)容·靠右常為側(cè)邊欄，展示相關(guān)鏈接等內(nèi)容·頁腳

原理：人的行為很容易受到習(xí)慣的影響，而研究也證實了人思考、行為確實是模式化的。從左到右，自上而下，人們大多習(xí)慣了這種行為模式。F式的布局模式擁有良好的適用性，便于用戶理解和交互。

相關(guān)趨勢：F式布局中側(cè)邊玩法很多，有的設(shè)計師會將導(dǎo)航與之結(jié)合，或者在頁面頂部加上大圖Banner。

13 、極簡分層

極簡化的設(shè)計一直都在流行，它的流行不是沒有原因的。開放式的空間讓用戶感覺更加輕松，也使得其中展現(xiàn)的內(nèi)容更容易被聚焦。如果極簡化的頁面中加入不多的幾個并列的內(nèi)容層，可以讓信息更有層次，也使得極簡的頁面擁有了細節(jié)。

這種設(shè)計并不復(fù)雜，但是讓頁面更加有趣了，它可以適配更多不同類型的項目了。這也解釋了為什么用戶如此的喜愛類似Apple 官網(wǎng)這樣的設(shè)計。

原理：極簡化的頁面中加入簡單的幾個分層，讓頁面有了視覺焦點，尤其是當設(shè)計者想要引導(dǎo)用戶關(guān)注到某個關(guān)鍵的內(nèi)容的時候，這種頁面布局很很容易實現(xiàn)這一點。

相關(guān)趨勢：微妙的陰影和漸變常常被用在這樣的頁面當中，強化元素之間的層次感。雖然這些設(shè)計手法一度“過時”，但是現(xiàn)在大有卷土重來之勢，而Material Design 這樣的設(shè)計風(fēng)格就是它們的沖鋒號。

14. Z-模式

Z-模式是最簡單、最通用的模式,普遍用于任何基于文本的網(wǎng)頁。讀者首先橫向的瀏覽頂部，接著回到左邊，然后再橫向地瀏覽整個底部。

理解通用的Z-模式很重要，因為它解決了網(wǎng)站的核心需求：層次結(jié)構(gòu)、品牌化和用戶行為號召。它的美在于既簡單又具有“用戶號召”型網(wǎng)站的理想布局。當然，對于更復(fù)雜的或包含大量內(nèi)容的網(wǎng)站，Z-模式可能過于簡單。

考慮一下Z-模式是否適合你的網(wǎng)站？下面有一些最佳實踐可以更好的優(yōu)化該模式：

背景：保持背景在它應(yīng)該處于的位置：隱蔽在內(nèi)容之下。不讓它分散讀者的注意力。

要點1：作為第一個要點，將Logo放置在固定位置。

要點2：雖然主要的用戶號召應(yīng)該放在后面，這對二級用戶號召來說是一個好位置，可強調(diào)或突出導(dǎo)航條（一個漂亮的圖形或圖像滑塊將有助于分割頁面的頂部和底部，鼓勵讀者按照Z模式所期待的方式來瀏覽）。

要點3：選取最佳位置來吸引讀者對其它鏈接的注意，或者吸引讀者的目光到網(wǎng)站的最終目標：要點4。

要點4——作為“終點”，這是一個完美的放置主要用戶號召的地方。

首先你需要做的是把頁面上的元素按照重要性進行排序。然后，從結(jié)果中挑選出適當?shù)摹盁狳c”就會變得很簡單。

此外，Z-模式可以重復(fù)和擴展到整個頁面。我們來看看Evernote是如何按“之”字型向下放置他們的“用戶號召”和賣點的。

DropBox沒有使用任何背景圖片，很簡單地實現(xiàn)了這種“曲折”的模式。相反的，更多功能型的設(shè)計內(nèi)置在了布局中，比如用戶號召“瀏覽更多”，當用戶瀏覽整個網(wǎng)頁時，它幫助用戶鏈接進入每一板塊的細節(jié)部分。這也有助于通知讀者點擊到下一個相關(guān)頁面，而不需要先去通讀頁面所有內(nèi)容。

15.分割屏幕

在這類中，我們精選的網(wǎng)站都用了垂直分隔線來分割屏幕。可能這么做有很多原因，通過研究大量此類案例，我發(fā)現(xiàn)主要有兩點。

原因之一，有時候在一套設(shè)計中，的確存在兩個同等重要的主體元素。網(wǎng)頁設(shè)計的通常方法，是按照重要性給內(nèi)容排序。然后重要性會體現(xiàn)在設(shè)計的層次和結(jié)構(gòu)上。但是假如你就是要推廣兩樣?xùn)|西呢？這種方式，可以讓你突出兩者，并讓用戶迅速在其中做出選擇。

原因之二，有時你要表現(xiàn)出一種重要的兩重性。以Eight and Four網(wǎng)站為例。他們在此要表達的是，他們的核心競爭力來自植根數(shù)字領(lǐng)域，還有多才多藝的員工。這兩點成就了他們。通過屏幕分割來表現(xiàn)這一點，是種令人愉快的方式。

16. 去界面化

網(wǎng)頁設(shè)計中的主要元素之一，就是容器元素：方塊、邊框、形狀和所有類型的容器，用于將內(nèi)容從頁面中分離開。想象一個古板的頁頭，元素剛好容納其中，與內(nèi)容分隔開。如今的一項普遍趨勢，就是去除所有這些額外的界面元素。

這是種極簡主義的方式，但它更進一步，帶來一些有趣的轉(zhuǎn)變。

17. 基于模塊或網(wǎng)格

接下來這些排版方式，建立在模塊化或類似網(wǎng)格的結(jié)構(gòu)上。在這些設(shè)計中，每個模塊都力圖根據(jù)屏幕尺寸伸縮調(diào)整。實際上這并不是什么新的方式，不過響應(yīng)式網(wǎng)頁設(shè)計讓它變得更加有用。它暗示了一種自適應(yīng)布局模式，可以像搭積木一樣，由各種模塊組件創(chuàng)建而成。

這個案例更加激進。當然，它也包含了模塊化的方式，讓他們能夠根據(jù)需要輕松增減內(nèi)容。但此處還有一個重要的設(shè)計元素在發(fā)揮作用，之前的案例是沒有的。模塊通過尺寸變化，來反映其重要程度和在各層級中的地位。這類模塊化的布局方式存在一種風(fēng)險，它使每樣?xùn)|西尺寸都相同，這意味著無法強調(diào)任何事物。相反，這個案例還是清晰地突出了主要元素。

18. 一屏以內(nèi)

最后，還有一些網(wǎng)站采用這樣的方式，讓設(shè)計完全在一屏內(nèi)展現(xiàn)。這是響應(yīng)式設(shè)計的一個分支，因為它會適應(yīng)屏幕尺寸。不過在這個絕佳案例中，整個設(shè)計的適應(yīng)方式完完全全吻合屏幕，沒有產(chǎn)生滾動條。沒有滾動，意味著內(nèi)容必須極度聚焦，而且要建立清晰的內(nèi)容層次。我發(fā)現(xiàn)這些網(wǎng)站的聚焦能力和清晰程度，令人耳目一新。

二、簡述網(wǎng)頁布局的優(yōu)點

1、符合W3C標準。微軟等公司均為W3C支持者。

2、支持瀏覽器的向后兼容。

3、搜索引擎更加友好。相對與傳統(tǒng)的table, 采用DIV+CSS技術(shù)的網(wǎng)頁，對于搜索引擎的收錄更加友好。

4、樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的后續(xù)的調(diào)整變得更加方便。

5、CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。

6、mvc開發(fā)框架中表現(xiàn)和結(jié)構(gòu)分離，在團隊開發(fā)中前端和后端的開發(fā)可同步進行，不受影響。

三、常見的網(wǎng)站版面布局:T結(jié)構(gòu)布局，口型布局，對稱對比布局，POP布局，國型布局，標題正文型布局，變化

T結(jié)構(gòu)布局

上左右，左下，右下

口型布局

上下。

左，右，中。

對稱對比布局

左右或者上下

POP布局

中

國型布局

上左右

左右中

標題正文型布局

上，下

變化布局

上框架，左框架，下框架

四、散開型網(wǎng)頁布局的特點

更靈活。

網(wǎng)站建設(shè)中網(wǎng)頁如何布局看這是初學(xué)者可能會問的問題。其實這要具體情況具體分析的：比如如果內(nèi)容非常多，就要考慮用逗國字型地或拐角型；而如果內(nèi)容不算太多而一些說明性的東西比較多，則可以考慮標題正文型；那幾種框架結(jié)構(gòu)的一個共同特點就是瀏覽方便，速度快，但結(jié)構(gòu)變化不靈活。

而如果是一個企業(yè)網(wǎng)站想展示一下企業(yè)形象或個人主頁想展示個人風(fēng)采，封面性是首選；Flash型更靈活一些，好的Flash大大豐富了網(wǎng)頁，但是它不能表達過多的文字信息。

以上就是關(guān)于網(wǎng)頁的布局結(jié)構(gòu)的特點相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。

推薦閱讀：

網(wǎng)頁格斗游戲排行榜（網(wǎng)頁格斗游戲排行榜前十）

微信網(wǎng)頁版好用嗎

微信掃一掃瀏覽過網(wǎng)頁記錄

北方室內(nèi)生態(tài)景觀設(shè)計（北方室內(nèi)生態(tài)景觀設(shè)計公司）

騰訊怎么登錄另一個賬號（騰訊怎么登錄另一個賬號微信）