提升色彩审美能力在界面设计课程中的教学研究

杨凯

【摘 要】随着科技的发展和人们审美意识的不断提升，用户对网站和移动界面设计水平的要求也越来越高，针对南通理工学院计算机类专业学生《界面设计》课程现状及存在问题，对课程进行教学改革和研究，阐述了提升学生色彩审美能力和运用能力的重要性，在网页界面设计中，色彩更是一种具有高刺激性的视觉元素，它可以表达感情，唤起情绪和引起共鸣。通过对色彩知识的深入理解和运用，为用户提供良好的第一印象，增強视觉信息传达功能，为提高学生界面设计整体水平奠定基础。

【关键词】色彩；审美；界面设计；教学研究

中图分类号： 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）.