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

更新時(shí)間:2022-04-04 來(lái)源:黑馬程序員瀏覽量:

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

1、整體性

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

2、對(duì)比性

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

3、均衡性

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