- 相關推薦
網(wǎng)頁設計的布局的方式有哪些
網(wǎng)頁可以說是網(wǎng)站構成的基本元素。當我們輕點鼠標，在網(wǎng)海中遨游，一副副精彩的網(wǎng)頁會呈現(xiàn)在我們面前，接下來，小編為您介紹了網(wǎng)頁設計的布局的方式，感謝您的閱讀!
1、“國”字型：
網(wǎng)頁設計也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權聲明等。這種結構是我們在網(wǎng)上見到的差不多最多的一種結構類型。
2、拐角型：
這種結構與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。
3、標題正文型：
這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4、左右框架型：
這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結構非常清晰，一目了然。
5、上下框架型：
與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。
6、綜合框架型：
上頁兩種結構的結合，相對復雜的一種框架結構，較為常見的是類似于“拐角型”結構的，只是采用了框架結構。
7、封面型：
這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
8、Flash型：
其實這與封面型結構是類似的，只是這種類型采用了目前非常游戲行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差于傳統(tǒng)的多媒體。
9、變化型：
即上面幾種類型的結合與變化，比如本站在視覺上是很接近拐角型的，但所實現(xiàn)的功能的實質是那種上、左、右結構的綜合框架型。
網(wǎng)頁設計的布局的方式有哪些
1、頂部大圖Banner+簡單的柵格
無論屏幕多大，這種布局都能夠為用戶展示充足的內容，供用戶瀏覽和探索。雖然這種布局隨著屏幕、設備而有所差異，有的設計師會傾向于設計成固定寬或者橫跨整個頁面的布局，但是總體的模式都大同小異。·導航欄·頂部大圖，圖片上疊有文字標題·2~4個分欄，承載不同類別的信息，有的會有圖標·主要的內容區(qū)域·頁腳這種布局設計干凈清爽，有足夠強的視覺表現(xiàn)力，并且常常采用的響應式設計，斷點也很好控制。頂部大面積的輪播圖或者Banner 也有許多插件或者應用來幫你實現(xiàn)。原理：這種布局中，每個元素都各司其職，并且整個流程是富有邏輯的，頂部大圖足以營造氛圍，給予用戶特定的體驗，下面的次一級元素能夠做的很好的支撐。相關趨勢：越來越多這類網(wǎng)頁開始采用色彩豐富的插畫式的圖標，而扁平化的設計和這種布局頁面有著天然的契合。
2、單頁設計，單欄布局
單頁式設計這幾年非常火，它非常適宜于展現(xiàn)極簡的內容，或者專注呈現(xiàn)一個主題。當網(wǎng)站的主題集中，內容也比較固定的時候，無需復雜的布局來呈現(xiàn)，單頁單列式的布局足以應付一切。·導航·主要內容區(qū)域，文字+圖片為主·頁腳采用這種布局模式的時候，空間的控制至關重要，相當考驗設計師設計留白和布局平衡的功力。元素和元素之間的疏密關系是需要設計師反復推敲的，如果空間控制不合理會給用戶一種混亂的感覺，如果過于緊密則會產(chǎn)生局促感。原理：單頁式設計適合于小網(wǎng)站或者小型項目的展示，它可以用來制造一個簡單的介紹頁面，讓簡單的內容顯得不那么單調，強化內容的形式感和重量感。對于內容簡單的博客網(wǎng)站而言，單頁式設計也是不錯的選擇。相關趨勢：和單頁設計結合最緊密的應該是動效設計和視差滾動，他們可以讓單頁式設計更加生動有趣，淡化單調的設計，賦予頁面更強的生命力。
3、自定義柵格
那些被整齊分割出來的網(wǎng)頁布局從來都沒有過時過。無論是分割得細碎的網(wǎng)頁區(qū)域還是大塊的頁面區(qū)塊，大多都需要借助一套干凈整齊的柵格來支撐。在此基礎上，內容按部就班地被置于不同的區(qū)塊中，被精心地組織展示出來。在設計師的作品集頁面中，你可以發(fā)現(xiàn)各種各樣自定義的柵格布局。自定義柵格展示內容的優(yōu)勢在于，它可以同時呈現(xiàn)大量的視覺化的內容，看起來足夠豐富又不會落于下乘。下面這個圖庫的效果看起來就相當震撼。在柵格中填充色彩，還可以用來承載文字內容。不同的區(qū)塊之間不一定非要用線條進行分割，可供選擇的方案有很多，不過千萬要控制好柵格尺寸和間距。控制不好的細節(jié)，整個設計的平衡感可能會被破壞。原理：柵格的優(yōu)勢在于它的組織性，對于用戶而言，它具有規(guī)律性和可預期性。一個漂亮的柵格系統(tǒng)能夠讓用戶更快找到需要的內容，在視覺上也更加協(xié)調自然。相關趨勢：柵格很容易被人視為卡片這樣的元素，可以為其加入翻轉等各式各樣的動效，呈現(xiàn)出更多的信息和視覺層次。
4、經(jīng)典的F式布局
研究表明，用戶在瀏覽網(wǎng)頁的時候，習慣于沿著F式的閱讀軌跡來瀏覽信息，也就是說，用戶喜歡從左到右閱讀，然后向下移動，再繼續(xù)從左到右閱讀。這種F式的閱讀模式對應的網(wǎng)頁布局就是F式布局，最關鍵的信息靠左顯示，從上到下盡量保持在一條線上。·頁頭和導航·靠左的一欄相對較寬，展示主要的內容·靠右常為側邊欄，展示相關鏈接等內容·頁腳原理：人的行為很容易受到習慣的影響，而研究也證實了人思考、行為確實是模式化的。從左到右，自上而下，人們大多習慣了這種行為模式。F式的布局模式擁有良好的適用性，便于用戶理解和交互。相關趨勢：F式布局中側邊玩法很多，有的設計師會將導航與之結合，或者在頁面頂部加上大圖Banner。
5、極簡分層
極簡化的設計一直都在流行，它的流行不是沒有原因的。開放式的空間讓用戶感覺更加輕松，也使得其中展現(xiàn)的內容更容易被聚焦。如果極簡化的頁面中加入不多的幾個并列的內容層，可以讓信息更有層次，也使得極簡的頁面擁有了細節(jié)。這種設計并不復雜，但是讓頁面更加有趣了，它可以適配更多不同類型的項目了。這也解釋了為什么用戶如此的喜愛類似Apple 官網(wǎng)這樣的設計。原理：極簡化的頁面中加入簡單的幾個分層，讓頁面有了視覺焦點，尤其是當設計者想要引導用戶關注到某個關鍵的內容的時候，這種頁面布局很很容易實現(xiàn)這一點。
網(wǎng)頁用哪種布局方式，除了看當下的流行趨勢，也要看網(wǎng)站的類型，不同類型的網(wǎng)站適合不同的布局方式，不要忽略網(wǎng)站自身的實際情況。
【網(wǎng)頁設計的布局的方式有哪些】相關文章：
常見的網(wǎng)頁布局設計有哪些09-11
網(wǎng)頁設計的布局08-13
常見的網(wǎng)頁布局設計07-25
常用的網(wǎng)頁設計軟件有哪些06-02
關于網(wǎng)頁設計布局的分析09-26
網(wǎng)頁設計中美麗的布局05-13
網(wǎng)頁設計色彩搭配案例有哪些10-22
網(wǎng)頁設計中最常用的字體有哪些07-07