网页设计教学的创新探索

摘 要：网页设计当今设计行业需求最大的职位之一。当前的国内艺术专业网页设计课程的教学现状却是：大多仍沿用传统的灌输式、接受性教学模式，教法老旧，专业能力单一、缺少应变。信息时代的一个最显著的特点是知识量大，知识的更新速度快。在网页设计教学中，这个问题尤为突出。本文旨在通过对教学模式和教学内容的双重创新探索，让学生能够真正了解目前最新的互联网技术与网页设计发展趋势，更快地与互联网公司进行接轨。

关键词：网页设计；教学创新；任务驱动

1 当代网页设计教学的背景

1.1 计算机互联网的发展

从1822年查尔斯·巴比奇发明了第一台计算机（差分机），宣告了新一轮信息革命的开始，到1981年IBM的PC推出，再到今天的互联网行业白热化的发展，计算机几乎改变了人们的生活，而艺术，作为人类的高级情感需求，存在于世界的每个角落，从古至今皆是如此，计算机也不例外。从计算机图形操作界面发明那天起，网络视觉艺术便随之诞生，而在这之后的几十年间，网络视觉艺术的发展的在不断的变化，而每一次的变革都起源于计算机技术的革新。

另一个具有同样划时代意义的发明是Internet，这个萌生于1969年美国军方（Arpanet）、90年代初普及到全世界的网络，让我们今天做的一切成为可能。也正是基于图形界面和Internet，网络视觉艺术才真正产生。然而网络视觉艺术对于当时的设计师来说仍然难以触碰，虽然平台已经成型，但是缺少设计的工具和技术支持，所以很多当时的界面在如今看来显得比较粗糙。1991年8月，蒂姆·伯纳斯·李发布了史上第一个网站，这个网站是由纯文本构成的，目的是试图告诉人们什么是互联网。

1.2 网络视觉艺术的发展

在这段时期，各种网络视觉技术纷纷出现，首先崛起的当是Flash技术，Flash起源于1996年，后来被Adobe公司收购，改名 Adobe Flash。Flash让动态交互网页成为可能，一时间各种网页动画效果五花八门，层出不穷，设计师们终于可以通过这一技术平台来实现设计创意，且这一潮流经久不衰。

到21世纪初，flash的一大竞争对手出现，它就是CSS（Cascading Style Sheet），其实CSS 1早在1996年就诞生了，只是一直被忽视，直到21世纪初才真正被人们了解和接受。CSS2具备很多flash所不具备的优势，比如内容与表现分离、网页文件体积小等，因此很快被程序员与设计师所青睐。而2004年web2.0的诞生让CSS更加炙手可热，自此以后，以HTML+CSS为核心表现手段的 web2.0风格占据主导地位，同时期Javascript脚本语言等弥补了CSS在动态交互方面的不足，伴随着3G技术和3G设备的成熟，一种被称为UI风格的设计形式日趋主流，这种风格最初是用于移动界面或者电脑软件，后来被迁移到了Web端。

1.3 网页设计教学的更新

随着网络的普及和人们对网络的依赖，人们对网页的质量也有了很高的要求，如人性化的页面设计、版面设计的美感、色彩的搭配等。网页，是视觉范畴的信息传播媒体，网页设计平台也趋于多元化，近些年各大高校为了进一步满足人们的视觉、审美、情趣等方面的要求，纷纷在艺术设计专业领域开设了网页设计课程。艺术设计专业的学生设计制作网页有艺术审美优势，如何针对艺术类专业学生上好这门课程，给学生提供一个设计平台，使其将创意、构思、构成元素、版式设计、色彩取向、设计风格等系统地融合在一起，是教授此课程的重要目的和内容。艺术类专业学生如何更好地发挥其专业优势和特长，这与教师授课模式的启发性、科学性、独到性有重大关系。在传统的网页设计教学中，流行着网页设计三剑客的教授内容，即Dreamweaver、Flash、Fireworks这三个软件的教学，因为这些软件的出现，曾经极大地将网页设计推向了一个新的高度，然而，在如今的互联网世界中，学生只学习三剑客的内容就会发现已经与互联网行业脱轨。

以HTML+CSS为核心表现手段的 web2.0风格已经开始与flash平分秋色，而苹果公司的灵魂人物：史蒂夫.乔布斯曾在2010年发表过一封公开信，公开表示苹果所有硬件不支持flash，原因是“Flash是一个封闭的系统，苹果拒绝使用Flash，而是用HTML5、CSS和JavaScript等全部都是开放的标准。得益于这些开放标准，苹果的移动设备都表现出低功耗与高性能的优势。HTML5是最新的网络标准，已经为苹果、谷歌等许多公司所采用，它允许开发者开发出更为高级的图形、印刷和动画，并且不需要第三方浏览器插件（如Flash）就能转换。HTML5是完全开放的。”而如今，当设计师进入到互联网公司后会发现，网页设计的主要工作内容不需要Flash，Dreamweaver和Fireworks。一名合格的网页设计师需要去掌握的技能是：交互设计和视觉界面设计。

2 网页设计课程的内容组织

要明确网页设计课程上的知识点和技能，首先要了解当今互联网公司中一个网页产品设计的流程和设计师的职责才能设计出好的课堂内容。而一名网页设计师的工作，并不仅仅是输出设计方案，需要参与前期的需求讨论、后期开发、测试验收等等产品设计与实现的多个环节。

第一，需求分析阶段：这个阶段需要了解产品的定位是什么？用户群体是谁？他们有哪些特征？如果有竞品，优劣势差异又在哪里？通过哪些功能来实现用户的需求？这个阶段的需求分析主要由产品经理提供。但是设计师需要参与这个需求开发的过程。

第二，交互设计阶段：首先是任务分析，分析用户在使用产品过程中，需要进行的行为和认知的过程，可以帮助建立产品的结构和信息流。根据产品的功能点，设计师先确定用户需要完成哪些任务？每个任务又可以分解为哪些子任务？这些子任务的操作流程、目标是什么？分布在哪些页面，子任务的层级结构是怎样的？任务、子任务的优先级关系是怎样的？如何在界面上突出主要任务？其次是导航设计，导航的目标是突出主要功能点，让用户在完成任务时能一目了然地知道自己要从哪个入口进入。通过前面的功能分析和任务分析，对于用户任务的优先级已经较为明确，此时可以思考、确定产品的导航设计；其三是页面布局设计或页面线框图，整体框架、流程梳理完成后，开始逐个完成各个界面的布局设计、界面之间的跳转关系。这个环节是整个交互设计的重中之重，如何设计友好而易用的界面，如何做到有效的组织将用户重点关注的信息凸显出来，非常考验一位交互设计师的能力。另外，这个环节也要着手思考交互操作细节。

第三，视觉设计阶段：将交互原型输出为视觉设计方案，视觉设计主要负责产品或网站的图形、图标、色彩、视觉风格等，决定营造出什么样的视觉体验。从视觉层面把控产品界面设计，确保UI稿在视觉上清晰的传达设计师的交互设计稿，也就是高保真视觉稿。

第四，开发与测试验收阶段：测试用例撰写时，测试者可能会提出一些尚未考虑到的特殊操作场景。交互设计师需要思考、补充相应的交互设计说明。同时在测试用例评审阶段，需要确认所有的用例是否与交互文档上一致。开发实现过程中，若开发遇到一些交互上的疑问，设计师需要实时跟进、讨论、确定最终实现方案。

第五，搜集用户反馈阶段：设计师通常采用的方式是用户调研、可用性测试、各种用户反馈渠道搜集。并且设计师需要分析用户反馈问题的合理性、是否需要优化。对于值得重视的反馈，需要思考设计方案、推进实现。

因此，在一个实际的网页设计过程中，设计师所要做的事情远远超过了传统教学课堂中的flash动画效果，或者用photoshop做一个按钮而已。网页设计课程的教学目的应该体现在学生完成该课程后与互联网公司的相关设计岗位做到无缝连接，并且熟悉互联网公司的产品流程，了解一个产品团队的合作模式。

2.1 教学基本设计理念

对于课程教学模式是教学理论和教学实践的综合体，课堂教学模式是指在课堂教学环境下，在现代教育思想和丰富的教学经验基础上，为完成特定的教学目标和内容而围绕某一主题形成的、稳定且简明的教学结构理论框架及其具体可操作的实践活动方式，而 “任务驱动”的教学思想不是最近才有，2000 多年前我国著名教育家孔子就提倡“学以致用”，在新世纪的新形势下，网页设计教学中的任务驱动“具有更新的内涵和更深刻的意义。”

所谓任务驱动教学模式，就是学生在教师的帮助下，紧紧围绕一个共同的任务为活动中心，在强烈的问题动机的驱动下，通过对学习资源的积极主动应用，进行自主探索和互动协作的学习；并在完成既定任务的同时，引导学生产生一种学习实践活动。教师将所要学习的新知识隐含在一个或几个任务之中，学生对新任务进行分析、讨论，明确它大体涉及哪些知识，并找出哪些是旧知识，哪些是新知识，在老师的指导、帮助下找出解决问题的方法，最后通过任务的完成来做到对所学知识的意义建构。在完成任务的同时，学生培养了创新意识、创新能力以及自主学习的习惯。落实到网页设计课上，就是教师把一个教学单元要完成的教学内容设计成一个或多个具体的任务，让学生通过完成一个个具体的任务，掌握网页设计的专业知识和技能，达到教学目标的要求。

因此，笔者将本课程为两个阶段：理论讲授结合课堂练习阶段和任务驱动阶段。

2.2 重点知识架构

在任务驱动阶段，将按照真实的网页产品设计流程来要求学生独立完成一个网站产品，这一阶段的内容大致包括：用户调研，交互设计，视觉传达效果以及故事板的模拟。因此，为了让学生能够更好地在任务阶段进行实践，则需要在理论讲授过程中，结合课堂练习先让学生了解初步的网页设计内容，内容包括：网页发展和趋势，css和html，网页基本布局原则，网页的排版，导航的设计，案例教学等内容。这些教学和实践内容按照教学进度梳理如下：

第一，了解网页设计发展与趋势，互联网技术的发展，网页的分类。课堂练习为：对比同一类型网站不同公司的设计风格和使用体验分析。

第二，掌握网页设计布局原理，课堂练习为：设计一个简单的注册表单。

第三，掌握导航设计要点，课堂练习为：设计某网站的导航栏，设计风格和布局效果自定义。

第四，掌握网页的图文排版，css基础，课堂练习为：根据上一次的作业，继续设计一个二级页面，重点练习图文排版。

第五，案例分析课，课堂练习为：将指定网站的设计改版前后效果进行比对分析。

第六，掌握部分页面元素设计，课堂练习为：设计某类型网站的按钮一套。

第七，了解交互设计，并介绍下一阶段任务的要求和内容。

重点知识的架构是为了更好地过渡到任务实践阶段的需求分析，交互设计和视觉界面效果设计的知识技能培训中。

3 设计课程任务模式

在任务实践的模式中，“任务”直接影响教学效果，因此，“任务”的设计、编排非常关键。

第一，“任务”设计要有明确的目标，在学习总体目标的框架上，把总任务划分成一个个的子任务，通过这些 “子任务”来体现总的学习目标。设计任务时应考虑知识点之间的前后呼应、关系，循序渐进。

第二，设计开放性的任务，学生所面对的学习任务应该将多个知识点包含在一起，最好能设计一些没有唯一正确答案的问题解决型任务。在设计某些任务时只有原则要求，大部分内容由学生自由发挥实现。

第三，设置认知冲突、激发学生的参与欲望让学生自己发现问题并提出问题，特别在新知识的引入上设置一些问题。学生在老师的引导下，经过积极的思考把问题提出来。这时教师再将新知识介绍给学生，学生自然而然就建立了对新知识的认识。例如在“交互设计流程图”知识点时，将之前做过的练习“填表单”这部分内容拿出来转变成流程图的方式，再提问流程图上出现的问题有哪些？因为是自己做的作业，学生有参与的欲望，希望能在这个流程图上发现问题，再经过教师的指点，学生可以得出流程图的展现应该更具有逻辑性的结论。

第四，选择的任务要有趣味性，如果教师设计的任务有趣味性就能激发起学生的好奇心，激起他们强烈的求知欲。

因此，在任务实践阶段的课程架构安排为：首先是用户需求分析，根据指定类型网站，任意选择某网站进行改版设计，首先对选定网站的整体内容有一个全面的了解，将网站内容进行归类分析；其次分析网站用户群，包括用户类型，习惯等；其次是交互设计阶段——草图，可以用纸和笔设计出网站的最初结构，包括基本功能点和内容；其三是交互设计阶段——线框图，利用作图软件ps，ai或专业交互设计软件Axure设计整个网站主要页面的页面布局，页面跳转和结构层级，这一阶段是重点考察学生的逻辑思考能力；其四是故事板，虚拟一个用户使用场景，通过操作流程来检验线框图的合理性；其五是视觉界面效果设计，确定界面风格，图文排版，色彩搭配和按钮等UI设计内容。

4 结语

培养专业人才，要从高校开始；全面的知识结构，必须从合理的课程设置开始。 互联网在高速发展，技术推动了设计革新，因此作为设计教育者，应与时俱进，不能停留在即将被淘汰的技术应用和设计风格上，这样，学生才能与社会接轨。通过对网页设计课程的创新改革，无论是从教学模式上，还是授课内容上，都与当今互联网技术和设计趋势紧紧相扣，将学生带入互联网设计的世界，并培养出相应的应用型人才。

参考文献：

[1] 赵云.提高网页设计能力的“任务驱动”教学设计[J].软件导刊，2010（8）：187-189.

[2] 张军.网页设计课程中关于UI设计教学的探索体会[J].湖北美术学院学报，2009（4）：84-86.

[3] 许娟.任务驱动教学模式在艺术设计专业网页设计教学中的应用研究[D].南京艺术学院，2008.

[4] 何丽萍.试论网页设计教学结构的合理构建[J].包装世界，2013（5）：70-71.

作者简介：夏宇佳（1986—），女，陕西西安人，设计学硕士，西安交通大学城市学院艺术系教师，研究方向：环境艺术设计，网页设计。