常見的網(wǎng)頁ui界面布局有哪些?【UI設(shè)計(jì)師必會】

在設(shè)計(jì)網(wǎng)頁時(shí)，需要根據(jù)不同的網(wǎng)站性質(zhì)和頁面內(nèi)容選擇合適的布局形式，下面介紹一些常見的網(wǎng)頁布局方式。

1. “國”字型布局

“國”字型布局是網(wǎng)頁上使用最多的一種結(jié)構(gòu)類型，是綜合性網(wǎng)站頁面中常用的版式。通常上方為引導(dǎo)欄、header, 導(dǎo)航欄，中間為內(nèi)容區(qū)，最底端為版權(quán)信息。將內(nèi)容區(qū)分為左、中、右三大塊，通常左右兩側(cè)為導(dǎo)航、友情鏈接，中間為內(nèi)容區(qū)域。此類型的版面優(yōu)點(diǎn)是頁面充實(shí)、內(nèi)容豐富和信息量大，缺點(diǎn)是頁面擁擠、不夠靈活。

2.  “T” 型布局

uT”型布局與“國”字型布局很相近，頁面上方一致，僅僅只是在形式上略有區(qū)別。網(wǎng)頁F邊和左右相結(jié)合的布局，通常右邊為主要內(nèi)容，所占比例比較大。如圖8-5所示。在實(shí)際運(yùn)用中還可以改變“T”型布局的形式，如左右兩欄式布局，一半是正文，另一半是形象的圖像或?qū)Ш綑凇４祟愋偷陌婷鎯?yōu)點(diǎn)是頁面結(jié)構(gòu)清晰、主次分明、易于使用，缺點(diǎn)是規(guī)矩呆板。

3. 標(biāo)題正文型布局

標(biāo)題正文型布局即上方為網(wǎng)頁標(biāo)題或類似的一些內(nèi)容，中間為正文部分，下方為版權(quán)信息一般是文章、 登錄頁等采用居多，里面包含著大量的文字信息。如知乎里的文章詳情均采用這種布局。

4. 左右分割型布局

左右分割型布局結(jié)構(gòu)，就是把整個(gè)版面分割為左右兩個(gè)部分，分別在左或右配置文案。通常會在其中一側(cè)放置一列文字鏈接，在文字鏈接上方會有標(biāo)題或logo。此類型網(wǎng)頁布局，結(jié)構(gòu)清晰、一目了然。

5.  上下分割型布局

與左右分割的布局結(jié)構(gòu)類似，區(qū)別僅僅在于上下框架頁面的導(dǎo)航和logo在上方，正文內(nèi)容在下。

6.  封面型布局

此類型布局基本出現(xiàn)在一些網(wǎng)站的首頁，大部分直接使用極具設(shè)計(jì)感的圖像或動畫作為網(wǎng)頁背景，然后添加一個(gè)“進(jìn)入”按鈕即可。此類型布局方式十分開放自由，可以給用戶帶來賞心悅目的感受。

猜你喜歡：

交互設(shè)計(jì)有什么原則?

設(shè)計(jì)原則有哪些？盤點(diǎn)那些深入人心的設(shè)計(jì)原則

UI設(shè)計(jì)是什么?UI設(shè)計(jì)師有哪些職能？

傳智教育UI設(shè)計(jì)課程