原文作者:Tubik Studio

編譯作者:許忙忙，韓夢雨 (微信公眾號：許忙忙）

前言：iOS13推出深色ui模式，作為設(shè)計師的你，是不是早已經(jīng)蠢蠢欲動，想給你的產(chǎn)品設(shè)計一波深色系ui。深色系ui固然酷炫，但是對于配色方案的選擇，我們不得不從多方面去考慮。如何得出最佳配色方案呢？今天我們將討論在ui 工作中的常見選擇：ui界面如何選擇配色方案，淺色還是深色？

ios13官網(wǎng)預(yù)覽

目錄:

1. 影響配色方案的因素

可讀性和易讀性

可訪問性

清晰度

響應(yīng)性

環(huán)境

2.配色方案注意事項

明確界面設(shè)計目標(biāo)

分析你的目標(biāo)受眾

研究競品

測試

3.妥協(xié)的解決方案

深色界面上的白色標(biāo)簽文本

給用戶選擇配色方案的機會

一、影響配色方案的因素

在斟酌如何選擇一個配色方案上，沒有一個十全十美的方案可以滿足所有的既定目標(biāo)。這很大程度上取決于許多因素，我們不僅要考慮用戶層面，還要考慮業(yè)務(wù)目標(biāo)、市場條件以及當(dāng)前的設(shè)計趨勢。下面就讓我們回顧下必須考慮的一些基本因素。

1.可讀性和易讀性

文本呈現(xiàn)的內(nèi)容感知直接決定了文本的可讀性和易讀性。可讀性通常用來形容某種書面語言閱讀和理解的容易程度，易讀性衡量的是用戶識別某個文本的速度和直觀程度。

在配色的時候，我們一定要考慮這兩個因素。尤其是展示詳情類，有很多文字信息的界面。因為界面的配色方案在很大程度上影響著用戶的閱讀效率。舉個栗子，不同顏色背景下的物理對象呈現(xiàn)出來的感覺是不一樣的，在白色或淺色背景下顯示的黑色物體，似乎比在深色背景下顯示的白色物體更大。較差的可讀性直接帶來不好的用戶體驗：用戶可能無法有效瀏覽數(shù)據(jù)，即使數(shù)據(jù)是相關(guān)的，用戶也會因為可讀性差感到難以理解文本，甚至可能錯過關(guān)鍵信息。

by Dimest

這是否意味著淺色背景的界面更具可讀性？并不一定。一位著名的用戶體驗設(shè)計大師Jacob Nielsen提到過：在文本和背景之間使用合適的對比度的顏色。所以提升易讀性的最佳界面方案是，在白色背景上顯示黑色文本，（即所謂的“正文本”）。或是在黑色背景上顯示白色文本，（即所謂的“負文本”）也還不錯，但是即使對比度與正文本相同，這種倒置的配色方案可能會略讓人感到不適，無形中使用戶的閱讀速度降低。在界面中，當(dāng)文本比純黑更淺一些，而背景并非純白的時候，易讀性會相應(yīng)的變得更弱一些。

所以，只要設(shè)計師能對文字副本在不同顏色背景上的感知特性有所研究，并且準確地選擇字體，任何界面配色方案都可以。

by Sergey Zolotnikov

不過，在上世紀80年代的一些科學(xué)研究表明，對于大量的文本而言，大多數(shù)用戶覺得淺色背景能讓閱讀更有效率。為了研究廣告背后的運作機制，D. Bauer和C.R.Cavonius《通過對比度反轉(zhuǎn)提高視覺顯示單元的可讀性》一文中分享了他們探索的結(jié)果。他們特別提到一點，當(dāng)以淺色背景，深色文本呈現(xiàn)時，參與調(diào)研的用戶閱讀準確率要高出26%。

為什么會這樣，來自來自英屬哥倫比亞大學(xué)(University of British Columbia)感官感知與互動研究小組的Jason Harrison 這樣解釋道：雙眼有散光的患者（根據(jù)各種數(shù)據(jù)統(tǒng)計，散光患者約占總?cè)丝诘?0%）覺得，在白色背景上感知黑色的文本要容易的多。因為在感知屏幕內(nèi)容的時候，如果是白底黑字，雙眼虹膜會有更多的部分會選擇閉合，晶狀體的形變相對較少。在黑底白字的情況下，虹膜會有更多的部分會選擇開合，提高對光線的吸收，晶狀體的形變會更大，相應(yīng)的結(jié)果是眼睛更容易模糊失焦。所以，如果界面中有大量文本，需要用戶長時間閱讀，淺色背景和深色文本的組合會使用戶閱讀體驗更友好一些。

by kiho

2.可訪問性

可訪問性通常指的是web或移動界面能盡可能多地貼合更多用戶的需求和偏好，讓普通用戶和有障礙的用戶都能順暢地使用。配色方案在很大程度上會影響可訪問性。關(guān)于如何選擇合適的配色方案，設(shè)計師需要考慮用戶的年齡，特殊的需求，還有一些殘障人士的需求，這些因素也可以決定背景和布局元素的配色選擇。用戶調(diào)研將會為ux設(shè)計師提供數(shù)據(jù)，從而讓配色方案更符合用戶的真實需求。

by Alex Banaga

3.清晰度

清晰度通常指的是用戶能夠在一個屏幕或界面中辨別核心細節(jié)的能力。如果有足夠的清晰度，導(dǎo)航條能夠簡單直觀地讓用戶快速掃描頁面布局，并且找到關(guān)鍵的信息區(qū)域和交互元素。用戶不需要花費很多精力去找他們想要的信息。如果沒有正確地測試清晰度，這可能會導(dǎo)致弱的視覺層級，整個界面會變得一團糟。足夠的對比度在很大程度上影響著清晰度，而配色方案是建立對比度的基礎(chǔ)。想要確保界面是否清晰和足夠的對比，可以通過模糊效果來對整個界面進行檢驗，看看是否重要的內(nèi)容都能被用戶注意到。

by Johny vino?

4.響應(yīng)性

界面的響應(yīng)性，簡而言之，用戶能夠在不同的設(shè)備上正常使用頁面內(nèi)的功能。有的在高分辨率設(shè)備下的設(shè)計看起來還不錯，但是一到分辨率低的設(shè)備上顯示的效果就大打折扣了。所以我們要考慮配色方案在不同設(shè)備上的展示效果，因為配色本身會涉及到色彩、形狀和內(nèi)容的感知，所以在實現(xiàn)方案之前應(yīng)該在不同的設(shè)備上進行測試。

by Zhenya Rynzhuk

5.環(huán)境

如果目標(biāo)用戶確定的情況下，我們可以預(yù)知網(wǎng)頁的移動端界面的使用場景。比如，在自然光下，深色的背景確實可以產(chǎn)生良好的反射效果，特別是在光面的平板電腦和智能手機上，這會使界面更具可讀性。相反的是，在光線不好的環(huán)境下，暗色的背景會降低界面的可讀性。所以我們要重視不同的配色方案，對比度，色調(diào)在不同的環(huán)境下界面展示的效果。

by Sergey Zolotnikov

延展閱讀：

手機屏幕在高光的照射下出現(xiàn)逆光反應(yīng)，從而導(dǎo)致用戶看不清楚屏幕顯示的內(nèi)容這一個情況，開發(fā)了“陽光下可讀性提升”的功能。完成設(shè)置后，以后在陽光下使用手機時，屏幕亮度將根據(jù)外在環(huán)境逐漸提升，同時顏色也會有輕微的變化，相對于開啟前，開啟該功能后，在陽光底下查看將變得更加清楚。這么做的原理是：借助光線傳感器，感應(yīng)到強光，會提高對比度，讓字體更清晰。

國外也有網(wǎng)友做了測試，除了屏幕類型（背光LCD，OLED，霧面，光面等），什么配色方案在陽光直射下提供了最高的可讀性？

黑底+白字是最具可讀性的。

深綠色底+白字可能是第二大可讀性。

二、配色方案注意事項

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

1.明確界面設(shè)計的目標(biāo)

如果你已經(jīng)確定了界面的主要用途和要解決的問題，那么你在選擇配色方案的時候會更合理。如果整個ui是文本驅(qū)動型的界面，（比如博客，新聞，或者電子閱讀器等），淺色背景會讓閱讀更有效率。因為淺色讓整個界面看起來更有呼吸感，能夠讓用戶更專注于內(nèi)容。另一方面，如果整個ui是視覺驅(qū)動型的界面，以圖片為主，那么用深色的背景會更好一些，因為深色的背景襯托著明亮的色彩，會讓整個圖片看起來更突出，同時會讓整個界面的布局看起來更時尚。

2.分析你的目標(biāo)受眾

界定并分析你的目標(biāo)受眾是每個設(shè)計師在展開設(shè)計前必須要做的事情。了解你的潛在受眾，并分析他們要想要從你的產(chǎn)品中得到什么，這將為你設(shè)計一個有用的，有吸引力的界面打下堅實的基礎(chǔ)。中年人和老年人喜歡淺色背景為主的配色方案，因為他們可以從界面中很快地提取有用的信息。年輕人偏向暗色背景，因為看起來更時尚。青少年和孩子們喜歡色彩亮麗的配色方案并且夾雜一些有趣細節(jié)的界面。其實配色方案的選取最基本取決于產(chǎn)品的功能性和內(nèi)容，但是如果產(chǎn)品要以用戶為中心設(shè)計，在選取配色方案的時候，我們不妨考慮下目標(biāo)受眾的偏好。

3.研究競品

要記住，你的產(chǎn)品需要面臨競爭激烈的紅海。配色方案的選取會直接影響你的產(chǎn)品在競爭中是否足夠突出，并且會影響用戶初次使用的印象。花時間探索已有產(chǎn)品，知己知彼，才能百戰(zhàn)不殆。

4.測試

因為配色方案影響產(chǎn)品的可用性，并且決定界面是否有吸引力。所以每個設(shè)計方案都應(yīng)該在不同分辨率的屏幕，和不同的條件下進行適當(dāng)?shù)臏y試。只有測試了才知道配色方案的優(yōu)點和缺點，從而綜合選出最有效的解決方案，給用戶留下好的第一印象。

by Johny vino?

三、妥協(xié)的解決方案

一個配色方案的敲定到最后實現(xiàn)的時候并不是不可更改，靈活一點，依據(jù)具體情況做一些妥協(xié)的方案，說不定也還不錯呢。我們來看看下邊的例子。

1.深色界面上的白色標(biāo)簽文本

如果你對深色界面情有獨鐘，想跟一波ios13的風(fēng)，悄咪咪告訴你一個小技巧，利用淺色標(biāo)簽或者區(qū)塊承載核心的文本信息，從而確保文本的可讀性。在設(shè)計的時候，注意顏色的對比，這種處理方式讓界面兼具可讀性和美觀度。

watering Tracker

2.給用戶選擇配色方案的機會

另一種方式是讓用戶自己選擇顏色模式。這種方式對于用戶更加友好，用戶不僅可以根據(jù)不同的可用性問題，而且還可以根據(jù)個人的審美偏好去設(shè)定一個個性化的顏色方案。這種情況下，設(shè)計師和開發(fā)人員需要更多的時間來創(chuàng)建更多可選的配色方案。

四、總結(jié)

看到這里，相信大家對如何選擇配色方案有了比較全面的認知了。有時候追下設(shè)計趨勢是比較重要，但是我們還是要立足于產(chǎn)品和用戶。無論是什么樣的配色方案都要注意最終界面的可讀性和易讀性，合適的顏色對比度是建立可讀性和易讀性的基礎(chǔ)，而對比度的選擇要符合無障礙顏色對比度標(biāo)準，谷歌設(shè)計規(guī)范推薦在文本內(nèi)容與背景之間的對比度達到15.8:1的比例。這里推薦大家使用對比度測試工具，來測試對比是否符合標(biāo)準。

https://uxpro.cc/toolbox/accessibility/color-accessibility/

本文完，感謝閱讀！