摘? 要：本文提出在“網(wǎng)頁設(shè)計與制作”課程教學(xué)中融入視覺化思維，之所以選擇這門課程，還和融媒體這一時代背景有關(guān)系。在教學(xué)過程中，學(xué)生可以更加直觀形象地進行理解，并且激發(fā)創(chuàng)造性思維。本文在論述視覺思維在“網(wǎng)頁設(shè)計與制作”教學(xué)中的應(yīng)用，并有具體的教學(xué)設(shè)計過程、解決教師在授課過程中不夠直觀形象問題的策略，說明視覺思維對“網(wǎng)頁設(shè)計與制作”學(xué)科教學(xué)的重要性和應(yīng)用價值。

關(guān)鍵詞：融媒體;視覺化思維;“網(wǎng)頁設(shè)計與制作”教學(xué)

中圖分類號：TP3-05? ? ? ?文獻標(biāo)識碼：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? 引? 言

隨著媒體技術(shù)的發(fā)展，經(jīng)濟、文化、科學(xué)等各個領(lǐng)域都融合并滲透到可視化中。在推動新媒體改革的大背景下，視覺思維體現(xiàn)了其重要性和發(fā)展性。習(xí)近平總書記在中央政治局第十二次集體學(xué)習(xí)時強調(diào)“要運用信息革命成果，推動媒體融合向縱深發(fā)展，建設(shè)全媒體成為我們面臨的一項緊迫課題”。融媒體將新媒體和傳統(tǒng)媒體融到一起，發(fā)揚各自的優(yōu)勢?！熬W(wǎng)頁設(shè)計與制作”課程主要培養(yǎng)的是使用融媒體移動互聯(lián)的“內(nèi)容+服務(wù)”模式的Web前端工程師。在查閱資料時，發(fā)現(xiàn)在教學(xué)實踐中對視覺思維的研究相對較少，包括美術(shù)、高中數(shù)學(xué)、物理、化學(xué)等方面的應(yīng)用研究。結(jié)合當(dāng)今綜合媒體時代，將視覺思維融入到“網(wǎng)頁設(shè)計與制作”的實踐教學(xué)中具有重要的現(xiàn)實意義。

教學(xué)中發(fā)展和培養(yǎng)學(xué)生的視覺思維有助于學(xué)生將目光轉(zhuǎn)移到世界中千變?nèi)f化的事物，促進學(xué)生對現(xiàn)實生活的關(guān)注，培養(yǎng)學(xué)生的應(yīng)用意識，加強生活與教育之間的聯(lián)系。

傅世俠在《關(guān)于視覺思維問題》中認(rèn)為，視覺思維的創(chuàng)造性主要表現(xiàn)在探索性、靈活性和現(xiàn)實性三個方面。到目前為止，機器系統(tǒng)仍然難以解決人的感知與理性的交集或融合。美國認(rèn)知心理學(xué)家哈森通過大量的實踐研究發(fā)現(xiàn)，視覺思維的發(fā)展階段可以分為五個階段：報道性觀察階段、建構(gòu)性觀察階段、分類觀察階段、解釋性觀察階段和創(chuàng)造性觀察階段。視覺思維具有形象、直觀、生動等特點。將視覺思維融入“網(wǎng)頁設(shè)計與制作”的教學(xué)實踐中，有利于教師和學(xué)生提高教學(xué)效率，幫助學(xué)生在設(shè)計上創(chuàng)新。

視覺思維研究不僅要研究如何在教學(xué)中培養(yǎng)學(xué)生的視覺思維能力，還要充分認(rèn)識學(xué)生心理視覺思維的形成機制，即學(xué)生形成視覺思維能力的心理過程。包括外在表現(xiàn)和視覺思維的形成，如何評價學(xué)生的視覺思維能力是非常重要的。只有深刻理解視覺思維的本質(zhì)特征，才能更好地將視覺思維與教學(xué)相結(jié)合，更好地為教學(xué)服務(wù)。

1? 在“網(wǎng)頁設(shè)計與制作”課程中融入視覺化思維的意義

視覺思維是融媒體時代的要求，“場景打造”是融媒體平臺方的發(fā)展趨勢，而在教學(xué)中培養(yǎng)學(xué)生的視覺思維會促進教師關(guān)注社會需求和市場變化，能夠促進教師觀念的轉(zhuǎn)變。并且，視覺思維具有多變性、直接性、豐富性等特點，視覺思維的多變性也就潛在地要求教師要改變教學(xué)方法，運用互聯(lián)網(wǎng)場景化思維、項目導(dǎo)入法等教學(xué)方法和手段才能有效地發(fā)展學(xué)生的視覺思維能力。

1.1? 強化視覺化效果，彌補語言表達的局限性

福建師范大學(xué)老師劉冬巖博士在《中國教育報》上提出，我們的教學(xué)注重學(xué)生的閱讀、寫作和計算，在教學(xué)過程中注重學(xué)生的語言邏輯表達，另一種不同于語言思維的思維方式——視覺思維——被忽視了。語言表達和視覺思維有很大的區(qū)別。語言是連貫的、線性的，要求學(xué)生時刻認(rèn)真聽講。此外，語言的抽象性會使知識表達枯燥無味，缺乏創(chuàng)造性。視覺思維具有直觀性、豐富性和想象力的特點，能夠?qū)⒄Z言無法表達的信息傳達給學(xué)生。視覺思維與語言思維的合理結(jié)合將促進學(xué)生對知識的理解。

1.2? 完善視覺化思維，激發(fā)學(xué)生的創(chuàng)造性思維

美國心理學(xué)家R.H.McKim（麥金）認(rèn)為創(chuàng)造性思維需要觀看（vision）、想象（imagination）和構(gòu)繪（composition）三方面能力的有機結(jié)合。這三方面的能力都與視覺感知有關(guān)。因此視覺思維應(yīng)該從視覺的角度出發(fā)，在外部視覺信息的刺激下，對信息源在觀察、想象不斷交替的變化中有創(chuàng)造性地進行理解和表達。在教學(xué)過程中，教師盡量建造一個視覺化的環(huán)境，將學(xué)習(xí)材料恰當(dāng)視覺化，用視覺化效應(yīng)來激發(fā)學(xué)生的創(chuàng)造性思維。這三種能力不是一起發(fā)展的，而是逐漸發(fā)展起來的。

2? 如何在“網(wǎng)頁設(shè)計與制作”教學(xué)中發(fā)展學(xué)生的視覺化思維

“網(wǎng)頁設(shè)計與制作”這門課程主要方向是培養(yǎng)Web前端工程師，工作流程主要是從UI處得到原型圖或者效果圖，在項目（網(wǎng)站、微信公眾號、小程序、Web APP）中還原圖片效果，然后與后臺進行各種數(shù)據(jù)交互。因為本課程應(yīng)該培養(yǎng)學(xué)生學(xué)習(xí)的知識較繁多，且涉及到數(shù)據(jù)交互，邏輯又較強，如果能夠在課程或課程項目教學(xué)中融入視覺化思維，培養(yǎng)學(xué)生的觀察力和想象力，學(xué)生理解項目和構(gòu)建整個項目就會相對容易。

教師應(yīng)該注重課件的制作，注重結(jié)構(gòu)、色彩、圖標(biāo)、流程圖的使用，學(xué)生就可以通過觀看，直觀地獲得感性信息，并經(jīng)過大腦加工形成形象思維。而在麥金的想象階段，是學(xué)生將已經(jīng)獲取的信息進一步地變?yōu)樽约簩π轮R的認(rèn)識。在“網(wǎng)頁設(shè)計與制作”課程中可以通過項目導(dǎo)入的方法，讓學(xué)生通過觀察，來想象如何設(shè)計、難點在哪里，來強化學(xué)生對知識點的掌握。學(xué)生在這個過程中，寫出關(guān)鍵詞、繪制思維導(dǎo)圖，來提高學(xué)習(xí)的效率，不斷地完善學(xué)生的視覺化思維，激發(fā)創(chuàng)造性思維。

教師應(yīng)鼓勵學(xué)生使用視覺化筆記來記錄知識點、分析網(wǎng)頁的布局和結(jié)構(gòu)。視覺化筆記主要有概念圖、思維導(dǎo)圖等，學(xué)生可以根據(jù)自己的觀察，進行重點的提取，然后發(fā)散思維將整個項目的流程或者內(nèi)在關(guān)聯(lián)繪制出來，增添了學(xué)習(xí)的主動性和樂趣。如圖1所示是“CSS基礎(chǔ)”這一章節(jié)的視覺化筆記，清晰明了地將本章所有知識點羅列出來。

3? 視覺化思維在“網(wǎng)頁設(shè)計與制作”中的應(yīng)用

本文以“網(wǎng)頁設(shè)計與制作”課程的實戰(zhàn)項目為例，使用的指導(dǎo)書是清華大學(xué)的《HTML5網(wǎng)頁前端設(shè)計實戰(zhàn)》。第二章的項目是“電子日歷的設(shè)計與實現(xiàn)”，電子日歷是大家都很熟悉的，無論是手機的電子日歷還是網(wǎng)頁版的電子萬年歷，都是生活中經(jīng)常查看的。這個例子源于生活，所以學(xué)生很感興趣。

在用思維導(dǎo)圖將本次實訓(xùn)項目的思路畫出來，有助于學(xué)生理清思路，教師講解起來也可以事半功倍。實現(xiàn)該項目，首先進行界面設(shè)計，如圖2所示將界面分解為3個不同的版塊：狀態(tài)欄、星期名稱、日期顯示。分別使用3個div進行實現(xiàn)，然后需要使用CSS文件輔助渲染樣式?？刹捎猛獠挎溄覥SS樣式文件的形式來實現(xiàn)。在此需要為div標(biāo)簽預(yù)設(shè)統(tǒng)一的樣式，并且根據(jù)效果草圖將每個標(biāo)簽的預(yù)設(shè)效果實現(xiàn)。接著就到了JS設(shè)計部分，需要動態(tài)添加當(dāng)前年份和月份，并顯示當(dāng)前月份的所有日期。難點在顯示當(dāng)前月份的所有日期，包含3個部分：計算當(dāng)前月份的總天數(shù)、計算當(dāng)前月份的第一天是星期幾、顯示當(dāng)前月份的全部日期。

在本實例中，利用思維導(dǎo)圖將整個項目設(shè)計的思路和流程清晰地呈現(xiàn)出來，教師針對項目設(shè)計思路逐步進行講解和實現(xiàn)，學(xué)生理解項目和構(gòu)建整個項目相對容易，有助于學(xué)生提高學(xué)習(xí)效率。

4? 結(jié)? 論

在“網(wǎng)頁設(shè)計與制作”課程教學(xué)中應(yīng)用視覺思維，將學(xué)習(xí)的內(nèi)容和網(wǎng)頁結(jié)構(gòu)分析用視覺化來呈現(xiàn)，能夠增強課堂趣味性，提高學(xué)生的學(xué)習(xí)興趣和教學(xué)效率，對培養(yǎng)學(xué)生的創(chuàng)新思維具有重要作用。因此，將視覺思維理論應(yīng)用到“網(wǎng)頁設(shè)計與制作”學(xué)科中是可行的，并且有很大的研究空間。

參考文獻：

[1] 葉均隆，葉均明，余偉紅.圖像思維解釋八皇后算法及其拓展問題 [J].無線互聯(lián)科技，2018，15（22）：106-107.

[2] 林冰冰.教學(xué)中發(fā)展學(xué)生視覺思維的策略研究 [D].福州：福建師范大學(xué)，2014.

[3] 劉冬巖.視覺思維對教學(xué)的啟示 [J].中國教育學(xué)刊，2010（2）：67-69.

[4] 仲亞男.視覺思維在高中化學(xué)教學(xué)中的應(yīng)用研究 [D].新鄉(xiāng)：河南師范大學(xué)，2017.

作者簡介：付琳（1985-），女，漢族，山西忻州人，教師，高級工程師，碩士，研究方向：計算機教學(xué)。