我們在使用一個(gè)App時(shí)，App的界面設(shè)計(jì)可以說是最影響我們使用體驗(yàn)的一大要素，尤其是在色彩方面，讓人舒適的色彩搭配，總會(huì)讓我們擁有更良好的體驗(yàn)。那么ui設(shè)計(jì)如何提升界面亮度與色彩的和諧性呢？一起跟faceui來了解一下吧。

　　ui設(shè)計(jì)如何提升界面亮度與色彩的和諧性？

　　1、規(guī)則 60 30 10

　　「規(guī)則 60 30 10」，這不是對超模的標(biāo)準(zhǔn)測量，而是成功組合顏色的比例。我們首先要選擇一種主色調(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、飽和度測試顏色和諧度

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

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

ui設(shè)計(jì)如何提升界面亮度（圖片來自網(wǎng)絡(luò)）

　　UI設(shè)計(jì)中如何做出美觀實(shí)用的UI界面？

　　1、深色主題

　　深色主題是過去幾年中最需要的功能之一，蘋果和谷歌都將深色主題作為用戶界面設(shè)計(jì)重要的組成部分。深色主題降低了界面亮度，在深色環(huán)境中給用戶提供了適度安全感，也最大限度減少了用戶的眼疲勞。在設(shè)計(jì)產(chǎn)品的深色主題時(shí)需要了解8個(gè)技巧：避免純黑色、避免在深色主題上使用飽和色、符合無障礙色彩對比標(biāo)準(zhǔn)、文本使用“打開”顏色、不同的背景對顏色的感知也不同要考慮設(shè)計(jì)的情感方面、深度溝通、允許用戶從普通模式切換到深色模式、測試你在淺色和深色外觀的設(shè)計(jì)。

　　2、 動(dòng)效設(shè)計(jì)&微交互

　　我們知道如果加入動(dòng)畫會(huì)讓網(wǎng)頁內(nèi)容增大，即使未來是5G網(wǎng)絡(luò)也會(huì)讓網(wǎng)頁加載時(shí)間增加，這對于使用手機(jī)訪問的用戶來說，是非常致命的，2020年依然建議使用微動(dòng)效即可。一個(gè)優(yōu)秀的交互微動(dòng)效，在設(shè)計(jì)上應(yīng)該遵循以下三個(gè)核心原則：1）克制有度，控制時(shí)長和出現(xiàn)頻率，不增加額外操作，不干擾用戶；2）清晰聚焦，重點(diǎn)突出、符合邏輯，給與用戶充足的閱讀時(shí)間；3）自然流暢，保持視覺連續(xù)性，緩動(dòng)過渡，做到不卡、不閃、不跳。

　　3、漸變

　　漸變給設(shè)計(jì)師帶來了更大的創(chuàng)作自由，還給設(shè)計(jì)引入了深度和維度，解決了扁平設(shè)計(jì)中一切都「太平」了的問題。漸變有幾種基礎(chǔ)類型，他們都會(huì)有一個(gè)中心起點(diǎn)，顏色從這里開始，然后逐漸融入其他顏色。如線性、徑向、錐形漸變。在設(shè)計(jì)漸變時(shí)一定要注意這幾點(diǎn)：1）注意漸變顏色的選?。?）漸變過程中注意平滑過渡；3）注意情緒的傳達(dá)；4）不要忘記顏色對比；5）選擇順手的漸變工具。

　　4、UI插畫

　　在UI設(shè)計(jì)中使用插畫不僅能夠承載充足的信息量，在一定程度上滿足公眾的情感訴求，還更容易強(qiáng)調(diào)UI界面的故事性和趣味性，加入插畫元素的UI界面更容易給公眾帶來愉悅的情緒體驗(yàn)

ui設(shè)計(jì)如何提升界面亮度（圖片來自網(wǎng)絡(luò)）

　　5個(gè)技巧讓界面更加干凈

　　1、減少線條

　　頁面上面線條太多，會(huì)讓人覺得頁面復(fù)雜，線條好了，看起來就會(huì)清爽干凈。

　　2、合理留白，拉開信息層級

　　合理的留白可以增加產(chǎn)品的品質(zhì)，也可以讓主題更加突出，有些頁面上面有很多元素，看上去非常擁擠，如果適當(dāng)留白，看上去更加清爽。

　　3、運(yùn)用卡片整合信息

　　卡片式設(shè)計(jì)將信息、圖像歸類整合到一個(gè)方塊里，清晰直觀又避免頁面因?yàn)樾畔⒍喽y?？ㄆ呐帕蟹绞绞前戳谢蛘咝械姆绞竭M(jìn)行對齊展示，視線沿著橫向或者縱向?yàn)g覽能快速找到想要的信息，此外，這種固定大小的卡片方塊也有利于柵格化排版。

　　4、加強(qiáng)行間距，+4原則或黃金比例

　　行間距大家都知道，但是具體如何設(shè)計(jì)很多人不知道，一般常用規(guī)則是+4，比如文字大小是12PX，那么行間距就是16，依次類推文字是14那么行間距就是18。

　　5、加大字間距：0.1或者0.2勿過大

　　字間距同樣很重要，特別是做英文排版的時(shí)候，同樣的內(nèi)容，字間距和行間距不合適，界面看起來就會(huì)相差很多，有的看著很舒服，有的看起來說不出來哪里不對。

　　ui設(shè)計(jì)如何提升界面亮度與色彩之間的配合對于每一位設(shè)計(jì)者來說都是難題。也只有經(jīng)過不斷的嘗試，我們才能磨合出最優(yōu)秀的作品。如果各位還想學(xué)習(xí)更多有關(guān)內(nèi)容，可以長期關(guān)注faceui。