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

視覺層級貌似很基礎（的確很基礎~），但是很多時候我們也會經(jīng)常犯視覺層級上的一些小錯誤，今天我們就一起來聊聊UI設計中能拉開視覺層級的一些小技巧吧~

01

利用大小對比拉開視覺層級

按鈕再大一點、logo再大一點、文字再大一點...

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

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

02

利用色彩對比拉開視覺層級

色彩是最能吸引用戶注意力的，通過色彩加強視覺層級也是UI設計中常見的形式。

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

但是個人覺得通過色彩建立視覺層級并沒有那么簡單~

因為在界面設計中，很多元素都涉及色彩，比如背景色、圖標顏色、文字顏色等，再加上色彩本身也存在明度對比、飽和度對比、色相對比，當界面存在多個色彩時，要想通過色彩拉開層級還是比較復雜的。

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

對于新人設計師，想利用好色彩拉開面視覺層級，建議避免使用過多的色彩，一個界面最好凸出一個重色模塊，如果一個頁面有多個模塊都是重色，那這個頁面的層級就有點亂，用戶第一眼不知道看哪里。

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

03

利用粗細對比拉開視覺層級

越粗重量越重，視覺層級也就越突出。我們常說的不同字重，其實就是通過粗細對比來拉開文字層級的

對于文字信息層級的處理往往是大小、字重、色彩的多種對比。這樣看起來層級才會更加明顯。比如當我們想簡單的做一個ppt時，就可以利用好粗細、大小、色彩對比。在文字排版上真的很好用，也能快速出效果。

04

利用間距拉開視覺層級

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

在設計中我們經(jīng)常通過留白來控制元素間的距離，從而拉開視覺層級關系。例如下圖的引導頁中，標題與下面的正文親密關系更強，那么標題離正文的距離應該小于標題離上面插圖的距離

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

05

利用視覺樣式拉開視覺層級

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

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

視覺樣式對比也常應用在卡片容器上，有設計元素的卡片比純卡片會更加突出,可應用在一些運營入口上，常用的形式就是給卡片加一些紋理裝飾。例如下圖騰訊動漫活動入口卡片的設計樣式。

總結(jié)

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

文章轉(zhuǎn)載：晴天的設計寶藏，版權(quán)歸原作者所有