AAA教育

影響配色方案的因素

正如同我們所熟知的，配色方案的最終確定受到多方面因素的影響，它不僅涉及到用戶，而且還受到業(yè)務(wù)目標(biāo)，市場條件和當(dāng)前設(shè)計(jì)趨勢的影響。讓我們簡單回顧一下在這個(gè)問題上必須考慮的基本因素吧。

 

可讀性和易讀性

這兩個(gè)概念都和文本內(nèi)容的感知直接相關(guān)?？勺x性指的是人們是否可以輕松閱讀單詞、短語和內(nèi)容塊的高低，而易讀性則指的是用戶能否便捷快速地識別特定字體中字母的度量。

在進(jìn)行配色的時(shí)候，應(yīng)該將這些因素納入到考慮當(dāng)中來，特別是涉及到需要填充大量文本的界面的時(shí)候。配色方案對于界面中文本的感知有效度有著至關(guān)重要的影響。在白色或者淺色的背景上，顯示黑色的文本，比起在黑色的背景上顯示白色的文本，看起來要更顯著、清晰度也更大一些。較差的可讀性將會直接帶來更差的用戶體驗(yàn)，用戶無法快速掃視數(shù)據(jù)，甚至?xí)谝曈X上產(chǎn)生莫名其妙的混亂，甚至導(dǎo)致用戶錯(cuò)過關(guān)鍵信息。

這是否意味著淺色背景的可讀性更強(qiáng)呢？并不一定。著名的UX設(shè)計(jì)大師 Jacob Nielsen 曾經(jīng)提到過：“文字和背景之間應(yīng)該采用高對比度的色彩。白色背景上的黑色文字（正文本）和黑色背景上的白色文字（負(fù)文本），在對比度和易讀性上幾乎是完全一樣，但是后者和日常的閱讀習(xí)慣并不一致，這種倒置的配色方案會讓人在閱讀速度上更慢。當(dāng)文本比純黑更淺一些，而背景并非純白的時(shí)候，易讀性會相應(yīng)的變得更弱一些。”如果設(shè)計(jì)師對于不同的配色和字體特性上有足夠的了解和探索，很多配色方案都可以具備良好的易讀性和可讀性。

不過，在上世紀(jì)80年代的一系列科學(xué)研究表明，對于大量的文本而言，淺色背景是更多用戶的選擇。為了研究廣告背后的運(yùn)作機(jī)制，D.Bauer 和 C.R.Cavonius 在他們的文章《Improving the legibility of visual display units through contrast reversal》中分享了他們的探索結(jié)果。文中特別提到一點(diǎn)，相比于深色背景和淺色文本，他們發(fā)現(xiàn)參與調(diào)研的用戶在白色背景深色文本上的閱讀正確率高出了26%。

為什么會這樣？來自 Sensory Perception and Interaction Research Group 的 Jason Harrison 是這樣解釋這一現(xiàn)象的：雙眼有散光（根據(jù)調(diào)研大概50%的人會出現(xiàn)這樣的狀況）的用戶會更難以感知黑紙白字中的文本內(nèi)容。在感知屏幕內(nèi)容的時(shí)候，如果是白底黑字，雙眼虹膜會有更多的部分會選擇閉合，晶狀體的形變相對較少。在黑底白字的情況下，虹膜會有更多的部分會選擇開合，提高對光線的吸收，晶狀體的形變會更大，相應(yīng)的結(jié)果是眼睛更容易模糊失焦。因此，如果界面中包含大量的文本內(nèi)容，使用的淺色背景和深色文本對于用戶會更加友好。

可訪問性

可訪問性通常指的是 Web 頁面或者 APP 能否盡可能多地貼合更為廣泛的用戶需求，讓普通用戶和有障礙的用戶都能順暢地使用。因此，「用還是不用」是取決于用戶的需求和偏好，而不是用戶的能力。配色方案對于產(chǎn)品的可訪問性的影響并不小。在選擇配色的時(shí)候，設(shè)計(jì)師需要考慮不同的年齡，特殊的需求和有障礙的用戶的需求。這些用戶也應(yīng)當(dāng)可以決定背景和布局元素的配色選擇。用戶調(diào)研將會為 UX設(shè)計(jì)師提供數(shù)據(jù)，讓配色方案更加貼近用戶的真實(shí)需求。

 

清晰度

清晰度是用來界定屏幕或者界面上的所有核心細(xì)節(jié)的清晰程度。在UI界面中，導(dǎo)航是否簡單直觀和清晰度就有著直接的關(guān)系：用戶能否快速掃描布局并且找到關(guān)鍵的信息區(qū)域和交互元素，用戶是否需要花費(fèi)很多精力才能找到他們想要的信息。如果這方面沒有得到正確的測試，信息和視覺層級可能設(shè)計(jì)上就是一團(tuán)糟。對比度在這個(gè)環(huán)節(jié)起到了相當(dāng)重要的作用，而配色方案的好壞直接影響著這個(gè)部分的效果。想要確保界面清晰、對比充足，可以通過「模糊效果」來對整個(gè)布局進(jìn)行檢驗(yàn)，看看是否重要的內(nèi)容都更容易被注意到。

響應(yīng)

用戶使用任何設(shè)備是否都能正常使用網(wǎng)頁或者 APP 的功能，這就涉及到整個(gè)設(shè)計(jì)的響應(yīng)性了。有的設(shè)計(jì)在高分辨率的顯示器下看起來非常不錯(cuò)，在小屏幕上卻顯得捉襟見肘。這就涉及到配色方案本身的適應(yīng)性和響應(yīng)性了，有些配色可能在日常的使用或者某些狀況下失去美感。配色本身會涉及到色彩、形狀和內(nèi)容的感知，所以在最終設(shè)計(jì)完成之前，要盡量多在不同的設(shè)備上進(jìn)行測試。

 

環(huán)境

在目標(biāo)用戶確定的情況下，Web 和移動端的使用場景其實(shí)是可以預(yù)見到的。比如在自然光下，移動端設(shè)備上，深色背景很容易產(chǎn)生良好的反光效果，特別是在平板和手機(jī)上。而相反，在光線不好的環(huán)境下，深色的背景可讀性并不好。色彩的組合，對比度和色調(diào)在不同的環(huán)境下會產(chǎn)生截然不同的效果，這一點(diǎn)值得注意。

配色方案的選取注意事項(xiàng)

考慮到上面的一系列因素，下面我將提供一個(gè)簡短的步驟清單，幫你為網(wǎng)頁和移動端設(shè)備挑選合理的配色方案。

• 明確界面設(shè)計(jì)的目標(biāo)。確定界面的主要組成和核心的功能點(diǎn)之后，你才可以更加合理地選擇配色方案。如果 UI 界面是文本驅(qū)動型的（博客、新聞、電子閱讀器等），淺色背景往往是更合理有效的選擇。淺色的背景會使得整個(gè)屏幕顯得寬敞而又大氣，讓用戶更專注于其中的內(nèi)容。另一方面，如果界面是視覺驅(qū)動型的，并且是以圖片為主的話，使用深色背景搭配明亮的色彩，可能是更好的解決方案，因?yàn)檫@樣會讓圖片等視覺內(nèi)容更加突出，并且讓整個(gè)布局顯得更為時(shí)尚。
• 分析你的目標(biāo)受眾。通過界定和分析目標(biāo)受眾往往能夠讓設(shè)計(jì)師更清楚要先做什么后做什么。了解潛在用戶，了解他們想從你的網(wǎng)站或者 APP 中獲得什么，這樣才能為可用、有用且有吸引力的界面奠定堅(jiān)實(shí)的基礎(chǔ)。中年人和老年人會更加喜歡淺色為主的配色方案，這樣的界面對他們而言更加直觀，也更加易于導(dǎo)航。年輕人更加喜歡原創(chuàng)和時(shí)尚的深色背景。青少年和兒童更喜歡明亮的背景色彩和有趣的細(xì)節(jié)。以目標(biāo)受眾為中心來設(shè)計(jì)，可以讓設(shè)計(jì)決策更加明晰。
• 研究競爭對手。要記住一件事情，你的產(chǎn)品所面對的通常都不是藍(lán)海，而是競爭激烈的紅海。配色方案的選取將會直接影響到你的產(chǎn)品在競爭中看起來是否足夠突出，會影響用戶初次使用的時(shí)候，是否愿意與之互動?；ㄙM(fèi)時(shí)間在探索已有的產(chǎn)品上，能夠幫你節(jié)省時(shí)間和精力。
• 測試。基于用戶群體、可用性、吸引力等不同因素對配色方案的大概方向確定之后，每個(gè)設(shè)計(jì)方案都應(yīng)該在不同的分辨率，不同的屏幕以及不同條件下進(jìn)行適當(dāng)?shù)臏y試。在產(chǎn)品投放市場之前，之前不間斷的測試會揭示出配色方案的強(qiáng)弱，如果設(shè)計(jì)方案的效率低下，可能會給用戶留下不好的第一印象。

妥協(xié)的解決方案

有時(shí)候，最終的解決方案并沒有辦法完全遵循計(jì)劃中的方案，妥協(xié)往往是不可避免的。

深色界面，白色標(biāo)簽和文本

正如同我們在之前的設(shè)計(jì)趨勢的文章當(dāng)中所提到的，在深色系背景之下，使用白色的標(biāo)簽和區(qū)塊來承載文本，這可以確保文本的可讀性。在設(shè)計(jì)的時(shí)候，核心的信息文本會搭配一個(gè)淺色的區(qū)塊背景，和深色背景隔離開來，這種處理方式實(shí)用且優(yōu)雅。

將配色的權(quán)利交給用戶

另外一種方法是讓用戶來選擇配色方案，而我們在設(shè)計(jì) Upper 這個(gè)應(yīng)用的時(shí)候就是這么做的，這個(gè)待辦事項(xiàng)應(yīng)用當(dāng)中，用戶有選擇配色方案的權(quán)利。一方面，這種方式對于用戶更加友好，并且根據(jù)不同的可用性問題以及用戶的審美偏好，提供個(gè)性化的方案。另一方面，設(shè)計(jì)師和開發(fā)人員需要額外的時(shí)間來創(chuàng)建更多可選的配色方案。