影響配色方案的因素
正如同我們所熟知的渐白，配色方案的最終確定受到多方面因素的影響尊浓，它不僅涉及到用戶，而且還受到業(yè)務(wù)目標(biāo)纯衍，市場(chǎng)條件和當(dāng)前設(shè)計(jì)趨勢(shì)的影響栋齿。讓我們簡(jiǎn)單回顧一下在這個(gè)問題上必須考慮的基本因素吧。
可讀性和易讀性
這兩個(gè)概念都和文本內(nèi)容的感知直接相關(guān)襟诸⊥叨拢可讀性指的是人們是否可以輕松閱讀單詞、短語(yǔ)和內(nèi)容塊的高低歌亲，而易讀性則指的是用戶能否便捷快速地識(shí)別特定字體中字母的度量菇用。
在進(jìn)行配色的時(shí)候，應(yīng)該將這些因素納入到考慮當(dāng)中來陷揪，特別是涉及到需要填充大量文本的界面的時(shí)候惋鸥。配色方案對(duì)于界面中文本的感知有效度有著至關(guān)重要的影響杂穷。在白色或者淺色的背景上，顯示黑色的文本卦绣，比起在黑色的背景上顯示白色的文本耐量，看起來要更顯著、清晰度也更大一些滤港。較差的可讀性將會(huì)直接帶來更差的用戶體驗(yàn)廊蜒，用戶無法快速掃視數(shù)據(jù)，甚至?xí)谝曈X上產(chǎn)生莫名其妙的混亂溅漾，甚至導(dǎo)致用戶錯(cuò)過關(guān)鍵信息劲藐。
這是否意味著淺色背景的可讀性更強(qiáng)呢？并不一定樟凄。著名的UX設(shè)計(jì)大師 Jacob Nielsen 曾經(jīng)提到過：“文字和背景之間應(yīng)該采用高對(duì)比度的色彩聘芜。白色背景上的黑色文字（正文本）和黑色背景上的白色文字（負(fù)文本），在對(duì)比度和易讀性上幾乎是完全一樣缝龄，但是后者和日常的閱讀習(xí)慣并不一致汰现，這種倒置的配色方案會(huì)讓人在閱讀速度上更慢。當(dāng)文本比純黑更淺一些叔壤，而背景并非純白的時(shí)候瞎饲，易讀性會(huì)相應(yīng)的變得更弱一些×痘妫”如果設(shè)計(jì)師對(duì)于不同的配色和字體特性上有足夠的了解和探索嗅战，很多配色方案都可以具備良好的易讀性和可讀性。
不過俺亮，在上世紀(jì)80年代的一系列科學(xué)研究表明驮捍，對(duì)于大量的文本而言，淺色背景是更多用戶的選擇脚曾。為了研究廣告背后的運(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%。
為什么會(huì)這樣拷沸？來自 Sensory Perception and Interaction Research Group 的 Jason Harrison 是這樣解釋這一現(xiàn)象的：雙眼有散光（根據(jù)調(diào)研大概50%的人會(huì)出現(xiàn)這樣的狀況）的用戶會(huì)更難以感知黑紙白字中的文本內(nèi)容色查。在感知屏幕內(nèi)容的時(shí)候，如果是白底黑字撞芍，雙眼虹膜會(huì)有更多的部分會(huì)選擇閉合秧了，晶狀體的形變相對(duì)較少。在黑底白字的情況下勤庐，虹膜會(huì)有更多的部分會(huì)選擇開合示惊，提高對(duì)光線的吸收，晶狀體的形變會(huì)更大愉镰，相應(yīng)的結(jié)果是眼睛更容易模糊失焦米罚。因此，如果界面中包含大量的文本內(nèi)容丈探，使用的淺色背景和深色文本對(duì)于用戶會(huì)更加友好录择。
可訪問性
可訪問性通常指的是 Web 頁(yè)面或者 APP 能否盡可能多地貼合更為廣泛的用戶需求，讓普通用戶和有障礙的用戶都能順暢地使用碗降。因此隘竭，「用還是不用」是取決于用戶的需求和偏好，而不是用戶的能力讼渊。配色方案對(duì)于產(chǎn)品的可訪問性的影響并不小动看。在選擇配色的時(shí)候，設(shè)計(jì)師需要考慮不同的年齡爪幻，特殊的需求和有障礙的用戶的需求菱皆。這些用戶也應(yīng)當(dāng)可以決定背景和布局元素的配色選擇。用戶調(diào)研將會(huì)為 UX設(shè)計(jì)師提供數(shù)據(jù)挨稿，讓配色方案更加貼近用戶的真實(shí)需求仇轻。
清晰度
清晰度是用來界定屏幕或者界面上的所有核心細(xì)節(jié)的清晰程度。在UI界面中奶甘，導(dǎo)航是否簡(jiǎn)單直觀和清晰度就有著直接的關(guān)系：用戶能否快速掃描布局并且找到關(guān)鍵的信息區(qū)域和交互元素篷店，用戶是否需要花費(fèi)很多精力才能找到他們想要的信息。如果這方面沒有得到正確的測(cè)試臭家，信息和視覺層級(jí)可能設(shè)計(jì)上就是一團(tuán)糟疲陕。對(duì)比度在這個(gè)環(huán)節(jié)起到了相當(dāng)重要的作用，而配色方案的好壞直接影響著這個(gè)部分的效果钉赁。想要確保界面清晰鸭轮、對(duì)比充足，可以通過「模糊效果」來對(duì)整個(gè)布局進(jìn)行檢驗(yàn)橄霉，看看是否重要的內(nèi)容都更容易被注意到窃爷。
響應(yīng)
用戶使用任何設(shè)備是否都能正常使用網(wǎng)頁(yè)或者 APP 的功能，這就涉及到整個(gè)設(shè)計(jì)的響應(yīng)性了姓蜂。有的設(shè)計(jì)在高分辨率的顯示器下看起來非常不錯(cuò)按厘，在小屏幕上卻顯得捉襟見肘。這就涉及到配色方案本身的適應(yīng)性和響應(yīng)性了钱慢，有些配色可能在日常的使用或者某些狀況下失去美感逮京。配色本身會(huì)涉及到色彩、形狀和內(nèi)容的感知束莫，所以在最終設(shè)計(jì)完成之前懒棉，要盡量多在不同的設(shè)備上進(jìn)行測(cè)試草描。
環(huán)境
在目標(biāo)用戶確定的情況下，Web 和移動(dòng)端的使用場(chǎng)景其實(shí)是可以預(yù)見到的策严。比如在自然光下穗慕，移動(dòng)端設(shè)備上，深色背景很容易產(chǎn)生良好的反光效果妻导，特別是在平板和手機(jī)上逛绵。而相反，在光線不好的環(huán)境下倔韭，深色的背景可讀性并不好术浪。色彩的組合，對(duì)比度和色調(diào)在不同的環(huán)境下會(huì)產(chǎn)生截然不同的效果寿酌，這一點(diǎn)值得注意胰苏。
配色方案的選取注意事項(xiàng)
考慮到上面的一系列因素，下面我將提供一個(gè)簡(jiǎn)短的步驟清單醇疼，幫你為網(wǎng)頁(yè)和移動(dòng)端設(shè)備挑選合理的配色方案碟联。
明確界面設(shè)計(jì)的目標(biāo)。確定界面的主要組成和核心的功能點(diǎn)之后僵腺，你才可以更加合理地選擇配色方案鲤孵。如果 UI 界面是文本驅(qū)動(dòng)型的（博客、新聞辰如、電子閱讀器等）普监，淺色背景往往是更合理有效的選擇。淺色的背景會(huì)使得整個(gè)屏幕顯得寬敞而又大氣琉兜，讓用戶更專注于其中的內(nèi)容凯正。另一方面，如果界面是視覺驅(qū)動(dòng)型的豌蟋，并且是以圖片為主的話廊散，使用深色背景搭配明亮的色彩，可能是更好的解決方案梧疲，因?yàn)檫@樣會(huì)讓圖片等視覺內(nèi)容更加突出允睹，并且讓整個(gè)布局顯得更為時(shí)尚。
分析你的目標(biāo)受眾幌氮。通過界定和分析目標(biāo)受眾往往能夠讓設(shè)計(jì)師更清楚要先做什么后做什么缭受。了解潛在用戶，了解他們想從你的網(wǎng)站或者 APP 中獲得什么该互，這樣才能為可用米者、有用且有吸引力的界面奠定堅(jiān)實(shí)的基礎(chǔ)。中年人和老年人會(huì)更加喜歡淺色為主的配色方案，這樣的界面對(duì)他們而言更加直觀蔓搞，也更加易于導(dǎo)航胰丁。年輕人更加喜歡原創(chuàng)和時(shí)尚的深色背景。青少年和兒童更喜歡明亮的背景色彩和有趣的細(xì)節(jié)喂分。以目標(biāo)受眾為中心來設(shè)計(jì)锦庸，可以讓設(shè)計(jì)決策更加明晰。
研究競(jìng)爭(zhēng)對(duì)手妻顶。要記住一件事情酸员，你的產(chǎn)品所面對(duì)的通常都不是藍(lán)海蜒车，而是競(jìng)爭(zhēng)激烈的紅海讳嘱。配色方案的選取將會(huì)直接影響到你的產(chǎn)品在競(jìng)爭(zhēng)中看起來是否足夠突出，會(huì)影響用戶初次使用的時(shí)候酿愧，是否愿意與之互動(dòng)沥潭。花費(fèi)時(shí)間在探索已有的產(chǎn)品上嬉挡，能夠幫你節(jié)省時(shí)間和精力钝鸽。
測(cè)試∨痈郑基于用戶群體拔恰、可用性、吸引力等不同因素對(duì)配色方案的大概方向確定之后基括，每個(gè)設(shè)計(jì)方案都應(yīng)該在不同的分辨率颜懊，不同的屏幕以及不同條件下進(jìn)行適當(dāng)?shù)臏y(cè)試。在產(chǎn)品投放市場(chǎng)之前风皿，之前不間斷的測(cè)試會(huì)揭示出配色方案的強(qiáng)弱河爹，如果設(shè)計(jì)方案的效率低下，可能會(huì)給用戶留下不好的第一印象桐款。
妥協(xié)的解決方案
有時(shí)候咸这，最終的解決方案并沒有辦法完全遵循計(jì)劃中的方案，妥協(xié)往往是不可避免的魔眨。
深色界面媳维，白色標(biāo)簽和文本
正如同我們?cè)谥暗脑O(shè)計(jì)趨勢(shì)的文章當(dāng)中所提到的，在深色系背景之下遏暴，使用白色的標(biāo)簽和區(qū)塊來承載文本侨艾，這可以確保文本的可讀性。在設(shè)計(jì)的時(shí)候拓挥，核心的信息文本會(huì)搭配一個(gè)淺色的區(qū)塊背景唠梨，和深色背景隔離開來，這種處理方式實(shí)用且優(yōu)雅侥啤。
將配色的權(quán)利交給用戶
另外一種方法是讓用戶來選擇配色方案茬故，而我們?cè)谠O(shè)計(jì) Upper 這個(gè)應(yīng)用的時(shí)候就是這么做的，這個(gè)待辦事項(xiàng)應(yīng)用當(dāng)中蚁鳖，用戶有選擇配色方案的權(quán)利磺芭。一方面，這種方式對(duì)于用戶更加友好醉箕，并且根據(jù)不同的可用性問題以及用戶的審美偏好钾腺，提供個(gè)性化的方案。另一方面讥裤，設(shè)計(jì)師和開發(fā)人員需要額外的時(shí)間來創(chuàng)建更多可選的配色方案放棒。
翻譯：陳子木
