在網頁設計中，選用深色作為背景顏色一直受到人們的爭議。合理的深色系背景設計會使界面變得更加簡單易用，同時還能提高產品的使用效率。相反，不恰當的深色背景，不僅會虧掉你精心的設計，甚至可能會讓用戶對產品產生排斥感。

哪些產品適合使用深色背景設計?

1.運動類

運動讓人聯想到速度和力量，剛好黑色就蘊含了這兩種屬性。在Nike Run Club的APP設計上，其記錄跑步界面中使用了很chock的黑黃配色，再結合粗大和傾斜的字體，讓人感受到運動的速度與激情。

2.高端品類

深色背景往往能營造一種神秘和高檔典雅的感覺，這與高端品牌需要展現的精緻和品質感不謀而合。

3.藝術/視頻/音樂類

藝術類和音頻類產品御用深色界面的用途和高端產品相似，都是為了傳遞產品的設計感和藝術氣質，同時起到產品調性的作用，營造一種更強的氛圍感和沉浸體驗。

4.工具類

若產品內容少，使用深色背景不僅不會影響用戶體驗，反而能讓用戶更聚焦於產品的功能使用。

5.車載系統

車載類產品的UI設計多以深色背景為主，主要是基於安全性考慮，目的是避免駕駛員分散注意力、減少眩目。而且深色背景無論在明亮、陰暗以及黑暗的環境中，都能發揮它最大的作用。

深色界面適合哪些視覺風格?

1.扁平風格和簡約風格

網頁設計如果是以純色色塊或線條為主，不需要做過多的修飾和質感處理，整體視覺乾淨利落，利用線條和字體大小、粗細、明暗等對比，可以避免畫面過於沉悶單調。

2.輕質感設計和炫彩設計

運用漸變色豐富視覺，通常會結合輕量投影或光感的設計，這種形式能很好地刺激用戶視覺感官，適合需要呈現熱烈氣氛的場景，或表現親和力的產品需要。

深色界面設計的注意事項：

1.背景顏色

盡量不要使用純黑色(#000000)的背景，因為這會給人一種很「沉悶」的感覺，更不要搭配白色字體，純黑純白對比太強烈，會有一種眩目的感覺。可以使用微漸變的背景色，或有一定色彩傾向的深色系，這都會讓人感覺更透氣。

2.文字顏色

深色底加白字容易出現視覺殘影，而高對比度文本則會降低頁面的閱讀性。因此在深色背景中，文本的最佳選擇是白色或淺灰色等淺色系，且深色背景和白色字體的對比度不要太高。

3.文字粗細

深色背景搭配過細字體，會讓整個頁面內容變得更難閱讀，看看下圖就知道了!

4.色彩

在深色背景的襯托下，彩色會更加突出，因此設計頁面時不要隨意用色，用色太多會讓用戶丟失焦點，同時也不要選取純度太高的顏色，會很眩目。

5.形狀

深色本身就帶有「酷」和「冷」的氣質，如果再搭配尖銳、硬朗的直角型設計，會更加強化這種印象。而搭配圓角造型，則會中和掉黑色所帶來的冰冷感覺，而增加產品的親和力。

6.圖標設計

線面與可讀性：使用太細的線條會降低界面的可讀性，因此在深色背景下，使用面性圖標會比線性圖標更好識別。

陰暗與區分度：除了線麵，通過調整明暗或使用彩色和無彩色進行區分，同樣能起到區分的效果。

7.層級關係

在淺色界面，我們通常會使用投影方式對界面各元素間進行層級關係的手法;但背景顏色很深時，投影效果不明顯，就可使用扁平化風格和卡片式風格等來表現。

雖然深色背景設計在實操時會出現很多難以把握的地方，而且和淺色界面的設計也存在很多的不一樣。但我們可以通過視覺風格、色彩、大小、形狀等，在保證用戶體驗的同時，使設計更加出彩，慢慢就會對深色背景設計有更深的體會。