在這些因素的條件下,才能選取出合適的配色方案

2024-01-06    分類: 網(wǎng)站建設(shè)

我們的日常生活中總是面臨著無盡的選擇,大量的挑戰(zhàn)。設(shè)計的決策也是如此,一個正確的決策會受到很多不同因素的影響,經(jīng)驗,知識,事實依據(jù),還有別人的建議等等。在進(jìn)行UI設(shè)計的時候,配色方案的選取是需要通過合理的決策來判斷的,是使用深色系的配色比較好,還是淺色系的配色合適?

影響配色方案的因素

正如同我們所熟知的,配色方案的最終確定受到多方面因素的影響,它不僅涉及到用戶,而且還受到業(yè)務(wù)目標(biāo),市場條件和當(dāng)前設(shè)計趨勢的影響。讓我們簡單回顧一下在這個問題上必須考慮的基本因素吧。

可讀性和易讀性

這兩個概念都和文本內(nèi)容的感知直接相關(guān)??勺x性指的是人們是否可以輕松閱讀單詞、短語和內(nèi)容塊的高低,而易讀性則指的是用戶能否便捷快速地識別特定字體中字母的度量。

在進(jìn)行配色的時候,應(yīng)該將這些因素納入到考慮當(dāng)中來,特別是涉及到需要填充大量文本的界面的時候。配色方案對于界面中文本的感知有效度有著至關(guān)重要的影響。在白色或者淺色的背景上,顯示黑色的文本,比起在黑色的背景上顯示白色的文本,看起來要更顯著、清晰度也更大一些。較差的可讀性將會直接帶來更差的用戶體驗,用戶無法快速掃視數(shù)據(jù),甚至?xí)谝曈X上產(chǎn)生莫名其妙的混亂,甚至導(dǎo)致用戶錯過關(guān)鍵信息。

這是否意味著淺色背景的可讀性更強(qiáng)呢?并不一定。著名的UX設(shè)計大師 Jacob Nielsen 曾經(jīng)提到過:“文字和背景之間應(yīng)該采用高對比度的色彩。白色背景上的黑色文字(正文本)和黑色背景上的白色文字(負(fù)文本),在對比度和易讀性上幾乎是完全一樣,但是后者和日常的閱讀習(xí)慣并不一致,這種倒置的配色方案會讓人在閱讀速度上更慢。當(dāng)文本比純黑更淺一些,而背景并非純白的時候,易讀性會相應(yīng)的變得更弱一些?!比绻O(shè)計師對于不同的配色和字體特性上有足夠的了解和探索,很多配色方案都可以具備良好的易讀性和可讀性。

不過,在上世紀(jì)80年代的一系列科學(xué)研究表明,對于大量的文本而言,淺色背景是更多用戶的選擇。為了研究廣告背后的運作機(jī)制,D.Bauer 和 C.R.Cavonius 在他們的文章《Improving the legibility of visual display units through contrast reversal》中分享了他們的探索結(jié)果。文中特別提到一點,相比于深色背景和淺色文本,他們發(fā)現(xiàn)參與調(diào)研的用戶在白色背景深色文本上的閱讀正確率高出了26%。

為什么會這樣?來自 Sensory Perception and Interaction Research Group 的 Jason Harrison 是這樣解釋這一現(xiàn)象的:雙眼有散光(根據(jù)調(diào)研大概50%的人會出現(xiàn)這樣的狀況)的用戶會更難以感知黑紙白字中的文本內(nèi)容。在感知屏幕內(nèi)容的時候,如果是白底黑字,雙眼虹膜會有更多的部分會選擇閉合,晶狀體的形變相對較少。在黑底白字的情況下,虹膜會有更多的部分會選擇開合,提高對光線的吸收,晶狀體的形變會更大,相應(yīng)的結(jié)果是眼睛更容易模糊失焦。因此,如果界面中包含大量的文本內(nèi)容,使用的淺色背景和深色文本對于用戶會更加友好。

可訪問性

可訪問性通常指的是 Web 頁面或者 APP 能否盡可能多地貼合更為廣泛的用戶需求,讓普通用戶和有障礙的用戶都能順暢地使用。因此,「用還是不用」是取決于用戶的需求和偏好,而不是用戶的能力。配色方案對于產(chǎn)品的可訪問性的影響并不小。在選擇配色的時候,設(shè)計師需要考慮不同的年齡,特殊的需求和有障礙的用戶的需求。這些用戶也應(yīng)當(dāng)可以決定背景和布局元素的配色選擇。用戶調(diào)研將會為 UX設(shè)計師提供數(shù)據(jù),讓配色方案更加貼近用戶的真實需求。

清晰度

清晰度是用來界定屏幕或者界面上的所有核心細(xì)節(jié)的清晰程度。在UI界面中,導(dǎo)航是否簡單直觀和清晰度就有著直接的關(guān)系:用戶能否快速掃描布局并且找到關(guān)鍵的信息區(qū)域和交互元素,用戶是否需要花費很多精力才能找到他們想要的信息。如果這方面沒有得到正確的測試,信息和視覺層級可能設(shè)計上就是一團(tuán)糟。對比度在這個環(huán)節(jié)起到了相當(dāng)重要的作用,而配色方案的好壞直接影響著這個部分的效果。想要確保界面清晰、對比充足,可以通過「模糊效果」來對整個布局進(jìn)行檢驗,看看是否重要的內(nèi)容都更容易被注意到。

響應(yīng)

用戶使用任何設(shè)備是否都能正常使用網(wǎng)頁或者 APP 的功能,這就涉及到整個設(shè)計的響應(yīng)性了。有的設(shè)計在高分辨率的顯示器下看起來非常不錯,在小屏幕上卻顯得捉襟見肘。這就涉及到配色方案本身的適應(yīng)性和響應(yīng)性了,有些配色可能在日常的使用或者某些狀況下失去美感。配色本身會涉及到色彩、形狀和內(nèi)容的感知,所以在最終設(shè)計完成之前,要盡量多在不同的設(shè)備上進(jìn)行測試。

環(huán)境

在目標(biāo)用戶確定的情況下,Web 和移動端的使用場景其實是可以預(yù)見到的。比如在自然光下,移動端設(shè)備上,深色背景很容易產(chǎn)生良好的反光效果,特別是在平板和手機(jī)上。而相反,在光線不好的環(huán)境下,深色的背景可讀性并不好。色彩的組合,對比度和色調(diào)在不同的環(huán)境下會產(chǎn)生截然不同的效果,這一點值得注意。

配色方案的選取注意事項

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

明確界面設(shè)計的目標(biāo)。確定界面的主要組成和核心的功能點之后,你才可以更加合理地選擇配色方案。如果 UI 界面是文本驅(qū)動型的(博客、新聞、電子閱讀器等),淺色背景往往是更合理有效的選擇。淺色的背景會使得整個屏幕顯得寬敞而又大氣,讓用戶更專注于其中的內(nèi)容。另一方面,如果界面是視覺驅(qū)動型的,并且是以圖片為主的話,使用深色背景搭配明亮的色彩,可能是更好的解決方案,因為這樣會讓圖片等視覺內(nèi)容更加突出,并且讓整個布局顯得更為時尚。
分析你的目標(biāo)受眾。通過界定和分析目標(biāo)受眾往往能夠讓設(shè)計師更清楚要先做什么后做什么。了解潛在用戶,了解他們想從你的網(wǎng)站或者 APP 中獲得什么,這樣才能為可用、有用且有吸引力的界面奠定堅實的基礎(chǔ)。中年人和老年人會更加喜歡淺色為主的配色方案,這樣的界面對他們而言更加直觀,也更加易于導(dǎo)航。年輕人更加喜歡原創(chuàng)和時尚的深色背景。青少年和兒童更喜歡明亮的背景色彩和有趣的細(xì)節(jié)。以目標(biāo)受眾為中心來設(shè)計,可以讓設(shè)計決策更加明晰。
研究競爭對手。要記住一件事情,你的產(chǎn)品所面對的通常都不是藍(lán)海,而是競爭激烈的紅海。配色方案的選取將會直接影響到你的產(chǎn)品在競爭中看起來是否足夠突出,會影響用戶初次使用的時候,是否愿意與之互動?;ㄙM時間在探索已有的產(chǎn)品上,能夠幫你節(jié)省時間和精力。
測試?;谟脩羧后w、可用性、吸引力等不同因素對配色方案的大概方向確定之后,每個設(shè)計方案都應(yīng)該在不同的分辨率,不同的屏幕以及不同條件下進(jìn)行適當(dāng)?shù)臏y試。在產(chǎn)品投放市場之前,之前不間斷的測試會揭示出配色方案的強(qiáng)弱,如果設(shè)計方案的效率低下,可能會給用戶留下不好的第一印象。

妥協(xié)的解決方案

有時候,最終的解決方案并沒有辦法完全遵循計劃中的方案,妥協(xié)往往是不可避免的。

深色界面,白色標(biāo)簽和文本

正如同我們在之前的設(shè)計趨勢的文章當(dāng)中所提到的,在深色系背景之下,使用白色的標(biāo)簽和區(qū)塊來承載文本,這可以確保文本的可讀性。在設(shè)計的時候,核心的信息文本會搭配一個淺色的區(qū)塊背景,和深色背景隔離開來,這種處理方式實用且優(yōu)雅。

將配色的權(quán)利交給用戶

另外一種方法是讓用戶來選擇配色方案,而我們在設(shè)計 Upper 這個應(yīng)用的時候就是這么做的,這個待辦事項應(yīng)用當(dāng)中,用戶有選擇配色方案的權(quán)利。一方面,這種方式對于用戶更加友好,并且根據(jù)不同的可用性問題以及用戶的審美偏好,提供個性化的方案。另一方面,設(shè)計師和開發(fā)人員需要額外的時間來創(chuàng)建更多可選的配色方案。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!

當(dāng)前文章:在這些因素的條件下,才能選取出合適的配色方案
URL地址:http://muchs.cn/news11/312311.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗、網(wǎng)站設(shè)計公司域名注冊、ChatGPT、營銷型網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作