色彩在移動端界面設(shè)計中的導(dǎo)向性應(yīng)用研究

王羽菲

摘 要：從色彩在界面設(shè)計中的導(dǎo)向作用出發(fā)，探索如何在界面設(shè)計中合理運用色彩的導(dǎo)向性。結(jié)合色彩在界面設(shè)計中的重要性，重點分析色彩在用戶心理上的情感傳遞作用和在生理認(rèn)知導(dǎo)向上的表現(xiàn)和影響，總結(jié)歸納出色彩導(dǎo)向性在界面設(shè)計中的設(shè)計方法，得出色彩需要與功能保持一致性、注意界面整體與局部的關(guān)系、科學(xué)合理地應(yīng)用色彩、傳遞相應(yīng)情感和色彩符合審美共五條設(shè)計方法。

關(guān)鍵詞：色彩；界面設(shè)計

Abstract：Based on the guiding role and importance of color in interface design， focusing on the function of colorin psychological emotional transmission， as well as its performance and influence on physiological cognitionorientation， this paper explores how to reasonably make use of the orientation characteristic of color. This papersummarizes the color-oriented design methods in interface design， and concluded out five design principals：thematching consistency of color application and function， the relationship between the zoomed-in parts and the fullpicture during interface designs， the rational methods of applying colors， the convey of emotion and the colors thatconforms to aesthetics.

Keywords：Color;interface design orientation

互聯(lián)網(wǎng)發(fā)展迅速，越來越多的用戶使用移動應(yīng)用，信息技術(shù)的支撐也讓移動互聯(lián)網(wǎng)的整體覆蓋率不斷擴大，智能產(chǎn)品層出不窮，海量的應(yīng)用潛移默化地改變?nèi)藗兊纳罘绞胶屯ㄓ嵤侄?，呈現(xiàn)色彩的視覺載體從傳統(tǒng)平面拓展至移動端交互界面，通過手機獲取和傳遞信息，互聯(lián)網(wǎng)的產(chǎn)品也不斷迭代更新，信息量暴漲的生活大環(huán)境下，通過界面?zhèn)鬟_(dá)的信息越來越多，用戶對審美的追求也不斷提高，除了產(chǎn)品自身需要具備能夠解決用戶痛點的實用性外，用戶體驗成為產(chǎn)品能否成功的重要度量。不論純界面產(chǎn)品還是線下實體產(chǎn)品，色彩一直是設(shè)計中必不可少的部分，往往作為輔助性元素被應(yīng)用在裝飾環(huán)節(jié)中，但只關(guān)注其裝飾性功能必然已不能滿足大眾需求，用戶追求的精神和心理需求愈來愈高，因此色彩除裝飾性作用外，在心理及生理認(rèn)知上對用戶起到的導(dǎo)向作用也需受關(guān)注。

1 移動端界面設(shè)計中色彩的重要性

光的波長和強度不同，形成了我們現(xiàn)在肉眼可見的不同顏色，飽和度、明度、對比度的不同更讓顏色可以被分為同類色、互補色，不同的產(chǎn)品所具有的不同色彩屬性，是影響設(shè)計的最基本元素，但與其他影響設(shè)計的因素不同，色彩具有其獨特性，它具有文字和圖片無法代替的作用，在一定程度上能夠跨越不同年齡層和文化水平，甚至在一些情況下，用戶對色彩傳遞的信息比圖文更敏感和直接。

從視覺影像的角度看，我們常接觸到界面上的加載進度條基本都是用冷色調(diào)，很少用暖色調(diào)，因為相關(guān)研究表明，顏色能影響用戶對加載速度的感知，而這種作用是在用戶處在放松狀態(tài)下產(chǎn)生作用的[1]，實際上相同時長的等待時間，但暖色調(diào)會讓用戶對于時間的感知變長，而冷色調(diào)可以減緩用戶對頁面加載的焦慮情緒（圖1）。但在游戲界面中，常見的如倒計時的顯示界面，除了背景聲音會愈發(fā)讓人緊張外，在接近時間結(jié)束點的時候，倒計時的數(shù)字顏色也會越來越鮮艷，從黃色系變?yōu)榧t色系，此時倒計時界面和加載界面的場景不同，主要是為了讓用戶能夠盡快在有限時間內(nèi)完成操作，制造緊張的氛圍，故越接近結(jié)束時刻，倒計時數(shù)字越發(fā)醒目，在視覺上讓玩家覺得更具危險性。

色彩亦會直接影響用戶對產(chǎn)品的初印象和對品牌的理解。移動端的界面產(chǎn)品是當(dāng)今時代的主流產(chǎn)品類型，和傳統(tǒng)產(chǎn)品不同，用戶通過手機屏幕看到的是APP 圖標(biāo)以及其呈現(xiàn)的界面，大部分沒有線下對應(yīng)的工業(yè)產(chǎn)品，故顏色在移動端界面產(chǎn)品中的影響力度相比傳統(tǒng)產(chǎn)品更高。每種顏色都有其獨特的情感表達(dá)，在不同語境下表達(dá)的情感內(nèi)容也不同，但具有相同共性，也就意味著移動端產(chǎn)品中視覺規(guī)范里的主體色需要與產(chǎn)品本身的特性、氣質(zhì)相符合，主體色會貫穿產(chǎn)品的所有頁面，影響用戶對于產(chǎn)品本身功能的理解和后續(xù)的使用。除了需要考慮產(chǎn)品本身的功能使用外，也需要考慮產(chǎn)品面向的目標(biāo)人群，人群的性別、年齡差異都會影響產(chǎn)品的色彩選擇，根據(jù)目標(biāo)用戶去選擇色彩搭配也是提升用戶體驗的重要方式之一。

視覺上，合理的色彩能夠，引導(dǎo)品牌表達(dá)其感知，更好__地滿足用戶的情緒。在品牌形象中，色彩能夠讓用戶加深對品牌的印象和加大品牌傳播力度，貼合用戶對相關(guān)移動端產(chǎn)品的功能性理解。在互聯(lián)網(wǎng)時代下，我們?nèi)粘Ｉ钚畔鬟f和獲取的載體基本都已經(jīng)演變?yōu)槭謾C通訊，移動端的界面更是承載了大部分信息內(nèi)容，但手機屏幕大小有限，如果一味地堆積信息，提供過多內(nèi)容，會讓用戶的認(rèn)知承載超負(fù)荷，而內(nèi)容過少又會導(dǎo)致用戶需要不?；瑒踊螯c擊來達(dá)到切換屏幕的目的，交互成本過高，因此相對于傳統(tǒng)色彩，現(xiàn)在的色彩應(yīng)用需要更要注重其在界面中的引導(dǎo)性。

2 色彩的導(dǎo)向作用

2.1 色彩對用戶的心理認(rèn)知導(dǎo)向

用戶對色彩的認(rèn)知可以分為心理和生理兩部分，色彩的心理認(rèn)知指的是色彩的間接性心理感應(yīng)，是人通過自己的喜好、一系列對色彩的聯(lián)想而最終產(chǎn)生的感覺[2]，不同的色彩會給人帶來不同的心理感受和情感聯(lián)想，但同種顏色在不同的場景和背景下可以有多種不同的情感傳遞。若單純從顏色與物的聯(lián)想角度出發(fā)，紅色則經(jīng)常被作為熱情的象征，因為我們意識中接觸到的太陽、火都能夠提供給人溫暖，紅色就被賦予了熱情似火的性格，可滅火器、防火服這類基本也以橙紅色為主，不光是從火的角度聯(lián)想，也有警惕之意，禁止符號通常也用紅色標(biāo)注，因為醒目，能夠及時引起他人注意，并作為一種提醒，達(dá)到讓人防范的目的。可見同樣的色彩，聯(lián)想到不同的物品也可以被運用在不同場景。相同的顏色除了聯(lián)想的具象與抽象內(nèi)容不同外，在不同文化背景下所擁有的深層內(nèi)涵也不同。在中國傳統(tǒng)文化中，紅色與黃色象征皇權(quán)，是尊貴的代表色，但在西方的一些國家中，黃色有膽小鬼和恥辱之意。

合理的色彩應(yīng)用能使人感知到產(chǎn)品自身帶有的情感，產(chǎn)生人機情感上的交互，而愉悅的情感能夠讓用戶忽略產(chǎn)品使用過程中出現(xiàn)的小問題。產(chǎn)品除了能夠解決用戶的痛點外，在解決痛點過程中，也不僅僅只是冷冰冰的工具，只有帶著提升用戶體驗的目標(biāo)，結(jié)合不同用戶在不同場景下的運用，所設(shè)計的產(chǎn)品才會具有溫度。

唐納德· 諾曼在《情感化設(shè)計》中將設(shè)計區(qū)分為3 種水平：與外觀關(guān)聯(lián)的本能水平、與使用關(guān)聯(lián)的行為水平和與記憶有關(guān)的反思水平[3]。外觀會影響用戶對產(chǎn)品的初始印象，從而會涉及與產(chǎn)品后續(xù)使用相關(guān)聯(lián)的行為水平，又在反思層激發(fā)相關(guān)記憶。在與外觀關(guān)聯(lián)的本能水平中，視覺是最主要的影響因素，而色彩更是影響視覺的重要方面，需要與功能相吻合。比如我們常看到的辦公軟件，大部分都用藍(lán)色來作為產(chǎn)品視覺的主體色，比如：騰訊會議（圖2），因為藍(lán)色容易讓人聯(lián)想到大海、天空，讓人產(chǎn)生沉靜、理智的抽象情感聯(lián)想，貼合辦公軟件注重效率和客觀態(tài)度的功能調(diào)性，因此色彩在產(chǎn)品本能設(shè)計上具有預(yù)示產(chǎn)品功能的作用。

在行為層設(shè)計上，色彩對受眾也有引導(dǎo)作用，因為與純實物產(chǎn)品不同，用戶通過界面獲取信息需要更細(xì)致地設(shè)計視覺動線，考慮復(fù)雜的信息如何展現(xiàn)才能提高用戶的使用體驗。如前文所說，醒目的顏色也容易被用作警示作用，如紅色、黃色，通過手機屏幕承載的信息很多，這類醒目的顏色就會被用來吸引用戶注意。比如當(dāng)我們在手機上填寫信息時，往往會有必填和非必填內(nèi)容，必填內(nèi)容或必選項經(jīng)常用紅色的星號來標(biāo)注，結(jié)合符號含義來告知用戶此部分為必填項，用戶就能更容易捕捉到相關(guān)信息，如果沒用醒目的色彩，用戶忽略標(biāo)注的概率就會提升，當(dāng)用戶提交時，系統(tǒng)提醒其未符合提交要求需要補信息的可能性上升。

滿足人們的需求是產(chǎn)品的初衷也是核心目的，但人們對產(chǎn)品的需求也在日漸增加，上升到用戶對產(chǎn)品的內(nèi)在精神需求和心理訴求，這就會涉及反思層的設(shè)計。尤其部分產(chǎn)品是為了特殊群體服務(wù)的，特殊群體對于精神上的需求會更高也會更難滿足，如何能夠?qū)崿F(xiàn)與特殊群體的情感互動并使產(chǎn)品得到他們的認(rèn)可也是色彩應(yīng)用在界面設(shè)計中需要重視的問題，通過色彩拉近產(chǎn)品和用戶之間的距離。

2.2 色彩對用戶的生理認(rèn)知導(dǎo)向

色彩對人的生理認(rèn)知是指色彩固有且客觀的視覺效果，是人類觀察到色彩時所產(chǎn)生的單純的生理感應(yīng)，與顏色本身自帶的波長相關(guān)。色彩從光進入到人眼中分為三個階段：第一個階段即物理性階段，由光的性質(zhì)和亮度決定；第二個階段是由視細(xì)胞產(chǎn)生光和色的對應(yīng)，為生理性階段；第三個階段是人接受光時，心理產(chǎn)生的意識變化，色的感覺，就是光作用在眼睛感覺器官上的刺激結(jié)果。在認(rèn)知對象或客觀性事實的過程中，由遠(yuǎn)心性神經(jīng)所產(chǎn)生的反應(yīng)[4]。顏色并不是孤立存在的，會與其他有色區(qū)域重疊或比鄰，產(chǎn)生對比效果，色彩在生理上最基礎(chǔ)的導(dǎo)向作用是讓用戶有點擊的欲望，能夠明確分辨出不同模塊的功能，強調(diào)關(guān)鍵信息，作為重要元素的引導(dǎo)，色彩遍布界面設(shè)計中的每一個元素，再小的圖標(biāo)也需要考慮色彩的應(yīng)用。

波長同樣也會影響人類生理上的視覺感知，尤其需要注意的就是低齡兒童和老年用戶。學(xué)齡前兒童的視力還處在發(fā)育完善的階段，后期才達(dá)到正常成人水平，他們對色彩的認(rèn)知能力也是在成長過程中才不斷提高的，3 歲及以下的兒童往往難以區(qū)分復(fù)雜的混合色，但學(xué)齡階段的兒童也已經(jīng)有自己的顏色喜好，往往對暖色調(diào)產(chǎn)生一定偏好[5]。對學(xué)齡前的兒童來說，色彩在界面設(shè)計中的作用主要是輔助學(xué)齡前兒童的認(rèn)知，因為色彩能夠幫助增強信息傳遞的效率和準(zhǔn)確性，減少兒童的認(rèn)知障礙。他們無法通過閱讀文字來接受大部分圖2 騰訊會議界面截圖信息內(nèi)容，但色彩的對比能夠引導(dǎo)他們點擊主要元素，所以色彩在界面中就格外重要。

與學(xué)齡前兒童類似的是老年用戶，現(xiàn)在很多移動端產(chǎn)品的界面都已經(jīng)研發(fā)出了針對老年用戶群體的關(guān)懷版本，相較正常版本，老年版界面上的字號會更大，字體也會加粗，但色彩上卻容易被忽略。隨著年齡增長，進入老年期后，老年人對顏色感知的敏感程度也會下降，因此需要拉高色彩上的對比度以及飽和度，用色彩輔助引導(dǎo)用戶。

同時色盲和色弱這類特殊群體，他們因為先天基因或后天的影響導(dǎo)致對特定顏色失去辨識度，雖然大部分產(chǎn)品并非針對這類特殊群體，但也有一些界面端產(chǎn)品是針對需要關(guān)懷的特殊群體而設(shè)計的，就更需要從色彩角度出發(fā)，減少信息理解成本。

3 色彩導(dǎo)向性設(shè)計方法

3.1 與功能保持一致

對產(chǎn)品而言，講究設(shè)計的一致性往往指產(chǎn)品在不同使用場景下反映相同的設(shè)計方式。比如同類型頁面的跳轉(zhuǎn)動畫、交互方式，色彩導(dǎo)向性上的一致性包含兩個方面：一方面與設(shè)計方式相同。即在不同場景下同樣重量級的元素在頁面的顏色盡量保持一致性，不能每個頁面相同的元素都用不同的色彩表現(xiàn)，不僅不利于審美，更容易讓用戶困惑，需要遵循視覺規(guī)范；另一個方面，即從產(chǎn)品的功能出發(fā)，用戶容易在視覺上對產(chǎn)品有相關(guān)預(yù)期，而色彩對視覺的影響更是不可忽略，要讓界面視覺色彩貼合產(chǎn)品的功能和品牌調(diào)性，有利于用戶對產(chǎn)品形成良好的初印象和后續(xù)的使用。

3.2 注重整體與局部關(guān)系

界面設(shè)計中，不可能只有一種顏色，其他顏色都需要和主體色匹配，才能保持整體統(tǒng)一和諧。整體到局部合理的色彩搭配更能夠讓用戶從各方面體會到產(chǎn)品傳遞的色彩語義，并影響用戶處理信息的速度。因為顏色與顏色之間也會構(gòu)成各種關(guān)系，通過對比度、明度、純度的搭配，以及色相差的對比，用色彩告知用戶哪些部分是一體的，哪些部分是突出的重點內(nèi)容，因為色彩顏色的增加會讓用戶在潛意識中對信息進行區(qū)分，如果不注重整體與局部，太過于強調(diào)區(qū)分，會讓用戶不停分析各個元素之間的關(guān)系，而好的用戶體驗是要讓用戶能夠快速獲取想知道的信息，降低學(xué)習(xí)成本。因此要注重整體和局部色彩的運用，更簡單有效地傳遞信息，讓用戶能夠快速對信息進行篩選。產(chǎn)生對比的同時，也注重色彩與元素形態(tài)的和諧，完成信息指引。

3.3 科學(xué)合理的應(yīng)用

色彩在界面設(shè)計中具備的作用相同，但是作用的大小對不同的用戶群體而言也是不同的，因為不同群體對相同顏色的感知能力不同，如前文所述，學(xué)齡前兒童對界面設(shè)計中的顏色要求就更高，因為他們對其他信息的感知能力相對更弱，對他們而言，顏色起到的信息傳遞作用相較于正常成年人更大，他們需要通過色彩的導(dǎo)向作用來獲取部分信息。同時，即便不針對特殊群體，我們?nèi)粘Ｔ谑謾C屏幕上所花費的時間很長，一些波長的光產(chǎn)生的顏色在長期注視下會讓用戶容易產(chǎn)生視覺疲勞，因此，在運用色彩的導(dǎo)向性時，要遵循科學(xué)。

3.4 傳遞相應(yīng)情感

視覺上和產(chǎn)品功能的一致性能夠傳遞一定的情感，但更重要的是色彩搭配在界面內(nèi)的合理應(yīng)用。用戶已經(jīng)愈來愈開始追求反思層面的情感，情感也是影響用戶體驗的關(guān)鍵，要讓色彩幫助產(chǎn)品與用戶建立起情感聯(lián)系。如學(xué)齡前兒童的界面產(chǎn)品，顏色往往比較明亮，給人輕快的感覺，因為明亮的顏色在情感上容易讓人覺得輕松，更容易讓人心情愉悅，也可以通過色彩傳遞的這種感覺吸引學(xué)齡前兒童的注意力，配合界面動畫，起到導(dǎo)向性作用，與界面產(chǎn)生交互行為，心理的認(rèn)知逐漸成熟。

3.5 符合審美

雖然色彩的導(dǎo)向性很大程度上以實用性為主，但產(chǎn)品在美學(xué)層面給用戶的感受也會影響用戶的情緒。而情緒會改變?nèi)四X解決問題的方式，進而改變認(rèn)知系統(tǒng)的運行過程。通過審美來拉動用戶的情緒，引導(dǎo)其對產(chǎn)品產(chǎn)生興趣，可以讓產(chǎn)品使用者在與產(chǎn)品發(fā)生交互前心情更愉悅，美感來自人與色彩交互過程中無礙且快速基本的溝通、生活經(jīng)驗的嵌入和環(huán)境的關(guān)系、經(jīng)驗人化的創(chuàng)造和保留等[6]。通過符合用戶審美的色彩滿足其主觀的視覺享受快感，提升產(chǎn)品的價值。

4 結(jié)語

色彩作為設(shè)計中最基本的元素，在界面設(shè)計中有重大影響力，承擔(dān)的功能已經(jīng)不僅僅是純視覺的裝飾作用，隨著用戶體驗被越來越重視，在用戶與產(chǎn)品色彩交互過程中色彩的導(dǎo)向性更應(yīng)該被關(guān)注。色彩的表現(xiàn)力滲透在界面中的每一個元素中，信息技術(shù)的支持更讓色彩的表現(xiàn)形式不同于以往。我們提倡以人為中心的設(shè)計，檢驗產(chǎn)品好壞最基礎(chǔ)的標(biāo)準(zhǔn)即使用者的感受，從目標(biāo)導(dǎo)向的角度出發(fā)，思考如何運用色彩的導(dǎo)向性去提升用戶體驗，拉近產(chǎn)品與用戶之間的距離，幫助用戶提高獲取信息的準(zhǔn)確性和有效性。

5 參考文獻

[1] 仲祥成. 基于用戶體驗的移動端產(chǎn)品色彩研究[J]. 西部皮革，2020（12）：103-104.

[2] 王至柔. 色彩引導(dǎo)性在移動端信息篩選中的應(yīng)用——以二十四節(jié)氣導(dǎo)購平臺為例[D]. 北京： 北京郵電大學(xué)，2020.

[3] 唐納德· 諾曼. 情感化設(shè)計[M]. 付秋芳， 程進三譯. 北京： 電子工業(yè)出版社，2005.

[4] MADEAＪ.The law of simplicity[M].Cambridge，Massachusetts：MITPress，2006.

[5] 郝晶. 基于學(xué)齡前兒童認(rèn)知心理的游戲APP 界面設(shè)計研究[D].北京： 中國礦業(yè)大學(xué).2015.

[6] 毛靜， 王峰. 交互色彩的導(dǎo)向性功能探究[J]. 包裝工程，2012（20）：86-89.