基于可视化编辑平台教授H5设计的必要性

摘 要：移动互联网时代的广告传播正在发生变革，H5广告应运而生。与传统的广告形态相比，其流畅的互动体验大大提升了广告的用户体验。H5是视觉传播设计与制作专业的学生不得不掌握的一把钥匙。利用现有的H5可视化编辑技术，零代码基础也可以更直观地实现H5作品的设计与制作，学生可以像学习PS一样，用设计师的思维表达方式来学习H5设计。

关键词：移动互联网时代;H5设计;怎么教;怎么学;可视化编辑平台

1 移动互联网时代的广告传播变革——H5广告应运而生

随着无线接入技术的不断发展和智能终端设备的迅速普及，人们对互联网技术提出了更高的要求——要速度，也要身临其中的体验感。

在如今的移动互联网时代，消费者进一步掌握了信息接收主动权，广告主和消费者之间的关系由单向沟通变为双向互动，互动广告作为一种人性化的表现形式出现在大众面前。H5广告作为互动广告的一支生力军，从内容到技术，以其强烈的互动性占据了移动互联广告形态的头牌。与传统的广告形态相比，其流畅的互动体验，使广告用户体验得到了大幅度提升。

2 H5的强劲势头——学生学习H5的必要性

首先，我们需要厘清什么是H5。

如今，“H5”这一提法已经深入人心，但人们对于这一概念的理解各有不同，大多数人依然将“H5”等同于“可以在手机里全屏观看的花式翻页效果PPT”，这显然只窥到其冰山一角。其实“H5”是中国人发明的一个缩略词，是对“HTML5”的简称。关于“HTML5”，我们在百度百科中可以查到这样的解释：“万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改”。它是第5代HTML，也指用HTML5语言制作的一切数字产品。所谓HTML，是“HyperText Markup Language超文本标记语言”的英文缩写。我们上网所看到的网页，多数都由HTML写成。

今天的“H5”已成为移动互联网前端的主流开发语言，成本低、跨平台、即时响应、互动性强、无须安装等独有的优势决定了H5将被大众广泛接纳。

随着人们接收讯息的媒介愈发多元以及移动网络的普及，面向移动互联网这扇通往未来的大门，H5是视觉传播设计与制作专业的学生必须掌握的一把钥匙。在全媒体语境下，学习H5，不仅对视觉传播设计与制作专业的学生的就业技能升级有着更直接的推动作用，同时，对于高职设计类其他相关专业的就业技能提升都有着不可忽视的作用。

3 H5怎么教、怎么学

基于以上对问题提出背景的梳理，本文讨论的主要问题就在于：针对高职院校设计类学生，“H5”这门“互联网+”背景下的重要技术语言应该怎么教授？如何选择更优的平台资源、更适合的编辑工具、更适用的教学理念及教学方式来使H5的教学更有效、更高效;进一步解决高职院校设计类学生专业技能与市场人才新需求的无缝对接问题，从而促进相关专业学生的专业能力和综合就业能力的提升。

一个精彩的H5作品的诞生，不外乎优秀的策划+精妙的画面设计+流畅的前端程序实现。在常规化的生产流程中，策划与设计环节是学生专业学习范畴内的能力，而前端程序的编写就成了一头拦路虎横亘在面前。我们曾经摸索过一套解决方案——调整课程结构，让学生们也学一点HTML5标记语言、CSS+DIV、JS脚本语言，于是我们也尝试性地将这几门课写入了人才培养方案中。

但我们知道，对于高职的艺术设计类学生而言，这并不是投入产出比最高的学习H5的方式。

第一，高职艺术类学生文化基础相对薄弱，逻辑思维本身就是他们的短板，要让他们切入纯粹的编程类课程的学习，这几乎是转换了他们的惯性思考频道。能在感性创作与理性编辑之间自如转换者少之又少，教学效果可想而知。

第二，在真实的工作环境中，设计师面临的主要症结在于沟通。设计师掌握编程逻辑的作用主要体现为：能与开发环节有效沟通，同时明白什么样的视觉效果能实现，什么效果实现难度大或者无法实现，从而以更合理的视觉语言来表达。因此，通过有限的几门课艰难涉足编程类课程后，寄望于我们的学生能进行相对独立的开发尝试，是不太实际的目标。

那么，有没有办法让我们的设计类学生绕开编程这块难啃的骨头，直接运用他们更擅长的方式来进行H5的设计学习呢？答案是：有。依赖于现有的H5可视化编輯技术，越来越多的零代码基础的使用者可以更直观地实现H5作品的设计与制作。

何为“H5可视化编辑”？简言之，就是由前端程序师编写好不同视觉效果实现的代码，通过直观的操作界面，让每一个预设的动作都能“所见即所得”地呈现出来。就像大家耳熟能详的Adobe公司的PHOTOSHOP（下文简称“PS”）一样，在PS出现之前，即使要在电脑上实现图片的放大、缩小都需要通过编写代码完成。PS的出现让设计师可以通过可视化的编辑平台，直观地实现自己的设计思想，而不需要编写代码，从而实现真正的零代码图片处理。

目前，国内外都已经有了很多可以进行H5可视化编辑的工具，比如国外有Weebly、Wix、Hype、Adobe Edge等，它们各有侧重，有的还会基于不同的操作系统;国内常见的就有iH5、意派、易企秀、MAKA、兔展、木疙瘩等。对于视觉传播设计与制作专业的学生而言，这些可视化编辑平台无疑是更适合的学习路径。这意味着我们可以像学习PS一样，用设计师的思维表达方式来学习H5设计了。

综上所述，在移动互联网普及的今天，在以视觉传达艺术设计专业为代表的高职类艺术设计专业中，H5的学习势在必行。基于H5可视化编辑平台进行H5设计制作教学，既直观，又与PS等通行设计软件的操作有共通性，从而突显其优势。

作者简介：王丹丹（1981—），女，重庆人，研究生，讲师，从事视觉传达艺术设计、教学研究。