色彩在界面設計中的應用研究

王亮

延安大學西安創新學院藝術與傳媒學院 陜西 西安 710100

前言：界面是人與產品間傳遞和交換信息的媒介[1]。交互界面設計要素為結構框架層、交互層和表現層三個方面[2]。而變現層主要的呈現方式為界面的視覺設計。作為視覺設計中的重要組成部分，色彩對于人們感知，情緒等感受都會產生直接的影響。色彩作為傳遞產品情緒的媒介幫助傳遞以及獲取信息，成為幫助建立用戶第一印象的重要工具，色彩作為文化的載體往往代表某種象征，承擔特定的含義，代替語言文字的功能[3]，在整個界面設計的過程中需要用大量的時間進行對比，考慮得到適合產品的界面色彩。

一、色彩應用到UI設計中展現出的基本內涵及遵循的原則

1.色彩應用到UI設計中展現出的基本內涵

UI 設計指的就是用戶的界面，主要體現在人與機器的互動上，在界面上展現出眾多的功能，給予用戶良好的使用體驗。在界面設計中合理的應用色彩可以提供給用戶更豐富，更深層次的視覺效果和感受，多樣化的色彩對比應用在界面的設計中可以幫助用戶快速的區分各個功能從而做到快速定位，比如綠色代表通過，正確；紅色代表禁止，關閉，用戶可以通過這樣的顏色提示進行快速操作，形成愉悅的體驗。色彩逐漸被應用到UI設計領域中，大大降低了用戶獲取信息的難度，凸顯出界面內的各個區域，使用戶快速獲得相關的信息，通過色彩的對比加深對信息的印象[4]。

2.色彩應用到UI設計中需要遵循的使用原則

色彩的使用呈現出的效果會直接影響整個界面的呈現效果，為了提高界面的設計品質需要考慮的首要條件就是色彩的使用，而色彩在界面上的使用也需要遵循多項原則：第一，色彩在界面設計中需要不斷地考慮色彩關系，在確定界面的主體配色之后，就需要尋找與主色調相對應的顏色，保證界面的配色更加和諧。第二，界面的顏色設計中需要遵循色彩心理學的相關規律，色彩心理學是一門通過研究人類感受顏色的影響后，而產生的系列行為或心理活動的學科[5]。這種影響是用戶通過視覺觀察顏色之后所產生的心理特征，例如：看到紅色會有熱，焦躁，熱烈的感覺，看到藍色會有冷靜，平和等的心理感受。這是色彩在色相層面上對于人們心理的影響但是這種影響不止停留在色相層面，不同明度的顏色也會對用戶的心理影響，例如，明度高的顏色會給人透亮的感覺而明度低的顏色會給人們厚重，穩重的心理感受。

二、色彩在界面設計中的作用

1.區分界面的功能區域

色彩在界面設計中有著不可替代的作用，在界面設計中合理地運用顏色可以幫助用戶更加清晰地區分各個功能模塊，快速定位到自己想要尋找的功能。顏色可以區分界面的背景，圖標的顏色，圖標的狀態（選中狀態，不可點擊狀態等），狀態欄，導航欄等區域。

2.加強界面層級關系，做到強弱對比明顯

界面中會有不同重要程度關系的呈現，不同的內容之間會有一定的從屬關系和不同的重要程度，界面中用顏色進行信息重要程度的區分可以更好地區分界面的層級，能夠快速傳遞給用戶重要的信息，例如微信界面中用戶，群組的名稱用到了顏色比較深的黑色而用戶信息則用到了灰色來進行設計，這樣就可以快速定位到用戶想要尋找的某個人然后再看到所發的信息，并且未讀信息則用到了紅色這樣強烈，吸引眼球的顏色凸顯未讀信息的重要性。

3.體現界面設計風格，增強用戶沉浸感

不同的顏色對于人們所產生的心理影響是不一樣的，那么我們在界面的設計中可以利用好這一點，幫助產品更好地實現定位，明確產品風格。例如，微信最初設計時所對標的產品是手機中的短信功能，而手機中的短信的圖標設計為綠色+白色氣泡的模式，用戶看到綠色+白色的氣泡就會想到信息這一含義微信的設計團隊就利用了這一點對微信圖標進行設計，使得產品的整體風格和定位都符合最初時的設定。

4.滿足不同用戶群體的需求，幫助更多人正常使用

對于重視殘疾人，老年人，視覺障礙等特殊人群，在界面設計中，需要將這類用戶考慮進去，顏色作為最重要的視覺因素在設計的過程中也需要將“無障礙設計”考慮進去，無障礙設計（barrierfreedesign），這個概念名稱始見于1974年，是聯合國組織提出的設計新主張。其理想目標是“無障礙”。關注、重視殘疾人、老年人的特殊需求。人類是擁有視覺、聽覺、觸覺等諸多感知“通道”的整合體，其中，無障礙色彩設計是一個面向所有公眾的視覺設計系統，該系統的最終目標為創建無障礙可視環境，使信息盡可能準確地傳達給更多的公眾。在使用操作界面上清除那些讓使用者感到困惑、困難的“障礙”（barrier），為使用者提供最大可能的方便，這就是無障礙設計的基本思想[6]。

例如高德地圖V7.7.8正式版中新增了色覺障礙模式，用戶開啟該功能后路況便會采用色覺無障礙配色顯示，如圖1所示，開啟該功能之后使用者的界面會從以前的綠色-（通暢）黃色-(緩行)紅色（擁堵）深紅色（重度擁堵）改變為藍色-（通暢）淺黃色-(緩行)土色（擁堵）深灰色（重度擁堵）來進行替代，將原來界面中的綠色，紅色，深紅色這些難以辨別的顏色進行替代，這樣做的目的就是幫助色覺障礙人群能夠更好的在使用導航過程中辨別實時路況選擇最優的線路進行通行。

圖1 高德地圖的視覺障礙模式

高德的這種思考方式是讓任何人在任何情況下都能平等地、方便地、無障礙地使用地圖導航。

由于手機在我們的生活場景中占有越來越重要的地位，越來越多的人習慣于只攜帶一部手機出門，所以不同的APP在我們的生活中占有越來越重要的地位，在眾多的使用者中，有視覺障礙的用戶也占到了一定的比例，所以我們在設計APP時需要考慮到這部分用戶的使用體驗，保證他們的日常體驗。目前市面上針對色覺障礙的用戶的設計主要分為兩個方向：第一種方向：會推出針對色覺障礙用戶的色覺障礙模式，這樣做的好處是會保證色覺障礙以及普通用戶的體驗，但是作為設計者來說一般需要做出兩套設計方案，那么如果產品的界面總數較少的話對于我們設計師來說工作量并沒有增加很多，但是這種方法并不適用于所有的界面設計，于是就有了第二種設計方向：針對界面量比較大的界面，我們往往只會設計出一套界面來適應更多的用戶，那么在設計的過程中我們就要考慮到不同用戶的不同需求，其中就包含了色覺障礙的用戶，那么針對色覺障礙的用戶我們通常的做法是：減少界面中色相出現的頻率。如微信中關注公眾號的界面升級：由于微信的主色調為綠色，在微信未進行升級之前，關注公眾號的按鈕為綠色+白色這樣的顏色模式，由于這兩種顏色的明度相近，會導致在色覺障礙用戶眼中識別度不高的情況，針對這種情況，微信的團隊對此按鈕進行了調整，從原來色塊+文字的模式調整成為圖標顯示的模式，如圖2，這樣做會從根本上避免辨識度不高這種情況，使界面更具有普適性。

圖2 微信關注公眾號改版設計

三、色彩在界面設計中的應用原則

1.利用色彩三要素進行設計

色彩的三要素分別為：色相，明度和飽和度。設計師通過使用不同的顏色明亮程度來增加顏色的層次感，雖然上文提到不同的區域需要用不同的顏色進行區分處理，這里指的顏色具體指的是色彩的色相，但是在界面的整體設計過程中我們用到的色相種類一般來說不會超過三種，所以在色相區分大功能區的前提下，設計師需要利用色彩的明度對其他部分的信息做出信息層級上的區分。

2.做好色彩搭配

在界面設計中如何合理使用色彩從而達到更好的界面效果，我們在界面設計中應該遵循以下三種原則：

（1）統一性

如上文所說，界面中各個區域都有它的作用，我們在界面設計的過程中，在保證界面中各區域合理性的基礎上，需要保證整體界面的整體性，幫助用戶從視覺等各個層面做到統一。界面設計的過程中，設計師們會將版式設計應用到界面的設計中用來區分界面的各個功能區域，但從宏觀來看，版式設計在功能區域的劃分中所用到的方法大多是為版式設計中的格式塔原則，但是為了更加加強格式塔的視覺效果，界面設計的時候應該更多地利用色彩進行區域的劃分，例如在蘋果官網的首頁設計中，使用大面積，不同顏色的色塊讓各個部分產生聯系與區分，相似的色彩區間以及板式的劃分讓整體界面達到高度的統一。

（2）合理性

以用戶為中心作為出發點，用戶在使用界面的過程中，界面的色彩搭配會給用戶帶來第一印象，用戶在慢慢使用產品的過程中能夠逐漸適應和習慣界面所用到的色彩，讓用戶對界面的色彩與行為操作建立起聯系，讓整個產品的后續延續更加規范，合理。

我們在界面設計中考慮到色彩的話一定要考慮到使用顏色的性格，不同色相的顏色會給人不同的心理感受，但是在界面設計中我們也要注意調研在市場上的同類產品，同類型產品比我們的產品早一步投入市場，用戶對于這些產品的主題色已經形成習慣，例如，ios系統中電話，信息的圖標都是綠色+白色，作為同類型但是上線時間比較晚的微信來說，微信的色彩設計就遵循了這樣的規律采用了綠+白的色彩模式進行設計，這樣在產品上線之后用戶只需要通過色彩就可以辨認別出產品的性質，如圖3。

圖3 ios電話 信息 微信圖標對比

我們在色彩設計的時候也需要將這部分因素考慮進去，這樣在產品上線的時候可以降低用戶的學習成本。

（3）簡易性

色彩的合理應用會給界面更多的層次感和空間感，而不同色彩的搭配也會塑造出不同的界面風格。但是界面設計中最重要的原則就是不適合太復雜，我們在設計中應該以簡潔性為主，從用戶體驗的角度來說，簡潔的界面和操作能夠減少用戶的學習成本，簡單明確的界面也能夠給用戶更明確的指向性，幫助用戶更加快速上手產品，如最初的微信只有用簡單的界面將所有的功能串聯起來，讓用戶在使用時候能夠一目了然。

結語

作為界面的重要組成部分，色彩的應用對于整個產品來說都是至關重要的，只有在界面設計的過程中用好了顏色才會更加體現出產品的整體設定并且會帶給用戶更好的體驗以及沉浸感，在界面設計中不僅要考慮到顏色的屬性也需要考慮到界面的適用性，在界面設計的時候需要將不同類型的用戶考慮進去，我們的用戶中會包含很多有視覺障礙的用戶，在界面設計中需要將這些用戶考慮進去，這樣做出來的產品才會更加地具有普適性。設計界面時使用顏色的過程中也需要考慮到色彩的三要素以及色彩的性格以及7:3:1的色彩搭配原理，只有做好了色彩搭配的環節，我們界面的設計才會更加出彩更加貼近產品的設定，從而達到提升用戶體驗的目的。