UI設計:配色方案的選取,是使用深色系較好,還是淺色系合適?
我們的日常生活中總是面臨著無盡的選擇,大量的挑戰。設計的決策也是如此,一個正確的決策會受到很多不同因素的影響,經驗,知識,事實依據,還有別人的建議等等。在進行UI設計的時候,配色方案的選取是需要通過合理的決策來判斷的,是使用深色系的配色比較好,還是淺色系的配色合適?
影響配色方案的因素
正如同我們所熟知的,配色方案的最終確定受到多方面因素的影響,它不僅涉及到用戶,而且還受到業務目標,市場條件和當前設計趨勢的影響。讓我們簡單回顧一下在這個問題上必須考慮的基本因素吧。
可讀性和易讀性
這兩個概念都和文本內容的感知直接相關??勺x性指的是人們是否可以輕松閱讀單詞、短語和內容塊的高低,而易讀性則指的是用戶能否便捷快速地識別特定字體中字母的度量。
在進行配色的時候,應該將這些因素納入到考慮當中來,特別是涉及到需要填充大量文本的界面的時候。配色方案對于界面中文本的感知有效度有著至關重要的影響。在白色或者淺色的背景上,顯示黑色的文本,比起在黑色的背景上顯示白色的文本,看起來要更顯著、清晰度也更大一些。較差的可讀性將會直接帶來更差的用戶體驗,用戶無法快速掃視數據,甚至會在視覺上產生莫名其妙的混亂,甚至導致用戶錯過關鍵信息。
這是否意味著淺色背景的可讀性更強呢?并不一定。著名的UX設計大師 Jacob Nielsen 曾經提到過:“文字和背景之間應該采用高對比度的色彩。白色背景上的黑色文字(正文本)和黑色背景上的白色文字(負文本),在對比度和易讀性上幾乎是完全一樣,但是后者和日常的閱讀習慣并不一致,這種倒置的配色方案會讓人在閱讀速度上更慢。當文本比純黑更淺一些,而背景并非純白的時候,易讀性會相應的變得更弱一些?!比绻O計師對于不同的配色和字體特性上有足夠的了解和探索,很多配色方案都可以具備良好的易讀性和可讀性。
不過,在上世紀80年代的一系列科學研究表明,對于大量的文本而言,淺色背景是更多用戶的選擇。為了研究廣告背后的運作機制,D.Bauer 和 C.R.Cavonius 在他們的文章《Improving the legibility of visual display units through contrast reversal》中分享了他們的探索結果。文中特別提到一點,相比于深色背景和淺色文本,他們發現參與調研的用戶在白色背景深色文本上的閱讀正確率高出了26%。
為什么會這樣?來自 Sensory Perception and Interaction Research Group 的 Jason Harrison 是這樣解釋這一現象的:雙眼有散光(根據調研大概50%的人會出現這樣的狀況)的用戶會更難以感知黑紙白字中的文本內容。在感知屏幕內容的時候,如果是白底黑字,雙眼虹膜會有更多的部分會選擇閉合,晶狀體的形變相對較少。在黑底白字的情況下,虹膜會有更多的部分會選擇開合,提高對光線的吸收,晶狀體的形變會更大,相應的結果是眼睛更容易模糊失焦。因此,如果界面中包含大量的文本內容,使用的淺色背景和深色文本對于用戶會更加友好。
可訪問性
可訪問性通常指的是 Web 頁面或者 APP 能否盡可能多地貼合更為廣泛的用戶需求,讓普通用戶和有障礙的用戶都能順暢地使用。因此,「用還是不用」是取決于用戶的需求和偏好,而不是用戶的能力。配色方案對于產品的可訪問性的影響并不小。在選擇配色的時候,設計師需要考慮不同的年齡,特殊的需求和有障礙的用戶的需求。這些用戶也應當可以決定背景和布局元素的配色選擇。用戶調研將會為 UX設計師提供數據,讓配色方案更加貼近用戶的真實需求。
清晰度
清晰度是用來界定屏幕或者界面上的所有核心細節的清晰程度。在UI界面中,導航是否簡單直觀和清晰度就有著直接的關系:用戶能否快速掃描布局并且找到關鍵的信息區域和交互元素,用戶是否需要花費很多精力才能找到他們想要的信息。如果這方面沒有得到正確的測試,信息和視覺層級可能設計上就是一團糟。對比度在這個環節起到了相當重要的作用,而配色方案的好壞直接影響著這個部分的效果。想要確保界面清晰、對比充足,可以通過「模糊效果」來對整個布局進行檢驗,看看是否重要的內容都更容易被注意到。
響應
用戶使用任何設備是否都能正常使用網頁或者 APP 的功能,這就涉及到整個設計的響應性了。有的設計在高分辨率的顯示器下看起來非常不錯,在小屏幕上卻顯得捉襟見肘。這就涉及到配色方案本身的適應性和響應性了,有些配色可能在日常的使用或者某些狀況下失去美感。配色本身會涉及到色彩、形狀和內容的感知,所以在最終設計完成之前,要盡量多在不同的設備上進行測試。
環境
在目標用戶確定的情況下,Web 和移動端的使用場景其實是可以預見到的。比如在自然光下,移動端設備上,深色背景很容易產生良好的反光效果,特別是在平板和手機上。而相反,在光線不好的環境下,深色的背景可讀性并不好。色彩的組合,對比度和色調在不同的環境下會產生截然不同的效果,這一點值得注意。
配色方案的選取注意事項
考慮到上面的一系列因素,下面我將提供一個簡短的步驟清單,幫你為網頁和移動端設備挑選合理的配色方案。
- 明確界面設計的目標。確定界面的主要組成和核心的功能點之后,你才可以更加合理地選擇配色方案。如果 UI 界面是文本驅動型的(博客、新聞、電子閱讀器等),淺色背景往往是更合理有效的選擇。淺色的背景會使得整個屏幕顯得寬敞而又大氣,讓用戶更專注于其中的內容。另一方面,如果界面是視覺驅動型的,并且是以圖片為主的話,使用深色背景搭配明亮的色彩,可能是更好的解決方案,因為這樣會讓圖片等視覺內容更加突出,并且讓整個布局顯得更為時尚。
- 分析你的目標受眾。通過界定和分析目標受眾往往能夠讓設計師更清楚要先做什么后做什么。了解潛在用戶,了解他們想從你的網站或者 APP 中獲得什么,這樣才能為可用、有用且有吸引力的界面奠定堅實的基礎。中年人和老年人會更加喜歡淺色為主的配色方案,這樣的界面對他們而言更加直觀,也更加易于導航。年輕人更加喜歡原創和時尚的深色背景。青少年和兒童更喜歡明亮的背景色彩和有趣的細節。以目標受眾為中心來設計,可以讓設計決策更加明晰。
- 研究競爭對手。要記住一件事情,你的產品所面對的通常都不是藍海,而是競爭激烈的紅海。配色方案的選取將會直接影響到你的產品在競爭中看起來是否足夠突出,會影響用戶初次使用的時候,是否愿意與之互動?;ㄙM時間在探索已有的產品上,能夠幫你節省時間和精力。
- 測試。基于用戶群體、可用性、吸引力等不同因素對配色方案的大概方向確定之后,每個設計方案都應該在不同的分辨率,不同的屏幕以及不同條件下進行適當的測試。在產品投放市場之前,之前不間斷的測試會揭示出配色方案的強弱,如果設計方案的效率低下,可能會給用戶留下不好的第一印象。
妥協的解決方案
有時候,最終的解決方案并沒有辦法完全遵循計劃中的方案,妥協往往是不可避免的。
深色界面,白色標簽和文本
正如同我們在之前的設計趨勢的文章當中所提到的,在深色系背景之下,使用白色的標簽和區塊來承載文本,這可以確保文本的可讀性。在設計的時候,核心的信息文本會搭配一個淺色的區塊背景,和深色背景隔離開來,這種處理方式實用且優雅。
將配色的權利交給用戶
另外一種方法是讓用戶來選擇配色方案,而我們在設計 Upper 這個應用的時候就是這么做的,這個待辦事項應用當中,用戶有選擇配色方案的權利。一方面,這種方式對于用戶更加友好,并且根據不同的可用性問題以及用戶的審美偏好,提供個性化的方案。另一方面,設計師和開發人員需要額外的時間來創建更多可選的配色方案。
原文作者 :?Tubik Studio
譯者 :?陳子木
譯文地址:http://www.uisdc.com/choose-proper-color-scheme
本文由 @陳子木 授權發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖由作者提供
一直覺得淺色底深色字比較適合閱讀,重點是信息量問題。信息量多的時候,更考驗閱讀體驗,淺色底深色字更好;信息量非常少的時候,對用戶的影響幾乎可以忽略的。配圖的菜單就信息量很少,這種配色對閱讀的影響幾乎可以忽略。