提升UI設計畫面豐富感和層級的技巧有很多，這里主要介紹的有：創(chuàng)建視覺層次關系、使用盡可能少的線框、在純邊框上添加顏色、不要使圖標過于笨拙，讓畫面看起來盡可能精致和統(tǒng)一、并且不需要向每個按鈕添加顏色、垂直陰影、請勿將灰色字體放在彩色背景上面。接下來我們具體了解一下，提升UI設計畫面豐富感和層級的這七個方法。

　　一、創(chuàng)建視覺層次關系，應該用顏色的深淺與字體的粗細來體現(xiàn)而不是單純的用大小

設計中的排版的常見的雷區(qū)，就是過分依賴字體的大小來區(qū)分層級關系，但往往這樣子，畫面的效果并不突出，畫面效果就是要避免元素上的太過相似。如果元素不同，那么干脆讓他截然不同，讓他的對比關系變得更強烈，能讓用戶先獲取到更加重要的信息。

　　二、使用盡可能少的線框

當你想做元素分區(qū)的時候，雖然線框是區(qū)分兩個區(qū)域的好方法，但他不是唯一的方法，使用太多的線寬會讓設計看起來顯得繁瑣、復雜。想區(qū)分元素的時候，可以嘗試以下3種方法：

1.使用陰影

投影效果是可以很好的概括出區(qū)域的元素，并且看起來可以更精致，而且不會分散用戶看主要信息的注意力。

2.采用不同的背景顏色來進行區(qū)域區(qū)分

通常只需要為相鄰元素提供略微不同的背景顏色即可區(qū)分它們

3.讓每個模塊之間的距離看起來更遠

有什么更好的方法來創(chuàng)建元素之間的分離而不是簡單地增加分離?

將每個模塊的距離拉的更開，這是一種很好的區(qū)分模塊之間的方法，并且讓單獨每個模塊看起來更具有親密性

　　三、在純邊框上添加顏色

當我們發(fā)現(xiàn)畫面中的元素平淡無奇，一個簡單的技巧，可以為界面的某些部分添加幾分生色，那就是給邊框加一點顏色，看起來會生動許多。

　　四、不要使圖標過于笨拙，讓畫面看起來盡可能精致和統(tǒng)一

如果你準備設計一些大圖標，可以嘗試著給圖標加一個底色，讓后縮小圖標的尺寸，利用底色的來讓輪廓讓圖標看起來大一點，同時可以讓原本單調的圖標豐富一點，不會顯得一個笨重的圖標在畫面影響著效果。

注意：這種做法常用通常是功能性比較大的圖標時候使用，但如果一些常用界面設計上，盡量然圖標看起來小一點，顏色統(tǒng)一一點，并且最好是不要有顏色，因為有顏色的圖標可能會影響用戶的判斷。而且圖標樣式一定要統(tǒng)一，如果用線性，就都用線性，用面性，就都用面性

　　五、不需要向每個按鈕添加顏色

當用戶可以在頁面執(zhí)行多個操作的時候，這時候需要添加一些引導性的設計在界面中，也就是將希望用戶操作的按鈕高亮起來，不希望用戶操作的弱化下去即可，這樣可以激發(fā)用戶的點擊欲。

控件設計是一個非常重要的部分，有一個常見的重要維度：層次結構。最希望用戶按的：高亮，應該與背景形成強烈的對比度;次重要的：應該設計清楚，但不需要突出，使用輪廓樣式較低對比度的背景色色更好的選擇;三級控件：應該是可以讓用戶控件，但并不需要引人注目。

　　六、垂直陰影

當我們做卡片需要做一個投影效果的時候，不使用較大的模糊來使框陰影更明顯，而是讓淡淡的投影垂直偏移，這樣看起來效果會更加自然，因為這樣的做是模擬了一個真實光效，從上面照射下來的效果，就猶如我們的太陽是再頂上照下來一樣，使的效果更真實，更自然。

　　七、請勿將灰色字體放在彩色背景上面

灰色的字體放在白色的背景背景上面的時候，效果是非常棒的，但如果把灰色的字體放在彩色的背景上面的話，結果卻不盡人意。那是因為將灰色的放在白色的背景上面的時候，會使他們的對比度降低，從而看起來畫面更簡潔，更干凈。但如果把灰色放在彩色背景上面的是時候，視覺感官上面會少一些比較亮的顏色，這樣顯得畫面不干凈，稍微有點臟。我們應該嘗試著將文字讓他更接近背景的顏色，這樣更有利于創(chuàng)建畫面的層級關系，而不是直接將灰色的文字放入有顏色的背景上。

以上就是關于提升UI設計畫面豐富感和層級的技巧的內容介紹，如果有興趣了解更多關于UI設計的技巧，可以繼續(xù)關注中培偉業(yè)。