web端交互設(shè)計頁面布局對比分析

頁面布局的定義

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

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

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

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

（４）親密性：頁面上的元素不應當孤立的存在，彼此之間存在親密性，形成一個視覺單元。這樣可有助于信息的架構(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)站的標題、導航以及橫幅廣告條，接下來就是網(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型布局可歸于此類，在匡型布局中，常見的類型有上面是標題與導航，左側(cè)是展示圖片的類型和最上面是標題及廣告，右側(cè)是導航鏈接的類型。這種版式在韓國的網(wǎng)站中常見。T布局就是指頁面頂部為橫條網(wǎng)站標志與廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單背景色彩較深，整體效果類似英文字母T，所以稱之為T形布局。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，是初學者最容易上手的布局方法。缺點是規(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)清晰，主次分明，是初學者最容易上手的布局方法。缺點是規(guī)矩呆板，如果不注意細節(jié)色彩，很容易讓人”看之無味“

文章題目：web端交互設(shè)計頁面布局對比分析
本文路徑：http://muchs.cn/news/43641.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、面包屑導航、電子商務、云服務器、定制網(wǎng)站、Google

廣告

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