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

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

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

　　二、盡可能少地使用線框

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

　　1.使用陰影

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

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

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

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

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

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

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

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

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

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

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

　　五、你不需要給他每個(gè)按鈕的顏色

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

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

　　六、垂直陰影

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

　　七、請(qǐng)不要在彩色背景上放置灰色字體

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

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

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

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

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

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

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

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