基于可視化編輯平臺教授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—），女，重慶人，研究生，講師，從事視覺傳達藝術設計、教學研究。