我們或許經常聽到“這個界面視覺層次沒有拉開”、“信息層級不明顯”...視覺層級貌似很基礎，但是很多時候我們也會經常犯視覺層級上的一些小錯誤，今天優漫教育小編就一起來聊聊UI設計中能拉開視覺層級的一些小技巧把。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  04.利用間距拉開視覺層級

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

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

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

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

  我們經常通過不同的視覺樣式來拉開圖標的視覺層級。比如面性與線性的區分，質感與矢量的區分。

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

  總結

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