提高設(shè)計(jì)畫面的豐富性和層次感的7個技巧

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

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

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

　　二、盡可能少地使用線框

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

　　1.使用陰影

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

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

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

　　3.使每個模塊之間的距離看起來更遠(yuǎn)

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

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

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

　　要把圖標(biāo)弄得太笨拙。

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

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

　　注意：這種方法通常用于大功能圖標(biāo)，但如果一些常見的界面設(shè)計(jì)，圖標(biāo)看起來盡可能小，顏色統(tǒng)一，最好沒有顏色，因?yàn)轭伾珗D標(biāo)可能會影響用戶的判斷。圖標(biāo)樣式必須統(tǒng)一，如果使用線性，使用線性，使用表面，使用表面

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

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

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

　　六、垂直陰影

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

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

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

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

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

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

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

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

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

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