基于项目驱动的网页设计与制作实践教学

◇四川文理学院美术学院 叶 琪

传统的网页设计课程偏重于学生的操作技能的培养，而对以用户为中心的设计思维教学流于表面。本文通过实施基于项目驱动的网页设计与制作实践教学，来探讨网页设计课程教学改革的思路。通过项目驱动的网页设计与制作实现学生实践知识和应用能力的自我构建。

作为一门置于诸多基础课程之后的核心专业课，网页设计是基于版式设计能力、交互设计、软件操作能力的综合运用课程，更是培养学生以用户为中心的设计思维的课程。传统的网页设计课程偏重学生的操作技能的培养，而对适应当下网页设计需求所强调的实用性与艺术性未做教法上的平衡。如何设计教学内容及方法，让学生能综合运用到所学的知识来设计符合市场需求的网页，是目前网页设计课程需要解决的问题。

一、项目驱动的网页设计与制作教学的意义

项目驱动教学方法是一种建立在具体项目的教学方法，它以项目完成作为教学目标，以师生共同参与为教学模式。项目驱动教学方法的整个教学过程以学生为中心。教师作为项目的组织者和指导者，在必要的时候为学生提供意见并引导方向；学生作为项目的实践者，在理论知识为依据的情况下进行方案呈现。

网页设计的本质是对网站的图形界面进行设计，也被称为WUI。高校中的网页设计课程多依托于Dreamweaver的操作教学，以教师理论讲授、上机演示操作步骤，学生通过观看被动接受为主。传统的网页设计教学中存在着一些短板，未能系统地将规划网站功能与设计用户交互流程相结合；学生对于设计的网站图形界面过于主观化，与真实的市场需求有一定的差距。网页设计课程中中引入项目作为教学驱动能缩小这一差距，对教学有着积极的意义。第一，学生通过项目化教学能够初识相对完整的商业流程，可以让培养的新型人才更好的适应未来就业相关岗位。第二，相对于传统教学，能设计出更功能更完善，交互流程更流畅，视觉效果更个性与统一的网页项目。第三，教学过程转变为探索式教学，培养以用户为主的设计思维，或可助力于创新型人才的培养，提升教学质量。第四，以具体的教学项目对应教学任务来驱动教学，可以提升学生的学习积极性，学生可以根据自身的知识基础和理解问题的方式来制定完成项目任务的方式。

二、基于项目驱动的网页设计与制作的教学实施

教师在实施教学前应该着手评估甄选具体的项目用作教学，要根据学生的能力选择的项目难度要适中，且甄选的项目本身最好具备一定的落地可能。传统的网页设计课程教学内容涵盖了两个部分，一部分是网页的理论知识教学，一部分是Dreamweaver软件的操作教学。此两部分内容在项目驱动的网页设计与制作实践教学中不宜与具体的项目作割裂，应尽量融入在项目中作阐释。

实施项目驱动的网页设计与制作教学在传统的网页设计课程的基础上，增加了与市场接轨的内容，即网站设计与制作之前的内容，用户研究等工作。整个教学内容具体被拆分为项目规划、内容组织、页面设计、测试发布、站点推广、反馈评估六个步骤。教师将学生分成小组来进行项目展开。

第一，项目规划是前期与市场接轨的重要步骤。首先需要对网页设计的项目需求进行分析，明确项目的网页性质，针对用户人群的使用习惯研究，以及这一部分人群所期待网页能够提供的服务和产品，形成产品需求文档、市场文档、竞品调研文档。此部分需要配合做大量的问卷调查和市场调查。最后再根据调研结果以用户画像的方式确定目标用户群体，再确定项目的产品和服务。

第二，内容组织是将收集和筛选的网页内容进行组织整理。以树形图或者是递进结构来表现各个页面之间的交叉链接、从属关系。根据反复组织推敲合理的界面关系，可用Axure RP进行原型图阶段的设计呈现。通过Axure RP设计出原型图有助于学生对网页链接的合理性以及交互体验的流畅感进行自查。

第三，页面设计即需要根据原型图确定内容和大体版式完成网站的界面设计。在具体的项目中，除了收集素材之外，可以让学生根据项目主体设计一个情绪板（Mood Board）。情绪板是由诸多与主题相关的资料和素材拼贴在一起的视觉概念，有助于指引学生掌握项目的整个需求的设计主题和设计感受。在确立项目的具体风格后，引入Photoshop的图像处理。在处理网页界面设计的时候，应引导学生建立一定的设计规范，例如字体规范、主题色规范、图标规范、图片规范等不同分类。设计规范能够确保同一个项目的学生小组能够输出统一风格的设计。

第四，通过Dreamweaver等网页设计软件进行项目化驱动的呈现设计。学生在使用Dreamweaver构建网页的时候为了达到项目规划的视觉效果必然会自主地去学习一些初阶的代码，这就激发了学生学习的积极性。

第五，测试发布。这个过程是为了确保网页的技术上的完整性，确保页面内容的可用性。

第六，反馈评估。根据用户使用网站的反馈评估，反复改进网页。

在被拆解的这六个教学步骤中，教师需要积极地响应小组成员的问题，提供及时、有效地指导和帮助。在教学的过程中，要根据具体的项目进度，来安排及时的教学，实现“教，学，做”三位一体的教学方法。项目初步完成后，教师应组织学生就项目进行分享交流，各小组就各自的作品进行演示呈现，并由小组长进行初期策划到最终呈现的过程展示。学生在此交流中达到了自评的目的。及时的总结与交流不仅能为之前的学习打下基础，学生还可以从中探讨经验与心得，得到一定的成就感。教师参与交流过程，可以结合作品和小组设计阐述形成定性和定量的评价。

三、结语

基于项目驱动的网页设计与制作实践教学是非常有效的，学生可以在具体的项目语境下主动带入目的去进行学习，能够充分调动学生学习的积极性，也能锻炼学生分析解决实际问题的能力。同时，学生在整个过程中详细了解了一个网页界面设计从前期策划到最后呈现的完整步骤，这种以用户为主的设计思维的培养，有利于其获得相关岗位的职业技能。

若要将项目驱动的网页设计与制作实践教学落到实处，首先，在项目甄选方面院校必须加强与社会各方的合作力度，这样才能够筛选出适宜教学的项目案例为教学所用。其次，院校需要对实训室的硬件设施进行优化和完善，让学生能够在接近工作环境的场所里进行设计，进而能够保证学生能够快速的接受未来的工作环境。最后，教师作为项目驱动的网页设计与制作实践课程的实施者，需要不断学习新的技术知识，同市场的大需求接轨。