全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

首頁(yè)技術(shù)文章正文

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è)面整體本身還是很均衡。

對(duì)稱(chēng)平衡

不對(duì)稱(chēng)平衡





猜你喜歡:

ui設(shè)計(jì)命名規(guī)范:切片命名規(guī)則

UI設(shè)計(jì)流程:UI設(shè)計(jì)工作全過(guò)程

網(wǎng)頁(yè)UI設(shè)計(jì)分析:網(wǎng)頁(yè)結(jié)構(gòu)分析和網(wǎng)頁(yè)分類(lèi)

UI設(shè)計(jì)師必備技能有哪些?這三項(xiàng)是必備的

黑馬程序員UI/UE設(shè)計(jì)師培訓(xùn)

分享到:
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談!