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

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

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

一、UI設計的背景及UI設計課程教學的內(nèi)容

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

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

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

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

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

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

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

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

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

（一）色彩內(nèi)涵與“以用戶為中心的設計”

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

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

（二）色彩對比與UI設計

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

1.色相對比

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

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

2.明度對比

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

3.純度對比

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

4.色彩調(diào)和與UI設計

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

在UI配色的設計中，色彩對比是為了豐富畫面的層次，有對比必然存在矛盾。在色彩構成的教學中我們把色彩調(diào)和分為了屬性同一調(diào)和、混入同一調(diào)和、連貫同一調(diào)和以及色彩秩序的設計觀念。這些基礎的知識其實為我們的UI色彩設計提供非?？尚械姆椒▽W指導。

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

四、“色彩構成”

在交互UI設計配色環(huán)節(jié)中的模型搭建

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

我們將UI配色的內(nèi)容分為主色、輔助色和點綴色三大類。主色的選擇通?？剂慨a(chǎn)品固有的氣質(zhì)，包括其功能、用戶人群及行業(yè)背景等。例如美妝類的互聯(lián)網(wǎng)產(chǎn)品，它的用戶以女性為主，那么建議使用暖色系中的紅或紫色調(diào)，符合用戶的審美需求。

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

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

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

五、結(jié)語

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

參考文獻：

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

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

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

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

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

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

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

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

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

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

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