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

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

1. “國”字型布局

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

2.  “T” 型布局

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

3. 標題正文型布局

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

4. 左右分割型布局

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

5.  上下分割型布局

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

6.  封面型布局

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

猜你喜歡：

交互設計有什么原則?

設計原則有哪些？盤點那些深入人心的設計原則

UI設計是什么?UI設計師有哪些職能？

傳智教育UI設計課程