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