提升色彩審美能力在界面設計課程中的教學研究

楊凱

【摘 要】隨著科技的發展和人們審美意識的不斷提升，用戶對網站和移動界面設計水平的要求也越來越高，針對南通理工學院計算機類專業學生《界面設計》課程現狀及存在問題，對課程進行教學改革和研究，闡述了提升學生色彩審美能力和運用能力的重要性，在網頁界面設計中，色彩更是一種具有高刺激性的視覺元素，它可以表達感情，喚起情緒和引起共鳴。通過對色彩知識的深入理解和運用，為用戶提供良好的第一印象，增強視覺信息傳達功能，為提高學生界面設計整體水平奠定基礎。

【關鍵詞】色彩；審美；界面設計；教學研究

中圖分類號： TB47 文獻標識碼： A 文章編號： 2095-2457（2018）35-0073-002

DOI：10.19694/j.cnki.issn2095-2457.2018.35.031

Improve color aesthetics in interface design courses teaching research

YANG Kai

（Nantong Institute of Technology，Nantong Jiangsu 226000，China）

【Abstract】With the development of science and technology and the continuous improvement of people's aesthetic consciousness， users' requirements for the design level of websites and mobile interfaces are getting higher and higher. For the current situation and existing problems of the interface design of computer majors in Nantong Institute of Technology， The teaching reform and research on the curriculum expounded the importance of improving students' color aesthetic ability and application ability. In the web interface design， color is a highly stimulating visual element， which can express feelings， arouse emotions and cause resonance. Through the in-depth understanding and application of color knowledge， the user is provided with a good first impression， enhances the visual information communication function， and lays a foundation for improving the overall level of student interface design.

【Key words】Color； Aesthetics； Interface design； Teaching research

0 前言

網絡和智能手機已經成為現代人生活中不可或缺的一部分，人們習慣借助網站和手機App來獲取更多的信息資訊，隨著科技的發展和日趨成熟，人們的審美水平也在不斷提升，網站設計師不僅僅需要掌握技術，更需要良好的審美能力和藝術修養才能設計出賞心悅目具有視覺沖擊力的網站界面。

1 課程現狀

《界面設計》是我院軟件工程、計算機科學與技術、數字媒體技術等工科專業開設的專業必修課，對于計算機類專業的學生，一般對學生軟件及編程語言的能力培養比較注重，而對于界面藝術設計能力的培養略顯不足，使得學生獨立設計網頁、移動界面的能力不夠，需要借助模板進行參考和模仿，對網頁界面的空間布局和色彩運用能力不強，設計出的網站、移動界面平淡無奇，毫無重點，缺乏設計美感，不具備一定的視覺沖擊力和亮點。根據此情況，這就要求在《界面設計》課程教學中，注重對色彩設計的原則和配色規律，色彩的情感表現與傳達等知識進行重點的講授和實踐，通過不同主題的課題訓練，培養和提升學生色彩審美能力和對網頁界面的色彩運用能力。

2 教學實踐研究

（1）對于非藝術類的工科學生，在教學中安排對色彩原理、色彩構成知識的講授是極其重要的，通過原理性知識的了解和欣賞優秀的界面設計案例，使學生具備一定的色彩審美能力，掌握界面設計色彩設計原則和方法，運用統一性原則，讓色彩達到和諧統一，運用情感性原則，讓色彩的溫度感、重量感等滿足受眾人群的心理感受，使界面與瀏覽者獲得情感的共鳴。運用生動性原則，通過色彩色相、純度、明度、面積、肌理等方面有秩序、有規律的豐富變化，讓界面設計更加生動、吸引眼球，贏得受眾的關注。

（2）在教學過程中，學生對于色彩的原理性知識能較好的理解，但在主題性網站界面設計中，如何根據不同的主題來選擇和搭配色彩還不能把握得當，學生對色彩的實際運用能力需加強，所以在課程教學中，首先需強化學生對色彩的情感認識，每一種色彩能表達不同的情感。例如紅色，作為極具醒目性和強烈感染力的色彩是熱情、喜慶、幸福的代名詞，同時它又象征著警示和危險，在色彩搭配中，作為主色也起到調和對比的作用。黃色，作為純色中明度最高，是最為陽光的色彩，象征著光明與希望、在古代是帝王的專屬色，有高貴的涵義，與紅色色系的搭配給人一種華麗、喜慶、大氣輝煌的感覺，與藍色色系的搭配能帶來一種清雅寧靜、柔和清新的效果。藍色，純凈如天空的色彩，有和平、安靜、純凈的象征意味，具有理性的特征，是極具男性感和科技感的色彩。藍色與紅、黃等色搭配得當，能形成和諧統一的對比調和關系。綠色，大自然、植物的顏色，象征著生命、安全與平靜，是環保題材的主打色，和黃色搭配顯得生機盎然且清新明快，和藍色搭配給人寧靜柔和、的視覺感受。橙色，秋天收獲的顏色，是色彩中最溫暖、最具青春與活力的顏色，曾一度作為代表“fashion”的專屬色，象征著光明與快樂、活潑與勇敢。紫色，優美、高貴的顏色，又具有神秘、孤獨的意味，淡紫色有高雅、嫵媚的感覺，作為女性題材的專屬色，深紫色則更顯沉重與莊嚴。黑色，作為無彩色，象征著力量，有時也具有罪惡的意味，黑色和白色作為百搭色，和很多色彩都能構成較好的對比調和關系，是運用范圍很廣的顏色。白色，象征純潔、高雅，與黑色一樣，黑白的搭配作為經典搭配，產生簡潔明快、樸素有力、穩重大方的效果，是最具視覺沖擊力的色彩搭配之一。每種色彩通過加黑、加白也會帶來不同的情感效應，在色彩搭配中需靈活運用。

其次，需引導學生掌握UI界面設計色彩配色策略。第一，同色系配色，這是讓人感到頁面一致且統一的配色方法，因為主色和輔色都在統一的色相上，例如整體藍色色調的設計有一種統一的印象，通過色彩的深淺，不同的飽和度來承載不同類型的內容信息，比如信息內容模塊，白色底代表用戶內容，淺藍色底代表回復內容，更深一點的藍色底代表可回復內容，顏色主導著信息層次。第二，鄰近色配色，這是一種最為常見的配色方法，相比較同色系配色更加豐富和和諧， 組控件和文本標題的顏色可以選擇純度較高的色彩， 背景色和模塊劃分通過降低色彩飽和度來實現調和和統一。第三，點亮色配色，這是形成對比效果的配色方法，主色選擇相對沉穩的顏色，點睛色選擇高明度、高純度與背景形成互補或對比的顏色，起到活躍界面氛圍，形成視覺中心的作用。

再次，需結合不同主題界面設計課題，讓學生進行設計實踐，引導學生根據網站的主題進行深入分析，通過對色彩的情感認識和配色規律找到最適合的主題色彩，鍛煉和培養學生的分析能力和對色彩知識的運用能力。網頁的色彩搭配會直接影響用戶對網站的整體印象，所以在界面設計中要兼顧考慮不同年齡和性別的人對色彩的感受。例如科技類的網站可以使用灰色系、藍色系等作為主題顏色，女性手機、女性服飾等主題的網站界面設計，可以選擇粉色、白色、紅色、紫色等色系，代表著甜美和溫柔的女性色彩。男性運動等主題的網站界面設計，更多的會選擇藍色、灰黑色為主色與黃、綠色的色彩搭配，增強運動的活力和質感，黑、灰色的襯托使黃、綠色的色彩組合具有強烈的視覺沖擊力。兒童類網站色彩，一般選擇色彩明快且絢麗的顏色，如紅、黃、藍、綠等高明度、高純度的色彩，搭配簡單有趣、形象可愛的圖形組合，象征著童趣與快樂。常用的配色方法主要以鄰近色和點亮色為主，根據不同的網站設計主題，通過一些有針對性的主題訓練，使學生逐步掌握對網站色彩的選擇和色彩搭配的方法。

最后，根據“講述-設計-評價-反饋-再設計”流程，對學生所做的每一個案例及時給予評價和反饋，學生收到反饋再返回設計，使學生能較好的掌握網頁界面設計的方法，設計出符合大眾審美且具有視覺沖擊力和鮮明特色的界面設計。

3 結語

一個優秀的網頁界面設計，必須具備良好的視覺信息傳達功能，從視覺信息傳達角度看，色彩是用戶獲取信息的第一語言，色彩設計的優劣直接影響用戶對網站界面設計的整體評價。在《界面設計》課程教學中，通過加強計算機類工科學生的色彩美學藝術修養和不同主題的網站界面課題訓練，對提升界面設計水平起到積極的推動作用，同時也為該課程的教學改革研究提供一些思路和方法。

【參考文獻】

[1]遆佳，李霽.基于視覺信息傳達的網頁界面設計研究.包裝工程，2017（1）.

[2]任宏偉.從用戶體驗角度分析設計教學的創新實踐-以界面設計課程為例.大舞臺，2015（7）.

[3]高鳳燕.界面設計課程模塊化教學體系探索與實踐.藝術與設計，2013（9）.

[4]陸培培.淺析獨立學院UI界面設計課程的教學改革.美術教育研，2015（10）.