?

我們或許經(jīng)常聽到“這個(gè)界面視覺層次沒(méi)有拉開”、“信息層級(jí)不明顯”...

?

視覺層級(jí)貌似很基礎(chǔ)（的確很基礎(chǔ)~），但是很多時(shí)候我們也會(huì)經(jīng)常犯視覺層級(jí)上的一些小錯(cuò)誤，今天我們就一起來(lái)聊聊UI設(shè)計(jì)中能拉開視覺層級(jí)的一些小技巧把~

?

01 利用大小對(duì)比拉開視覺層級(jí)

?

按鈕再大一點(diǎn)、logo再大一點(diǎn)、文字再大一點(diǎn)...

?

元素越大，越明顯，元素大小對(duì)比是UI設(shè)計(jì)中拉開視覺層級(jí)常用的方式。文字、插圖、圖片等元素我們都可以建立大小對(duì)比，將我們想突出的元素放大。

?

?

需要注意的是要把握好元素大小對(duì)比的節(jié)奏，確保畫面平衡，特別是在版面設(shè)計(jì)上。舉個(gè)例子，比如中間元素是我們想要突出的元素，我們可以將其放大，那么為了版面的平衡，細(xì)小的元素應(yīng)該位于畫面的左側(cè)，這種形式也常應(yīng)用在我們作品集包裝的設(shè)計(jì)上。

?

?

?

?

?

02.利用色彩對(duì)比拉開視覺層級(jí)

?

色彩是最能吸引用戶注意力的，通過(guò)色彩加強(qiáng)視覺層級(jí)也是UI設(shè)計(jì)中常見的形式。

?

比如引導(dǎo)性按鈕都會(huì)使用品牌色或輔助色來(lái)引導(dǎo)用戶操作、利用色彩來(lái)區(qū)分選中態(tài)與未選中態(tài)。

?

?

?

但是個(gè)人覺得通過(guò)色彩建立視覺層級(jí)并沒(méi)有那么簡(jiǎn)單~

?

?

因?yàn)樵诮缑嬖O(shè)計(jì)中，很多元素都涉及色彩，比如背景色、圖標(biāo)顏色、文字顏色等，再加上色彩本身也存在明度對(duì)比、飽和度對(duì)比、色相對(duì)比，當(dāng)界面存在多個(gè)色彩時(shí)，要想通過(guò)色彩拉開層級(jí)還是比較復(fù)雜的。

?

?

?

比如這個(gè)頁(yè)面的的首頁(yè)大家第一眼是看哪里呢？視覺落腳點(diǎn)是哪里呢？頭圖、金剛區(qū)、卡片都有色彩。

?

對(duì)于新人設(shè)計(jì)師，想利用好色彩拉開面視覺層級(jí)，建議避免使用過(guò)多的色彩，一個(gè)界面最好凸出一個(gè)重色模塊，如果一個(gè)頁(yè)面有多個(gè)模塊都是重色，那這個(gè)頁(yè)面的層級(jí)就有點(diǎn)亂，用戶第一眼不知道看哪里。

?

?

像支付寶首頁(yè)就只有一個(gè)重色模塊，頭部通過(guò)品牌色-藍(lán)色拉開視覺層級(jí)。就算下面有比較重的模塊，但是也搶不過(guò)頭部的這個(gè)藍(lán)色區(qū)域。

?

?

?

03.利用粗細(xì)對(duì)比拉開視覺層級(jí)

?

越粗重量越重，視覺層級(jí)也就越突出。我們常說(shuō)的不同字重，其實(shí)就是通過(guò)粗細(xì)對(duì)比來(lái)拉開文字層級(jí)的

?

?

對(duì)于文字信息層級(jí)的處理往往是大小、字重、色彩的多種對(duì)比。這樣看起來(lái)層級(jí)才會(huì)更加明顯。比如當(dāng)我們想簡(jiǎn)單的做一個(gè)ppt時(shí)，就可以利用好粗細(xì)、大小、色彩對(duì)比。在文字排版上真的很好用，也能快速出效果。

?

?

?

?

?

04.利用間距拉開視覺層級(jí)

?

兩組元素如果關(guān)系越親密，那么這兩組元素的距離應(yīng)該是越近的。同理如果這兩組元素屬于不同元素，沒(méi)有關(guān)聯(lián)，那么就需要拉大他們之間的距離。

?

在設(shè)計(jì)中我們經(jīng)常通過(guò)留白來(lái)控制元素間的距離，從而拉開視覺層級(jí)關(guān)系。例如下圖的引導(dǎo)頁(yè)中，標(biāo)題與下面的正文親密關(guān)系更強(qiáng)，那么標(biāo)題離正文的距離應(yīng)該小于標(biāo)題離上面插圖的距離

?

?

在UI設(shè)計(jì)中，關(guān)于留白的處理也需要把控好節(jié)奏，我們可以制定好通過(guò)的留白尺寸（S、M、L、XL）重復(fù)的應(yīng)用在我們的布局中，使界面統(tǒng)一具有節(jié)奏感，同時(shí)拉開視覺層級(jí)。

?

?

?

?

05.利用視覺樣式拉開視覺層級(jí)

?

視覺樣式也是拉開視覺層級(jí)的一種方式。視覺樣式越豐富越能夠搶眼球，視覺層級(jí)也越強(qiáng)，相反如果需要弱化某個(gè)模塊，就需要視覺降噪，減少一些樣式的使用。

?

我們經(jīng)常通過(guò)不同的視覺樣式來(lái)拉開圖標(biāo)的視覺層級(jí)。比如面性與線性的區(qū)分，質(zhì)感與矢量的區(qū)分。

?

?

視覺樣式對(duì)比也常應(yīng)用在卡片容器上，有設(shè)計(jì)元素的卡片比純卡片會(huì)更加突出,可應(yīng)用在一些運(yùn)營(yíng)入口上，常用的形式就是給卡片加一些紋理裝飾。例如下圖騰訊動(dòng)漫活動(dòng)入口卡片的設(shè)計(jì)樣式。

?

?

?

?

?

總結(jié)

?

拉開視覺層級(jí)可以簡(jiǎn)單理解為拉大對(duì)比。我們可以通過(guò)大小、色彩、粗細(xì)、間距、視覺樣式維度來(lái)拉開界面的視覺層級(jí)。通過(guò)基礎(chǔ)元素的對(duì)比、變化增加界面層級(jí)關(guān)系，也讓界面更具有節(jié)奏感與韻律。

?