摘  要：本文提出在“网页设计与制作”课程教学中融入视觉化思维，之所以选择这门课程，还和融媒体这一时代背景有关系。在教学过程中，学生可以更加直观形象地进行理解，并且激发创造性思维。本文在论述视觉思维在“网页设计与制作”教学中的应用，并有具体的教学设计过程、解决教师在授课过程中不够直观形象问题的策略，说明视觉思维对“网页设计与制作”学科教学的重要性和应用价值。

关键词：融媒体;视觉化思维;“网页设计与制作”教学

中图分类号：TP3-05       文献标识码：A 文章编号：2096-4706（2019）21-0073-03

Abstract：This paper proposes to integrate visual thinking into the teaching of “Web Design and Production”. The reason for choosing this course is also related to the background of media convergence. In the process of teaching，students can understand more directly and vividly，and stimulate creative thinking. This paper discusses the application of visual thinking in the teaching of “Web Design and Production”，and has a specific teaching design process，to solve the problem of teachers in the teaching process is not intuitive image，the importance and application value of visual thinking to the teaching of “Web Design and Production”.

Keywords：media convergence;visual thinking;“Web Design and Production” teaching

0  引  言

隨着媒体技术的发展，经济、文化、科学等各个领域都融合并渗透到可视化中。在推动新媒体改革的大背景下，视觉思维体现了其重要性和发展性。习近平总书记在中央政治局第十二次集体学习时强调“要运用信息革命成果，推动媒体融合向纵深发展，建设全媒体成为我们面临的一项紧迫课题”。融媒体将新媒体和传统媒体融到一起，发扬各自的优势。“网页设计与制作”课程主要培养的是使用融媒体移动互联的“内容+服务”模式的Web前端工程师。在查阅资料时，发现在教学实践中对视觉思维的研究相对较少，包括美术、高中数学、物理、化学等方面的应用研究。结合当今综合媒体时代，将视觉思维融入到“网页设计与制作”的实践教学中具有重要的现实意义。

教学中发展和培养学生的视觉思维有助于学生将目光转移到世界中千变万化的事物，促进学生对现实生活的关注，培养学生的应用意识，加强生活与教育之间的联系。

傅世侠在《关于视觉思维问题》中认为，视觉思维的创造性主要表现在探索性、灵活性和现实性三个方面。到目前为止，机器系统仍然难以解决人的感知与理性的交集或融合。美国认知心理学家哈森通过大量的实践研究发现，视觉思维的发展阶段可以分为五个阶段：报道性观察阶段、建构性观察阶段、分类观察阶段、解释性观察阶段和创造性观察阶段。视觉思维具有形象、直观、生动等特点。将视觉思维融入“网页设计与制作”的教学实践中，有利于教师和学生提高教学效率，帮助学生在设计上创新。

视觉思维研究不仅要研究如何在教学中培养学生的视觉思维能力，还要充分认识学生心理视觉思维的形成机制，即学生形成视觉思维能力的心理过程。包括外在表现和视觉思维的形成，如何评价学生的视觉思维能力是非常重要的。只有深刻理解视觉思维的本质特征，才能更好地将视觉思维与教学相结合，更好地为教学服务。

1  在“网页设计与制作”课程中融入视觉化思维的意义

视觉思维是融媒体时代的要求，“场景打造”是融媒体平台方的发展趋势，而在教学中培养学生的视觉思维会促进教师关注社会需求和市场变化，能够促进教师观念的转变。并且，视觉思维具有多变性、直接性、丰富性等特点，视觉思维的多变性也就潜在地要求教师要改变教学方法，运用互联网场景化思维、项目导入法等教学方法和手段才能有效地发展学生的视觉思维能力。

1.1  强化视觉化效果，弥补语言表达的局限性

福建师范大学老师刘冬岩博士在《中国教育报》上提出，我们的教学注重学生的阅读、写作和计算，在教学过程中注重学生的语言逻辑表达，另一种不同于语言思维的思维方式——视觉思维——被忽视了。语言表达和视觉思维有很大的区别。语言是连贯的、线性的，要求学生时刻认真听讲。此外，语言的抽象性会使知识表达枯燥无味，缺乏创造性。视觉思维具有直观性、丰富性和想象力的特点，能够将语言无法表达的信息传达给学生。视觉思维与语言思维的合理结合将促进学生对知识的理解。

1.2  完善视觉化思维，激发学生的创造性思维

美国心理学家R.H.McKim（麦金）认为创造性思维需要观看（vision）、想象（imagination）和构绘（composition）三方面能力的有机结合。这三方面的能力都与视觉感知有关。因此视觉思维应该从视觉的角度出发，在外部视觉信息的刺激下，对信息源在观察、想象不断交替的变化中有创造性地进行理解和表达。在教学过程中，教师尽量建造一个视觉化的环境，将学习材料恰当视觉化，用视觉化效应来激发学生的创造性思维。这三种能力不是一起发展的，而是逐渐发展起来的。

2  如何在“网页设计与制作”教学中发展学生的视觉化思维

“网页设计与制作”这门课程主要方向是培养Web前端工程师，工作流程主要是从UI处得到原型图或者效果图，在项目（网站、微信公众号、小程序、Web APP）中还原图片效果，然后与后台进行各种数据交互。因为本课程应该培养学生学习的知识较繁多，且涉及到数据交互，逻辑又较强，如果能够在课程或课程项目教学中融入视觉化思维，培养学生的观察力和想象力，学生理解项目和构建整个项目就会相对容易。

教师应该注重课件的制作，注重结构、色彩、图标、流程图的使用，学生就可以通过观看，直观地获得感性信息，并经过大脑加工形成形象思维。而在麦金的想象阶段，是学生将已经获取的信息进一步地变为自己对新知识的认识。在“网页设计与制作”课程中可以通过项目导入的方法，让学生通过观察，来想象如何设计、难点在哪里，来强化学生对知识点的掌握。学生在这个过程中，写出关键词、绘制思维导图，来提高学习的效率，不断地完善学生的视觉化思维，激发创造性思维。

教师应鼓励学生使用视觉化笔记来记录知识点、分析网页的布局和结构。视觉化笔记主要有概念图、思维导图等，学生可以根据自己的观察，进行重点的提取，然后发散思维将整个项目的流程或者内在关联绘制出来，增添了学习的主动性和乐趣。如图1所示是“CSS基础”这一章节的视觉化笔记，清晰明了地将本章所有知识点罗列出来。

3  视觉化思维在“网页设计与制作”中的应用

本文以“网页设计与制作”课程的实战项目为例，使用的指导书是清华大学的《HTML5网页前端设计实战》。第二章的项目是“电子日历的设计与实现”，电子日历是大家都很熟悉的，无论是手机的电子日历还是网页版的电子万年历，都是生活中经常查看的。这个例子源于生活，所以学生很感兴趣。

在用思维导图将本次实训项目的思路画出来，有助于学生理清思路，教师讲解起来也可以事半功倍。实现该项目，首先进行界面设计，如图2所示将界面分解为3个不同的版块：状态栏、星期名称、日期显示。分别使用3个div进行实现，然后需要使用CSS文件辅助渲染样式。可采用外部链接CSS样式文件的形式来实现。在此需要为div标签预设统一的样式，并且根据效果草图将每个标签的预设效果实现。接着就到了JS设计部分，需要动态添加当前年份和月份，并显示當前月份的所有日期。难点在显示当前月份的所有日期，包含3个部分：计算当前月份的总天数、计算当前月份的第一天是星期几、显示当前月份的全部日期。

在本实例中，利用思维导图将整个项目设计的思路和流程清晰地呈现出来，教师针对项目设计思路逐步进行讲解和实现，学生理解项目和构建整个项目相对容易，有助于学生提高学习效率。

4  结  论

在“网页设计与制作”课程教学中应用视觉思维，将学习的内容和网页结构分析用视觉化来呈现，能够增强课堂趣味性，提高学生的学习兴趣和教学效率，对培养学生的创新思维具有重要作用。因此，将视觉思维理论应用到“网页设计与制作”学科中是可行的，并且有很大的研究空间。

参考文献：

[1] 叶均隆，叶均明，余伟红.图像思维解释八皇后算法及其拓展问题 [J].无线互联科技，2018，15（22）：106-107.

[2] 林冰冰.教学中发展学生视觉思维的策略研究 [D].福州：福建师范大学，2014.

[3] 刘冬岩.视觉思维对教学的启示 [J].中国教育学刊，2010（2）：67-69.

[4] 仲亚男.视觉思维在高中化学教学中的应用研究 [D].新乡：河南师范大学，2017.

作者简介：付琳（1985-），女，汉族，山西忻州人，教师，高级工程师，硕士，研究方向：计算机教学。