“色彩構成”在UI設計課程教學實踐中的應用與探討

摘? 要：“色彩構成”是高等院校設計類學生的一門必修的基礎課程，UI設計是一門應用型極強的專業課程，前者為后者提供了基礎性的理論指導。本文結合在UI課程色彩設計教學環節中的經驗，整合了色彩構成中色彩的基礎知識、色彩對比、色彩調和等諸多方面在UI設計中的實際應用，旨在幫助學習者更理性、更高效地完成UI設計中色彩方案的確定。

關鍵詞：色彩;UI設計;教學

一、UI設計的背景及UI設計課程教學的內容

伴隨著互聯網時代的盛行，人們的大量活動從以往的人與人的互動轉為了人與機的交互，硬件和軟件技術的提升，使大量的互聯網產品應時而生。UI即User Interface（用戶界面）的簡稱，目前UI設計泛指對互聯網產品操作界面的設計。

UI設計行業從以往的新興職業到目前走向成熟，大量相關從事人員已經從以往交叉型多學科背景人才向更精準專業化發展，高校中與之對應的人才培養主要集中在數字媒體藝術專業和產品設計專業。UI設計這門課程是一門應用性極強的學科，UI設計課程的學習系統也比較寬泛，如人機交互、操作邏輯、界面美觀的設計。就視覺層面來看，主要探究與界面美學相關的圖形、色彩、文字、版式等內容。

二、UI設計課程中色彩設計的重要性

有關數據顯示人觀察物體時，最初20秒，色彩影響占80%，形態占20%，2分鐘后，色彩占60%，形態占40%，5分鐘后，各占一半。色彩是我們認知事物、理解事物、傳達事物的一個重要視覺元素。因此，在任何視覺類設計學科中，色彩設計都占據著重要的地位。在設計類專業的學習中與色彩學相關的知識都是必學的基礎性學科。

色彩設計在UI設計中發揮著重要的作用。首先，色彩能夠更好的幫助用戶去理解和記憶產品，在日常的互聯網產品使用過程中大部分用戶依托色彩去記憶產品和理解產品，例如日常生活中的掃碼付款行為，用戶習慣通過識別“藍色”或“綠色”來決定用戶的付款方式，即采用“支付寶”還是“微信”。

其次，色彩在UI設計中具有功能表意的作用，依托用戶已有的色彩認知，在界面圖形設計的基礎上加入色彩元素可以使表意更加精準和高效，例如“√”或者“確認”采用“綠色”的設計，“x”或者一些注意事項可以采用“紅色”的設計，又譬如在實時導航類的互聯網產品中我們常見的色彩設計，用“紅色”的不同明度表達道路的擁堵狀況，“綠色”表達暢通等。這樣可以使用戶更高效地理解相關信息內容。

再者，色彩在UI設計中具有象征意義。不同的互聯網產品具有不同的屬性，它們面對不同的用戶人群，具有不同的功能、傳遞不同的價值信息。色彩符號是一種慣用的視覺手段。針對不同的用戶人群，結合不同性別、年齡的審美特征，對于產品的色彩選擇可以實現具體化，比如很多與女性相關的產品美拍、美圖秀秀、美妝等產品多采用“紫色”“粉色”等;針對不同功能的產品類別，比如購物類、金融、美食類產品多采用暖色系的“紅色”“橙色”“黃色”等;例如圖1的一組界面中，菜單的設計者利用色彩的語義和相關的地域一一結合，精準渲染出了當地的地域映像。

三、“色彩構成”在UI設計課程教學實踐中的作用

“色彩構成”是藝術設計類專業的一門基礎學科。通過認識色彩元素對比和進行各項針對性的訓練，讓大家熟知色彩的秉性和規律，學會主動運用色彩要素的形態及彼此間的不同搭配，以表達自己的情感、思想、理念等服務，并以此自由地實現具有專業品質的設計構想。色彩構成作為UI設計課程學習的先導課程有著重要的價值和意義。

（一）色彩內涵與“以用戶為中心的設計”

色彩是信息傳遞的一個重要符號。不同的色彩有不同的涵義，例如“紅色”刺激性強，象征著開朗、外向、活躍、華麗、熱情，令人直接聯想到血液及火焰，能夠表達溫暖、激動、熱辣、盛大、憤怒等情緒。在中國傳統文化中還象征著吉祥如意、喜慶與祥和等。

設計類學生在進行專業學習之前，通常擁有一定的色彩繪畫基礎，一方面他們遵循對事物固有色的寫實表達，另一方面他們對于色彩的表達也充滿了細膩的感受。他們在作品中時常借助色彩表達自己的性格和情緒，即我們常常覽識到的個人畫風和特色。但是在專業學習之后特別是經過設計色彩構成知識的積累，會促進學生從用戶的角度出發，解讀產品的主題和文化，結合色相的語義遴選合適的色彩進行產品配色。這個教學過程就是從感性到理性的過渡，這種以用戶為中心的設計也是現代設計的一個重要特征。

（二）色彩對比與UI設計

色彩對比產品UI中除了契合主題的要求外，還可以有效地營造出畫面層次感，能夠有效地加大信息內容之間的跳躍性，特別是當色相、明度的差異越大，對比效果就越明顯、突出。這種色彩的對比在產品信息結構的表達上有很好的應用價值，色彩對比可以準確地表達出界面信息的主次和節奏，例如文字排版中字色對比，或明暗對比，準確地將主標題和副標題分割開來。因此UI課程教學中我們通過回顧色相對比、明度對比、純度對比的多種形式，結合產品界面信息結構的表達，可以有效地整合出界面色彩設計的一些常見規律和方法學指導。

1.色相對比

色相對比中依托色相環結構中各色相間的距離分為了同類色對比、鄰近色對比、對比色對比和互補色對比。結合形式美法則的審美要求，我們在UI設計中可以將同類色和和鄰近色用于我們的背景設計中，這種弱對比在視覺形式上色彩性質上統一，色彩差異微弱，視覺和諧統一，但是卻可以在界面設計當中豐富層次變化和細節。這種方法同樣可以用在一些圖標設計的層次變化表達上。（如圖2）

相比色和互補色這些色相的強對比主要用于UI中重點信息的突出和整體效果的點綴和補充中。在UI設計中按鈕的配色設計以及產品的重要級信息，我們通過強對比來幫助用戶快速的查閱到，以便用戶高效的完成操作任務，提高用戶體驗。

2.明度對比

明度對比是以色彩明度的差異為主的色彩對比。色彩的明度對比要比其他色彩對比的視覺效果強烈。沒有色相、沒有純度，就可以看到對比強烈的影像。色彩的層次與空間完全可以通過色彩的明度表現出來。明度對比在界面設計中的應用同樣可以體現在產品信息的結構層級上，通過不同的明暗對比來表達信息的主次;另外色彩的明度對比也在偏平面的界面中營造出一定的前后空間感，豐富了畫面的視覺效果，在一些單一色的界面設計作品中，我們通過單純的明度對比來增加設計的形式感，在使用Photoshop繪圖軟件進行界面設計的繪制過程中，我們可以通過拾色器中“HSB”色彩屬性中的“B”值的百分比修改來改變以某一色相為基礎的不同明度色值的查找，這樣的明度對比關系具有較高的統一性（如圖3）。

3.純度對比

純度對比是由色彩的純度差別而形成的色彩對比，是純凈色彩中含黑、白、灰多少的對比。純度的變化可以調整畫面的張力，或含蓄或張揚。在界面設計中選擇不同純度基調的配色方案的依據主要是產品的主題內容和功能，例如文藝類的產品通常可以降低純度。又譬如幼教類的產品比較適合高純度基調的配色。就純度的對比來看，在界面設計中，純度的變化和對比還是較多地體現在信息層級關系上（如圖4），界面中一段小標題的設計，配色組合方式采用了不同純度的色彩對比，在突出了主體內容的同時，畫面充滿了層次感。在現有的互聯網產品中高純度和中純度基調的作品應用還是比較廣泛的。高純度基調色相感強，色彩飽和、鮮艷、活躍;中純度基調的色彩含量適中，色彩柔和、典雅、輕松、豐滿、可信賴、創作空間較大;在教學中通常我們建議避免使用低純度基調，它的色彩含量低，色彩凝重、模糊，運用不當會產生沉悶、臟灰與無力的感覺。

4.色彩調和與UI設計

兩個或兩個以上的色彩組合，為了達成一項共同的表現目的，互相間產生一種秩序、統一與和諧的現象，稱為色彩調和。色彩調和的目的是使有明顯差別的色彩經過調整，形成和諧統一的整體以及建立色彩設計的用色技巧和配色原則。

在UI配色的設計中，色彩對比是為了豐富畫面的層次，有對比必然存在矛盾。在色彩構成的教學中我們把色彩調和分為了屬性同一調和、混入同一調和、連貫同一調和以及色彩秩序的設計觀念。這些基礎的知識其實為我們的UI色彩設計提供非常可行的方法學指導。

在現代效率優先扁平風UI設計的語義下，色彩是形式感輸出的一個重要表現手段。多色相的組合在很多作品中涌現出來，這種豐富色相的設計對學生提出了更高、更專業的要求。圖5的作品中，我們通過搭建同明度的多色相組合，給用戶的視覺感官還是比較和諧統一的;同理色相或明度秩序也能夠幫助我們統一畫面的視覺感官。圖6界面中漸變圖形的設計，漸變色從黃色過渡到了紫色，雖然色相跨度較大，但內部包含了黃-橙-紅-品紅-紫的色相秩序，因此給人的視覺感受是自然而流暢的。

四、“色彩構成”

在交互UI設計配色環節中的模型搭建

在UI色彩設計的教學中，我們結合色彩構成中色彩對比和色彩調和的相關知識，可以簡單地搭建出配色設計的基本法則，能夠給學生在UI配色方面提供一個理性的方法學參考。

我們將UI配色的內容分為主色、輔助色和點綴色三大類。主色的選擇通常考量產品固有的氣質，包括其功能、用戶人群及行業背景等。例如美妝類的互聯網產品，它的用戶以女性為主，那么建議使用暖色系中的紅或紫色調，符合用戶的審美需求。

通常輔助色建議選擇主色的同類色或鄰近色，這樣能使界面整體的配色比較和諧統一，圖7的設計中，主色為玫紅色，輔助色選擇了藍玫紅色的同類色，在明度值上做了20%的變化，另外一個輔助色采用了藍紫色，是主色玫紅的臨近色。這樣的色彩對比組合關系在整體上有變化，突出了設計細節的層次變化，但是視覺上又是和諧統一的。

點綴色是UI界面中的點睛之筆。點綴色的應用大體可以分為兩個功能，一是功能上突出主體信息或重點操作區域，使得用戶完成任務的效率更高;二是在審美上可以打破畫面的沉悶感以及長時間單色相注目的視覺疲憊感。在設計中，通常點綴色的選擇可以參考使用主色的對比色或者互補色，通過拉大色相差異使得畫面中的主要信息內容或操作區域更加醒目、鮮明。圖8的設計中，點綴色使用了主色藍色的對比色“粉色”來拉大色相差，在作品呈現上起到了活躍畫面的作用。

根據教學經驗和學生實例練習中的經驗，結合色彩構成的基本原理，我們可以簡單地建立一個配色公式（如表1），以提高UI設計配色工作的效率。主色我們結合產品主題和目標用戶的審美特征而定;輔助色根據主色的同類色或鄰近色來做相對比較和諧的組合;點綴色的選擇采用主色的對比色或互補色來拉大色相差，目的是做信息的強調和視覺審美的補充。

五、結語

總而言之，藝術設計創作需要設計方法學的指導。UI設計是一門功能性、理論性很強的應用型學科。“色彩構成”作為其先修課程起到了很好的理論支撐作用。整合色彩構成學科中的色彩知識，可以幫助我們搭建起高效的配色思維模式。因此，色彩設計的方法學是學習者重要的參考點，同時UI行業的良好發展和設計風潮的不斷變化，給予設計創作者的設計空間也是豐富和無限的。設計方法學基于設計實踐的積累，設計實踐活動也會不斷地完善色彩設計方法學。

參考文獻：

[1]李澎霖.淺談高等院校設計專業基礎教學[J].藝術教育，2010（8）：132-136.

[2]蘇麗婭.重視基礎學習：對藝術設計專業教學方法幾點建議[J].佳木斯教育學院學報，2013（3）：128.

[3]史鐘穎.大學藝術設計專業基礎教學的探索與實踐[J].中國林業教育，2013（6）：54-56.

[4]周倩.高職院校藝術設計專業基礎教學的思考[J].黑龍江科技信息，2009（3）：206，112.

[5]許燁鳴.對創新藝術設計專業基礎教學的思考[J].中國輕工教育，2005（2）：44-45 .

[6]羅小丹.論現代意義的基礎教學：對高師美術專業基礎教學的思考[J].宜賓學院學報，2004（5）：183-184 .

[7]周鑫.論APP界面設計原理規則[J].智庫時代，2018（45）：124，128.

[8] 陳立民，黃靜瑤.APP界面設計的視覺研究[J].美術教育研究，2018（7）：65.

[9]劉麗，邊卓. 色彩在APP界面設計中的應用研究[J].工業設計，2021（1）：95-96.

[10]褚麗美.UI設計中的色彩應用研究[J].美術教育研究，2017（11）：68.

作者簡介：趙倩，南京傳媒學院講師。