又是一篇來(lái)自Tubik Studio 的文章，豐富的設(shè)計(jì)項(xiàng)目經(jīng)驗(yàn)使得這家資深設(shè)計(jì)機(jī)構(gòu)對(duì)于設(shè)計(jì)的每一個(gè)細(xì)節(jié)都有著獨(dú)特而系統(tǒng)的見解。今天的文章聊的就是深色系背景在設(shè)計(jì)中的運(yùn)用踪央，這當(dāng)中有什么門道呢？看下去~

黑暗系背景，或者說深色的背景拄衰，在UI設(shè)計(jì)中的運(yùn)用至今都是一個(gè)相當(dāng)有爭(zhēng)議的議題。背景選取對(duì)于界面的使用效率而言是至關(guān)重要的饵骨，合理的背景設(shè)計(jì)讓界面更易用翘悉，相反，一個(gè)不恰當(dāng)?shù)谋尘皠t可能毀掉你精心設(shè)計(jì)的UI居触。今天我們一起來(lái)探討一下深色背景在UI設(shè)計(jì)中的使用技巧和注意事項(xiàng)妖混。

影響配色方案和背景色選取的因素有很多，深色的背景在網(wǎng)頁(yè)和APP UI 界面中運(yùn)用時(shí)轮洋，優(yōu)點(diǎn)和缺點(diǎn)一樣明顯制市。Tubik Studio 的諸多設(shè)計(jì)項(xiàng)目的實(shí)際經(jīng)驗(yàn)證明，深色背景本身的確可以帶來(lái)良好的用戶體驗(yàn)弊予，提供極具吸引力的解決方案祥楣。所以，我們探討一下如何在UI設(shè)計(jì)中最大程度地運(yùn)用深色系背景块促。

深色系視覺感知

早在2009年的時(shí)候荣堰，ProBlogger就曾做過相應(yīng)的調(diào)研，當(dāng)問及用戶他們喜歡什么樣的博客背景之時(shí)竭翠，幾乎有一半的用戶反饋喜歡淺色的背景——這很合理振坚，畢竟博客是以文本內(nèi)容為主，淺色的背景 更符合大家的日常閱讀習(xí)慣斋扰。不過有意思的地方在于渡八，大概10%的用戶反饋會(huì)更喜歡暗色背景啃洋，大概三分之一的用戶則認(rèn)為背景的色彩與網(wǎng)站本身的屬性以及內(nèi)容 相關(guān)。同時(shí)屎鳍，這也意味著有相當(dāng)大一部分用戶需求在設(shè)計(jì)師設(shè)計(jì)過程中被忽略掉了宏娄。然而，對(duì)于非文字驅(qū)動(dòng)類的網(wǎng)站和APP當(dāng)中逮壁，用戶對(duì)于深色調(diào)背景方面的需求 可能還要高孵坚。用戶調(diào)研在實(shí)際的設(shè)計(jì)項(xiàng)目中的重要性，由此可見一斑窥淆。

用戶對(duì)于背景顏色的感知規(guī)律在Richard H.Hall 和 Patrick Hanna 的科學(xué)研究項(xiàng)目中得 到了證實(shí)卖宠。早些時(shí)候，不同領(lǐng)域的科學(xué)家專門針對(duì)網(wǎng)頁(yè)的可讀性進(jìn)行了系統(tǒng)化的實(shí)驗(yàn)和分析忧饭，他們得出了這樣的結(jié)論：背景和內(nèi)容兩者之間的對(duì)比度和可讀性是成正 比的扛伍，白色背景下的黑色文字擁有最好的可讀性。這個(gè)道理同樣適用于黑底白字词裤，控制好對(duì)比度和清晰度刺洒，兩位科學(xué)家又合理的設(shè)計(jì)整個(gè)實(shí)驗(yàn)。這項(xiàng)研究包含了許多 不同色彩組合的有效性測(cè)試吼砂，對(duì)于設(shè)計(jì)師而言有很重要的參考意義逆航。

可讀性方面

用戶體驗(yàn)領(lǐng)域最著名的先驅(qū)之一 Jacob Nielsen 曾經(jīng)說過：“文字和背景應(yīng)當(dāng)使用高對(duì)比度的配色。白底黑字能將可讀性提升到最高渔肩，黑底白字在可讀性上的效果幾乎是一樣的纸泡。雖然兩種配色方式對(duì)比度是相同 的，但是后者還是會(huì)讓用戶對(duì)文字的識(shí)別稍慢一些赖瞒。受限于配色方案，白色的文本內(nèi)容相比于白底黑字的情況蚤假，會(huì)顯得更加纖細(xì)栏饮、模糊，整體的清晰度其實(shí)是不如常 見的黑字磷仰。這種情況在純黑背景和純白字體的搭配下袍嬉，最為明顯≡钇剑”

的確伺通，可讀性是影響產(chǎn)品性能的最重要的影響因素，而可讀性又不僅僅只牽涉到文本逢享，所有有意義的文本罐监、標(biāo)識(shí)、符號(hào)瞒爬、數(shù)字弓柱、圖案都存在可讀性的問題沟堡。因此，當(dāng)設(shè)計(jì)師準(zhǔn)備使用深色背景的時(shí)候矢空，應(yīng)當(dāng)在不同的設(shè)備上測(cè)試字體航罗、圖標(biāo)和圖像在深色背景下的實(shí)際效果，用來(lái)支撐整個(gè)設(shè)計(jì)屁药。

正如同Awwwards 網(wǎng)站所提供的最佳黑色細(xì)網(wǎng)站設(shè)計(jì)合集中所展示的粥血，這些優(yōu)秀的黑色系網(wǎng)站和APP頁(yè)面為了在黑色背景上正常顯示內(nèi)容，都精心挑選了合理的配色方案酿箭。這些優(yōu)秀的案例為我們貢獻(xiàn)出了如下經(jīng)驗(yàn)：

·由于深色的背景會(huì)“吸收”其他元素的“光芒”复亏，所以元素之內(nèi)、元素和元素之間要留有足夠的空間七问，確保識(shí)別度蜓耻；

·較長(zhǎng)篇幅的文本具有更好的可讀性，對(duì)于用戶更容易消化

·行間距和文本的長(zhǎng)度對(duì)于可讀性有顯著的影響械巡，尤其是在深色的背景之下刹淌，所以篇幅長(zhǎng)短、字間距讥耗、行間距需要仔細(xì)考慮

·深色并不意味著是純粹的黑色有勾，不同深淺的背景和文字的搭配帶來(lái)的效果也不盡相同，所以應(yīng)當(dāng)懷著開放的心態(tài)多加試驗(yàn)

·色度古程、漸變和光暈對(duì)于可讀性有著顯著的影響

·非襯線字體在深色背景下可讀性更強(qiáng)蔼卡，襯線字體在深色背景下則會(huì)顯得更加優(yōu)雅。在實(shí)際設(shè)計(jì)過程中應(yīng)當(dāng)運(yùn)用好兩者的特性挣磨。

對(duì)比度方面

Webdesign.about.com所給出的這個(gè)對(duì)比度的表單很好的為我們展現(xiàn)了不同色彩在對(duì)比度上的實(shí)際效果雇逞。這個(gè)表格最有意思的地方在于，黑色這一欄證明了黑色幾乎是唯一一個(gè)能和其他色 彩都構(gòu)成不錯(cuò)對(duì)比度的色彩茁裙。在進(jìn)行界面設(shè)計(jì)的時(shí)候塘砸，盡量仔細(xì)測(cè)試每種色彩，而黑色的這種特性使得深色背景下的色彩搭配擁有更多的可能性晤锥。

同樣的掉蔬，對(duì)比度也是確保可動(dòng)性的辨識(shí)度和清晰的重要因素矾瘾。

有個(gè)早期的調(diào)查是針對(duì)對(duì)比度和清晰度的女轿，調(diào)查表明：在黑暗的背景下，盡量不要使用純白壕翩，應(yīng)當(dāng)將白色淡化為淺灰色蛉迹，防止極端的對(duì)比使白色產(chǎn)生炫光，而 消除炫光至少需要5%的灰色來(lái)達(dá)成效果戈泼。有趣的地方在于婿禽，這樣的灰色在視覺中依然被識(shí)別為白色赏僧。此外，將字體加粗也是放置白色被黑色“吃掉”的一種辦法扭倾。

另外值得一提的是淀零，深色，尤其是黑色比起其他的色彩來(lái)的更加深沉厚重膛壹，這也使得它更適宜于展示圖片驾中、插畫、海報(bào)等內(nèi)容模聋。良好的布局和組織結(jié)構(gòu)下肩民，黑色能夠顯著的提升其他視覺元素的表現(xiàn)力，讓內(nèi)容更具有吸引力链方。

情緒感知方面

色彩心理學(xué)同樣是需要考慮的因素持痰。背景不僅僅是內(nèi)容展現(xiàn)的平臺(tái)，同時(shí)也想訪客傳遞著信息祟蚀。深色通常會(huì)顯得更加優(yōu)雅工窍，也會(huì)展現(xiàn)出神秘感。從色彩心理學(xué) 上來(lái)看前酿，黑色傳遞出高雅患雏、正式、名望罢维、權(quán)力的感覺淹仑，這也許是為什么許多大品牌會(huì)圍繞著黑色來(lái)做視覺設(shè)計(jì)，并且使用黑白來(lái)做主要的配色方案肺孵。熟知黑色的這一 屬性匀借，能夠在UI設(shè)計(jì)過程中為客戶提供優(yōu)秀、合理的設(shè)計(jì)方案平窘，并能夠給出清晰的解釋怀吻。

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

綜上所述，我們可以總結(jié)出深色背景的優(yōu)勢(shì)：

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

·給人神秘的感覺

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

·擁有廣闊而良好的對(duì)比度

·更容易創(chuàng)造視覺層次感

·創(chuàng)造視覺深度，讓內(nèi)容更容易被獲取

·視覺吸引力

值得思考的問題

另外猿棉，深色背景也有費(fèi)神的一面磅叛，如果沒有合理規(guī)劃細(xì)節(jié)的話，用戶容易在布局間迷失萨赁。所以弊琴，我們還有一些問題是值得思考的：

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

·竟品研究：對(duì)競(jìng)爭(zhēng)對(duì)手紫皇、竟品進(jìn)行是市場(chǎng)調(diào)研，調(diào)研結(jié)果會(huì)影響設(shè)計(jì)方案腋寨，讓產(chǎn)品更容易被理解聪铺，創(chuàng)造更加矚目的設(shè)計(jì)。

·用戶測(cè)試：深色系背景在不同的設(shè)備萄窜、不同分辨率下的可讀性铃剔、清晰度上的實(shí)際效果，通過測(cè)試尋求影響因素查刻。

·環(huán)境因素：分析產(chǎn)品可提供給用戶其他方面的支持键兜，以及用戶感到反感的原因等外部因素。

·內(nèi)容量：頁(yè)面的內(nèi)容的覆蓋范圍和背景深淺等典型因素之間的配比穗泵，以及它們對(duì)于用戶使用體驗(yàn)普气、視覺感知的影響。

·內(nèi)容屬性：深色的背景對(duì)于圖形和文本等不同屬性的元素的影響佃延。

原文地址：medium

【聲明：本文為圖片資源來(lái)源與網(wǎng)絡(luò)现诀，如有侵權(quán)，請(qǐng)聯(lián)系小編及時(shí)處理】

微信：xuedesigning

微博：Z丶J先生

一起學(xué)設(shè)計(jì)與前端知識(shí)

關(guān)注訂閱苇侵；有免費(fèi)全面前端和UI設(shè)計(jì)視頻資源