導向視覺標識界面色彩可視化搭配方法研究

孫廣梅

(南首爾大學 影像設計學院，忠清南道 天安 31020)

引言

信息化時代，互聯(lián)網(wǎng)的使用覆蓋面越來越廣，服務業(yè)、制造業(yè)等行業(yè)的銷售，均利用自主研發(fā)的網(wǎng)站向外銷售商品，而網(wǎng)站的導向視覺標識頁面的色彩搭配，會影響瀏覽者的視覺感受，因此導向標識界面的色彩可視化搭配，顯得尤為重要。導向視覺標識界面，其功能就是吸引瀏覽者迅速、簡單找到網(wǎng)站中的目標信息，經(jīng)調(diào)查可知，國內(nèi)電子商務快速發(fā)展，CNZZ數(shù)據(jù)中心數(shù)據(jù)表明，我國電子商務網(wǎng)站數(shù)量不斷上升，截止到2018年底，網(wǎng)站數(shù)達到了5.12億，同時網(wǎng)絡銷售額也增長到90.0309萬億元?？梢娫诟偁幦找婕ち业男袠I(yè)發(fā)展中，導向視覺標識界面的色彩搭配，也會有決定性的作用。蘆淼在《不一樣的色彩心理學》一書中提到：色彩是一種生活，是一種情感，是我們感知世界最重要的一種手段。美國作家霍茨舒在《設計色彩導論》一書中寫道：我們的生活的各個方面包含色彩，或充滿激情，或創(chuàng)建一個寧靜的傳達感情或發(fā)人深思。可見網(wǎng)站導向標識界面，是吸引瀏覽者使用該界面，獲取網(wǎng)站中目標信息的關鍵。因此文獻[1]通過探討網(wǎng)頁設計中的色彩搭配，實現(xiàn)吸引瀏覽者這一目的；而文獻[2]通過對不同色彩的多次搭配實驗，設計網(wǎng)站平面。但這些手段面對海量商品的網(wǎng)站標識界面時，搭配的標識色彩失去了原有的競爭力，因此研究一個考慮色彩聯(lián)想與情感的色彩可視化搭配方法。

一、導向視覺標識界面色彩可視化搭配方法

1.鑒別形成色彩心理的要素

形成色彩心理的第一個要素，就是色彩的輕重感，而明度和純度，是確定色彩輕重感的關鍵因素。在相同物體表面，會因色彩較多產(chǎn)生輕重差異的視覺效果，即色彩的輕重感。調(diào)查發(fā)現(xiàn)，人的視覺與色彩輕重感息息相關，不同明度的物品在眼前擺放會感覺到不同的色彩輕重。例如當人眼看到白色時，會感覺物品較輕，有漂浮、上升之感；而當人眼看到黑色色彩時，會感覺物品較重，產(chǎn)生堅固、神秘的感覺。不同色彩帶給人眼的輕重感不同，而色彩的明度，對輕重感起到了決定性的作用。圖1是色彩輕重感的差別示意圖[3]。

圖1 色彩的輕重感差別示意圖

通過圖1可知，淺色物品在視覺上給人的感覺較輕，富有生機和活力；深色物品在視覺上給人的感覺較為沉重，具有踏實感和沉重感。可見色彩輕重感影響色彩心理的形成。

形成色彩心理的第二個要素，是色彩自身的冷暖感。色彩本身沒有溫度，之所以可以給人帶來視覺上的冷暖感受，是因為人眼捕捉色彩差異后，會產(chǎn)生體驗和聯(lián)想。例如當人眼識別到橙色、黃色或紅色等類型的顏色時，會聯(lián)想到炙熱的火把、燦爛的陽光以及奪目的朝霞，給人留下溫暖的印象；而當人眼看到黑色、藍色或棕色時，會聯(lián)想到無盡的夜空、寬廣的海洋和肥沃的土地，給人留下清冷的印象。可見色彩的冷暖感是色彩差異帶來的心理感受，圖2為色彩的冷暖感類型圖。

圖2 色彩的冷暖感示意圖

根據(jù)圖3可知，色彩的冷暖感很重要，如果用冷暖色呈現(xiàn)在導向視覺標識界面中，會使色彩接受者產(chǎn)生不同的內(nèi)心感受。

形成色彩心理的第三個要素，是色彩的距離感。在人眼中，色彩有前進與后退感，在人眼視網(wǎng)膜成像區(qū)域的靠前區(qū)域是暖色與高明度色彩，擴張感與向前行進的視覺感受；而在人眼視網(wǎng)膜成像區(qū)域的靠后區(qū)域是冷色和低明度的色彩，具有緊縮與后退感。在導向視覺標識界面的設計中，色彩的距離感會制造豐富的界面層次，突出重要區(qū)域，令導向視覺標識界面具有更多的美感。圖3為色彩的距離感示意圖。

圖3 色彩距離感示意圖

形成色彩心理的最后一個要素，是色彩的強弱感要素。當色彩對比明顯時，其易見度會變高，色彩所呈現(xiàn)出的力量會變強，反之則易見度變低，色彩所呈現(xiàn)出的力量會變?nèi)?。比如說交通警示標志是黃色與黑色搭配的，強烈的色彩差異產(chǎn)生視覺刺激，易見度高，吸人眼球，色彩的力量極強，可以吸引人的視覺目光。圖4反映了色彩的強弱感差異[4]。

圖4 色彩強弱感差異

綜合上述鑒別的四類影響色彩心理形成的要素，設計導向視覺標識界面的色彩多樣化搭配方式。

2.差異化色彩的生理效應和心理效應

人眼經(jīng)光源或者經(jīng)過物體表面的反射光刺激視網(wǎng)膜上的感光細胞后，色彩信息傳至大腦皮層，大腦對物品色彩進行分析、處理以及辨識，這就是色彩的生理效應，可見色彩會對人產(chǎn)生生理影響。

已知視網(wǎng)膜呈現(xiàn)影像在外界物體對人眼停止視覺刺激后不會馬上消失，這就是視覺后像。在進行同時對比或連續(xù)對比色彩時，會形成視覺后像。假若同時對紅綠色進行比較，產(chǎn)生的結果是紅色更紅，綠色更綠，這也被稱作色彩補償。表1為發(fā)生色彩補償現(xiàn)象時，人眼對色彩之間的直觀感受[5]。

表1 人眼對色彩連續(xù)對比的直觀感受

根據(jù)表1可知，生理效應使人對于色彩平衡感產(chǎn)生需求，所以一種色彩被人眼捕捉時，大腦會馬上需求其補色，一旦沒有補色，人眼就會自動調(diào)節(jié)出相應的色彩補償。這就使得在對導向視覺標識界面進行設計時，要充分考慮視覺后像而不能單單使用單一色彩。

而色彩還具有同時對比效應，進行色彩同時對比時，色彩之間的對比關系越強烈，視覺效果就越明顯。同時對比純度不同的色彩，純度高的色彩更鮮艷奪目，純度低的色彩則黯然平淡；同時對比色相互補的色彩時，兩種顏色依據(jù)各自色彩屬性，而使雙方的色彩都更加飽滿、明顯；同時對比色相不同的色彩，受相鄰色彩影響，自身色彩屬性會發(fā)生改變和異化，連接彼此的色彩之間產(chǎn)生作用，令對方含有自身補色的成分達到平衡的效果，并給人生動的視覺感受。表2描述了色彩進行同時對比時的規(guī)律。

表2 色彩同時對比規(guī)律

約翰內(nèi)斯·伊頓在其著作《色彩藝術》中提出：“色彩的視覺后像現(xiàn)象和同時對比現(xiàn)象都凸顯了一個人體生理事實，人的視力在接收到色彩時都需要與其相對應的補色來中和，以此達到平衡。如果沒有出現(xiàn)補色，那么人的視力會自動調(diào)節(jié)并生成相應的補色。這種互補色的平衡規(guī)律是科學合理進行色彩設計的重要基礎，遵循這種規(guī)律才能營建和諧平衡感。”[6]所以按照伊頓提出的這一原理，通過改變色彩搭配，創(chuàng)造出趣味性更強、體驗感更豐富的導向視覺表達界面。

色彩的心理效應是一種主觀感受，是在生理效應的基礎上產(chǎn)生的。心理研究顯示，人年齡不斷增長，生理結構的變化會使色彩的心理效應發(fā)生改變。孩子更喜歡明亮艷麗的顏色，當孩子在1歲到3歲時，最喜歡的顏色是黃色；當孩子在4歲到8歲時，最喜歡的顏色是紅色；當孩子成長到8到15歲年齡段時，男孩子最喜歡的顏色按照喜愛程度排序，分別是綠色、紅色、藍色、黃色、白色和黑色；而8到15歲年齡段的女孩子，最喜歡的顏色按照喜愛程度排序，分別是綠色、紅色、白色、藍色、黃色和黑色。表明受年齡變化的影響，人的喜好色彩會由明度較高的顏色逐漸轉變?yōu)槊鞫容^低的顏色。同時，時代變遷也造就了人們對社會意識形態(tài)和生產(chǎn)生活方式的認知，差異化了人們的審美取向。當一些色彩與人們的認知、喜好、興趣相契合，這些色彩就被賦予了特殊的時代感染力和象征意義，迅速流行起來。再有就是人們的聯(lián)想，也會影響色彩心理效應。色彩聯(lián)想分為兩種，分別是具體聯(lián)想和抽象聯(lián)想。表3反映了不同性別、不同年齡的人群，由不同顏色而產(chǎn)生的聯(lián)想[7]。

表3 色彩的具體聯(lián)想

色彩聯(lián)想中，大腦會有豐富的空間想象和時間想象，這其中，抽象聯(lián)想可以根據(jù)色彩感受，引發(fā)人們的情感意象，如表4所示，不同的顏色，經(jīng)人們的聯(lián)想后，可能會有不同的意義。

表4 色彩的抽象聯(lián)想

根據(jù)上述差異化分析可知，色彩的生理效應和心理效應，是決定色彩搭配的又一重要因素。

3.設計導向視覺標識界面的色彩搭配方案

以上述分析為前提，設計色彩搭配方案。導向視覺標識界面的色彩搭配，能為瀏覽者帶來明晰的第一印象，以抓住瀏覽者目光的方式，吸引瀏覽者瀏覽網(wǎng)站內(nèi)的信息，使網(wǎng)站在激烈競爭中得到更多瀏覽者。已知導向視覺標識界面需要搭配的色彩多樣、生動，根據(jù)表現(xiàn)力的不同，將色彩分為10個類別，每一類別中，包含了6組不同的色彩搭配方案，圖5為界面色彩表現(xiàn)的具體分類[8]。

圖5 界面色彩表現(xiàn)分類

根據(jù)上圖中的色彩代碼，明確每一組的色彩搭配效果，可知A1組是用鮮艷明快的色彩搭配清透的明清色，具有明快感和親切感，是輕快型色彩；A2組色彩采用高亮的色調(diào)與清澈的色調(diào)，具有明亮可愛的形象，象征著新生與樂觀，這組色彩使人心情愉悅，屬于可愛型色彩；A3組采用清雅的色調(diào)，淺藍色、淺紫色等為主，有浪漫的氛圍，表現(xiàn)出細膩而雅致的色彩搭配，是浪漫型色彩；A4組以藍色與綠色為主，色彩清澈、干凈，其高明度的特點反映了明朗的形象，可用來描述單純、清麗的形象，因此為清爽型色彩；A5組色彩采用了綠色環(huán)保無污染的理念，米色或棕色為主，搭配自然環(huán)境反饋的天空藍、草地綠和大地棕等色彩，屬于自然型色彩；A6組體現(xiàn)了尊貴和典雅，具有成熟的獨特魅力，是優(yōu)雅型色彩；A7組以低純度的淺灰色調(diào)為主，讓人產(chǎn)生平靜、樸實的感覺，是別致型色彩；A8組以中純度色調(diào)為主，避免了強烈的色調(diào)變化，屬于高貴型色彩；A9組以低明度、高純度色調(diào)為主，棕紅色系與深藍綠色系搭配金色與淺灰色，屬于講究品質(zhì)特征的古典型色彩；A10組運用高純度鮮明色彩與黑色進行搭配，具有激情的感受，強烈的氛圍展現(xiàn)了動感型色彩的特征。根據(jù)上述色彩表現(xiàn)類型，設計了4種色彩搭配方案，詳見表5。

表5 多樣化的色彩搭配方案

按照表5中設計的色彩搭配方案，搭配界面主色彩、輔助色彩、強調(diào)色彩的。

4.可視化搭配界面主色彩、輔助色彩、強調(diào)色彩

考慮瀏覽者的情感，搭配界面主色彩、輔助色彩、強調(diào)色彩。在導向視覺標識界面中，界面的主色彩是瀏覽者印象最深的地方，其貫穿在導向界面中。在所有標識的導向頁面中，主色彩的出現(xiàn)頻次最高，而界面不能絕對地只運用單一的一種顏色，因此選取的主色彩不能少于2個色彩，同時也不能多于4個，以免產(chǎn)生混亂感以及沒有明顯情感傾向的問題，不能反映側重點。選取的主色彩，應隸屬于同一色系，如圖6所示[9]。

圖6 色彩配置主色系示意圖

相較于主色彩，輔助色彩對瀏覽者的吸引力較差，它的功能是和主色彩協(xié)調(diào)配色，緩沖、調(diào)和、過渡標識之間的色彩差異，這樣界面中的表示色調(diào)統(tǒng)一，又不會失去變化。而強調(diào)色彩的所占面積最小，主要起到強調(diào)作用，采用突出醒目的色彩，讓瀏覽者快速找到界面中的目標標識，縮短了瀏覽者的尋找時間，不會因為長時間找不到導向標識而出現(xiàn)厭煩心理，從而影響對該網(wǎng)站的使用。選擇的強調(diào)色彩應與主色彩互補或?qū)Ρ龋孕涯俊包c”的作用，使整個界面連貫[10]。

上述過程結合已知的色彩生理效應和心理效應，在考慮瀏覽者情感的基礎上，利用可視化操作系統(tǒng)，重新設定主色彩、輔助色彩、強調(diào)色彩的搭配程序與顏色分量，實現(xiàn)導向視覺標識界面色彩的可視化搭配，通過增強頁面與瀏覽者之間的喜歡關聯(lián)，實現(xiàn)情感化的色彩搭配方法。

二、調(diào)查與分析

將此次提出的導向視覺標識界面色彩搭配方法作為實驗組，將文獻所提出的兩種色彩搭配方法作為對照組，利用三種方法設計K網(wǎng)站的導向視覺標識界面，比較網(wǎng)民在該網(wǎng)站中的瀏覽量，推斷三種方法的性能。

已知選取的K網(wǎng)站為購物網(wǎng)站，該網(wǎng)站的服務范圍廣、涉及的內(nèi)容類型多，具體信息如表6所示。

表6 K網(wǎng)站的基本服務信息

以上述內(nèi)容為依據(jù)，分別利用三種方法搭配該網(wǎng)站中，導向視覺標識界面的色彩，設計完畢后投入使用，經(jīng)過一周的調(diào)查，統(tǒng)計該網(wǎng)站的客戶瀏覽總量以及其他參數(shù)。圖7是一周內(nèi)，三種色彩搭配方法下，瀏覽者瀏覽K網(wǎng)站的各項數(shù)據(jù)統(tǒng)計結果。

圖7 網(wǎng)站瀏覽數(shù)據(jù)統(tǒng)計結果

根據(jù)上述統(tǒng)計結果可知，在一周之內(nèi)，實驗組的訪問人數(shù)超過了500萬，且總瀏覽量超過了8000萬，訂單成交數(shù)也達到了400萬。而對照組中，平均訪問任務在100萬左右，平均瀏覽量也不足2000萬，訂單成交數(shù)合計不到100萬。綜合上述分析可知，實驗組網(wǎng)站導向標識界面的色彩搭配，更加吸引客戶瀏覽網(wǎng)站頁面。

三、結語

此次針對導向視覺標識界面，提出了一種依靠情感分析的色彩搭配方法，通過了解人的情感聯(lián)想和情感變化，讓色彩搭配更加均衡，吸引瀏覽者常駐標識界面，進而通過一層一層的界面標識，為瀏覽者提供快速、清晰、獨具特色的網(wǎng)頁信息，為網(wǎng)站的長足發(fā)展和經(jīng)濟收益，提供一份更加全面的技術支持。但此次研究的色彩搭配方法，沒有詳細介紹各類商品屬性的色彩傾向，今后的研究與分析中，可以對該方向著重介紹。