基于可視化編輯平臺教授H5設(shè)計的必要性

摘 要：移動互聯(lián)網(wǎng)時代的廣告?zhèn)鞑フ诎l(fā)生變革，H5廣告應(yīng)運(yùn)而生。與傳統(tǒng)的廣告形態(tài)相比，其流暢的互動體驗大大提升了廣告的用戶體驗。H5是視覺傳播設(shè)計與制作專業(yè)的學(xué)生不得不掌握的一把鑰匙。利用現(xiàn)有的H5可視化編輯技術(shù)，零代碼基礎(chǔ)也可以更直觀地實現(xiàn)H5作品的設(shè)計與制作，學(xué)生可以像學(xué)習(xí)PS一樣，用設(shè)計師的思維表達(dá)方式來學(xué)習(xí)H5設(shè)計。

關(guān)鍵詞：移動互聯(lián)網(wǎng)時代;H5設(shè)計;怎么教;怎么學(xué);可視化編輯平臺

1 移動互聯(lián)網(wǎng)時代的廣告?zhèn)鞑プ兏铩狧5廣告應(yīng)運(yùn)而生

隨著無線接入技術(shù)的不斷發(fā)展和智能終端設(shè)備的迅速普及，人們對互聯(lián)網(wǎng)技術(shù)提出了更高的要求——要速度，也要身臨其中的體驗感。

在如今的移動互聯(lián)網(wǎng)時代，消費(fèi)者進(jìn)一步掌握了信息接收主動權(quán)，廣告主和消費(fèi)者之間的關(guān)系由單向溝通變?yōu)殡p向互動，互動廣告作為一種人性化的表現(xiàn)形式出現(xiàn)在大眾面前。H5廣告作為互動廣告的一支生力軍，從內(nèi)容到技術(shù)，以其強(qiáng)烈的互動性占據(jù)了移動互聯(lián)廣告形態(tài)的頭牌。與傳統(tǒng)的廣告形態(tài)相比，其流暢的互動體驗，使廣告用戶體驗得到了大幅度提升。

2 H5的強(qiáng)勁勢頭——學(xué)生學(xué)習(xí)H5的必要性

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

如今，“H5”這一提法已經(jīng)深入人心，但人們對于這一概念的理解各有不同，大多數(shù)人依然將“H5”等同于“可以在手機(jī)里全屏觀看的花式翻頁效果PPT”，這顯然只窺到其冰山一角。其實“H5”是中國人發(fā)明的一個縮略詞，是對“HTML5”的簡稱。關(guān)于“HTML5”，我們在百度百科中可以查到這樣的解釋：“萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改”。它是第5代HTML，也指用HTML5語言制作的一切數(shù)字產(chǎn)品。所謂HTML，是“HyperText Markup Language超文本標(biāo)記語言”的英文縮寫。我們上網(wǎng)所看到的網(wǎng)頁，多數(shù)都由HTML寫成。

今天的“H5”已成為移動互聯(lián)網(wǎng)前端的主流開發(fā)語言，成本低、跨平臺、即時響應(yīng)、互動性強(qiáng)、無須安裝等獨有的優(yōu)勢決定了H5將被大眾廣泛接納。

隨著人們接收訊息的媒介愈發(fā)多元以及移動網(wǎng)絡(luò)的普及，面向移動互聯(lián)網(wǎng)這扇通往未來的大門，H5是視覺傳播設(shè)計與制作專業(yè)的學(xué)生必須掌握的一把鑰匙。在全媒體語境下，學(xué)習(xí)H5，不僅對視覺傳播設(shè)計與制作專業(yè)的學(xué)生的就業(yè)技能升級有著更直接的推動作用，同時，對于高職設(shè)計類其他相關(guān)專業(yè)的就業(yè)技能提升都有著不可忽視的作用。

3 H5怎么教、怎么學(xué)

基于以上對問題提出背景的梳理，本文討論的主要問題就在于：針對高職院校設(shè)計類學(xué)生，“H5”這門“互聯(lián)網(wǎng)+”背景下的重要技術(shù)語言應(yīng)該怎么教授？如何選擇更優(yōu)的平臺資源、更適合的編輯工具、更適用的教學(xué)理念及教學(xué)方式來使H5的教學(xué)更有效、更高效;進(jìn)一步解決高職院校設(shè)計類學(xué)生專業(yè)技能與市場人才新需求的無縫對接問題，從而促進(jìn)相關(guān)專業(yè)學(xué)生的專業(yè)能力和綜合就業(yè)能力的提升。

一個精彩的H5作品的誕生，不外乎優(yōu)秀的策劃+精妙的畫面設(shè)計+流暢的前端程序?qū)崿F(xiàn)。在常規(guī)化的生產(chǎn)流程中，策劃與設(shè)計環(huán)節(jié)是學(xué)生專業(yè)學(xué)習(xí)范疇內(nèi)的能力，而前端程序的編寫就成了一頭攔路虎橫亙在面前。我們曾經(jīng)摸索過一套解決方案——調(diào)整課程結(jié)構(gòu)，讓學(xué)生們也學(xué)一點HTML5標(biāo)記語言、CSS+DIV、JS腳本語言，于是我們也嘗試性地將這幾門課寫入了人才培養(yǎng)方案中。

但我們知道，對于高職的藝術(shù)設(shè)計類學(xué)生而言，這并不是投入產(chǎn)出比最高的學(xué)習(xí)H5的方式。

第一，高職藝術(shù)類學(xué)生文化基礎(chǔ)相對薄弱，邏輯思維本身就是他們的短板，要讓他們切入純粹的編程類課程的學(xué)習(xí)，這幾乎是轉(zhuǎn)換了他們的慣性思考頻道。能在感性創(chuàng)作與理性編輯之間自如轉(zhuǎn)換者少之又少，教學(xué)效果可想而知。

第二，在真實的工作環(huán)境中，設(shè)計師面臨的主要癥結(jié)在于溝通。設(shè)計師掌握編程邏輯的作用主要體現(xiàn)為：能與開發(fā)環(huán)節(jié)有效溝通，同時明白什么樣的視覺效果能實現(xiàn)，什么效果實現(xiàn)難度大或者無法實現(xiàn)，從而以更合理的視覺語言來表達(dá)。因此，通過有限的幾門課艱難涉足編程類課程后，寄望于我們的學(xué)生能進(jìn)行相對獨立的開發(fā)嘗試，是不太實際的目標(biāo)。

那么，有沒有辦法讓我們的設(shè)計類學(xué)生繞開編程這塊難啃的骨頭，直接運(yùn)用他們更擅長的方式來進(jìn)行H5的設(shè)計學(xué)習(xí)呢？答案是：有。依賴于現(xiàn)有的H5可視化編輯技術(shù)，越來越多的零代碼基礎(chǔ)的使用者可以更直觀地實現(xiàn)H5作品的設(shè)計與制作。

何為“H5可視化編輯”？簡言之，就是由前端程序師編寫好不同視覺效果實現(xiàn)的代碼，通過直觀的操作界面，讓每一個預(yù)設(shè)的動作都能“所見即所得”地呈現(xiàn)出來。就像大家耳熟能詳?shù)腁dobe公司的PHOTOSHOP（下文簡稱“PS”）一樣，在PS出現(xiàn)之前，即使要在電腦上實現(xiàn)圖片的放大、縮小都需要通過編寫代碼完成。PS的出現(xiàn)讓設(shè)計師可以通過可視化的編輯平臺，直觀地實現(xiàn)自己的設(shè)計思想，而不需要編寫代碼，從而實現(xiàn)真正的零代碼圖片處理。

目前，國內(nèi)外都已經(jīng)有了很多可以進(jìn)行H5可視化編輯的工具，比如國外有Weebly、Wix、Hype、Adobe Edge等，它們各有側(cè)重，有的還會基于不同的操作系統(tǒng);國內(nèi)常見的就有iH5、意派、易企秀、MAKA、兔展、木疙瘩等。對于視覺傳播設(shè)計與制作專業(yè)的學(xué)生而言，這些可視化編輯平臺無疑是更適合的學(xué)習(xí)路徑。這意味著我們可以像學(xué)習(xí)PS一樣，用設(shè)計師的思維表達(dá)方式來學(xué)習(xí)H5設(shè)計了。

綜上所述，在移動互聯(lián)網(wǎng)普及的今天，在以視覺傳達(dá)藝術(shù)設(shè)計專業(yè)為代表的高職類藝術(shù)設(shè)計專業(yè)中，H5的學(xué)習(xí)勢在必行?；贖5可視化編輯平臺進(jìn)行H5設(shè)計制作教學(xué)，既直觀，又與PS等通行設(shè)計軟件的操作有共通性，從而突顯其優(yōu)勢。

作者簡介：王丹丹（1981—），女，重慶人，研究生，講師，從事視覺傳達(dá)藝術(shù)設(shè)計、教學(xué)研究。