基于“大廣賽”的H5課程教學(xué)研究

加曉軍（廣東海洋大學(xué)寸金學(xué)院，廣東 湛江 524000）

一、什么是H5？

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，給傳統(tǒng)廣告行業(yè)帶來了巨大的沖擊?！癏5”這個(gè)新詞最早出現(xiàn)于2014年，并迅速成為互聯(lián)網(wǎng)行業(yè)的“熱詞”。對(duì)于H5的認(rèn)識(shí)，需要具備部分網(wǎng)頁設(shè)計(jì)的理論基礎(chǔ)，網(wǎng)頁設(shè)計(jì)中的HTML，即Hyper Text Markup Language，中譯為：超文本標(biāo)記語言。它是由萬維網(wǎng)聯(lián)盟（World Wide Web）發(fā)明的一套網(wǎng)頁標(biāo)記語言規(guī)范，作用是為了標(biāo)記我們?cè)诰W(wǎng)頁中可視的所有元素及其布局裝飾等。一個(gè)完整網(wǎng)頁，通常是由HTML、CSS、DIV、JavaScript共同編寫完成的，如果我們把網(wǎng)頁比喻成一個(gè)人的話，DIV就是人體的骨骼，HTML就是人體的血肉，CSS就是人身上穿著的衣服及裝飾，JavaScript就是人的各種動(dòng)態(tài)動(dòng)作。

隨著時(shí)代發(fā)展，HTML經(jīng)歷了多次的新?lián)Q代，至2014年10月，完成了第五代超文本標(biāo)記語言的全新升級(jí)，即HTML5，它也成為了適用于幾乎所有電子設(shè)備的語言，這也奠定了它在移動(dòng)互聯(lián)網(wǎng)時(shí)代堅(jiān)實(shí)的地位。

但如果簡單的認(rèn)為HTML5就是H5，并不是很嚴(yán)謹(jǐn)。嚴(yán)格來說，H5的確包含著HTML5的中的諸多內(nèi)容，但H5所包含內(nèi)容更廣泛，二者并非可以劃等號(hào)。H5只是一個(gè)本土詞匯，它廣泛融合了HTML5以及文本、圖片、聲音、動(dòng)畫等諸多內(nèi)容，簡言之，H5是可應(yīng)用于包括PC、移動(dòng)、平板、等端口的超媒體移動(dòng)網(wǎng)頁。搞清了H5的定義，我們接下來應(yīng)該了解的是國內(nèi)高校對(duì)于H5教學(xué)的現(xiàn)狀，在大學(xué)教育滯后于社會(huì)發(fā)展的現(xiàn)狀之下，毫無疑問，H5的教學(xué)在全國高校范圍內(nèi)還處于起步階段，在H5的教學(xué)方面需要大量的實(shí)踐探索。

二、全國大學(xué)生廣告藝術(shù)大賽作品類別分析

全國大學(xué)生廣告藝術(shù)大賽是由教育部高等教育司主辦的設(shè)計(jì)類學(xué)生能夠參與的重要賽事，也是重要的大學(xué)生教學(xué)實(shí)踐平臺(tái)之一。至今已成功舉辦11屆，參賽作品分為平面類、視頻類、動(dòng)畫類、互動(dòng)類、廣播類、策劃案類、文案類、營銷創(chuàng)客類、公益類九大類。大賽旨在提高大學(xué)生的創(chuàng)新精神和實(shí)踐能力，激發(fā)大學(xué)生的創(chuàng)意靈感，促進(jìn)大學(xué)新聞傳播、廣告、設(shè)計(jì)、藝術(shù)教育的人才培養(yǎng)模式的改革，同時(shí)對(duì)于課程設(shè)置、教學(xué)內(nèi)容和方法的出新起到了推動(dòng)作用，極大地提高了大學(xué)生的動(dòng)手能力、實(shí)踐能力、策劃能力和綜合能力。

2016年第八屆全國大學(xué)生廣告藝術(shù)大賽的作品類別相較于往屆有了細(xì)微調(diào)整，其中一個(gè)明顯變化就是增加了互動(dòng)類廣告，這也體現(xiàn)了大廣賽“促進(jìn)教改、啟迪智慧、強(qiáng)化能力、提高素質(zhì)”的大賽宗旨?；?dòng)類廣告的主要作品形式就是我們所探究的H5，對(duì)于H5的認(rèn)識(shí)，教師需要走在前面，并需具備過硬專業(yè)能力。

對(duì)于大廣賽的諸多命題單位來說，不論是視頻、平面、動(dòng)畫、廣播、創(chuàng)意文案、策劃案等廣告形式還是互動(dòng)類的H5，其目的都是針對(duì)產(chǎn)品的廣告表現(xiàn)，而H5這一廣告形式區(qū)別于其他廣告類型的一個(gè)重要的特點(diǎn)就在于它的交互性，因此，對(duì)于這一形式的廣告設(shè)計(jì)創(chuàng)作，需要在綜合其他必要因素的基礎(chǔ)上注重其互動(dòng)性。除此之外，H5這一新的廣告形式具備很強(qiáng)的綜合性，一支完整的H5廣告包括：文字、圖形、插畫、聲音、動(dòng)畫等內(nèi)容，這就要求學(xué)生具備良好的圖形表達(dá)，手繪，文案創(chuàng)作、聲音處理、動(dòng)畫制作、交互設(shè)計(jì)等諸多專業(yè)技能。這些都還是建立在學(xué)生對(duì)命題深入了解、對(duì)目標(biāo)訴求準(zhǔn)確把控的基礎(chǔ)上，因此，這對(duì)教師來說無疑是個(gè)巨大的挑戰(zhàn)！

三、基于“全國大學(xué)生廣告藝術(shù)大賽”的H5教學(xué)方法

1.教學(xué)目標(biāo)

H5課程為視覺傳達(dá)設(shè)計(jì)專業(yè)開設(shè)的最新課程，對(duì)于該方面的教學(xué)實(shí)踐案例和方法可借鑒的較少，此外，其涉及內(nèi)容較為綜合，實(shí)踐性較強(qiáng)。在具體課程教學(xué)實(shí)踐環(huán)節(jié)中，很難將冗雜的內(nèi)容一一進(jìn)行深入介紹，也難以讓學(xué)生深入進(jìn)去。

對(duì)于這樣一門綜合性較強(qiáng)的課程來說，首先需要具備相對(duì)適當(dāng)?shù)恼n程時(shí)長，以此來保障課程各部分內(nèi)容的有效進(jìn)行，因此，建議學(xué)時(shí)為80。

2.教學(xué)思路

對(duì)于視覺傳達(dá)設(shè)計(jì)專業(yè)的學(xué)生來講，獨(dú)立完成這樣綜合型較強(qiáng)的作品存在一定困難，因此需以創(chuàng)意、文案、視覺、交互四個(gè)環(huán)節(jié)將學(xué)生進(jìn)行精細(xì)分組，每組4人，學(xué)生需具備其中一項(xiàng)或多項(xiàng)專業(yè)能力，這樣就避免了在作品的創(chuàng)作過程中個(gè)人單獨(dú)作戰(zhàn)的困境，同時(shí)也鍛煉了學(xué)生的團(tuán)隊(duì)協(xié)作能力。

其中，各個(gè)環(huán)節(jié)的課時(shí)分配分別為：理論課時(shí)10、創(chuàng)意課時(shí)10、文案課時(shí)10、視覺課時(shí)20、交互課時(shí)20，在對(duì)往屆大賽同類作品的分析中不難發(fā)現(xiàn)，優(yōu)秀的作品在創(chuàng)意的高度、畫面的精細(xì)度、色彩的和諧度、文案的深度、互動(dòng)的表現(xiàn)等任何一方面均精益求精，作品整體氣質(zhì)也較為突出，欣賞作品的做成中既與觀者產(chǎn)生互動(dòng)又引人深思。

3.教學(xué)內(nèi)容

理論課程：本課程的理論講述環(huán)節(jié)至關(guān)重要，如何聯(lián)系實(shí)際將H5的概念描述，發(fā)展進(jìn)程，重要性，應(yīng)用范圍，制作方法，制作流程，制作規(guī)范等內(nèi)容有效的傳遞給學(xué)生是該環(huán)節(jié)的重中之重，學(xué)生對(duì)于該部分內(nèi)容的深入理解和掌握也直接影響著后續(xù)教學(xué)的效果。

創(chuàng)意課程：對(duì)于H5來說，它的實(shí)質(zhì)就是一種廣告形式，我們可以理解為互動(dòng)廣告，它的互動(dòng)性也正是它區(qū)別于其他廣告形式的重要屬性。因此，本環(huán)節(jié)的關(guān)鍵點(diǎn)在于為學(xué)生系統(tǒng)的補(bǔ)充廣告的創(chuàng)意構(gòu)思方法以及產(chǎn)品作為廣告核心的重要思路。并需對(duì)大廣賽歷屆互動(dòng)類等級(jí)作品進(jìn)行廣泛分析的基礎(chǔ)上，將傳統(tǒng)廣告創(chuàng)意法與H5廣告的交互特征進(jìn)行聯(lián)系，總結(jié)創(chuàng)意如下：①使用產(chǎn)品前后對(duì)比/與同類產(chǎn)品進(jìn)行類比并得出結(jié)果；②產(chǎn)品本身是圖案；③講故事；④設(shè)置選項(xiàng)；⑤讓產(chǎn)品基本信息變得有趣；⑥將產(chǎn)品進(jìn)行擬人化處理。

文案課程：對(duì)于一支廣告來說，文案的重要性不言而喻，精彩的文案具有“一語勝千言”的神奇魔力。因此本部分內(nèi)容對(duì)廣告文案的基本構(gòu)成，寫作原則，寫作方法等內(nèi)容進(jìn)行詳細(xì)闡述，并對(duì)學(xué)生進(jìn)行有效的信息傳遞。廣告文案是由標(biāo)題、廣告正文、廣告口號(hào)和隨文組成的。它是廣告內(nèi)容地文字化表現(xiàn)。在廣告設(shè)計(jì)中，文案與圖案圖形同等重要，圖形具有前期地沖擊力，廣告文案具有較深地影響力。同時(shí)，廣告文案還具備準(zhǔn)確規(guī)范 點(diǎn)明主題、簡明精煉 言簡意賅、生動(dòng)形象 表明創(chuàng)意、動(dòng)聽流暢 上口易記等特點(diǎn)。

視覺課程：對(duì)于視覺傳達(dá)設(shè)計(jì)專業(yè)的學(xué)生來講，在前期的專業(yè)學(xué)習(xí)中早已具備扎實(shí)的視覺設(shè)計(jì)能力，主要以文字、圖形、色彩、立體造型為基本要素，針對(duì)大廣賽品牌策略要求，構(gòu)思滿足廣告訴求，符合廣告?zhèn)鞑ツ康膫€(gè)效力的視覺設(shè)計(jì)內(nèi)容，因此本部分內(nèi)容的完成需要具備扎實(shí)的視覺傳達(dá)藝術(shù)設(shè)計(jì)和應(yīng)用表現(xiàn)能力，及符合H5設(shè)計(jì)規(guī)范的視覺設(shè)計(jì)要求進(jìn)行講述。如：H5頁面常規(guī)尺寸根據(jù)人群分布來看，在安卓端的主流分辨率是1280x720像素，在IOS端的主流分辨率為1136x640，此外，針對(duì)大廣賽，H5廣告也有著特殊的尺寸規(guī)范和要求。

交互課程：全國大學(xué)生廣告藝術(shù)大賽對(duì)于互動(dòng)廣告的具體要求是移動(dòng)端（手機(jī)）H5互動(dòng)廣告，因此，需要選擇符合社會(huì)需求的H5互動(dòng)軟件來對(duì)學(xué)生進(jìn)行強(qiáng)化訓(xùn)練，引導(dǎo)學(xué)生了解H5設(shè)計(jì)制作的主流工具，本課程所介紹的工具為iH5（互動(dòng)大師），它可以很好的支持全景、一鏡到底、動(dòng)畫、游戲等各類功能型，展示型作品的制作，并可支持各種移動(dòng)端設(shè)備和主流瀏覽器且操作便捷易上手。該部分內(nèi)容需詳細(xì)介紹H5的設(shè)計(jì)流程、設(shè)計(jì)方法等內(nèi)容，秩序和規(guī)范是進(jìn)行系統(tǒng)化工作的保障，不管是門類眾多的產(chǎn)品設(shè)計(jì)，還是形式多樣的廣告設(shè)計(jì)，他們都有著不同的設(shè)計(jì)規(guī)范和設(shè)計(jì)流程，H5廣告業(yè)同樣如此。

課程中，我們應(yīng)該系統(tǒng)性的講解H5設(shè)計(jì)究竟要經(jīng)歷幾個(gè)具體環(huán)節(jié)？究竟要側(cè)重幾個(gè)設(shè)計(jì)要點(diǎn)？究竟要用到那些主要工具和輔助工具？究竟需要學(xué)習(xí)哪些專業(yè)知識(shí)？H5的設(shè)計(jì)因?yàn)榘颂嚅T類，所以在設(shè)計(jì)方法的總結(jié)上有著較大的難度，對(duì)于一個(gè)全新的媒體形式來說，再全面的方法技巧也不能應(yīng)用于所有作品案例中。為了能讓學(xué)生真正學(xué)到有效的設(shè)計(jì)方法，我們可將H5的設(shè)計(jì)要點(diǎn)總結(jié)為：原型圖繪制，內(nèi)容信息表達(dá)，版式設(shè)計(jì)編排，文字設(shè)計(jì)，動(dòng)效設(shè)計(jì)，音效設(shè)計(jì)等關(guān)鍵步驟，H5廣告設(shè)計(jì)并非單純的視覺設(shè)計(jì)，它整合了視覺，聽覺，觸覺（交互）三大板塊，它是“數(shù)字媒體設(shè)計(jì)”的基礎(chǔ)，也是超媒體在移動(dòng)互聯(lián)網(wǎng)時(shí)代的社會(huì)化呈現(xiàn)。對(duì)于傳統(tǒng)平面設(shè)計(jì)者來說，轉(zhuǎn)變這個(gè)觀念并非易事，它需要跳出以往固有的觀念，這對(duì)教學(xué)工作者來說是個(gè)巨大考驗(yàn)。

結(jié)語

對(duì)于本門課程的學(xué)習(xí)需要緊密聯(lián)系市場(chǎng)，在2015-2016這兩年間，移動(dòng)互聯(lián)網(wǎng)行業(yè)中出現(xiàn)了大量以H5為主要表現(xiàn)方式的移動(dòng)端網(wǎng)站?？梢哉f，它們用全新的體驗(yàn)方式改變了我們對(duì)網(wǎng)頁和內(nèi)容傳播的認(rèn)識(shí)。好方法總結(jié)需要建立在廣泛的優(yōu)質(zhì)作品分析基礎(chǔ)之上，我們需對(duì)行業(yè)內(nèi)及大賽中所產(chǎn)生的，具有代表性的H5案例進(jìn)行深入解讀和分析，剖析案例中精彩之處，反復(fù)學(xué)習(xí)和推敲，認(rèn)真總結(jié)其設(shè)計(jì)手法。

全國大學(xué)生廣告藝術(shù)大賽為視覺傳達(dá)設(shè)計(jì)專業(yè)的H5課程教學(xué)提供了一個(gè)非常有意義的平臺(tái)，讓課程教學(xué)更加多樣化，同時(shí)也具有較強(qiáng)的針對(duì)性。以企業(yè)真實(shí)營銷項(xiàng)目作為命題，引導(dǎo)學(xué)生了解受眾，調(diào)研分析，提出策略，不僅可以充分的啟發(fā)學(xué)生思維，培養(yǎng)學(xué)生的創(chuàng)新表達(dá)能力，更使學(xué)生在此過程中對(duì)專業(yè)理論及技能的綜合應(yīng)用能力的得以提升，同時(shí)也可時(shí)時(shí)檢驗(yàn)我們的教學(xué)方案與教學(xué)方法是否合理有效，使教學(xué)更具創(chuàng)新性，這樣的實(shí)踐教學(xué)嘗試也為視覺傳達(dá)設(shè)計(jì)專業(yè)的發(fā)展與改革提供了良好的思路。