“网页UI设计”课程信息化教学设计研究与实践

陈静

摘 要 如何提高设计类课程的教学效率和效果，已经成为高职艺术设计类专业教学改革过程中遇到的普遍性问题。本文通过文献研究法和探索性研究法，以“网页UI设计”课程为例，对信息化教学设计进行研究，提出了高职设计类课程信息化教学设计的整体思路。从传统教学方式存在的问题、教学目标及内容、教学策略、教学方法、课堂教学实施流程、信息化教学工具和资源六个方面进一步提出了信息化教学设计的方案，并輔以方案实践的成效。研究具有一定的前瞻性和可操作性，对高职艺术设计类专业课程教学改革具有较强的现实借鉴意义。

关键词 信息化教学设计 网页UI设计 研究与实践

中图分类号：G424 文献标识码：A DOI：10.16400/j.cnki.kjdkz.2017.09.061

Research and Practice of "Web UI Design" Course

Information Teaching Design

CHEN Jing

（Hunan Vocational and Technical College， Changsha， Hunan 410151）

Abstract How to improve the teaching efficiency and effect of the design course has become a universal problem encountered in the process of teaching reform in the art design of higher vocational education. In this paper， through the literature research method and exploratory research method， taking "web UI design" course as an example， this paper studies the informationized teaching design and puts forward the whole idea of the information teaching design of higher vocational design curriculum. This paper puts forward the scheme of informationized teaching design from six aspects of traditional teaching methods， teaching objectives and contents， teaching strategies， teaching methods， classroom teaching implementation process， informationized teaching tools and resources， supplemented by the effectiveness of program practice The The study has a certain forward - looking and operable， and it has a strong practical reference for the teaching reform of professional courses in art and design.

Keywords Informationized Instructional Design； Web UI design； research and practice

在当今社会，网页不仅成为人们获取信息的重要方式，同时也成为公司或企业展示自我形象，宣传产品的有效媒介。优秀的网页包括两个方面，即优化的网页代码编写和完美的“网页UI设计”。而“网页UI设计”在整个网页中尤为重要，可以说是整个网页的门面，是公司或企业网站展示给客户的第一印象。

在这个"互联网+”时代背景下，信息化正潜移默化的渗透到人们生活的各个领域，包括医疗、金融、教育等方面。教育信息化已成为目前教学改革研究的重点方向。本论文的研究主题是“网页UI设计”课程的信息化教学设计，是符合时代发展趋势及教学改革要求的实践性研究。

1 概述

1.1 “网页UI设计”课程概述

UI即User Interface（用户界面）的简称。指对产品的人机交互、操作逻辑、界面美观的整体设计。[1]用户界面设计不仅要做出好看的产品外观、还要做出好用的产品。[2]UI设计涉及的领域非常广，包括“网页UI设计”、软件UI设计、智能电视UI设计、智能手机UI设计等。本论文是专门针对“网页UI设计”课程进行的研究。

1.2 “信息化教学设计”概述

教学设计是运用系统方法分析教学问题和确定教学目标，建立解决教学问题的策略方案，试行解决方案，评价试行结果和对方案进行修改的过程。[3]

信息化教学设计是相对于传统教学设计而言的一种新教学方式。与传统教学相比，信息化课堂教学具有以下特点：（1）信息共享程度高，实时性好；（2）数字化保存，快捷方便，储存量大，连续性好；（3）信息流动性、完整性好，能双向交互；（4）能系统、全面、准确地反映信息全过程。[4]华东师范大学教授祝智庭提出，信息化教学设计是充分利用现代信息技术和信息资源，科学安排教学过程的各个环节和要素，为学生提供良好的信息化教学条件，实现教学过程合理化的系统方法。[5]

1.3 信息化教学设计思路

由此可见，“网页UI设计”课程信息化教学设计主要是充分利用现代信息技术和信息资料，根据课程的教学目标及内容，科学合理的安排教学环节及教学手段，为学生提供良好的信息化教学条件，解决传统教学设计中存在的问题，从而进一步提高教学效果。endprint

2信息化教学设计方案

下文中提到的信息化教学设计方案均针对“网页UI设计”课程，不再一一赘述。

2.1 传统教学方式存在的问题

在传统的课堂上，以教师讲授为主的教学方式很难调动学生学习的自主性和积极性。大部分学生仅仅能做到按部就班的学习。但是，对于网页设计师来言，了解设计前沿的流行趋势、具备敏锐的观察能力和创新思维尤为重要。但这些能力的培养仅仅靠传统的教学方式很难实现。

2.2 教学目标及教学内容

“网页UI设计”课程信息化教学设计的教学目标有两个。第一，培养学生自主学习的能力，实时了解网页设计前沿的流行趋势。第二，培养学生的创新思维和敏锐的观察能力，让学生学会设计好看且好用的网页。

教学内容包括：（1）网站首页布局设计；（2）网站分页布局设计；（3）网页栏目设计；（4）网页Banner图设计；（5）网页导航设计；（6）网页图标设计。

2.3 教学策略

充分利用信息化技术，开发合适的信息化教学工具，基于“真实项目进课堂”的教学模式，采用翻转课堂等教学方法进行项目化任务实践。

2.4 教学方法

在本课程信息化的教学过程中采用了多种教学方法，主要包括项目教学法、翻转课堂教学法、小组合作学习法、问题探究式教学法、讨论法和讲授法。其一，项目教学法。通过多年实践，创新了“真实项目进课堂”的教学模式，让学生通过签订了商业合同的真实项目實践提升自我，培养了学生的可持续就业能力。其二，翻转课堂教学法。通过教学模式的创新，利用信息化教学资源和工具，让学生重构了学习流程，改变了教和学的关系，优化了教学过程，培养了学生自主学习的能力，最终提升了教学效果。其三，小组合作学习法。网页创意设计阶段，在教师的引导下，学生以项目团队为单位，采用头脑风暴法等进行创意学习，锻炼了学生的创新思维能力。在整个项目完成的过程中，学生以团队的形式通过分工和合作来完成项目任务，提高了学生的综合能力和综合素养。其四，问题探究式教学法。学生在课前和课后有任务安排，在教师的引导下进行任务的学习，并以团队为单位制作PPT或视频，对相应学习任务进行汇报，通过探究学习进一步提高学生的自主学习能力。其五，讨论法。在项目互评阶段，通过讨论给予其他团队评价，提高了学生敏锐的观察能力；在强化练习阶段，通过讨论进一步地学习及巩固知识技能。其六，讲授法。教师在课堂上讲解“网页UI设计”的相关原理、方法和步骤。通过课堂演示，微课视频等方式引导学生分析和认识问题，掌握知识和技能。

2.5 教学实施流程

“网页UI设计”课程信息化教学实施流程分为六个步骤，分别是了解、团队、选择、实施、评价和总结。

第一步，了解。教师引导学生在课堂上打开前程无忧、智联招聘等招聘网站，让学生了解企业对网页设计师岗位的需求是什么？“网页UI设计”需要具备哪些方面的能力？使学生有目的有方向的学习。

第二步，团队。要求学生自主组建团队，并制定相关的团队规章制度。这是项目分工合作的保障。

第三步，选择。本课程采用的是真实项目进课堂的教学模式。只有通过真实的项目锻炼，才能设计出以用户体验为中心的“网页UI设计”。教师在这个阶段需要不断地鼓励学生走出校园，走进社会，寻找真实项目。学生在这个阶段需要找到完全真实的商业项目，并签订商业合同。

第四步，实施。在项目的实施上必须从保证项目的进度、实现有效的团队合作、高效的指导和掌控过程的平台四个方面进行考虑。其一，为了保障项目的进度，制定了项目的进度安排表，并每周采用随机抽号的方法抽取学生汇报项目进度。其二，为了加强有效的团队合作，主要是通过线下会议，线上多人语音和多人视频会议的方式及团队规章制度的约束来实现。其三，为了提升教学效率和效果，采用学生为主体，教师为主导，企业指导参与其中的方式进行教学。在教学的过程中提供了大量的教学视频、电子学习资料、专业学习网站等信息化教学资源。

第五步，评价。课程的评价是全面且立体的，包括客户、学生、教师、项目过程、汇报及项目质量的评价。

第六步，总结。以团队为单位对全面且立体的评价进行总结与反思，找到问题所在，并找到解决问题的办法。

2.6 信息化教学工具和资源

“网页UI设计”课程信息化教学设计运用了多个信息化教学工具和资料。包括教师自主构建的课程在线教育平台、自主研发的随机抽号程序、制作了多个微课教学视频、提供了大量电子学习资料、专业学习网站、线上多人语音和多人视频会议信息化工具的使用等。

3 信息化教学设计实践成效

“网页UI设计”课程信息化教学效果非常好，主要表现在以下四个方面：（1）解决了传统教学方式存在的问题，促进学生积极自主地学习，培养了学生的自主学习能力、创新思维和敏锐的观察能力。（2）学生的网站作品均上线，以用户体验为中心的“网页UI设计”获得了企业、专家、同行的好评。（3）教师的“网页UI设计”课程资源和学生的网站作品在国家、省级多个技能比赛中获奖。（4）“网页UI设计”课程的教学模式创新和教学成效得到了多家主流媒体的报道和推广。

4 总结

“网页UI设计”课程信息化教学设计充分利用现代信息技术和信息资料，科学合理地安排教学策略、教学方法及教学实施流程。为学生提供了良好的信息化教学条件，解决了在传统教学设计中学生学习不够主动，不够积极的问题。在信息化的教学设计中不断培养学生的自主学习能力、创新思维能力和敏锐的观察能力，最终提高“网页UI设计”课程教学效果。

参考文献

[1] Zhang Z.METHOD AND DEVICE FOR IMPLEMENTING A USER INTERFACE：， WO/2015/018299[P].2015.

[2] [德]Smashing Magazine著.众妙之门——网站UI设计之道[M].人民邮电出版社，2010.2.

[3] 何克抗.教学系统设计[M].北京：高等教育出版社，2008.

[4] 臧少丽.高职院校信息化教学内涵与优化策略[J].科技创新导报，2014（2）.

[5] 祝智庭.现代教育技术——走向信息化教育[M].北京：教育科学出版社，2002：275.endprint