UI設計師進行網(wǎng)頁布局排版的原則和意義是什么？

更新時間:2022-04-04 來源:黑馬程序員瀏覽量:

了解網(wǎng)頁的布局原則，有助于我們設計出美觀有序的頁面。在網(wǎng)頁設計中布局原則主要由整體性、對比性和均衡性三方面，具體介紹如下。

1、整體性

整體性指的是設計元素的整體與統(tǒng)一。整體統(tǒng)一的布局指頁面上不同元素相互影響如同一個整體，頁面中所有按鈕等控件元素都應該保持一致。對于網(wǎng)頁重復出現(xiàn)的形狀、尺寸、色彩都是一個有機聯(lián)系的整體。把頁面元素組織起來形成組塊，讓頁面更加整體，有利于統(tǒng)一版面布局的風格。圖2-33所示的網(wǎng)站的采用了大量的圓形的元素，將頁面中的圓形元素進行串聯(lián)使得網(wǎng)站更具整體性。而且文字圖片都以區(qū)塊進行對齊，保持了視覺上的干凈清晰。

2、對比性

網(wǎng)頁是由很多元素構(gòu)成的，這些元素的重要性各不相同。有些內(nèi)容元素需要重點突出，此時就需要通過對比，創(chuàng)造出視覺趣味性，同時引導用戶的注意力。對比包含色彩對比、字體字號對比、區(qū)塊面積大小對比等，圖2-34所示的網(wǎng)站大膽選擇以橙藍兩色作為對比，由于加上白色的介入，橙藍兩色并沒有給網(wǎng)站帶來視覺沖擊的激進感，反而營造出一種輕松活潑的氛圍。

3、均衡性

網(wǎng)頁中的均衡是指頁面上文字、形狀、色彩等因素在視覺上的平衡，視覺平衡分為對稱平衡和不對稱平衡。網(wǎng)頁中各個元素是有重量的，如果達到對稱平衡，頁面則顯得寧靜穩(wěn)重。然而為了在頁面中添加趣味性，可以選擇不對稱平衡。圖2-35所示的網(wǎng)站選擇了對稱平衡，界面元素雖多但不凌亂，沿著中軸線可將頁面一分為二。圖2-36所示的網(wǎng)站選擇了不對稱平衡，左側(cè)元素相對右側(cè)元素所占的比例更大，不對稱平衡添加了頁面趣味性，但是頁面整體本身還是很均衡。