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

在設計網頁時，需要根據不同的網站性質和頁面內容選擇合適的布局形式，下面介紹一些常見的網頁布局方式。

1. “國”字型布局

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

2.  “T” 型布局

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

3. 標題正文型布局

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

4. 左右分割型布局

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

5.  上下分割型布局

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

6.  封面型布局

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

猜你喜歡：

交互設計有什么原則?

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

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

傳智教育UI設計課程