网页设计活动原型构建研究

摘要：网页设计是艺术与技术相结合的过程，它对设计者的网页设计心智技能要求较高。为了提高网页设计教学的有效性，使学生熟练地使用所学技能完成不同网站的设计与制作，以适应今后工作实践需要，教学秉承“旨在适用的学习理念”，着力引入心智技能培养研究，并初步构建网页设计活动的原型，以更好地培养学生的网页设计技能。

关键词：网页设计；心智技能；活动原型构建

中图分类号：TP393 文献标识码：A 文章编号：16727800（2013）009014303

作者简介：秦书荣（1987-），女，硕士，广东农工商职业技术学院艺术系实验员，研究方向为网站建设、二维及三维动画设计、影音编辑；李冬睿（1983-），男，硕士，广东农工商职业技术学院计算机系讲师，研究方向为图形图像处理、模式识别、嵌入式控制；梁仲佳（1992-），男，广东农工商职业技术学院艺术系学生，研究方向为图形图像处理、网页设计与制作、影视编辑。

0引言

《网页设计》是高职高专院校计算机科学技术应用类专业普遍开设的一门基础技能课程。该课程的核心目标在于培养学生的静态网页设计技能。然而，教学实践中，不少教育者发现该课程的教学效果并不理想，很多学生通过学习仍不能按照客户要求的功能效果和视觉效果独立进行网站规划和页面设计。究其原因，在于学生软件操作不娴熟，但更重要的是学生尚未掌握真正适用于工作实践的网页设计心智技能。为此，以职业实践所需要的心智技能为核心，探索培养学生网页设计心智技能的有效依据显得尤为必要。而构建活动原型作为心智技能培养的首要步骤，也必将引起高度重视。

1网页设计心智技能与原型

1.1网页设计心智技能

网页设计心智技能是设计领域的专有名词，暂未从查阅的资料中寻找到对它的直接解释。所以“网页设计心智技能”这一概念可以依据“网页设计”及“心智技能”的定义进行理解。

网页设计是对文字、图形、图像、表单、动画、音频、视频、超链接等网页元素进行色彩、版式等表现效果方面的设计，整合形成具备客户功能要求的页面与网站，以达到在互联网上进行人性化的、高效的信息传达。它的过程可描述为运用网页构思和设计知识进行网站总体效果的创意构思，对图像、文字、超链接等组成元素的表现形式进行设计继而完成主要页面的整体设计，然后借助“Photoshop”及“网页三剑客”等软件，根据前期的效果设计选择和应用相关工具制作网页各部分，并将其整合成完整而有实用价值的网站。认知心理学领域是技能培养的主要领域，本文借鉴该领域国内普遍认同的“心智技能”定义，即将其视为一种调节和控制心智活动的经验，是通过学习而形成的合乎法则的心智活动方式[1]。

综合上述有关定义，网页设计心智技能可理解为：在网页设计活动中通过有目的、有计划的学习或练习而形成的，普遍用以调节和控制网页构思、设计、制作等一系列符合网页设计规则的心智活动方式。

1.2原型

网页设计操作技能定向的对象是“Photoshop”及“网页三剑客”四款软件中各工具和命令固有的操作序列或步骤。这些操作序列或步骤是固有的，不需要重新创建。而网页设计心智技能定向的对象是网页设计活动的原型。“原型（Prototype）”，也叫“原样”，沿用J·R·安德森的观点，把“原型”视为外化的实践模式，或“物质化”了的操作活动程序[2]。“网页设计活动的原型”理解为，符合网站任务主题的解读与分析、网站的构思设计、元素的设计制作及整合等一系列规则的外化的网站设计活动的完整实践流程。

2网页设计活动原型创建

构建网页设计活动原型一般采用心理模拟法，它包含3个步骤：①网页设计活动的功能分析；②网页设计活动的结构分析；③功能分析与结构分析的有机结合。其中，功能分析的重点是作用的对象、条件与结果；结构分析的重点在于组成要素及要素之间的关系[3]。

网页设计活动的目标是能够高效地完成符合客户需求的静态网站，这需要具备网页设计的基础知识及基本操作技能。网页设计活动包含了“网站方案的设计”、“主要页面效果的设计与制作”、“html+CSS技术完成网页的基本制作”、“网页动画效果的设计与制作”4个典型的子活动。这些典型要素之间的关系可以描述为：要想高效地完成某项网站建设任务，首先需要设计网站总体方案，即在用户群体需求分析及网站主题解读的基础上，进行色彩分析及定位，确定UI版面布局，分析设计网站功能模块，确定网站风格等，最终形成包含“前言”、“需求分析”、“系统分析”、“风格设计”、“UI版面初步布局”、“色彩定位”、“网站建设日程规划”等部分的网站总体方案文档；然后，根据前期方案中对“色彩”、“风格”及“UI版面布局”等的分析，依据页面设计原则，利用Photoshop绘制网站主要页面的整体造型，利用Firework制作切片；接着，借助Dreamwear软件，利用“Html+Css”技术完成包括“页头”、“导航”、“内容”、“页脚”等部分的页面制作，生成网页文件和样式表文件；最后，根据方案，利用Flash软件设计制作网页动画并添加到网页中，形成完整网站，如图1所示。该过程中任何环节如果出现问题都应该返回上一个步骤进行重新修改。

3网页设计典型子活动解析

结合上述对网页设计活动的功能与结构分析，发现网页设计活动原型中的4个典型子活动中又分别包含很多复杂程度不一的子步骤，需要进一步解析。

3.1网站方案设计

网站方案的设计对象是完整网站作品在人脑中的主观印象，它主要包含以下4个操作步骤。通过这4个步骤，可以完成网站方案中“前言”、“需求分析”、“系统分析”、“风格设计”、“UI版面初步布局”、“色彩定位”、“网站建设日程规划”等部分的撰写。

（1）色彩定位。网站设计人员接到任务后，要对市场前景、用户人群，网站主题进行分析，确定色彩组合。这个过程中往往需要考虑以下几个问题：①哪些色彩能够表达用户人群的特征？②哪些色彩能够反映网站主题？③网站是否具有季节性？④公司或机构是否有官方色彩？Logo的颜色是什么？⑤客户提供的图片色彩如何？网站设计者往往结合上述5个问题的答案，确定网站的主色，再依据色彩搭配的原则展开头脑风暴式的色彩组合，确定和谐的三色组、分裂互补三色组、互补色、类似色、暗色及亮色，最终完成网站的色彩定位。

（2）UI版面布局设计。网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题文本型布局及框架型布局等[4]。这些布局各具特色，适用于不同主题内容的网站。网站设计者要根据网页信息量，结合不同布局的特点，选择最符合客户需求的布局方式，并利用Photoshop软件完成网站的布局创意。

（3）网站功能模块分析与设计。结合客户的要求及公司或机构的性质，网站设计者需要对网站的功能模块进行规划设计，绘制出网站层次结构图，描述各功能模块及作用。该过程既需要设计者具有良好的系统性，又需要其能够合理地将网站要传达的信息进行分类。

（4）风格设计。网站设计者常常利用“重复—替换—调整—统一”的原则统一首页与其它子页的风格，即当主页设计完成后，设计者选择主页中易引起人兴趣的“图像”、“图标”、“字体”、“颜色”、“版式”等元素，在子页面中将这些元素进行“位置”、“大小”、“色彩”等方面的变化，再添加一些新的元素形成子页的完整设计。总之，子页的设计要力求与主页保持某种明朗的联系。

3.2主要页面效果设计与制作

主要页面效果设计与制作可以理解为网站方案的物化，该环节需要进行诸如想象、比较、判断与选择的心理步骤，同时还要求设计者具备扎实的美术基础、色彩设计基础及版式设计基础等。

（1）确定页面尺寸。一般来讲，目前大多数显示器为1 024px*768px，那么以此为默认显示器时，页面的尺寸一般设置为“1 007px*600px”。

（2）页面整体布局。在前期“UI版面布局”、“色彩与风格定位”的基础上，对主要页面进行整体造型，即页面中图形与文本层叠有序的结合。设计者们首先应该能够合理运用以下7项普遍认同的网页设计原则，即：①利用空白将彼此相关的项目归为一组，避免出现多个孤立视觉元素；②页面上任何一个元素应当与另一些元素存在某种对齐关系；③如果不同就让其截然不同，用对比来吸引浏览者；④选取页面中能引起人兴趣的“颜色”、“字体”、“图片”、“符号”等作为重复的要素，使页面内部及页面之间风格统一；⑤页面避免不必要的滚动；⑥避免使用闪烁文字；⑦时刻站在浏览者的角度展开页面设计。在上述原则的指引下，分别对页面整体及局部（包括页头、文本、页脚）进行“借鉴—创新”设计，具体过程可描述为在明确了页面色彩、风格、布局的基础上，搜索、观察和体验色彩、主题、布局上相似或相同的已有“优秀网页设计”，利用“通感”去反思这些优秀设计，直到领悟原有优秀设计的思想精华而非表象，借鉴原有设计的表现手法，使用新的手法在Photoshop 中创造出崭新的独特页面。

（3）利用Firework制作网页切片。网页设计者秉承“先横着切，后纵着切，保证后期预使用的切片完整无缺”的原则，在Firework中进行切片和优化。该过程比较简单，此处不做赘述。

3.3基于html+CSS技术的网页基本制作

页面制作是设计者利用制作技能，将前期构思和设计的页面在Dreamwear中转化成真实的效果。笔者强调运用Html+CSS技术完成网页的制作，是由于该技术具备以下优势：①表现和内容相分离；②页面浏览速度快；③易于维护和改版，符合Web2.0标准[5]。这一环节，设计者一方面需要以html+CSS的操作技能为基础，另一方面需要技巧、经验等心智技能成分的支持。它是根据页面制作的实际需要将单一的操作技能进行有机整合和应用的过程。该过程可描述为：①创建站点，设置参数；②运用“DIV+CSS”技术在Dreamwear中对已经设计好的页面进行重建，在相应的位置借助CSS将所需切片以“背景”的形式插入当页面中；③利用“Html元素+CSS”，依照设计的页面，完成“导航”、“链接”、“段落”、“列表”等方面的制作。

3.4网页动画效果设计与制作

为了吸引客户眼球，防止浏览者视觉疲劳，根据方案，网页设计者往往会在网页中添加动画效果，来修饰网页使网站整体更加美观。这个过程需要借助Flash软件，制作出需要的动画，然后利用“Html+CSS”技术将动画插入到需要的位置。网站中要添加的小动画不宜太多或太复杂，避免喧宾夺主。

4结语

网页设计心智技能的培养不是一蹴而就的，它的形成需要经过原型定向—原型操作—原型内化三个阶段[6]。不难发现，心智技能培养的关键在于“原型”，也即网页设计活动原型的创建是网页设计心智技能培养的焦点，在教学实践中有着举足轻重的作用。教育实践者应当依据网页设计活动原型展开教学和指导。虽然，创建原型仅是网页设计心智技能培养的初级阶段，但笔者相信，网页设计活动原型的创建势必会引起该领域教育研究者的关注，而探索如何将原型引入教学实践则是后续研究的重点。

参考文献：

[1]皮连生.教育心理学[M].上海：上海教育出版社，2004.

[2]JR安德森.认知心理学[M].长春：吉林教育出版社，1980.

[3]冯忠良.结构化与定向化教学心理学原理[M].北京：北京师范大学出版社，1998.

[4]吴丰，丁欣.Dreamweaver CS5网页设计与制作[M].北京：清华大学出版社，2012.

[5]聂小燕，鲁才.美工神话CSS网站布局与美化[M].北京：人民邮电出版社，2007.

[6]秦书荣，晏艳.构建3ds Max建模活动原型的研究[J].中国教育网络，2012（1）.