創(chuàng)造視覺層次關系的技巧就是盡可能少地使用線框，添加一些顏色的平邊框，不要讓圖標太笨拙，盡量看起來更精致，更統(tǒng)一。你不需要給他每個按鈕的顏色、垂直陰影，不用在彩色背景上放置灰色字體。接下來，我們來看看七個提升設計畫面豐富度和層次感的技巧。

　　一、視覺層次關系的創(chuàng)建應該反映在顏色的深度和字體的厚度上，而不是簡單地使用大小

　　設計中常見的排版雷區(qū)是過于依賴字體的大小來區(qū)分層次關系，但通常這樣，圖片的效果并不突出，圖片效果是為了避免元素太相似。如果元素不同，那么只要讓他完全不同，讓他的比較關系變得更強，可以讓用戶先獲得更重要的信息。

　　二、盡可能少地使用線框

　　當你想做元素分區(qū)時，雖然線框是區(qū)分兩個區(qū)域的好方法，但不是唯一的方法。使用太多的線寬會使設計看起來繁瑣、復雜。如果你想?yún)^(qū)分元素，可以嘗試以下三種方法：

　　1.使用陰影

　　投影效果是對區(qū)域元素的很好的總結(jié)，而且看起來可以更加精致，而且不會分散用戶看到主要信息的注意力。

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

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

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

　　與其簡單地增加分離，不如創(chuàng)建元素之間的分離?拉動每個模塊之間的距離是區(qū)分模塊之間的一個很好的方法，并使每個單獨的模塊看起來更親密

　　三、添加一些顏色的平邊框

　　當我們發(fā)現(xiàn)圖片中的元素是普通的，一個簡單的技術(shù)，可以為界面的某些部分添加一些顏色，也就是說，添加一點顏色的邊界，看起來更生動。

　　要把圖標弄得太笨拙。

　　盡量看起來更精致、更統(tǒng)一。

　　如果你要設計一些大圖標，你可以嘗試在圖標上添加一個背景色，以減少圖標的大小，使用背景色使圖標看起來更大。同時，可以豐富原始單調(diào)圖標，而不會出現(xiàn)沉重的圖標，從而影響圖片中的效果。

　　注意：這種方法通常用于大功能圖標，但如果一些常見的界面設計，圖標看起來盡可能小，顏色統(tǒng)一，最好沒有顏色，因為顏色圖標可能會影響用戶的判斷。圖標樣式必須統(tǒng)一，如果使用線性，使用線性，使用表面，使用表面

　　五、你不需要給他每個按鈕的顏色

　　當用戶可以在頁面上執(zhí)行多個操作時，需要在界面中添加一些指導設計，即突出希望用戶操作的按鈕，不希望用戶操作被削弱，從而激發(fā)用戶的點擊欲望。

　　控制設計是一個非常重要的組成部分，具有一個共同的重要維度：層次結(jié)構(gòu)。最希望用戶按：突出，應與背景形成強對比度；第二重要：應設計清晰，但不需要突出，使用低對比度的背景色選擇更好；三級控制：應能讓用戶控制，但不需要引人注目。

　　六、垂直陰影

　　當我們需要做一個投影效果時，我們不使用大的模糊來使框架陰影更加明顯，而是使輕微的投影垂直偏移，這樣看起來效果會更加自然，因為這樣做模擬了一個真實的光效果，從上面照射下來的效果就像我們的太陽在頂部照射下來一樣，使效果更加真實和自然。

　　七、請不要在彩色背景上放置灰色字體

　　當將灰色字體放在白色背景上時，效果非常好，但如果將灰色字體放在彩色背景上，結(jié)果并不令人滿意。這是因為當將灰色放在白色背景上時，它們的對比度會降低，因此圖片看起來更簡潔、更干凈。

　　但是，如果你把灰色放在彩色背景上，視覺感官上的顏色會更亮，這使得圖片不干凈，有點臟。我們應該試著讓文本更接近背景的顏色，這更有利于創(chuàng)建圖片的層次關系，而不是直接將灰色文本放在彩色背景上。

　　在使用彩色背景時，可以嘗試以下兩種方法：

　　1.減少白色字體的不透明度

　　使用白色字體，然后稍微降低白色文本的不透明度。這樣，彩色背景可以稍微穿透人體的白色字體。這種方法可以有效地使文本與背景看起來更加協(xié)調(diào)。

　　2.選擇基于背景顏色更亮的顏色

　　當背景是顏色或淺低溫時，如果只是降低白色文本的不透明度，會使文本的感覺有點太蒼白，那么我們可以嘗試將文本的顏色改為與背景色相同的顏色，然后調(diào)整文本的飽和度和亮度。

　　上述的提高設計畫面的豐富性和層次感的7個技巧，大家都學會了嗎？更多關于“UI培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業(yè)需求，更科學更嚴謹，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。