基于交互设计的网页设计与制作课程体系改革

李鑫

摘 要：在产品为王的互联网时代，网页设计与制作课程内容不能只限于网页技术的教学，也要求更多考虑用户体验，融入交互设计的思想和方法进行改革。笔者对交互设计理念做了基本的介绍，根据职业技术教育的特点重新设定了《网页设计与制作》的课程目标，提出模块化、链条化、交互化和产品阶段化的多个优化教学体系的措施，并从用户体验、交互设计角度对原有教学模式进行创设情境、启发思考、小组协作等方面的调整，对教学方法、教学评价也作了针对性的补充。

关键词：交互设计；网页设计与制作；课程体系改革

中图分类号：TP311.5 文献标识码：A

Abstract：The product is most important in the Internet era，so the content of the webpage design and making course can't be limited to web technology.User experience should be given more consideration and interaction design thoughts and methods should be integrated to reform the teaching.The paper introduces the basic concept of interaction design，resets the course objectives of Webpage design and making according to the characteristics of vocational and technical education，and puts forward several teaching system optimization measures，including modularization，chaining，interaction and staging.From the perspective of user experience and interaction design，the paper reforms the teaching model in situation creation，thinking inspiration，group collaboration，and also makes specific supplement on teaching methods and teaching evaluation.

Keywords：interaction design；web design and making；course system reform

1 引言（Introduction）

近年來中国持续速度发展，特别是互联网行业的突飞猛进，应用市场已然处于国际发达国家水平，对互联网产品开发人员的需求也供不应求，面向信息产业的职业教育的市场不断看好。从前程无忧、中华英才、智联招聘等知名招聘网站反馈的计算机人才岗位需求调查显示，网页设计与制作的职业人才依然紧缺。与此同时，经历原始开发、批量生产之后，网页产品的制作技术进入了精耕细作阶段，行业分工已经高度成熟和细化，原来由个体就能完成的网页设计与制作工作，现在已经远远不能满足市场对产品质量的要求。另一方面，高度竞争也带来产品出现同质化、过剩化的情况，表现在产品从界面到操作的严重雷同等多个方面。

2015年8月教育部在《关于深化职业教育教学改革全面提高人才培养质量的若干意见》中指出，“推进专业课程内容适应经济发展、产业升级和技术进步需要”。当下所处的互联网时代，其本质特征包括“用户中心”和“万物交互”，体现在市场上，即为通行的用户为王、体验为王、产品为王的内在规律。因此，网页产品开发需要针对用户隐藏在行为背后的数据和逻辑基础上进行交互式开发，网页设计与制作人才的培养，也应该以交互设计理念为引领，实现与互联网行业岗位需求相呼应的培养策略，对现有不匹配市场发展网页设计与制作的课程体系进行教学改革。

2 交互设计理论体系和产品开发（Interaction design

theory system and product development）

2.1 交互设计理论体系

交互设计，又称互动设计（英文Interaction Design，缩写IxD或者IaD），是以用户为中心，研究某些人在特定的场景下与不同的设备产生行为的交互过程[1]。从实践层面看，早期的设计强调美感，多指的是工业产品的外观或者是计算机软件的界面设计。20世纪90年代后，交互设计逐步从界面拓展开来，强调计算机对于人的反馈交互作用。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求。相比较而言，视觉设计是让产品更具有视觉美感（包括信息传达），功能设计是让产品拥有更加准备和丰富的功能，交互设计是让产品更符合人的使用要求，更加有效地完成产品作用[2]。

交互设计是依据人的行为进行设计，尤其是使用产品的行为。基本的要素有三：用户—Who，给谁用的；目标—Why，为什么做；行为—How，怎么做。我们可以通过一个网易网页产品设计与制作的基本流程来说明交互设计过程，说明如下：

用户：网易用户，开发者对网易产品的用户进行相关研究。

目标：网易用户想要获取更加丰富的应用产品，开发者的产品页面支持用户实现目标。

行为：用户根据自身的心理和习惯进行页面浏览，设计者以用户的浏览行为根据进行网页产品设计和制作。

以下是网易应用市场首页的交互设计流程图：

步骤1：网页布局，依据用户的需求和心理把它归纳为四个区块；endprint

步骤2：根据布局层次框架确定继续将每个区块细化为细节线框图（即为交互原型）；

步骤3：视觉设计完成后的用户界面（UI）图。

其中步骤1的作用尤其关键，这是页面设计的基础，是页面信息架构。此外，还有很多方法可帮助我们来分析用户的行为，包括流程图、泳道图、页面流、站点地图、线框图、目标元素图、用户路径图、信息架构图等。后续还要通过前端交互技术实现页面产品的界面和功能。

2.2 基于交互設计的网页产品开发

早期的网页产品制作流程相对简单，主要注重界面设计和功能实现，而交互设计理念引领下的网页产品开发始终以用户体验为中心，以用户行为为研究目标，遵从交互设计的规律去开发。

（1）开发流程

（2）岗位说明

说明：与流程相对应的是各个不同技能的岗位。不过中小企业的作业流程相对没有那么细分，可能出现一个岗位负责几个岗位的工作，一般来说，一个互联网产品开发的基本团队应该包含产品经理（或含交互设计师）、UI设计师（或含交互设计师），前端工程师，后台开发师等基本岗位。

3 基于交互设计的网页设计与制作课程体系改革

（Based on the interaction design of web page

design and facture course system reform）

3.1 重定教学目标

根据职业教育学生的特点，网页产品设计与制作课程的教学内容和教学体系当中应该化繁就简，摒弃对于学生来说难度过大的岗位和内容。比如组织协调能力市场敏感程度要求过高的产品经理，开发难度较大的后台开发。而应该着眼于网页产品的前端实现，特别是应以网页前端的实现作为网页产品设计与制作课程的主要内容。

《网页设计与制作》是计算机应用技术专业的核心课程，实践性较强。在早期，本课程以图形图像处理技术为前导课程，着力培养学生在网页素材搜集、网站布局和规划、网页元素制作、脚本代码编写、网站发布等方面的知识和技能。在交互设计理念引入到网页产品开发过程之后，更应该从职业技术教育的特点出发，以行业的发展现状为依据，以培养学生实际动手能力为目标，使学生具有前端交互实现的核心能力，同时兼具用户需求研究、交互原型设计、网页界面设计的辅助能力，并培养学生团队协作能力、沟通能力、分析解决问题能力和产品开发实施能力，同时也为后续课程《动态网页制作》的学习奠定基础[3]。

课程目标包括：①理解用户对于网页产品的使用需求，并据此制作网页产品交互原型；②掌握Photoshop、Dreanweaver等软件处理和组织网页界面素材的方法；③熟练运用网页脚本语言实施网页交互的使用方法；④培养学生独立思考能力及创新能力。

3.2 优化课程体系

以往的课程教学内容顶层设计过于简化，把所有网页设计与制作相关的内容，诸如计算机网络技术、图形图像处理、动画基础……都放在一起进行教学，试图以一门课来包含所有的技术，解决所有的问题，这并不符合当下的行业要求。在交互设计理念引领，网页产品开发导向的课程体系当中，应该注重课程的精细分工、逻辑联系和用户体验。

（1）课程内容模块化

网页产品的交互设计流程包含了六个环节和六个岗位，可以根据职教学生长于操作弱于理论的特点，简化为交互设计、UI设计、前端实现三个岗位，课程内容也相应分为相互支持的三个模块：交互设计、界面设计、程序设计，这样就把较为散乱的课程内容清晰化：交互设计注重用户行为和体验，提高产品的有效使用程度；界面设计专注于视觉设计与美观度，无须兼顾去实现页面及动效；程序设计则专注于HTML源码和JS脚本的基本开发，不必涉及工具软件的过度依赖。基于交互设计理念的课程模块化之后边界清晰，各有所长，易于教学[4]。

（2）课程环节链条化

交互设计理念引领的网页产品开发，其工作过程具有高度的逻辑相关性，每个环节都紧密相关，有着前后衔接的关系。需求分析、交互设计、UI设计、前端实现、后台开发、测试与反馈是一个逻辑严密，依次进行的开发过程，反映在课程内容的逻辑性上，应该在讲授前端实现的内容之前，对交互设计和界面设计有相应基础，体现在课程之间的相关性上，如果条件允许，也应该把交互设计、UI设计、前端开发三门课程设置为相互的前导课和后续课。

（3）课程过程交互化

交互设计理念以用户体验为中心，产品开发的考核标准是产品本身的有用性。从需要分析到测试与反馈环节，都以用户的感受为评判标准。早期网页产品只注重技术开发实现产品功能，界面设计也有设计师个人的艺术审美标准，在交互设计理念看来都是不完整的产品设计和开发，都没有完全消除开发者本人的视角，没有做到以独立客观的用户视角作为开发依据。因此在交互设计理念引领的网页设计与制作课程体系，每一个环节都需要从用户体验角度，从产品之外去和社会互动。

（4）产品形态阶段化

网页产品的设计与制作，根据用户要求和技术基础的不同，可以分为不同层次的产品形态。通过产品形态来组织教学内容，也是交互设计理念指导网页设计与制作课程教学的成果形式，是更加符合市场现状的一个例证。一般来说，网页产品可以分为初级形态、中级形态和高级形态。初级形态是只有元素呈现，但无布局的网页产品。学生根据用户的基本要求，利用HTML标记的认知和应用，插入各种丰富多彩的网页元素，用户能够单纯从内容上感受网页的基本功能。通过个人主页等作品的练习和开发可以熟悉初级网页产品形态。中级形态是进一步满足用户的美观要求，将网页上的各种元素组织起来，达到逻辑清晰、美观大方的产品风格。这就要求学生能够通过DIV+CSS对网页元素实施层布局，同时美化页面效果。通过公司主页等作品的练习和开发可以熟悉中级网页产品形态。高级形态是用户除了内容丰富和界面美观的需求之外，还需要和网页元素进行操作互动，以便更加深入了解和使用网页产品。这就需要学生先期掌握一定的语言基础，学习掌握Java Script脚本语言，实现网页互动的效果，如客户端验证和页面特效制作。通过媒体网站等作品的练习和开发可以熟悉高级网页产品形态。endprint

（网页）产品设计与制作课程体系模块化、链条化、交互化、产品阶段化的关系可以整理如图3所示。

making course system

3.3 改革教学模式

以交互设计为导向的网页设计与制作课程教学，将围绕用户体验为中心展开。因此，采用探究性教学模式较为合适，通过网页产品使用的情境创设、启发思考、小组探究的方式组织学生积极研究用户感受，深度感受开发者职能，对于网页产品的设计与开发课程体系具有较高的重要性和可行性。

（1）创设情境：探究式模式的教学要求围绕用户为中心的网页产品开发为教学出发点，教师通过问题、任务等多种形式，创设与此学习场景相关的学习情境，引导学生进行目标导向的学习。

（2）啟发思考：教学对象确定后，需要向学生提出紧密围绕目标对象，引起学生深思的问题，比如用户中心的网页产品通过哪些行为来体现？这也便于学生围绕问题去探究。

（3）自主（或小组）探究：在问题的牵引下，教师、学生、信息技术相互作用，教师引导、支持，学生主动积极学习，同时信息技术成为认知工具，形成对于网页产品中用户行为逻辑的自主或小组探究，这也是探究教学模式中的关键环节。

（4）协作交流：学生经过认真自主探究后，进而进行高质量的协作交流，教师组织协调这一过程。经过这一环节，学生对于隐藏在用户行为背后的心理将会有更加深入的了解。

探究性教学模式当中，学生在教师的指导下，“自主”设立网页产品开发的目标，通过调查“探究”网页产品内在的用户行为逻辑，形成产品交互原型，“合作”完成网页产品的用户界面和前端实现，从而地达到课程中关于认知目标与能力目标的综合要求。

3.4 丰富教学方法

（1）任务驱动法：课程体系结构以网页产品的设计与制作任务为主线，根据学生的理解程度布置网页产品设计与制作的细分学习任务，学生自己动手独立完成学习任务，使知识得到提升。

（2）角色扮演法：教学过程中，让学生扮演实际项目开发流程当中的不同角色，以分工合作的方式理解岗位和完成任务，并且在考核方式中实施学生互评，使学生充分体验不同流程岗位的乐趣。

3.5 完善学习评价

在学习评价上采用过程性评价和结果性评价，在这两种评价当中，除了常规评价方法之外，还可采用基于用户中心

的学生互评和用户评价。学生互评有利每一次小组探究之后

对于共同用户目标和行为的理解达成一致。用户评价则是在产品成型之后通过收集用户的使用形成意见，从而对学习的成果进行反馈和调整。

4 结论（Conclusion）

职教的教学改革目标在于深化课程改革，努力形成就业导向的课程体系。我们依据产业现状，从劳动力市场分析和职业岗位分析入手，积极推进多种模式的课程改革，确立以能力为本位的教学指导思想，提出了基于交互设计的网页设计与制作课程改革思路。这一课程体系的全面改革，对于紧贴岗位实际工作过程，更新课程内容，调整课程结构，深化多种模式的职教课程改革，做有益探索。

参考文献（References）

[1] 百度百科：交互设计[OL]http：//baike.baidu.com/item/交互设计/7769950.

[2] 彭莉，张道军，高好良.《网页设计与网站建设》课程教学改革与实践[J].软件导刊，2013（02）：170-172.

[3] 钟志贤.面向知识时代的教学设计框架——促进学习者发展[M].北京：中国社会科学出版社，2006.

[4] 由芳.交互设计——设计思维与实践[M].上海：电子工业出版社，2017.

作者简介：

李 鑫（1987-），女，硕士，讲师.研究领域：Web开发.endprint