一、心智技能三階段理論對(duì)網(wǎng)頁(yè)設(shè)計(jì)心智技能形成的啟示

所謂原型，可以理解為外化的心智活動(dòng)的實(shí)踐模式。本研究認(rèn)為，網(wǎng)頁(yè)設(shè)計(jì)心智技能的形成同樣要經(jīng)歷上述３個(gè)階段。而“原型”作為貫穿心智技能形成的核心，其建構(gòu)意義重大。本文的先期研究在對(duì)已經(jīng)具備了網(wǎng)頁(yè)設(shè)計(jì)心智技能的熟手問(wèn)卷調(diào)查基礎(chǔ)上，利用“心理模擬法”創(chuàng)擬了“網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)原型”，本研究將討論如何利用該原型展開(kāi)三階段的培養(yǎng)。對(duì)學(xué)生而言，網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)的原型定向往往需要教師的示范和講解，那么教師首先應(yīng)該使學(xué)生明確網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)原型的結(jié)構(gòu)、各個(gè)環(huán)節(jié)的操作原則及必要性并利用腳手架支持的問(wèn)題來(lái)驅(qū)動(dòng)啟發(fā)學(xué)生的主動(dòng)性和自覺(jué)性；然后按照原型正確示范和講解完成某一網(wǎng)站建設(shè)任務(wù)的完整過(guò)程。這里需要強(qiáng)調(diào)的是，教師需要將原型中每一個(gè)心智動(dòng)作詳細(xì)展開(kāi)。原型定向階段的教學(xué)，只是網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)心智技能教學(xué)的開(kāi)端，要使學(xué)生真正形成心智技能，還需要 進(jìn)行實(shí)際操作。學(xué)生利用上述在定向階段形成的原型，親自從事某一網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)，將在頭腦中建立起來(lái)的活動(dòng)程序計(jì)劃以外顯的方式付諸執(zhí)行。

在這個(gè)階段，應(yīng)該借助腳手架支持問(wèn)題來(lái)驅(qū)動(dòng)學(xué)生利用原型，把構(gòu)成這一活動(dòng)的所有動(dòng)作系列，依照一定的順序作出不能遺漏和缺失，教師可以提出以下要求：①要根據(jù)“原型“嚴(yán)格遵循動(dòng)作序列逐一執(zhí)行，及時(shí)檢查和矯正動(dòng)作的執(zhí)行情況；②學(xué)生在實(shí)踐模式的每個(gè)環(huán)節(jié)提交一些階段性材料或者記錄一些完成過(guò)程來(lái)保證是按照實(shí)踐模式的步驟完成任務(wù)的；③建議學(xué)生將動(dòng)作執(zhí)行和言語(yǔ)相結(jié)合，邊說(shuō)邊做。網(wǎng)頁(yè)設(shè)計(jì)心智技能的原型內(nèi)化階段是將上述實(shí)踐模式向頭腦內(nèi)部轉(zhuǎn)化的過(guò)程，表現(xiàn)為學(xué)生從事網(wǎng)站建設(shè)任務(wù)時(shí)可以離開(kāi)實(shí)踐模式，借助語(yǔ)言指導(dǎo)來(lái)完成。學(xué)生只有在多種不同的實(shí)踐條件下反復(fù)進(jìn)行網(wǎng)站建設(shè)的具體活動(dòng)，才能不斷從原型中抽取本質(zhì)的東西，最后形成普遍適用于不同實(shí)踐條件的原型（心智技能），只有到這一步心智技能才算真正形成。

二、一個(gè)充分體現(xiàn)心智技能三階段理論的ＰＢＬＥｓ設(shè)計(jì)

在網(wǎng)頁(yè)心智技能培養(yǎng)三階段理論的指導(dǎo)下，學(xué)習(xí)環(huán)境設(shè)計(jì)比較合理的安排是：首先依托一個(gè)充分體現(xiàn)原型的范例講解和操作，完成活動(dòng)原型中蘊(yùn)含的相關(guān)知識(shí)和操作流程的講解，初步形成“原型定向”。這一階段教師應(yīng)該關(guān)注腳手架支持的問(wèn)題設(shè)計(jì)。然后，實(shí)施基于項(xiàng)目的學(xué)習(xí)，指導(dǎo)學(xué)生利用課后時(shí)間自主完成幾項(xiàng)網(wǎng)站建設(shè)的綜合任務(wù)，將原型進(jìn)行操作和內(nèi)化，最終使學(xué)生具備網(wǎng)頁(yè)設(shè)計(jì)心智技能。下面就從“原型定向”階段ＰＢＬＥｓ設(shè)計(jì)最關(guān)注的腳手架支持問(wèn)題展開(kāi)敘述。在“原型定向”階段，教師需要提取“網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)基本原型”中的４個(gè)核心環(huán)節(jié)，然后把這４個(gè)核心環(huán)節(jié)中蘊(yùn)含的相關(guān)知識(shí)和操作流程設(shè)計(jì)成腳手架支持的問(wèn)題，繼而通過(guò)教師逐步示范和講解一系列問(wèn)題的解決過(guò)程，完成網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)的定向。

例如，附件網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)原型定向階段ＰＢＬＥｓ設(shè)計(jì)方案中，對(duì)應(yīng)“網(wǎng)站方案設(shè)計(jì)環(huán)節(jié)”的學(xué)習(xí)內(nèi)容，將其轉(zhuǎn)化成９個(gè)具體的腳手架問(wèn)題。它們分別對(duì)應(yīng)網(wǎng)站建設(shè)過(guò)程中“需求分析”、“系統(tǒng)分析”、“風(fēng)格設(shè)計(jì)”、“ＵＩ版面初步布局”、“色彩定位”及“網(wǎng)站建設(shè)日程規(guī)劃”等重要學(xué)習(xí)內(nèi)容。這些腳手架支持的問(wèn)題是以完成“網(wǎng)站方案設(shè)計(jì)”這一環(huán)節(jié)為驅(qū)動(dòng)力而提出的，將引發(fā)和維持學(xué)生在該學(xué)習(xí)階段中的學(xué)習(xí)興趣和動(dòng)機(jī)，引導(dǎo)他們帶著明確的問(wèn)題與目標(biāo)，模仿教師的示范行為，開(kāi)展真實(shí)的問(wèn)題解決過(guò)程。在腳手架支持的問(wèn)題設(shè)計(jì)方面，教師需要依據(jù)學(xué)生能力臨近發(fā)展水平，問(wèn)題難度要居于該臨近發(fā)展區(qū)內(nèi)，這樣學(xué)生就可以調(diào)動(dòng)己有的網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)及操作技能等認(rèn)知經(jīng)驗(yàn)來(lái)解決當(dāng)前面臨的腳手架問(wèn)題。

網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)是一個(gè)漸進(jìn)過(guò)程，腳手架支持的問(wèn)題是依照這個(gè)漸進(jìn)過(guò)程的發(fā)展順序提出的，難度一般是逐級(jí)升高。因此，在設(shè)計(jì)這些腳手架支持的問(wèn)題時(shí)，還需要注意合理安排難點(diǎn)和重點(diǎn)、考慮子任務(wù)的大小、所需知識(shí)技能含量、相關(guān)影響因素等多個(gè)方面。根據(jù)問(wèn)題的難度，我們提供了支持指導(dǎo)、相關(guān)案例、輔助資料等，并創(chuàng)設(shè)必要的實(shí)踐條件，使問(wèn)題解決具有操作性。這一階段，還要求教師關(guān)注各個(gè)問(wèn)題解決的策略選擇和轉(zhuǎn)換的講解、示范及獨(dú)立、協(xié)作及競(jìng)爭(zhēng)等組織策略的合理運(yùn)用。而學(xué)生則以教師演示的優(yōu)秀范例為榜樣，利用大量的相關(guān)案例、信息資源、認(rèn)知工具、協(xié)作工具及境脈等展開(kāi)原型的定向?qū)W習(xí)。事實(shí)上，教師演示如何根據(jù)客戶(hù)要求完成網(wǎng)站建設(shè)任務(wù)的過(guò)程就充分體現(xiàn)了網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)原型的范例，這將給予學(xué)生解決問(wèn)題的邏輯結(jié)構(gòu)和方法過(guò)程，它包含了一種內(nèi)在的邏輯，為學(xué)生提供了支架，通過(guò)對(duì)范例的學(xué)習(xí)，學(xué)生可以模仿其中的路徑和方法，從而完成原型的定向。

在原型的操作階段，比較適合采用基于項(xiàng)目的學(xué)習(xí)方式，即教師布置幾個(gè)不同的網(wǎng)站建設(shè)任務(wù)，以完成作品為驅(qū)動(dòng)，通過(guò)一系列腳手架支持的問(wèn)題來(lái)引導(dǎo)學(xué)生利用上一階段獲得的網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)原型完成網(wǎng)站建設(shè)。這一階段要求學(xué)生依照一定的順序，不能遺漏和缺失地作出原型定向中的所有動(dòng)作系列。該階段的重點(diǎn)在于任務(wù)的設(shè)計(jì)，我們?cè)O(shè)計(jì)了以“個(gè)人網(wǎng)站”、“品牌推廣網(wǎng)站”及“公司企業(yè)網(wǎng)站”為主題的具體項(xiàng)目。這３個(gè)項(xiàng)目的難度逐級(jí)升高，有一定的挑戰(zhàn)性。教師還需要提供支持指導(dǎo)和輔助材料，并創(chuàng)設(shè)必要的實(shí)踐條件，使任務(wù)具有可操作性，這樣，學(xué)習(xí)者就能夠在實(shí)踐中掌握問(wèn)題解決技能和方法。在原型內(nèi)化階段，學(xué)生所從事的網(wǎng)站建設(shè)任務(wù)是可以離開(kāi)實(shí)踐模式的。教師需要為學(xué)生提供在多種不同的實(shí)踐條件下反復(fù)進(jìn)行網(wǎng)站建設(shè)活動(dòng)的機(jī)會(huì)。例如，我們?cè)O(shè)計(jì)了以“小組為團(tuán)隊(duì)”，為本學(xué)院設(shè)計(jì)制作一個(gè)學(xué)院網(wǎng)站這一具體任務(wù)，期望學(xué)生通過(guò)不同的實(shí)踐過(guò)程，不斷的從操作原型中抽取更本質(zhì)的東西，最后形成普遍適用于不同實(shí)踐條件的心智技能。案例：網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)原型定向階段的腳手架支持問(wèn)題設(shè)計(jì)。

客戶(hù)要求：ＸＸ化妝品公司預(yù)借助互聯(lián)網(wǎng)塑造良好的企業(yè)和產(chǎn)品形象，提高品牌知名度、美譽(yù)度和特色度。針對(duì)這這次品牌推廣，我公司公開(kāi)競(jìng)標(biāo)，請(qǐng)有合作意向的設(shè)計(jì)團(tuán)隊(duì)于本月底之前提交設(shè)計(jì)方案及網(wǎng)站一稿，我方將從提交的方案和初稿中挑選出最滿(mǎn)意的設(shè)計(jì)，并與其設(shè)計(jì)團(tuán)隊(duì)正式簽約，預(yù)付３０％的定金。同時(shí)，我們將提供企業(yè)ＬＯＧＯ、廣告語(yǔ)、企業(yè)品牌發(fā)展歷史、品牌產(chǎn)品的圖片，推廣活動(dòng)視頻等資料。學(xué)習(xí)目的：學(xué)生通過(guò)觀察、模仿學(xué)習(xí)教師是如何根據(jù)客戶(hù)要求完成網(wǎng)站建設(shè)任務(wù)的完整過(guò)程。腳手架支持的問(wèn)題設(shè)計(jì)：

（１）網(wǎng)站方案設(shè)計(jì)環(huán)節(jié)的學(xué)習(xí)。腳手架支持的問(wèn)題：①接到企業(yè)網(wǎng)站建設(shè)任務(wù)后，作為網(wǎng)頁(yè)設(shè)計(jì)師的我們首先要作什么？②如何與客戶(hù)溝通，提取與網(wǎng)站任務(wù)相關(guān)的關(guān)鍵詞，解讀網(wǎng)站主題，分析市場(chǎng)前景？③從哪些方面分析目標(biāo)用戶(hù)群體特征？④如何結(jié)合網(wǎng)站主題、目標(biāo)用戶(hù)群體特征、企業(yè)機(jī)構(gòu)已有ＶＩ色彩特征、客戶(hù)提供的原始素材等確定網(wǎng)站的主色？⑤鑒于主色，如何依據(jù)色彩設(shè)計(jì)原則（互補(bǔ)色，分裂互補(bǔ)三色組，類(lèi)似色搭配原則等），確定網(wǎng)站整體的色彩定位？⑥如何根據(jù)網(wǎng)站主題和信息量大小，結(jié)合布局特征，選擇適用的ＵＩ版面布局？⑦結(jié)合客戶(hù)的要求及公司或機(jī)構(gòu)的性質(zhì)，如何對(duì)網(wǎng)站的功能模塊進(jìn)行規(guī)劃設(shè)計(jì)，繪制出網(wǎng)站層次結(jié)構(gòu)圖，描述各功能模塊及作用？⑧如何展開(kāi)網(wǎng)站的風(fēng)格設(shè)計(jì)？你了解常用的網(wǎng)站風(fēng)格設(shè)計(jì)原則嗎？⑨結(jié)合上述分析，如何撰寫(xiě)網(wǎng)站設(shè)計(jì)方案？

（２）主要頁(yè)面效果的設(shè)計(jì)與制作環(huán)節(jié)的學(xué)習(xí)。腳手架支持的問(wèn)題：①根據(jù)網(wǎng)站設(shè)計(jì)方案中確定的頁(yè)面尺寸，色彩定位，ＵＩ版面布局設(shè)計(jì)，風(fēng)格設(shè)計(jì)，功能模塊設(shè)計(jì)等信息，利用“ＰｈｏｔｏＳｈｏｐ”完成頁(yè)面效果圖設(shè)計(jì)的步驟和方法是什么？②利用“Ｆｉｒｅｗｏｒｋ”制作網(wǎng)頁(yè)切片的技巧和原則是什么？

（３）基于Ｈｔｎｌ＋ＣＳＳ技術(shù)的網(wǎng)頁(yè)基本制作環(huán)節(jié)的學(xué)習(xí)。腳手架支持的問(wèn)題：專(zhuān)家熟手利用ｈｔｍｌ＋ＣＳＳ技術(shù)制作網(wǎng)頁(yè)有什么技巧？在制作過(guò)程可能遇到什么樣的難題，該如何應(yīng)對(duì)？

（４）網(wǎng)頁(yè)動(dòng)畫(huà)效果設(shè)計(jì)與制作環(huán)節(jié)的學(xué)習(xí)。腳手架支持的問(wèn)題：①如何利用ＪａｖａＳｃｒｉｐｔ或Ｆｌａｓｈ技術(shù)炫動(dòng)你的網(wǎng)頁(yè)？給頁(yè)面添加動(dòng)畫(huà)的時(shí)候有什么需要注意的地方？②完整的較為準(zhǔn)確的三維動(dòng)畫(huà)建模創(chuàng)作流程是怎樣的？③三維動(dòng)畫(huà)建模活動(dòng)中，“創(chuàng)意構(gòu)思”、“模型設(shè)計(jì)”及“模型制作”這３個(gè)關(guān)鍵環(huán)節(jié)的目的、過(guò)程及階段性成果分別是什么？任務(wù)活動(dòng)：結(jié)合自己的建模經(jīng)驗(yàn)說(shuō)明三維動(dòng)畫(huà)建模活動(dòng)的完整流程，然后小組交流。問(wèn)題思考：①如何進(jìn)行創(chuàng)意構(gòu)思？②如何進(jìn)行模型設(shè)計(jì)？③如何進(jìn)行模型制作？任務(wù)活動(dòng)：①仔細(xì)聆聽(tīng)教師的范例講解，然后借助因特網(wǎng)資料展開(kāi)品牌場(chǎng)景的創(chuàng)意構(gòu)思、設(shè)計(jì)與制作的活動(dòng)，創(chuàng)建場(chǎng)景模型形成階段性成果和建模作品；②交流和評(píng)價(jià)其他人的作品，通過(guò)競(jìng)爭(zhēng)選出３個(gè)最優(yōu)秀的場(chǎng)景模型。范例講解：展示了完成企業(yè)品牌場(chǎng)景任務(wù)的建模過(guò)程（審題、構(gòu)思、設(shè)計(jì)、制作）。

三、結(jié)語(yǔ)

ＰＢＬＥｓ作為網(wǎng)頁(yè)設(shè)計(jì)心智技能形成的關(guān)鍵，應(yīng)該廣泛引起教學(xué)實(shí)踐者的關(guān)注。基于問(wèn)題的學(xué)習(xí)始終應(yīng)該在構(gòu)建一個(gè)有意義的、真實(shí)的任務(wù)情境下，提供給學(xué)習(xí)者一系列基于案例的腳手架支持的問(wèn)題，繼而通過(guò)專(zhuān)家熟練的示范讓學(xué)生明確完成任務(wù)的思維過(guò)程和問(wèn)題求解的方法。在這樣的學(xué)習(xí)環(huán)境中，教師承擔(dān)著教練或?qū)煹慕巧枰龠M(jìn)學(xué)習(xí)者進(jìn)行社會(huì)協(xié)商，并同步或異步的給予協(xié)助和指導(dǎo)。另外，后續(xù)研究應(yīng)該關(guān)注學(xué)生網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)原型的內(nèi)化，比較適合采用基于項(xiàng)目的學(xué)習(xí)。該學(xué)習(xí)過(guò)程是擬真的、映射真實(shí)世界的生產(chǎn)活動(dòng)，依照學(xué)習(xí)者的自我想法和方式來(lái)完成建站任務(wù)。只有經(jīng)過(guò)這樣的完整訓(xùn)練，學(xué)生才能真正形成網(wǎng)頁(yè)設(shè)計(jì)心智技能，從而滿(mǎn)足業(yè)界對(duì)網(wǎng)站前端設(shè)計(jì)人才的職業(yè)技能需求。

作者：秦書(shū)榮 李新 單位：廣東農(nóng)工商職業(yè)技術(shù)學(xué)院藝術(shù)系