基于“大广赛”的H5课程教学研究

加晓军（广东海洋大学寸金学院，广东 湛江 524000）

一、什么是H5？

随着移动互联网时代的到来，给传统广告行业带来了巨大的冲击。“H5”这个新词最早出现于2014年，并迅速成为互联网行业的“热词”。对于H5的认识，需要具备部分网页设计的理论基础，网页设计中的HTML，即Hyper Text Markup Language，中译为：超文本标记语言。它是由万维网联盟（World Wide Web）发明的一套网页标记语言规范，作用是为了标记我们在网页中可视的所有元素及其布局装饰等。一个完整网页，通常是由HTML、CSS、DIV、JavaScript共同编写完成的，如果我们把网页比喻成一个人的话，DIV就是人体的骨骼，HTML就是人体的血肉，CSS就是人身上穿着的衣服及装饰，JavaScript就是人的各种动态动作。

随着时代发展，HTML经历了多次的新换代，至2014年10月，完成了第五代超文本标记语言的全新升级，即HTML5，它也成为了适用于几乎所有电子设备的语言，这也奠定了它在移动互联网时代坚实的地位。

但如果简单的认为HTML5就是H5，并不是很严谨。严格来说，H5的确包含着HTML5的中的诸多内容，但H5所包含内容更广泛，二者并非可以划等号。H5只是一个本土词汇，它广泛融合了HTML5以及文本、图片、声音、动画等诸多内容，简言之，H5是可应用于包括PC、移动、平板、等端口的超媒体移动网页。搞清了H5的定义，我们接下来应该了解的是国内高校对于H5教学的现状，在大学教育滞后于社会发展的现状之下，毫无疑问，H5的教学在全国高校范围内还处于起步阶段，在H5的教学方面需要大量的实践探索。

二、全国大学生广告艺术大赛作品类别分析

全国大学生广告艺术大赛是由教育部高等教育司主办的设计类学生能够参与的重要赛事，也是重要的大学生教学实践平台之一。至今已成功举办11届，参赛作品分为平面类、视频类、动画类、互动类、广播类、策划案类、文案类、营销创客类、公益类九大类。大赛旨在提高大学生的创新精神和实践能力，激发大学生的创意灵感，促进大学新闻传播、广告、设计、艺术教育的人才培养模式的改革，同时对于课程设置、教学内容和方法的出新起到了推动作用，极大地提高了大学生的动手能力、实践能力、策划能力和综合能力。

2016年第八届全国大学生广告艺术大赛的作品类别相较于往届有了细微调整，其中一个明显变化就是增加了互动类广告，这也体现了大广赛“促进教改、启迪智慧、强化能力、提高素质”的大赛宗旨。互动类广告的主要作品形式就是我们所探究的H5，对于H5的认识，教师需要走在前面，并需具备过硬专业能力。

对于大广赛的诸多命题单位来说，不论是视频、平面、动画、广播、创意文案、策划案等广告形式还是互动类的H5，其目的都是针对产品的广告表现，而H5这一广告形式区别于其他广告类型的一个重要的特点就在于它的交互性，因此，对于这一形式的广告设计创作，需要在综合其他必要因素的基础上注重其互动性。除此之外，H5这一新的广告形式具备很强的综合性，一支完整的H5广告包括：文字、图形、插画、声音、动画等内容，这就要求学生具备良好的图形表达，手绘，文案创作、声音处理、动画制作、交互设计等诸多专业技能。这些都还是建立在学生对命题深入了解、对目标诉求准确把控的基础上，因此，这对教师来说无疑是个巨大的挑战！

三、基于“全国大学生广告艺术大赛”的H5教学方法

1.教学目标

H5课程为视觉传达设计专业开设的最新课程，对于该方面的教学实践案例和方法可借鉴的较少，此外，其涉及内容较为综合，实践性较强。在具体课程教学实践环节中，很难将冗杂的内容一一进行深入介绍，也难以让学生深入进去。

对于这样一门综合性较强的课程来说，首先需要具备相对适当的课程时长，以此来保障课程各部分内容的有效进行，因此，建议学时为80。

2.教学思路

对于视觉传达设计专业的学生来讲，独立完成这样综合型较强的作品存在一定困难，因此需以创意、文案、视觉、交互四个环节将学生进行精细分组，每组4人，学生需具备其中一项或多项专业能力，这样就避免了在作品的创作过程中个人单独作战的困境，同时也锻炼了学生的团队协作能力。

其中，各个环节的课时分配分别为：理论课时10、创意课时10、文案课时10、视觉课时20、交互课时20，在对往届大赛同类作品的分析中不难发现，优秀的作品在创意的高度、画面的精细度、色彩的和谐度、文案的深度、互动的表现等任何一方面均精益求精，作品整体气质也较为突出，欣赏作品的做成中既与观者产生互动又引人深思。

3.教学内容

理论课程：本课程的理论讲述环节至关重要，如何联系实际将H5的概念描述，发展进程，重要性，应用范围，制作方法，制作流程，制作规范等内容有效的传递给学生是该环节的重中之重，学生对于该部分内容的深入理解和掌握也直接影响着后续教学的效果。

创意课程：对于H5来说，它的实质就是一种广告形式，我们可以理解为互动广告，它的互动性也正是它区别于其他广告形式的重要属性。因此，本环节的关键点在于为学生系统的补充广告的创意构思方法以及产品作为广告核心的重要思路。并需对大广赛历届互动类等级作品进行广泛分析的基础上，将传统广告创意法与H5广告的交互特征进行联系，总结创意如下：①使用产品前后对比/与同类产品进行类比并得出结果；②产品本身是图案；③讲故事；④设置选项；⑤让产品基本信息变得有趣；⑥将产品进行拟人化处理。

文案课程：对于一支广告来说，文案的重要性不言而喻，精彩的文案具有“一语胜千言”的神奇魔力。因此本部分内容对广告文案的基本构成，写作原则，写作方法等内容进行详细阐述，并对学生进行有效的信息传递。广告文案是由标题、广告正文、广告口号和随文组成的。它是广告内容地文字化表现。在广告设计中，文案与图案图形同等重要，图形具有前期地冲击力，广告文案具有较深地影响力。同时，广告文案还具备准确规范 点明主题、简明精炼 言简意赅、生动形象 表明创意、动听流畅 上口易记等特点。

视觉课程：对于视觉传达设计专业的学生来讲，在前期的专业学习中早已具备扎实的视觉设计能力，主要以文字、图形、色彩、立体造型为基本要素，针对大广赛品牌策略要求，构思满足广告诉求，符合广告传播目的个效力的视觉设计内容，因此本部分内容的完成需要具备扎实的视觉传达艺术设计和应用表现能力，及符合H5设计规范的视觉设计要求进行讲述。如：H5页面常规尺寸根据人群分布来看，在安卓端的主流分辨率是1280x720像素，在IOS端的主流分辨率为1136x640，此外，针对大广赛，H5广告也有着特殊的尺寸规范和要求。

交互课程：全国大学生广告艺术大赛对于互动广告的具体要求是移动端（手机）H5互动广告，因此，需要选择符合社会需求的H5互动软件来对学生进行强化训练，引导学生了解H5设计制作的主流工具，本课程所介绍的工具为iH5（互动大师），它可以很好的支持全景、一镜到底、动画、游戏等各类功能型，展示型作品的制作，并可支持各种移动端设备和主流浏览器且操作便捷易上手。该部分内容需详细介绍H5的设计流程、设计方法等内容，秩序和规范是进行系统化工作的保障，不管是门类众多的产品设计，还是形式多样的广告设计，他们都有着不同的设计规范和设计流程，H5广告业同样如此。

课程中，我们应该系统性的讲解H5设计究竟要经历几个具体环节？究竟要侧重几个设计要点？究竟要用到那些主要工具和辅助工具？究竟需要学习哪些专业知识？H5的设计因为包含了太多门类，所以在设计方法的总结上有着较大的难度，对于一个全新的媒体形式来说，再全面的方法技巧也不能应用于所有作品案例中。为了能让学生真正学到有效的设计方法，我们可将H5的设计要点总结为：原型图绘制，内容信息表达，版式设计编排，文字设计，动效设计，音效设计等关键步骤，H5广告设计并非单纯的视觉设计，它整合了视觉，听觉，触觉（交互）三大板块，它是“数字媒体设计”的基础，也是超媒体在移动互联网时代的社会化呈现。对于传统平面设计者来说，转变这个观念并非易事，它需要跳出以往固有的观念，这对教学工作者来说是个巨大考验。

结语

对于本门课程的学习需要紧密联系市场，在2015-2016这两年间，移动互联网行业中出现了大量以H5为主要表现方式的移动端网站。可以说，它们用全新的体验方式改变了我们对网页和内容传播的认识。好方法总结需要建立在广泛的优质作品分析基础之上，我们需对行业内及大赛中所产生的，具有代表性的H5案例进行深入解读和分析，剖析案例中精彩之处，反复学习和推敲，认真总结其设计手法。

全国大学生广告艺术大赛为视觉传达设计专业的H5课程教学提供了一个非常有意义的平台，让课程教学更加多样化，同时也具有较强的针对性。以企业真实营销项目作为命题，引导学生了解受众，调研分析，提出策略，不仅可以充分的启发学生思维，培养学生的创新表达能力，更使学生在此过程中对专业理论及技能的综合应用能力的得以提升，同时也可时时检验我们的教学方案与教学方法是否合理有效，使教学更具创新性，这样的实践教学尝试也为视觉传达设计专业的发展与改革提供了良好的思路。