ui界面設(shè)計(jì)的內(nèi)容非常多，除了布局、色彩外，就連界面的亮點(diǎn)也是非常值得關(guān)注的。對(duì)于ui設(shè)計(jì)中關(guān)于界面亮度，今天就讓faceui為大家介紹ui設(shè)計(jì)如何提升界面亮度，提升UI設(shè)計(jì)質(zhì)感的小技巧。

　　ui設(shè)計(jì)如何提升界面亮度

　　在ui設(shè)計(jì)中提升界面亮度，很大程度上要關(guān)注色調(diào)、明度、飽和度的問題。

　　色調(diào)是最原始狀態(tài)下的顏色。例如藍(lán)色、綠色、黃色、紅色等，它不受任何光線和陰影的變化影響。這里有一個(gè)便于理解例子：色調(diào)就是你在色輪中看到的色彩，它與任何明暗或飽和度因素?zé)o關(guān)。

　　明度表示了色彩的明暗程度。當(dāng)我們走在路上，可以看到一些元素早上和晚上的顏色改變。例如，一座山的顏色是棕色，早晨的色調(diào)較淺，晚上的色調(diào)較暗。在UI中，明度扮演著重要角色，不但有助于我們獲得良好的對(duì)比度，還能幫助我們?cè)诮缑嬷袠?gòu)建出不同的層次結(jié)構(gòu)。

　　飽和度指的是色彩的鮮艷程度。當(dāng)我們提升顏色的飽和度時(shí)，色彩就會(huì)變得更強(qiáng)烈和生動(dòng)。當(dāng)我們降低色彩的飽和度時(shí)，顏色就會(huì)變得更加黯淡，而當(dāng)我們把飽和度降到最低時(shí)，色彩就變成了灰色。

　　圖片來源于網(wǎng)絡(luò)

　　如果提升界面亮度，就是在上述幾點(diǎn)的設(shè)計(jì)中，關(guān)注以下三點(diǎn)：

　　1、規(guī)則 60 30 10

　　「規(guī)則 60 30 10」，這不是對(duì)超模的標(biāo)準(zhǔn)測(cè)量，而是成功組合顏色的比例。我們首先要選擇一種主色調(diào)，然后運(yùn)用到60%的空間中。再選擇一種次要色調(diào)，在30%的空間中使用，最后剩下10%的空間使用最后一種顏色。這一理論曾在室內(nèi)設(shè)計(jì)中被大量使用。

　　2、暗≠黑、亮≠白

　　當(dāng)我們使用顏色來表達(dá)明暗時(shí)，有一個(gè)很普遍的錯(cuò)誤，那就是使用不透明度的黑色表達(dá)陰影，不透明度的白色來表達(dá)光亮。但如果我們借鑒一下現(xiàn)實(shí)生活，會(huì)發(fā)現(xiàn)黑暗總是有一些基調(diào)的。

　　黑暗從來都不是黑色的，黑暗只是被物體明度遮蔽的色調(diào)。就如上圖中，檸檬的影子是非常深的綠色，而木板的影子是非常的深棕色，它們都不是黑色的。只有在完全沒有光線的情況下，才會(huì)出現(xiàn)黑色。

　　3、飽和度測(cè)試顏色和諧度

　　想要讓我們作品中的配色更加和諧，可以將色調(diào)從顏色中移除，只保留光和影，光影會(huì)給人以真實(shí)感和深度。當(dāng)只剩下灰度時(shí)，我們可以清晰的觀察到明暗之間的差異，這將有助于我們調(diào)整色彩之間的明暗程度和透明度，以搭配出更和諧的配色。

　　我們中的許多人看到的顏色不夠飽和或不夠鮮艷，這是正常的，因?yàn)槭澜绮⒉煌昝?，顏色也不完美。我們大部分人都來自于一個(gè)只使用CMYK和顏色有限制的物理世界。

　　圖片來源于網(wǎng)絡(luò)

　　提升UI設(shè)計(jì)質(zhì)感的小技巧

　　1、使用色彩和字重來創(chuàng)造層次結(jié)構(gòu)，而不是單純的大小對(duì)比。主要內(nèi)容采用深色（諸如標(biāo)題，但是不要用純黑），次要內(nèi)容采用灰色（比如文章發(fā)表日期），輔助性內(nèi)容采用淺灰色（比如頁腳中的版權(quán)聲明）。

　　2、不要再有色背景上使用灰色的文本。降低白色文本的不透明度，基于背景色手工挑選文本的顏色。

　　3、陰影設(shè)計(jì)。相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。

　　4、盡量少使用 Borders。雖然 Border 是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法，使用過多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，甚至?xí)斐苫靵y。

　　5、不要隨意放大小圖標(biāo)。創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了。通過留白和間距來實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。

　　6、增加帶有顏色的單邊邊框提升個(gè)性。

　　7、并非每個(gè)按鈕都需要顏色。

　　以上就是faceui為大家介紹的關(guān)于ui設(shè)計(jì)如何提升界面亮度的相關(guān)內(nèi)容。真正要做好ui設(shè)計(jì)并不簡(jiǎn)單，尤其在一些細(xì)節(jié)上的思考和反復(fù)的對(duì)比，才能做出一個(gè)好的ui作品。