1、基于问题的学习环境下网页设计心智技能研究摘要：为了适应社会对网站前端设计人才的技能需求，教育实践者开始关注学生网页设计心智技能的培养。在构建网页设计活动原型这一先遣研究的基础上，讨论了适合与“原型”进行整合的学习环境设计基于问题的学习环境，并依托一个具体案例，展示如何将网页设计活动原型合理地运用于 PBLEs，旨在指导教育实践者开展卓有成效的网页设计心智技能教学。关键词：学习环境（PBLEs）；网站设计；心智技能中图分类号：文献标识码：A 文章编号：1672-7800（2014）003-0168-03作者简介：秦书荣（1987-），女，硕士，广东农工商职业技术学院艺术系实验员，研究方向为网站建
2、设、三维动画设计、影视后期制作；李新（1981-），男，广东农工商职业技术学院艺术系讲师，研究方向为影视后期制作、新媒体艺术设计、美术学。0 引言为了回答“高职高专院校在网页设计课程的教学中，如何使学生具备旨在适用的网页设计心智技能”这一问题，研究者不约而同地聚焦基于问题的学习环境（PBLEs）这一关键词，并普遍认同，问题的解决是在职业技能培养过程中广泛采用的学习活动方式。从实践层面出发，学生网页设计心智技能习得的成败与基于问题的学习环境设计密切相关。同时，谈及学习环境的设计，无疑需要关注认知心理学领域心智技能培养的理论研究。毕竟，只有依据人的心理工作方式设计的学习环境才能促使学生进行有意义的
3、学习1。本文将从培养“网页设计师”这一视角，关注学生网页设计心智技能的形成，着力为网页设计课程引入认知心理学领域的心智技能培养研究结论，并依托案例，论述如何将心智技能研究合理有效地应用到基于问题的学习环境设计中，从而促进学生适用的职业技能形成。1 网页设计心智技能与基于问题的学习环境1.1 网页设计心智技能借鉴我国教育心理学家冯忠良教授关于心智技能的观点，可将网页设计心智技能视为在网站构思、设计、制作过程中通过有目的、有计划的学习或练习而形成的，用以调节和控制解读分析客户需求、构思网站的局部与整体、设计网页各部分要素及制作与整合网站各部分的一系列合乎网页设计规则的思维、方法和经验。1.2 基于
4、问题的学习环境戴维H乔纳森将基于问题的学习环境（PBLEs）描述为“以问题解决为核心，相关案例、信息资源、认知工具、会话或协作工具及社会或境脉五要素为支撑的学习环境，其最主要的特征就是为学生提供脚手架支持的问题来驱动学生开展问题解决的学习活动2。根据 Merrill 的观点，“有效教学就是问题为中心的教学”3。上述两个关键词之间存在相辅相承的关系。一方面，心智技能研究结论将为基于问题的网页设计学习环境提供认知心理学的理论依据；另一方面，基于问题的学习是网页设计心智技能培养实践活动中广泛采用的方式。2 心智技能三阶段理论对网页设计心智技能形成的启示冯忠良教授认为，心智技能形成需要经过原型定向、原
5、型操作及原型内化 3 个基本阶段。所谓原型，可以理解为外化的心智活动的实践模式4。本研究认为，网页设计心智技能的形成同样要经历上述 3 个阶段。而“原型”作为贯穿心智技能形成的核心，其建构意义重大。本文的先期研究在对已经具备了网页设计心智技能的熟手问卷调查基础上，利用“心理模拟法”创拟了“网页设计活动原型”，如图 1 所示，本研究将讨论如何利用该原型展开三阶段的培养。对学生而言，网页设计活动的原型定向往往需要教师的示范和讲解，那么教师首先应该使学生明确网页设计活动原型的结构、各个环节的操作原则及必要性并利用脚手架支持的问题来驱动启发学生的主动性和自觉性；然后按照原型正确示范和讲解完成某一网站建
6、设任务的完整过程。这里需要强调的是，教师需要将原型中每一个心智动作详细展开。原型定向阶段的教学，只是网页设计活动心智技能教学的开端，要使学生真正形成心智技能，还需要进行实际操作。学生利用上述在定向阶段形成的原型，亲自从事某一网页设计活动，将在头脑中建立起来的活动程序计划以外显的方式付诸执行。在这个阶段，应该借助脚手架支持问题来驱动学生利用原型，把构成这一活动的所有动作系列，依照一定的顺序作出不能遗漏和缺失，教师可以提出以下要求：要根据“原型“严格遵循动作序列逐一执行，及时检查和矫正动作的执行情况；学生在实践模式的每个环节提交一些阶段性材料或者记录一些完成过程来保证是按照实践模式的步骤完成任务的
7、；建议学生将动作执行和言语相结合，边说边做。网页设计心智技能的原型内化阶段是将上述实践模式向头脑内部转化的过程，表现为学生从事网站建设任务时可以离开实践模式，借助语言指导来完成。学生只有在多种不同的实践条件下反复进行网站建设的具体活动，才能不断从原型中抽取本质的东西，最后形成普遍适用于不同实践条件的原型（心智技能），只有到这一步心智技能才算真正形成。3 一个充分体现心智技能三阶段理论的 PBLEs 设计在网页心智技能培养三阶段理论的指导下，学习环境设计比较合理的安排是：首先依托一个充分体现原型的范例讲解和操作，完成活动原型中蕴含的相关知识和操作流程的讲解，初步形成“原型定向”。这一阶段教师应该
8、关注脚手架支持的问题设计。然后，实施基于项目的学习，指导学生利用课后时间自主完成几项网站建设的综合任务，将原型进行操作和内化，最终使学生具备网页设计心智技能。下面就从“原型定向”阶段 PBLEs 设计最关注的脚手架支持问题展开叙述。在“原型定向”阶段，教师需要提取“网页设计活动基本原型（如图 1）”中的 4 个核心环节，然后把这 4 个核心环节中蕴含的相关知识和操作流程设计成脚手架支持的问题，继而通过教师逐步示范和讲解一系列问题的解决过程，完成网页设计活动的定向。例如，附件网页设计活动原型定向阶段 PBLEs 设计方案中，对应“网站方案设计环节”的学习内容，将其转化成 9 个具体的脚手架问题。
9、它们分别对应网站建设过程中“需求分析”、“系统分析”、“风格设计”、“UI 版面初步布局”、“色彩定位”及“网站建设日程规划”等重要学习内容。这些脚手架支持的问题是以完成“网站方案设计”这一环节为驱动力而提出的，将引发和维持学生在该学习阶段中的学习兴趣和动机，引导他们带着明确的问题与目标，模仿教师的示范行为，开展真实的问题解决过程。在脚手架支持的问题设计方面，教师需要依据学生能力临近发展水平，问题难度要居于该临近发展区内，这样学生就可以调动己有的网页设计基础知识及操作技能等认知经验来解决当前面临的脚手架问题。网页设计活动是一个渐进过程，脚手架支持的问题是依照这个渐进过程的发展顺序提出的，难度一
10、般是逐级升高。因此，在设计这些脚手架支持的问题时，还需要注意合理安排难点和重点、考虑子任务的大小、所需知识技能含量、相关影响因素等多个方面。根据问题的难度，我们提供了支持指导、相关案例、辅助资料等，并创设必要的实践条件，使问题解决具有操作性。这一阶段，还要求教师关注各个问题解决的策略选择和转换的讲解、示范及独立、协作及竞争等组织策略的合理运用。而学生则以教师演示的优秀范例为榜样，利用大量的相关案例、信息资源、认知工具、协作工具及境脉等展开原型的定向学习。事实上，教师演示如何根据客户要求完成网站建设任务的过程就充分体现了网页设计活动原型的范例，这将给予学生解决问题的逻辑结构和方法过程，它包含了一
11、种内在的逻辑，为学生提供了支架，通过对范例的学习，学生可以模仿其中的路径和方法，从而完成原型的定向。在原型的操作阶段，比较适合采用基于项目的学习方式，即教师布置几个不同的网站建设任务，以完成作品为驱动，通过一系列脚手架支持的问题来引导学生利用上一阶段获得的网页设计活动原型完成网站建设。这一阶段要求学生依照一定的顺序，不能遗漏和缺失地作出原型定向中的所有动作系列。该阶段的重点在于任务的设计，我们设计了以“个人网站”、“品牌推广网站”及“公司企业网站”为主题的具体项目。这 3 个项目的难度逐级升高，有一定的挑战性。教师还需要提供支持指导和辅助材料，并创设必要的实践条件，使任务具有可操作性，这样，学
12、习者就能够在实践中掌握问题解决技能和方法。在原型内化阶段，学生所从事的网站建设任务是可以离开实践模式的。教师需要为学生提供在多种不同的实践条件下反复进行网站建设活动的机会。例如，我们设计了以“小组为团队”，为本学院设计制作一个学院网站这一具体任务，期望学生通过不同的实践过程，不断的从操作原型中抽取更本质的东西，最后形成普遍适用于不同实践条件的心智技能。案例：网页设计活动原型定向阶段的脚手架支持问题设计。客户要求：XX 化妆品公司预借助互联网塑造良好的企业和产品形象，提高品牌知名度、美誉度和特色度。针对这这次品牌推广，我公司公开竞标，请有合作意向的设计团队于本月底之前提交设计方案及网站一稿，我方
13、将从提交的方案和初稿中挑选出最满意的设计，并与其设计团队正式签约，预付 30%的定金。同时，我们将提供企业 LOGO、广告语、企业品牌发展历史、品牌产品的图片，推广活动视频等资料。学习目的：学生通过观察、模仿学习教师是如何根据客户要求完成网站建设任务的完整过程。脚手架支持的问题设计：（1）网站方案设计环节的学习。脚手架支持的问题：接到企业网站建设任务后，作为网页设计师的我们首先要作什么？如何与客户沟通，提取与网站任务相关的关键词，解读网站主题，分析市场前景？从哪些方面分析目标用户群体特征？如何结合网站主题、目标用户群体特征、企业机构已有 VI 色彩特征、客户提供的原始素材等确定网站的主色？鉴于
14、主色，如何依据色彩设计原则（互补色，分裂互补三色组，类似色搭配原则等），确定网站整体的色彩定位？如何根据网站主题和信息量大小，结合布局特征，选择适用的 UI 版面布局？结合客户的要求及公司或机构的性质，如何对网站的功能模块进行规划设计，绘制出网站层次结构图，描述各功能模块及作用？如何展开网站的风格设计？你了解常用的网站风格设计原则吗？结合上述分析，如何撰写网站设计方案？（2）主要页面效果的设计与制作环节的学习。脚手架支持的问题：根据网站设计方案中确定的页面尺寸，色彩定位，UI 版面布局设计，风格设计，功能模块设计等信息，利用“PhotoShop”完成页面效果图设计的步骤和方法是什么？利用“Fi
15、rework”制作网页切片的技巧和原则是什么？（3）基于 Htnl+CSS 技术的网页基本制作环节的学习。脚手架支持的问题：专家熟手利用 html+CSS 技术制作网页有什么技巧？在制作过程可能遇到什么样的难题，该如何应对？（4）网页动画效果设计与制作环节的学习。脚手架支持的问题：如何利用 JavaScript 或 Flash 技术炫动你的网页？给页面添加动画的时候有什么需要注意的地方？完整的较为准确的三维动画建模创作流程是怎样的？三维动画建模活动中，“创意构思”、“模型设计”及“模型制作”这 3 个关键环节的目的、过程及阶段性成果分别是什么？任务活动：结合自己的建模经验说明三维动画建模活动的
16、完整流程，然后小组交流。问题思考：如何进行创意构思？如何进行模型设计？如何进行模型制作？任务活动：仔细聆听教师的范例讲解，然后借助因特网资料展开品牌场景的创意构思、设计与制作的活动，创建场景模型形成阶段性成果和建模作品；交流和评价其他人的作品，通过竞争选出 3 个最优秀的场景模型。范例讲解：展示了完成企业品牌场景任务的建模过程（审题、构思、设计、制作）。4 结语PBLEs 作为网页设计心智技能形成的关键，应该广泛引起教学实践者的关注。基于问题的学习始终应该在构建一个有意义的、真实的任务情境下，提供给学习者一系列基于案例的脚手架支持的问题，继而通过专家熟练的示范让学生明确完成任务的思维过程和问题求解的方法。在这样的学习环境中，教师承担着教练或导师的角色，需要促进学习者进行社会协商，并同步或异步的给予协助和指导。另外，后续研究应该关注学生网页设计活动原型的内化，比较适合采用基于项目的学习。该学习过程是拟真的、映射真实世界的生产活动，依照学习者的自我想法和方式来完成建站任务。只有经过这样的完整训练，学生才能真正形成网页设计心智技能，从而满足业界对网站前端设计人才的职业技能需求。