界面的配色方案將對(duì)設(shè)計(jì)產(chǎn)生持久的影響，近些年在UI設(shè)計(jì)界刮起了一股深色UI風(fēng)潮，今天我們的文章就講為大家詳細(xì)講解深色UI界面的使用場(chǎng)景以及需要注意的技巧。

幾乎默認(rèn)情況下，我們通常的選擇界面都是白色背景。選擇明亮的背景是有充分的理由，其中包括對(duì)比度，文本可讀性以及使用各種微妙顏色的能力。根據(jù)許多科學(xué)研究，最佳可讀性是在白色背景上使用黑色文本。品牌宣傳也可能會(huì)影響背景選擇，因?yàn)楣净諛?biāo)和顏色不適用于深色調(diào)色板。

大多數(shù)研究表明，淺色背景上的深色文本優(yōu)于深色背景上的淺色文本，即它們更易于閱讀。在一項(xiàng)著名的研究中，當(dāng)受試者在深色背景上閱讀淺色字符時(shí)，與淺色背景上的深色字符相比，前者的視覺(jué)疲勞要大得多。

還有一種原因是滿足人們的期望，人們習(xí)慣了在與圖像一起呈現(xiàn)的白色背景上，看到用深色墨水渲染的各種內(nèi)容。人們從開(kāi)始閱讀報(bào)紙和雜志到現(xiàn)在，已有350多年的歷史了。

但是當(dāng)項(xiàng)目需要時(shí)，設(shè)計(jì)師也可能會(huì)出于多種原因選擇使用深色方案。通常是一種美學(xué)或者功能需要的選擇，意在傳達(dá)戲劇性、引起情感，或者設(shè)計(jì)師可能希望將設(shè)計(jì)與品牌融合在一起，或者確保視覺(jué)內(nèi)容脫穎而出。

設(shè)計(jì)師選擇深色背景，將面臨許多挑戰(zhàn)，包括可用性問(wèn)題，比如可讀性、易讀性和對(duì)比度等。要考慮的主要方面不僅是文本和背景之間的足夠?qū)Ρ龋€必須考慮上下文和環(huán)境，以及可能應(yīng)用的設(shè)備。

部分深色的UI旨在最大程度地減少眼睛疲勞。隨著數(shù)字技術(shù)的發(fā)展，我們?cè)谝惶熘械拇蟛糠謺r(shí)間都盯著屏幕。眼疲勞是一種常見(jiàn)病，每天都會(huì)影響數(shù)百萬(wàn)人。過(guò)度使用計(jì)算機(jī)、長(zhǎng)期暴露在強(qiáng)光下，可能引起頭痛、頸部疼痛、視力模糊和灼傷/刺痛眼睛。根據(jù)一項(xiàng)研究，超過(guò)83％的美國(guó)人每天使用數(shù)字設(shè)備的時(shí)間超過(guò)兩個(gè)小時(shí)，其中60.5％的人報(bào)告他們遇到了眼疲勞的癥狀。

像是SaaS產(chǎn)品和多媒體編輯應(yīng)用程序因?yàn)橥ǔ?huì)連續(xù)使用了多個(gè)小時(shí)，所以許多產(chǎn)品均采用深色主題的UI設(shè)計(jì)，以減輕眼睛疲勞并支持視覺(jué)清晰度。但是這種方法同樣需要對(duì)設(shè)計(jì)方向進(jìn)行仔細(xì)的前期評(píng)估。

而大多數(shù)開(kāi)發(fā)人員使用帶有顏色編碼語(yǔ)法的黑屏來(lái)減少眼睛疲勞。正如Toptal開(kāi)發(fā)人員Kevin Bloch所說(shuō)的那樣：“黑色背景可以減輕眼睛疲勞，并使自動(dòng)顏色編碼更易于閱讀，一目了然，從而使編碼速度更快?！?/span>

大多數(shù)與娛樂(lè)相關(guān)的用戶界面（智能電視，游戲機(jī)以及電視和電影應(yīng)用程序）傾向于具有深色主題的用戶界面設(shè)計(jì)。這是有充分理由的，大多數(shù)與娛樂(lè)有關(guān)的活動(dòng)都發(fā)生在晚上，從6-10英尺的距離觀看，并在光線昏暗的房間中觀看，換句話說(shuō)，屏幕與環(huán)境相匹配。此外色彩豐富的內(nèi)容（例如，封面和促銷(xiāo)）在深色主題的UI上非常引人注目。

使用深色UI的目的是匹配活動(dòng)的背景，“天黑了，我放松了，我想看電視?！?淺色界面下的數(shù)字屏幕在存在明亮像素的地方都會(huì)發(fā)出光線。因此明亮的UI會(huì)照亮整個(gè)房間，考慮到該活動(dòng)實(shí)際需求，用戶自然不希望有這樣的效果。在這種情況下，深色UI設(shè)計(jì)可以很好匹配使用環(huán)境和場(chǎng)景：設(shè)備，內(nèi)容，活動(dòng)和環(huán)境。

蘋(píng)果iTunes iOS應(yīng)用

游戲應(yīng)用程序界面也傾向于較暗的主題，黑色的調(diào)色板更適合游戲環(huán)境和玩家進(jìn)行游戲的環(huán)境。黑色背景設(shè)計(jì)增強(qiáng)了醒目的視覺(jué)效果，引入了神秘感，具有更好的對(duì)比度，并支持視覺(jué)層次結(jié)構(gòu)。

在正確的環(huán)境、應(yīng)用程序和使用需求中，黑色背景的UI才有意義。使用深色UI始終需要考慮可能使用的場(chǎng)景，選擇應(yīng)取決于內(nèi)容和上下文：什么時(shí)候，什么地方以及什么設(shè)備，例如包括：

·為視覺(jué)效果帶來(lái)強(qiáng)烈而生動(dòng)的外觀

·彰顯時(shí)尚，優(yōu)雅，奢華和威望的感覺(jué)

·營(yíng)造一種陰謀和神秘感

·以最小的注意力幫助集中和引導(dǎo)用戶的注意力

·支持視覺(jué)層次結(jié)構(gòu)和信息體系結(jié)構(gòu)

如果可以使用深色UI，應(yīng)盡量具備以下操作：

·當(dāng)品牌配色方案有保證時(shí)

·當(dāng)設(shè)計(jì)稀疏且極簡(jiǎn)的內(nèi)容類(lèi)型很少時(shí)

·適用于上下文和使用時(shí)，例如夜間娛樂(lè)應(yīng)用程序

·為了減少眼睛疲勞，例如長(zhǎng)時(shí)間使用的分析頁(yè)面

·引起一種情感，例如一種陰謀詭計(jì)的感覺(jué)

·創(chuàng)造醒目的戲劇性外觀

·營(yíng)造奢華感和威望感

·支持視覺(jué)層次

以下情況最好盡量遠(yuǎn)離深色的用戶界面：

·當(dāng)文本很多時(shí)（在深色背景上閱讀很困難）

·屏幕上有很多混合內(nèi)容時(shí)

·對(duì)于具有大量表單，組件和小部件的B2B應(yīng)用程序

·當(dāng)設(shè)計(jì)需要多種顏色時(shí)

物理學(xué)家說(shuō)，黑色并不是真正的顏色，就是沒(méi)有光。從移動(dòng)屏幕到大型電視，人們都可以看到Dark UI設(shè)計(jì)的應(yīng)用范圍很廣，且深色UI已經(jīng)成為了越來(lái)越受歡迎的一種設(shè)計(jì)趨勢(shì)，可以說(shuō)具有深色UI（與功能，優(yōu)雅和神秘感相關(guān)聯(lián)）的數(shù)字產(chǎn)品是未來(lái)的一種趨勢(shì)。黑暗主題可以表達(dá)力量、奢華、精致和優(yōu)雅，但是這也為Dark UI設(shè)計(jì)帶來(lái)很多挑戰(zhàn)，并且如果實(shí)施不當(dāng)也無(wú)法滿足期望。本周UXD將開(kāi)設(shè)深色UI專(zhuān)題課程，幫助同學(xué)們?nèi)媪私馍钌缑嬷谱鞯暮诵募记伞?/span>

 講座時(shí)間 

Heize

畢業(yè)于英國(guó)拉夫堡大學(xué)設(shè)計(jì)創(chuàng)新專(zhuān)業(yè)碩士，本科為工業(yè)設(shè)計(jì)背景。UXD全職講師，負(fù)責(zé)UXD產(chǎn)品、交互、創(chuàng)新技術(shù)方面課程的教學(xué)和開(kāi)發(fā)，同時(shí)負(fù)責(zé)海外課程、資訊的引進(jìn)和發(fā)布工作。