淺談UI設(shè)計中妙用無窮的深色系背景
黑暗系背景,或者說深色的背景,在UI設(shè)計中的運用至今都是一個相當(dāng)有爭議的議題。背景選取對于界面的使用效率而言是至關(guān)重要的,合理的背景設(shè)計讓界面更易用,相反,一個不恰當(dāng)?shù)谋尘皠t可能毀掉你精心設(shè)計的UI。今天我們一起來探討一下深色背景在UI設(shè)計中的使用技巧和注意事項。
影響配色方案和背景色選取的因素有很多,深色的背景在網(wǎng)頁和APP UI 界面中運用時,優(yōu)點和缺點一樣明顯。Tubik Studio 的諸多設(shè)計項目的實際經(jīng)驗證明,深色背景本身的確可以帶來良好的用戶體驗,提供極具吸引力的解決方案。所以,我們探討一下如何在UI設(shè)計中最大程度地運用深色系背景。
深色系視覺感知
早在2009年的時候,ProBlogger 就曾做過相應(yīng)的調(diào)研,當(dāng)問及用戶他們喜歡什么樣的博客背景之時,幾乎有一半的用戶反饋喜歡淺色的背景——這很合理,畢竟博客是以文本內(nèi)容為主,淺色的背景 更符合大家的日常閱讀習(xí)慣。不過有意思的地方在于,大概10%的用戶反饋會更喜歡暗色背景,大概三分之一的用戶則認(rèn)為背景的色彩與網(wǎng)站本身的屬性以及內(nèi)容 相關(guān)。同時,這也意味著有相當(dāng)大一部分用戶需求在設(shè)計師設(shè)計過程中被忽略掉了。然而,對于非文字驅(qū)動類的網(wǎng)站和APP當(dāng)中,用戶對于深色調(diào)背景方面的需求 可能還要高。用戶調(diào)研在實際的設(shè)計項目中的重要性,由此可見一斑。
用戶對于背景顏色的感知規(guī)律在Richard H.Hall 和 Patrick Hanna 的科學(xué)研究項目中得 到了證實。早些時候,不同領(lǐng)域的科學(xué)家專門針對網(wǎng)頁的可讀性進行了系統(tǒng)化的實驗和分析,他們得出了這樣的結(jié)論:背景和內(nèi)容兩者之間的對比度和可讀性是成正 比的,白色背景下的黑色文字擁有最好的可讀性。這個道理同樣適用于黑底白字,控制好對比度和清晰度,兩位科學(xué)家又合理的設(shè)計整個實驗。這項研究包含了許多 不同色彩組合的有效性測試,對于設(shè)計師而言有很重要的參考意義。
可讀性方面
用戶體驗領(lǐng)域最著名的先驅(qū)之一 Jacob Nielsen 曾經(jīng)說過:“文字和背景應(yīng)當(dāng)使用高對比度的配色。白底黑字能將可讀性提升到最高,黑底白字在可讀性上的效果幾乎是一樣的。雖然兩種配色方式對比度是相同 的,但是后者還是會讓用戶對文字的識別稍慢一些。受限于配色方案,白色的文本內(nèi)容相比于白底黑字的情況,會顯得更加纖細(xì)、模糊,整體的清晰度其實是不如常 見的黑字。這種情況在純黑背景和純白字體的搭配下,最為明顯?!?/p>
的確,可讀性是影響產(chǎn)品性能的最重要的影響因素,而可讀性又不僅僅只牽涉到文本,所有有意義的文本、標(biāo)識、符號、數(shù)字、圖案都存在可讀性的問題。因此,當(dāng)設(shè)計師準(zhǔn)備使用深色背景的時候,應(yīng)當(dāng)在不同的設(shè)備上測試字體、圖標(biāo)和圖像在深色背景下的實際效果,用來支撐整個設(shè)計。
正如同Awwwards 網(wǎng)站所提供的最佳黑色細(xì)網(wǎng)站設(shè)計合集中所展示的,這些優(yōu)秀的黑色系網(wǎng)站和APP頁面為了在黑色背景上正常顯示內(nèi)容,都精心挑選了合理的配色方案。這些優(yōu)秀的案例為我們貢獻(xiàn)出了如下經(jīng)驗:
- 由于深色的背景會“吸收”其他元素的“光芒”,所以元素之內(nèi)、元素和元素之間要留有足夠的空間,確保識別度;
- 較長篇幅的文本具有更好的可讀性,對于用戶更容易消化
- 行間距和文本的長度對于可讀性有顯著的影響,尤其是在深色的背景之下,所以篇幅長短、字間距、行間距需要仔細(xì)考慮
- 深色并不意味著是純粹的黑色,不同深淺的背景和文字的搭配帶來的效果也不盡相同,所以應(yīng)當(dāng)懷著開放的心態(tài)多加試驗
- 色度、漸變和光暈對于可讀性有著顯著的影響
- 非襯線字體在深色背景下可讀性更強,襯線字體在深色背景下則會顯得更加優(yōu)雅。在實際設(shè)計過程中應(yīng)當(dāng)運用好兩者的特性。
對比度方面
Webdesign.about.com 所給出的這個對比度的表單很好的為我們展現(xiàn)了不同色彩在對比度上的實際效果。這個表格最有意思的地方在于,黑色這一欄證明了黑色幾乎是唯一一個能和其他色 彩都構(gòu)成不錯對比度的色彩。在進行界面設(shè)計的時候,盡量仔細(xì)測試每種色彩,而黑色的這種特性使得深色背景下的色彩搭配擁有更多的可能性。
同樣的,對比度也是確保可動性的辨識度和清晰的重要因素。
有個早期的調(diào)查是針對對比度和清晰度的,調(diào)查表明:在黑暗的背景下,盡量不要使用純白,應(yīng)當(dāng)將白色淡化為淺灰色,防止極端的對比使白色產(chǎn)生炫光,而 消除炫光至少需要5%的灰色來達(dá)成效果。有趣的地方在于,這樣的灰色在視覺中依然被識別為白色。此外,將字體加粗也是放置白色被黑色“吃掉”的一種辦法。
另外值得一提的是,深色,尤其是黑色比起其他的色彩來的更加深沉厚重,這也使得它更適宜于展示圖片、插畫、海報等內(nèi)容。良好的布局和組織結(jié)構(gòu)下,黑色能夠顯著的提升其他視覺元素的表現(xiàn)力,讓內(nèi)容更具有吸引力。
情緒感知方面
色彩心理學(xué)同樣是需要考慮的因素。背景不僅僅是內(nèi)容展現(xiàn)的平臺,同時也想訪客傳遞著信息。深色通常會顯得更加優(yōu)雅,也會展現(xiàn)出神秘感。從色彩心理學(xué) 上來看,黑色傳遞出高雅、正式、名望、權(quán)力的感覺,這也許是為什么許多大品牌會圍繞著黑色來做視覺設(shè)計,并且使用黑白來做主要的配色方案。熟知黑色的這一 屬性,能夠在UI設(shè)計過程中為客戶提供優(yōu)秀、合理的設(shè)計方案,并能夠給出清晰的解釋。
深色背景的優(yōu)勢
綜上所述,我們可以總結(jié)出深色背景的優(yōu)勢:
- 風(fēng)格化,優(yōu)雅
- 給人神秘的感覺
- 帶來奢華和高端的氛圍
- 擁有廣闊而良好的對比度
- 更容易創(chuàng)造視覺層次感
- 創(chuàng)造視覺深度,讓內(nèi)容更容易被獲取
- 視覺吸引力
值得思考的問題
另外,深色背景也有費神的一面,如果沒有合理規(guī)劃細(xì)節(jié)的話,用戶容易在布局間迷失。所以,我們還有一些問題是值得思考的:
- 用戶研究:針對目標(biāo)用戶進行實際調(diào)查、理論研究和試驗,得出來的數(shù)據(jù)和信息是創(chuàng)造有效和有吸引力的配色方案的基礎(chǔ)。
- 竟品研究:對競爭對手、竟品進行是市場調(diào)研,調(diào)研結(jié)果會影響設(shè)計方案,讓產(chǎn)品更容易被理解,創(chuàng)造更加矚目的設(shè)計。
- 用戶測試:深色系背景在不同的設(shè)備、不同分辨率下的可讀性、清晰度上的實際效果,通過測試尋求影響因素。
- 環(huán)境因素:分析產(chǎn)品可提供給用戶其他方面的支持,以及用戶感到反感的原因等外部因素。
- 內(nèi)容量:頁面的內(nèi)容的覆蓋范圍和背景深淺等典型因素之間的配比,以及它們對于用戶使用體驗、視覺感知的影響。
- 內(nèi)容屬性:深色的背景對于圖形和文本等不同屬性的元素的影響。
譯文來自:優(yōu)設(shè)
原文地址:medium
譯者:@陳子木
- 目前還沒評論,等你發(fā)揮!