交互界面設計中色彩對受眾的引導

李建一 / 韓瑞大學

人的感官分為五種：視覺，聽覺，嗅覺，味覺，觸覺，視覺是人類的第一印象感覺，而對視覺最有影響的因素是色彩。在人機交互中，圖像表現是一個非常重要的因素，而圖像元素又包括文字、圖形和色彩，其中色彩是人機交互的主要內容。

1 交互界面設計概述

“交互”是人與事物、人與人、人與環境的相互作用，并由此引起一定的改變。“界面”一般是指使用者界面。問題的答案在于“設計”。

APP的界面設計是指用戶和智能移動終端設備的交互界面，它是用戶與智能移動終端設備之間信息輸入、輸出、溝通的載體，是人機交互的輔助層次。APP的界面設計始終以“以人為本”為目標，優良的APP界面不僅能帶來簡潔、美觀的視覺體驗，更能提升用戶的使用體驗[1]。

APP界面上的色彩顯示原則，即加色混合，是通過將不同色彩的光相進行混合而得到的新的色光。所有的色彩都是要在用戶面前用光呈現出來，而在加色法中，將紅綠藍3種原色光按比例混合，就可以得到完整的色層。色彩有溫度、距離、重量等多種感受，同時，人們對于色彩的感受也會受到情緒、環境等因素的影響。APP的界面依賴于由智能終端的顯示屏發出的光線，然后通過視網膜傳遞到大腦，進行色彩識別[2]。智能移動終端設備的顯示器均應用RGB像素排列方式或Pentile像素排列方式，與傳統的印刷媒體相比，呈現出更加亮麗的色彩，從而使APP產品在市場上的競爭更加突出。

2 交互界面設計中色彩對受眾的引導原則

2.1 符合主題信息原則

目前，人機交互界面的設計已成為當今的潮流，要真正了解使用者的真正需要，使使用者獲得更好的使用感受，而視覺化的設計則是至關重要的。要確定產品風格，獲得怎樣的用戶體驗，要在第一時間吸引用戶，就必須要在形式和內容上保持高度的一致性。

為產品定下主調，各行業對色彩的需求也有差異，例如機關色彩要嚴肅，以紅色為主；金融機構的色彩應該是穩定的、讓人安心的色彩，以藍色為主（圖1），藍色界面代表冷靜、沉穩，讓受眾在操作的過程中保持理性。實際上，交互界面就像是一件商品的外包裝，在特定設計中，色彩導向要與主題內容相一致，讓用戶不用考慮太多就能明白這個產品的特性。

圖1 冷色調手機應用界面設計示意圖

2.2 體現色彩統-原則

結果表明，一個產品的可被發掘性非常關鍵，沒有用戶，這個產品就沒有任何意義。因此，要做到顏色一致、界面完整、吸引用戶注意、提高用戶忠誠度。不過，屏幕的尺寸有限，要區分界面主要次要關系。在互動設計中，界面的跳躍性展示是用戶使用時不會感到緊張的一個重要標識。除了箭頭、文字、按鈕等提示，還有顏色的提示。一般來說，按鍵的顏色不會超過三個，而表示“動作”的按鍵應該是統一的顏色。

2.3 增強情感互動原則

通過合理的顏色組合，達到了對使用者的視覺引導，將互動的顏色與使用者的精神形象相融合，從而增加使用者對產品的認識，增加使用者的使用頻率。

比如，顏色的明亮和純凈程度會帶來光明、明快、愉悅的感覺，是孩子最喜歡的顏色。比如，冷色會給人一種冷靜、寒冷的感覺，越是靠近綠色，就越是能洗滌靈魂，反之，越是靠近紫色，給人一種神秘而又尊貴的感覺[4]。同樣的色彩，在不同的場合搭配，會帶來不同的感受，所以，可以通過多種角度設計來加強與人的感情交流。

3 色彩在APP界面設計中的應用意義

在APP的界面設計中，色彩常常起著先聲奪人的作用，是APP界面設計的關鍵因素。

3.1 塑造界面與品牌風格

色彩在APP的界面設計中起到了很大的塑造和影響交互界面的功能，在色彩、明度、純度等方面，通過色彩的對比和協調，可以產生多種界面的風格。比如淘寶APP，以紅、橙兩種色調為主，營造出生動的界面，激發消費者的購買欲；而支付寶APP則以藍色為主色調，營造出穩定的界面樣式，給用戶帶來安全、專業和可信賴的視覺效果。另外，每個色彩都有自己獨特的符號含義，通過對交互界面色彩的選取，可以傳遞出企業文化和品牌觀念，從而形成良好的品牌形象；比如網易云樂APP以紅色為主色調，公司以紅色調為主，代表積極樂觀、熱情、充滿希望；網易的標志是“音樂的力量”，紅色與網易公司的新興勢力的興起形成了鮮明的對比，增強了人們分享和團結意識，網易把“紅色”融入自身，樹立深入人心的理念和印象。

3.2 引導用戶視覺與功能劃分

在APP的界面設計中，色彩有區分區域、指導用戶視覺和功能劃分的功能，人們的視覺往往對色彩有著很好的辨別能力，就像《視覺可用性》中提到的那樣：當色彩成為戰略的焦點時，色彩就會指示用戶應該去哪里，從而指引用戶的視線，這是最好的方法。在界面設計中，利用主色調、同色系輔助色彩以及多種色彩進行交互，可以有效地指導用戶操作[5]。比如，淘寶APP以聚劃算、百億補貼推廣為主要模塊，文字和圖像信息均以紅色或橘色為主，在網頁中呈現出鮮明效果，能瞬間抓住用戶的眼球，引導用戶點擊或應用不同色彩的反差來突出界面的主要內容和版面，以吸引、引導用戶。同時，還可以根據色彩差異，從色彩的色相、明度、純度等方面進行直觀劃分，指導用戶按照順序有序地進行界面操作，大大提高了界面的可視化和實用性。

3.3 提升用戶體驗與審美愉悅

在APP的界面設計中，色彩的正確運用能提高用戶的體驗度，而界面色彩的搭配則會對用戶的應用和美學產生直接影響。比如，界面的背景色彩，一般都是以亮或淡的色彩為主，根據調查，在APP界面的限制下，在淺色背景下閱讀較深的文字信息，要比在深色背景下閱讀較淺的文字要舒服得多，也更容易閱讀，能讓用戶感到清爽愉快。不同色彩之間的協調配合，形成中度的對比，使界面色彩整體均衡，減輕用戶的眼睛疲勞，給用戶帶來視覺上的快感。

4 交互界面設計中色彩對受眾引導案例

為了更好地滿足使用者的需要，讓使用者對其產生認同，因此，在人機交互界面的設計中，應具備對顏色的知覺與心理的基礎知識；可以讓使用者輕松愉快地使用該產品。

例如，“淘寶”APP的啟動圖標是橘黃色的，充滿了積極、正能量的視覺效果，能夠刺激消費者的購買欲望。進入界面后，主色為橙色，飽和度比較高，但占據的區域不多，比如輸入框、圖標、按鈕等，還加入了少量的黃色漸變，減少了飽和度，給受眾帶來了某種警示。在網頁中，以白色為主體，以白色作為底板，可以方便地展示產品的內容，并能凸顯圖片的信息，使使用者迅速高效地了解產品的特性[6]。

在頁面的設計上，蘋果的界面依舊保持著一貫的風格，簡潔而又優雅，白色的背景和黑色的導航條。按下后倒置的色彩可以讓用戶清楚地知道自己在哪里。界面上主要是產品的圖片，很顯然，這些產品的廣告都很吸引人。每個網頁的導航條都是相同的，同樣的色彩處理、信息組織、視覺效果，可以讓用戶輕松地找到自己想要的東西。

通過應用多種色彩的組合，可以使產品的界面變得豐富多彩、有趣，從而達到很好的視覺效果，而不會使人感到單調、乏味。當用戶在使用產品時，能夠快速地在復雜的界面中尋找到所需的信息，并構建出一系列清晰的邏輯。讓用戶對自己的產品有一種莫名的好感。

5 色彩在手機購物應用界面中的作用

5.1 營造氛圍，塑造風格

色彩是影響手機應用程序界面的首要因素，它在創造整體氛圍中起著關鍵作用，從色調、色相上來說，色調是影響整個手機應用程序界面的整體形象，如純色調、強色調，絢麗、濃烈；淺色調，柔軟；音樂色調，舒服；深色調、灰色調嚴肅、厚重。在手機應用程序中，色相決定了聯想空間和界面氛圍。不同的色彩會給用戶帶來不同的情感體驗，還能給人以冷暖，輕重，軟硬，動靜等不同的感受。設計師還可以根據宣傳產品的特性、受眾的喜好以及想要表達的情緒等因素，充分運用色彩效果這一法則。

5.2 強化視覺區域、引導視覺流程

顏色在移動應用軟件中的另一個重要功能是增強了屏幕的可視度，這取決于移動電話的應用界面。比如將手機應用界面分成不同的版塊。此外，色彩還能指導人們的視線，運用色彩的主次聯系，為不同層面的信息傳遞提供支持，比如通過強調色彩來突出主體互動，應用色彩的改變來提示用戶在界面內容中的不同和跳躍。

6 手機購物應用界面的色彩搭配分析

6.1 色彩搭配準確

6.1.1 與網站色彩搭配相符，與輔助色搭配相融

大部分移動電話軟件都有公司網站，以增強公司的品牌影響力。用戶在選擇手機界面的色彩時，通常會優先使用網站中的標準色彩。比如京東商城，是中國最大的自營電商平臺，京東APP的屏幕，是以大紅色為主，亮度和純度都比較高，而淡灰色和深灰色則是輔助色。雖然界面中有大量的信息，但是在應用輔助色的情況下，可以很好地指導用戶的互動，幫助用戶快速地完成交易。還有亞馬遜中國，是一家集千萬商品于一體的電商平臺。其移動應用程序界面也采用了與站點相同的色彩[7]。白色、橘色、黑色的交互，讓整個畫面呈現出都市、現代、簡潔的感覺。旨在營造和諧、寧靜、溫馨的購物環境，提升顧客的使用感受，增加顧客的回頭率，并推動長期獲利。

6.1.2 了解色彩心理形成的社會文化環境，充分考慮用戶感受

手機的應用程序應結合當前經濟社會文化，理解用戶的色彩感受。在不同的時空，不同的國家，不同的民族，不同的環境下，顏色在不同的人群中所代表的意義。

中西兩種不同的文化與美學，可以從國內外手機購物應用中看出不同效果。國內手機應用多以熱烈、溫馨的顏色為主，具有強烈的視覺沖擊力和強烈的情緒，容易引起消費者的購買欲望。比如，淘寶的顏色是橙色的，天貓的顏色是紅色的；而在國外，則是以冷色或淺色為主，例如 Lyst的黑色，NET-A-PORTER的淺灰色，提倡成熟、時尚、現代。在理解使用者心理的過程中，應注意到使用者的情感，并注意其心理狀態。

6.2 色彩整體搭配

6.2.1 根據手機購物應用需求，考慮主輔頁的色彩搭配

當手機的主副頁使用同樣顏色時，第二次跳躍的網頁應用將會以同樣顏色為基礎，再應用不同的版式布局、圖標樣式、應用多樣圖標來調和單一色彩。比如“有范APP”，APP分成三個部分，分別是男生、女生、生活三大板塊，主頁和其他次要頁面都是黑色的，走的是時尚、追求個性的風格，但每個展館的圖標色彩、圖標風格和不同色彩的圖畫都有細微的差別，色彩一致而不單調。

如果在手機應用中使用不同顏色的主副頁，色彩差異較大，容易造成雜亂無章的不統一感，則可采用不同色調、相近色調，增強整體感[8]。通常，在手機購物應用中，設計師會在歡迎網頁上制作四張色彩鮮明的網頁，以吸引用戶的注意力。但是它們的色彩相似，都是明快的色彩，用相似的格式來保持網頁的一致性，從而確保用戶的接納程度。

6.2.2 考慮圖片與手機應用界面色彩搭配的關系。

在這個閱讀圖片的年代里，隨著網絡速度的提高和通信網絡的約束逐漸消失，移動端軟件的用戶端逐漸成為用戶端的重要部分；不但 PC用戶，手機用戶也開始采用漂亮、清晰的照片；一些謹慎的設計師，在設計手機應用的時候，會根據客戶的實際使用習慣，會有兩個接口，一是有無線連接的高清圖片；一種是不帶 WiFi的正常圖片 一般情況下，為了讓消費者的視覺體驗更加流暢、舒適，都會對產品進行一些修改，讓產品的照片能夠與手機的色彩融合在一起。

6.3 色彩搭配個性

在移動手機的應用程序中，基礎色彩的數目很少，但是色彩搭配和色彩的感覺是非常豐富的。比如，顧客們需要的是“粉色”，而“粉色”卻是包羅萬象，有鮮艷的粉紅，有優雅的粉紅，由不同的色彩所形成的情感差異很大，所以給人的自然印象也是不一樣的。我們在開發移動應用程序時，首先要查找顏色的關鍵字，而要生產嬰兒用品，首先要考慮的是溫和、舒適、淡雅，所想的顏色是淺粉色、淺藍色和淺黃色。例如，蜜芽寶寶會選擇最普通的粉紅色為主，不過在每個類型中，都會按照圖案的要求，與柔軟的藍、紫、綠、橘相配合，避免過于粉嫩的感覺，為消費者創造簡單、放心、有趣的母嬰產品購買體驗。

7 結語

在信息社會中，用戶的交互界面表現出多樣化特征，同時也體現了設計者的思想觀念、情感、主觀感受等社會性文化特征。實際上，設計是人的主體性思考和現實生活相互影響的結果。而色彩的感受與應用難以精確地描繪，由于人們的視覺心理具有差異性，并無統一的規范，要想找到其中的規律，就必須要不斷地去摸索、開發色彩，去引導、吸引用戶。