淺析色彩在信息可視化界面設(shè)計(jì)中的應(yīng)用

孫夢琳

摘要：隨著互聯(lián)網(wǎng)“大數(shù)據(jù)”、“數(shù)據(jù)可視化”的發(fā)展，信息可視化作為界面設(shè)計(jì)的一種表達(dá)形式，其視覺的呈現(xiàn)方式是自然而直觀的，而色彩是界面設(shè)計(jì)中的重要元素之一，它可以帶給用戶不同的視覺和心理感受。所以，探討色彩在信息可視化界面設(shè)計(jì)中的應(yīng)用是UI設(shè)計(jì)發(fā)展的趨勢之一。

關(guān)鍵詞：可視化界面;UI設(shè)計(jì);色彩

在UI設(shè)計(jì)中，色彩是產(chǎn)生視覺沖動(dòng)和藝術(shù)感染力的重要因素之一，其使用和搭配尤為重要，協(xié)調(diào)舒適的配色更能吸引用戶，也能更好地傳遞品牌價(jià)值。UI設(shè)計(jì)與一般的平面作品不同，其整體界面顏色不會(huì)過多，因此，使用顏色的內(nèi)容往往能夠使用戶第一時(shí)間注意到。而信息可視化為電子設(shè)備的UI界面設(shè)計(jì)提供了更為有趣的視覺效果和交互體驗(yàn)感，將復(fù)雜的數(shù)據(jù)信息通過視覺圖形圖像元素表現(xiàn)，搭配相應(yīng)的色彩，提升界面趣味性的同時(shí)，能夠更加準(zhǔn)確清晰、有效及時(shí)的傳達(dá)相關(guān)信息，節(jié)省用戶使用時(shí)間。

一、色彩對用戶心理的影響

色彩對人們的視覺來說是最為敏感的，色彩能夠給人們留下深刻的印象。色彩教育家約翰內(nèi)斯說過：“色彩向我們展示了世界的精神和活生生的靈魂。”人的視覺器官在觀察物體時(shí)，最初的幾秒鐘對色彩的感知達(dá)到80%，形態(tài)感知只有20%，兩分鐘后，色彩感知占60%，形態(tài)感知占40%，清晰的表明了色彩在UI設(shè)計(jì)中的地位，給用戶留下鮮明、快速、明了的印象。色彩的合理運(yùn)用，能夠傳遞情感，但人類對于色彩傳遞的情感是因人而異的，對于大部分消費(fèi)者群體來說，鮮艷明快的色彩給用戶一種在此消費(fèi)較為“便宜”的認(rèn)知，而深色或不完全飽和的顏色會(huì)給予產(chǎn)品一種“優(yōu)雅、精致、權(quán)威”的心理感受。色彩給予用戶的視覺感受是直觀的，具有聯(lián)想性。在信息多元化的當(dāng)下，如何使用戶留有深刻的印象，如何給用戶提供情感認(rèn)知，就需要依靠視覺效果來傳達(dá)信息。用戶色彩心理的研究較為復(fù)雜，但色彩確實(shí)可以對用戶的感知起到積極或者消極的影響。

二、可視化界面設(shè)計(jì)中色彩的使用原則

人類的認(rèn)知主要來源于視覺、聽覺和觸覺，而最直接、最基本的認(rèn)知即來自于視覺。在界面的設(shè)計(jì)上，運(yùn)用色彩提升界面的美觀性，給予用戶視覺愉悅、易懂、易操作等體驗(yàn)，可以發(fā)揮色彩在UI界面設(shè)計(jì)中先聲奪人的作用。

（一）色彩搭配

1.顏色不過三

在界面設(shè)計(jì)中，主要的色彩不超過三種色相的搭配，表達(dá)出產(chǎn)品主題即可，單個(gè)界面中色彩過多，會(huì)使用戶在視覺上出現(xiàn)凌亂感。單一的顏色在界面設(shè)計(jì)中稍顯單調(diào)乏味，可以調(diào)整單一色相中的明度或飽和度來豐富色彩，通過顏色的把控使界面具有層次感。

2.色彩配比

6：3：1原則是指主導(dǎo)色占60%，輔助色占30%，重點(diǎn)色占10%，該比例可以為界面設(shè)計(jì)中的色彩帶來相對的平衡感，并能使用戶明確界面中的設(shè)計(jì)重點(diǎn)，為用戶起到視覺引導(dǎo)的作用，更好地了解界面的層次結(jié)構(gòu)。

（1）主色

界面設(shè)計(jì)中，色彩的搭配需要符合產(chǎn)品的特征和想要給用戶帶來的心理感受，在確定整體界面的主色調(diào)前，需要對產(chǎn)品進(jìn)行分析和定位，確定好產(chǎn)品的應(yīng)用人群及方向后，利用色彩心理學(xué)提煉出較為貼切的主色調(diào)。主色一般用于被激活的圖標(biāo)、導(dǎo)航欄、狀態(tài)欄和標(biāo)簽欄等。

（2）次色及輔助色

界面設(shè)計(jì)中的次色主要用來配合主色調(diào)，通過與主色調(diào)相同的色相，偏白或黑來調(diào)整顏色的明暗度。

輔助色是界面設(shè)計(jì)中的點(diǎn)綴色，輔助色的點(diǎn)綴可以使整個(gè)界面視覺效果更加豐富。一般用于界面的分類導(dǎo)航圖標(biāo)、設(shè)置功能圖標(biāo)、消息通知、標(biāo)簽等處。

（3）背景色

通常來說，APP界面的背景色使用較多的是無色系，通過無色系與主色、輔助色等有色系搭配，可以使界面看起來干凈、整潔。一般用于界面的主背景、區(qū)塊的分割、邊框、文本內(nèi)容等地方。

（二）界面設(shè)計(jì)中色彩使用分析

不同的色彩能夠給用戶傳遞出不同的含義和心理感受，每種顏色在思維中都有其獨(dú)特的影響力。

1.紅色

該顏色具有很強(qiáng)的視覺沖擊力，能夠使人產(chǎn)生沖動(dòng)、熱情、憤怒等不同的感覺，它可以快速提高用戶注意力，所以，紅色通常作為信息未讀圖標(biāo)出現(xiàn)。在界面設(shè)計(jì)中，紅色不易大面積使用，容易使用戶產(chǎn)生視覺疲勞。當(dāng)然，需要根據(jù)界面所傳遞的信息進(jìn)行色彩的使用，如黨團(tuán)或重大節(jié)日慶賀，以紅色為主色調(diào)，能起到提神和振奮人心的效果。

2藍(lán)色

藍(lán)色是大部分用戶喜歡的第一色，在大自然中，我們對藍(lán)色的認(rèn)知度最高。在界面設(shè)計(jì)中，將品牌和顏色結(jié)合起來，可以營造用戶對品牌的信任感，所以藍(lán)色多以安全、可靠、高科技和創(chuàng)新等心理感知出現(xiàn)。最重要的一點(diǎn)是，藍(lán)色對于色盲的用戶很友好，紅綠色盲群體能夠在多種色彩中明確分辨出藍(lán)色。

（三）色彩的使用使可視化界面設(shè)計(jì)更具個(gè)性化

可視化界面設(shè)計(jì)中的色彩，不但給用戶帶來了審美的愉悅，同時(shí)也體現(xiàn)了設(shè)計(jì)豐富的文化內(nèi)涵及社會(huì)性內(nèi)容，能夠容易被用戶識別記憶，從而起到更好的宣傳作用。

色彩的象征性意義應(yīng)用于信息可視化界面設(shè)計(jì)，透過色彩獨(dú)特的心理反應(yīng)和直覺刺激，在短暫的時(shí)間內(nèi)能夠吸引消費(fèi)者的視覺注意力。

三、色彩在信息可視化界面設(shè)計(jì)中的應(yīng)用

隨著用戶審美的提高，界面設(shè)計(jì)的交互及視覺也隨之不斷優(yōu)化。信息可視化界面為用戶提供了豐富且有趣的視覺體驗(yàn)及交互體驗(yàn)。

在信息可視化界面設(shè)計(jì)的過程中，色彩能夠通過創(chuàng)造視覺焦點(diǎn)來影響用戶的情緒和認(rèn)知，甚至可以引導(dǎo)用戶操作界面的行為，利用色彩的搭配對信息可視化界面進(jìn)行優(yōu)化，使界面的視覺效果有其獨(dú)特的趣味性和魅力。

（一）色相的對比

在0°到360°的標(biāo)準(zhǔn)色輪上，距離越近的色彩，對比的視覺效果越弱，反之對比則越強(qiáng)，越具有視覺刺激性。通過色相的對比，能夠?qū)梢暬缑鎮(zhèn)鬟_(dá)的信息一目了然。如機(jī)場智能數(shù)據(jù)庫的信息可視化界面設(shè)計(jì)，背景選用較深的顏色，數(shù)據(jù)等實(shí)時(shí)信息通過不同的色相來表現(xiàn)，如‘航站樓旅客分部情況’信息可視化界面中，紅色代表人群密集，橙色其次，綠色代表人群稀疏，實(shí)時(shí)信息變動(dòng)，一目了然。

（二）明度、飽和度的對比

色彩的明度即色彩的亮度，不同的顏色有其明暗的差異性，同一色相也有其明暗深淺的變化。色彩的明度對比的強(qiáng)弱取決于明度的基調(diào)差別程度，越接近白色，明度越高，反之明度越低。

今年年初我國發(fā)布疫情動(dòng)態(tài)信息可視化分布圖，利用色彩的對比，來顯示和區(qū)分不同地區(qū)疫情的治愈率和確診率，深色代表確診基數(shù)較大，淺色則代表確診基數(shù)小。在米勒定律中，如果信息塊過多，會(huì)導(dǎo)致信息過載，所以利用信息可視化界面設(shè)計(jì)中的原則，將不同的信息組成“塊”，再利用色彩對不同的“塊”進(jìn)行視覺分類，減少用戶的認(rèn)知負(fù)荷。

四、總結(jié)

現(xiàn)今，信息可視化的視覺表現(xiàn)形式已然成為一種趨勢，成為了人與人、人與數(shù)據(jù)之間進(jìn)行溝通的最便捷方式，用更加直觀、易于理解的形式進(jìn)行信息的分享和溝通，縮短信息表達(dá)方式，同時(shí)給受眾者留有深刻的印象。

信息可視化最主要的目的是“一圖勝萬言”，能夠直接在視覺上強(qiáng)化用戶認(rèn)知。本文從色彩對用戶心理的影響，使用原則及應(yīng)用方式進(jìn)行闡述，對色彩在信息可視化界面設(shè)計(jì)中的應(yīng)用具有一定的意義。

參考文獻(xiàn)：

[1]王月穎：淺析色彩在UI設(shè)計(jì)中的作用，山東工業(yè)技術(shù)，2019年第16期

[2]宋秀賢，馮本慧，陳青青：色彩對網(wǎng)頁界面設(shè)計(jì)的影響探究，西部廣播電視，2015

[3]王學(xué)義：信息可視化中色彩應(yīng)用研究，科技情報(bào)開發(fā)與經(jīng)濟(jì)，2008年第26期