我們的日常生活總是會面臨無數(shù)的選擇,尤其是在職業(yè)生涯中,我們必須考慮到很多的反對和挑戰(zhàn),更好的設計解決方案不僅是基于建議,而且是以事實、經(jīng)驗和知識為基礎的。今天我們要討論的是 UI 設計師在工作中經(jīng)常會遇到的一個項目:對于用戶界面來說哪個配色方案更好,是淺色還是深色?
可以肯定的是,沒有一個特定的選擇可以實現(xiàn)所有的目標。解決方案與很多的因素緊密相關,這些因素,不僅包括用戶方面,還包括業(yè)務目標、市場狀況和當前的設計趨勢。我們來看下,在這個問題上設計師必須考慮的一些重要因素。
1. 可讀性和易讀性
這些術語都與文本內(nèi)容帶給用戶的感受有直接的關系:
可讀性定義了人們閱讀單詞、短語和文本塊的難易程度;
易讀性衡量用戶識別特定字體中字母的速度和直觀程度。
應該仔細考慮可讀性及易讀性兩個特性,特別是對于擁有大量文本內(nèi)容的界面。眾多因素中,在用戶對本文感知的有效程度上,為界面選擇配色方案起著至關重要的作用。
例如,對于在不同背景下感知的物理對象,白色或亮色背景上的黑色文本似乎比黑色背景上的白色文本要大。糟糕的可讀性導致了糟糕的用戶體驗:用戶不僅無法閱讀信息,甚至更糟糕的是即使信息是相關的,還是無法順暢的閱讀,這樣用戶會感到文本帶給自身莫名其妙的緊張感,最終導致用戶錯過關鍵的信息。
這是否意味著帶有亮色背景的界面更容易閱讀呢?并不總是這樣。
著名的用戶體驗設計大師雅各布·尼爾森提到:
使用文本和背景之間高對比度的顏色。最佳的易讀性要求:黑色文本在白色背景上(所謂的正文本),或者白色文本在黑色背景上(所謂的負文本)。雖然對比度與正面文本相同,但是相反的配色方案會讓人產(chǎn)生一些偏差,使閱讀速度略微減慢。在配色方案中,易讀性受到純黑背景的影響比淡色背景的影響更大,尤其是背景顏色比純白色更暗的時候。
因此,如果設計師能弄清楚不同背景圖案上的文字觀感,并仔細研究字體的選擇,任何配色方案都可以具有很高的可讀性。
△ 博物館登錄頁
然而,一些早在 20 世紀 80 年代的科學研究表明:對于大多數(shù)用戶來說,亮色背景文本的大量使用似乎是一種更有效的選擇。
D.Bauer 和 C.R.Cavonius 在其研究廣告載體是如何運行的論文中分享了他們的研究成果《通過對比反轉(zhuǎn),提高視覺顯示元素的易讀性》(1980)。特別是,他們發(fā)現(xiàn):當閱讀文本時,參與者在瀏覽亮色背景上帶有的深色文字時,準確率提高了26%。
為何會這樣呢?來自英國倫比亞大學的「感覺知覺與互動研究小組」的 Jason Harrison 用以下方式解釋了這一現(xiàn)象:
患有散光的人(根據(jù)各種數(shù)據(jù)顯示:大約50%的人)覺得,在黑色背景上的文字,比在白色背景上的黑色文字更難感知,這部分與光線水平有關。在明亮的顯示屏(白色背景)下,虹膜會稍微閉合一些,減少了「變形的」透鏡的影響;在暗色的顯示屏(黑色背景)下,虹膜就會打開,接收到更多的光線,鏡頭的變形會使眼睛的焦距更加模糊。
因此,如果界面上有大量的文本,而且需要用戶進行長時間閱讀,那么使用淺色背景會讓用戶覺得更加友好。
2. 可訪問性
可訪問性主要被定義為 WEB 或移動界面能夠被盡可能多的用戶訪問,所提供的功能人人可用,沒有「功能歧視」。因此,「使用或不使用」的決定,必須基于用戶的需求和偏好,而不是基于他們的身體能力。
配色方案是影響這方面的主要因素之一,選擇調(diào)色板和顏色組合時,設計師需要考慮到不同年齡、特殊需求以及殘疾的用戶,這些用戶也會影響背景和布局元素的顏色選擇。在設計師對目標用戶深入了解的過程中,用戶研究獲得的數(shù)據(jù)會對其設計決策非常有幫助。
3. 清晰度
清晰度定義了在屏幕或頁面上查看和區(qū)分所有核心細節(jié)的能力。首先,它與導航的簡單性和直觀性相關:能夠瀏覽布局并找到信息區(qū)域和交互元素,用戶不需要花費太多精力就能找到他們需要的東西。如果清晰度沒有得到適當?shù)臏y試,可能會導致視覺層次較弱,并且會使屏幕變得一團糟。
對比在這里扮演著極其重要的角色,配色方案就成了它的基礎。檢查一下,界面是否清晰并且對比度足夠高,在模糊模式下查看屏幕或頁面時,請不要忘記「模糊檢驗」這樣一個很好的老技巧,看看所有重要的東西在模糊的狀態(tài)下是否容易觸達和明顯可見。
△ 數(shù)字機構登錄頁
4. 響應性
界面的響應性意味著無論用戶在何種設備上都可以正常使用。在高分辨率的專業(yè)顯示器上看起來時尚和吸引人的東西,在小的低分辨率屏幕上可能變成很臟的污點。
因此,一些在設計階段看起來很漂亮的配色方案可能會在各種各樣的實際條件下失去它們原有的美感。
由于配色方案直接影響顏色、形狀和文本感知,所以在做出最終決定之前,應該在不同的設備上進行測試。
5. 環(huán)境
在對目標受眾進行仔細研究的情況下,WEB 和移動界面的使用可能被認為是典型的。
例如,在自然光下持續(xù)使用時,深色背景會產(chǎn)生反射效果,尤其是在平板電腦和智能手機的屏幕上。相反,在光線昏暗的環(huán)境下,深色背景會使光線遠離屏幕,這對導航和可讀性有很大的影響。
因此,顏色組合、對比度和色調(diào)問題在這里引起了很大的關注。
△ 明亮的日歷