Tubik Studio的一篇文章，豐富的設(shè)計(jì)項(xiàng)目經(jīng)驗(yàn)為這家經(jīng)驗(yàn)豐富的設(shè)計(jì)機(jī)構(gòu)提供了獨(dú)特而系統(tǒng)的設(shè)計(jì)細(xì)節(jié)。今天的文章討論了在設(shè)計(jì)中使用深色背景。門(mén)口是什么？看看吧?

在UI設(shè)計(jì)中使用深色背景或深色背景仍然是一個(gè)相當(dāng)有爭(zhēng)議的問(wèn)題。背景選擇對(duì)于界面效率至關(guān)重要。合理的背景設(shè)計(jì)使界面更易于使用。相反，不恰當(dāng)?shù)谋尘翱赡軙?huì)破壞您精心設(shè)計(jì)的UI。今天我們將討論UI設(shè)計(jì)中暗背景的提示和注意事項(xiàng)。

有許多因素會(huì)影響配色方案和背景顏色選擇。在網(wǎng)頁(yè)和APP UI界面中使用時(shí)，黑暗背景與優(yōu)點(diǎn)和缺點(diǎn)一樣明顯。 Tubik Studio的許多設(shè)計(jì)項(xiàng)目的實(shí)踐經(jīng)驗(yàn)證明，深色背景本身確實(shí)可以提供良好的用戶(hù)體驗(yàn)并提供有吸引力的解決方案。那么，讓我們來(lái)探索如何在UI設(shè)計(jì)中充分利用黑暗背景。

　深色系視覺(jué)感知

早在2009年，ProBlogger就做過(guò)研究。當(dāng)被問(wèn)及用戶(hù)喜歡什么樣的博客背景時(shí)，幾乎有一半的用戶(hù)反饋像一個(gè)簡(jiǎn)單的背景——這是非常合理的，畢竟博客是基于文字內(nèi)容的，而且淺色背景更符合每個(gè)人的日常閱讀習(xí)慣。然而，有趣的是，大約10％的用戶(hù)反饋更喜歡深色背景，大約三分之一的用戶(hù)認(rèn)為背景的顏色與網(wǎng)站本身的屬性和內(nèi)容有關(guān)。同時(shí)，這也意味著在設(shè)計(jì)者設(shè)計(jì)過(guò)程中忽略了很大一部分用戶(hù)需求。但是，對(duì)于非文本驅(qū)動(dòng)的網(wǎng)站和應(yīng)用程序，用戶(hù)可能對(duì)暗色背景有更高的需求?？梢钥吹接脩?hù)研究在實(shí)際設(shè)計(jì)項(xiàng)目中的重要性。

Richard H. Hall和Patrick Hanna在科學(xué)研究項(xiàng)目中證實(shí)了用戶(hù)對(duì)背景顏色的感知。早些時(shí)候，不同領(lǐng)域的科學(xué)家系統(tǒng)地試驗(yàn)并分析了網(wǎng)頁(yè)的可讀性。他們得出結(jié)論，背景和內(nèi)容之間的對(duì)比度和可讀性是成正比的。白色背景上的黑色文字具有最佳的可讀性。同樣的原因適用于白底黑，控制對(duì)比度和清晰度，兩位科學(xué)家合理設(shè)計(jì)了整個(gè)實(shí)驗(yàn)。本研究包含許多不同的顏色組合，用于有效性測(cè)試，是設(shè)計(jì)師的重要參考。

可讀性方面

Jacob Nielsen是用戶(hù)體驗(yàn)領(lǐng)域最著名的先驅(qū)之一，曾說(shuō)過(guò)：“文本和背景應(yīng)該使用高對(duì)比度的顏色匹配。白色的黑色文字可以最大限度地提高可讀性，黑色的白色文字對(duì)可讀性幾乎具有相同的效果。雖然兩種配色方案的對(duì)比度相同，但后者會(huì)使用戶(hù)對(duì)文本的識(shí)別速度稍慢。受配色方案的限制，白色文本內(nèi)容比白色黑色文本更加細(xì)長(zhǎng)和模糊，整體清晰度實(shí)際上不如普通的黑色文本。在純黑色背景和純白色字體的組合中，這種情況最為明顯。 ”的

實(shí)際上，可讀性是影響產(chǎn)品性能的最重要因素，可讀性不僅僅涉及文本。所有有意義的文本，徽標(biāo)，符號(hào)，數(shù)字和模式都具有可讀性。因此，當(dāng)設(shè)計(jì)師準(zhǔn)備使用深色背景時(shí)，應(yīng)在不同設(shè)備上測(cè)試深色背景上字體，圖標(biāo)和圖像的實(shí)際效果，以支持整個(gè)設(shè)計(jì)。

如Awwwards網(wǎng)站提供的最佳黑色和精美網(wǎng)站設(shè)計(jì)的集合所示，這些優(yōu)秀的黑色網(wǎng)站和應(yīng)用頁(yè)面精心選擇合理的配色方案，以在黑色背景上顯示內(nèi)容。這些優(yōu)秀案例為我們帶來(lái)了以下經(jīng)驗(yàn)：

·因?yàn)楹诎档谋尘皶?huì)“吸收”“射線(xiàn)”和其他元素，所以元素，元素和元素之間必須有足夠的空間來(lái)確保識(shí)別;

·較長(zhǎng)的文本更易讀，更易于用戶(hù)消化

·行間距和文本長(zhǎng)度對(duì)可讀性有很大影響，特別是在深色背景下，因此需要仔細(xì)考慮長(zhǎng)度，字間距和行間距

·深色并不代表純黑色，不同色調(diào)的背景和文字的效果是不一樣的，所以你應(yīng)該嘗試一種開(kāi)放的心態(tài)

·色度，漸變和光暈對(duì)可讀性有重大影響

·非襯線(xiàn)字體在深色背景上更具可讀性，襯線(xiàn)字體在深色背景上顯得更加優(yōu)雅。兩者的特性應(yīng)該在實(shí)際設(shè)計(jì)過(guò)程中使用。

對(duì)比度方面

Webdesign.about.com給出的對(duì)比形式就是我們?nèi)绾螌?shí)際比較不同顏色的對(duì)比度的一個(gè)很好的例子。關(guān)于這種形式最有趣的是黑色柱子證明黑色幾乎是與其他顏色形成鮮明對(duì)比的唯一顏色。在設(shè)計(jì)界面時(shí)，盡量仔細(xì)測(cè)試每種顏色，這種黑色功能為深色背景上的顏色匹配提供了更多可能性。

同樣，對(duì)比度也是確保移動(dòng)性可見(jiàn)性和清晰度的重要因素。

早期調(diào)查的重點(diǎn)是對(duì)比度和清晰度。調(diào)查顯示，在黑暗的背景下，盡量不要使用純白色。白色應(yīng)該褪色為淺灰色以防止極端對(duì)比度和白色產(chǎn)生眩光。至少需要5％的灰色才能達(dá)到效果。有趣的是，這些灰色在視覺(jué)中仍然被認(rèn)為是白色的。此外，粗體字體也是一種將白色涂成黑色和吃掉的方法。

值得一提的是，深色，特別是黑色，比其他顏色更深更重，這使得它更適合于顯示圖片，插圖，海報(bào)等。憑借良好的布局和組織，黑色可以顯著增強(qiáng)其他視覺(jué)元素的表現(xiàn)力，使內(nèi)容更具吸引力。

　情緒感知方面

色彩心理學(xué)也是一個(gè)需要考慮的因素。背景不僅是內(nèi)容呈現(xiàn)的平臺(tái)，也是訪(fǎng)問(wèn)者的信息。深色通?？雌饋?lái)更優(yōu)雅，顯示神秘感。從色彩心理學(xué)的角度來(lái)看，黑色傳達(dá)了優(yōu)雅，形式，名望和力量的感覺(jué)。這可能就是為什么許多大品牌圍繞黑色進(jìn)行視覺(jué)設(shè)計(jì)并使用黑白作為主要配色方案的原因。了解這種黑色屬性，它可以在UI設(shè)計(jì)過(guò)程中為客戶(hù)提供優(yōu)秀合理的設(shè)計(jì)解決方案，并且可以給出清晰的解釋。

　深色背景的優(yōu)勢(shì)

總之，我們可以總結(jié)深色背景的優(yōu)點(diǎn)：

·風(fēng)格，優(yōu)雅

·給人一種神秘的感覺(jué)

·帶來(lái)奢華和高端氛圍

·具有廣泛而良好的對(duì)比度

·更容易創(chuàng)建視覺(jué)分層

·創(chuàng)建視覺(jué)深度并使內(nèi)容更容易獲得

·視覺(jué)吸引力

　　值得思考的問(wèn)題

另外，深色背景也有一個(gè)麻煩的一面，如果沒(méi)有合理的規(guī)劃細(xì)節(jié)，用戶(hù)很容易迷失在布局之間。所以，我們?nèi)匀挥幸恍┲档每紤]的問(wèn)題：

·用戶(hù)研究：對(duì)目標(biāo)用戶(hù)進(jìn)行實(shí)際調(diào)查，理論研究和實(shí)驗(yàn)，得出的數(shù)據(jù)和信息是創(chuàng)建有效和有吸引力的配色方案的基礎(chǔ)。

·定性研究：對(duì)競(jìng)爭(zhēng)對(duì)手和競(jìng)爭(zhēng)對(duì)手進(jìn)行市場(chǎng)調(diào)查。調(diào)查結(jié)果將影響設(shè)計(jì)計(jì)劃，使產(chǎn)品更易于理解，并創(chuàng)造更引人注目的設(shè)計(jì)。

·用戶(hù)測(cè)試：暗背景的實(shí)際效果對(duì)不同設(shè)備的可讀性和清晰度，不同分辨率，通過(guò)測(cè)試找到影響因素。

·環(huán)境因素：分析產(chǎn)品為用戶(hù)提供外部支持，以及外部因素，如用戶(hù)的怨恨感。

·內(nèi)容：頁(yè)面內(nèi)容的覆蓋范圍與背景因素之間的比例，以及它們對(duì)用戶(hù)體驗(yàn)，視覺(jué)感知的影響。

· content屬性：深色背景對(duì)不同屬性（如圖形和文本）元素的影響。

« 華為Mate 20 Pro支持PC模式，無(wú)線(xiàn)充電，并可通過(guò)GreenLink擴(kuò)展塢進(jìn)行屏蔽！ | 在幕后！數(shù)字銀行品牌升級(jí)的設(shè)計(jì)過(guò)程是完全秘密 »