位置:設計主頁 > 網站制作 > 配色方案 >

UI界面怎么選配色方案:淺色or深色?幾個實用的配色方案建議

來源:許忙忙微信公眾號 作者:許忙忙,韓夢雨 時間:2019-10-14 11:39

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

淺色還是深色UI?送你幾個實用的配色方案建議

ios13官網預覽

目錄:

1. 影響配色方案的因素

可讀性和易讀性

可訪問性

清晰度

響應性

環境

2.配色方案注意事項

明確界面設計目標

分析你的目標受眾

研究競品

測試

3.妥協的解決方案

深色界面上的白色標簽文本

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

一、影響配色方案的因素

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

1.可讀性和易讀性

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

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

by Dimest

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

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

by Sergey Zolotnikov

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

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

by kiho

2.可訪問性

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

by Alex Banaga

3.清晰度

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

by Johny vino™

4.響應性

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

by Zhenya Rynzhuk

5.環境

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

by Sergey Zolotnikov

延展閱讀:

華為針對手機屏幕在高光的照射下出現逆光反應,從而導致用戶看不清楚屏幕顯示的內容這一個情況,開發了“陽光下可讀性提升”的功能。完成設置后,以后在陽光下使用手機時,屏幕亮度將根據外在環境逐漸提升,同時顏色也會有輕微的變化,相對于開啟前,開啟該功能后,在陽光底下查看將變得更加清楚。這么做的原理是:借助光線傳感器,感應到強光,會提高對比度,讓字體更清晰。

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

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

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

二、配色方案注意事項

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

1.明確界面設計的目標

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

2.分析你的目標受眾

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

3.研究競品

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

4.測試

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

by Johny vino™

三、妥協的解決方案

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

1.深色界面上的白色標簽文本

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

watering Tracker

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

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

四、總結

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

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

本文完,感謝閱讀!

原文作者:Tubik Studio
原文地址:https://uxplanet.org/light-or-dark-ui-tips-to-choose-a-proper-color-scheme-for-user-interface-9a12004bb79e
編譯作者:許忙忙,韓夢雨 (微信公眾號:許忙忙)
本文版權歸原作者所有;僅供學習使用,轉載請注明出處。

福彩幸运农场走势图表