HTML5的創(chuàng)新應(yīng)用

孫穎+李禹臻+朱琳

摘要：文章根據(jù)當(dāng)前新媒體的趨勢，總結(jié)了運(yùn)營微信平臺時視覺設(shè)計上積累的經(jīng)驗(yàn)與心得，并且敘述了針對THTML5在新媒體運(yùn)營中產(chǎn)生的作用、創(chuàng)新點(diǎn)以及具體研究過程。

關(guān)鍵詞：HTML5新媒體運(yùn)營視覺設(shè)計

一、背景與定義

新媒體是一個相對于傳統(tǒng)媒體而言的概念，在傳播方式上包含了各種形式的媒體，例如數(shù)字電視，網(wǎng)絡(luò)，手機(jī)等媒體。

而通過現(xiàn)代化互聯(lián)網(wǎng)手段，借由微信、QQ等新興的媒體平臺工具進(jìn)行一系列宣傳的運(yùn)營手段就叫作新媒體運(yùn)營。新媒體運(yùn)營作為一種新型傳媒方式，在生活中的作用也一點(diǎn)一點(diǎn)凸顯出來。正因如此，單調(diào)的平面效果也隨時間的增長越來越難以吸引消費(fèi)群體，媒體人對更加高效，更能博人眼球的傳媒方式的需求愈加強(qiáng)烈。HTML5這種新穎的運(yùn)營方式給予了媒體人新的機(jī)會與可能。

21世紀(jì)是因特網(wǎng)的井噴階段，此后人們逐漸習(xí)慣于接受圖形化碎片化的信息，簡單易懂生動形象傳播速度快的H5應(yīng)運(yùn)而生，H5是指第5代HTML，也指用H5語言制作的一切數(shù)字產(chǎn)品。從引爆朋友圈的HTML5（以下將簡稱HTML5為H5）小游戲《圍住神經(jīng)貓》開始，到顛覆傳統(tǒng)廣告的微信公開課H5專題頁《我和微信的故事》，這種富有新意的傳媒方式從2015年起，借由微信這個移動社交平臺，正在走進(jìn)更多人的視野。其豐富的展現(xiàn)方式，是它能迅速“走紅”的關(guān)鍵原因。

Google已經(jīng)將頁面加載速度作為搜索排名的一個因素，這也預(yù)示著H5在未來傳媒業(yè)發(fā)展上的重要性。隨著科技的進(jìn)步，H5的優(yōu)勢便更加顯現(xiàn)出來，雙屏互動、繪圖、全景視頻、重力感應(yīng)以及最近最火爆的虛擬現(xiàn)實(shí)等豐富的互動效果，都是H5顯著的優(yōu)勢。H5給大家提供了一個很好的信息優(yōu)化與傳播的平臺，我們可以充分利用這個極具潛力的傳播平臺，將想要傳達(dá)的信息從聽覺視覺觸覺各方面進(jìn)行設(shè)計優(yōu)化，使其更有效地傳播出去。

然而，由于H5的發(fā)展處于初期階段，現(xiàn)在H5的創(chuàng)新與應(yīng)用存在一些顯著的問題?，F(xiàn)在的H5應(yīng)用呈現(xiàn)方式過于單調(diào)，一個神經(jīng)貓出來后，模仿者、類似的游戲此起彼伏。一個接電話的H5出來后，一大堆接電話的廣告效仿。我們要做的就是借助現(xiàn)有的H5技術(shù)結(jié)合新媒體平臺，將要傳播的信息進(jìn)行設(shè)計與創(chuàng)新，推出更富有設(shè)計感和視覺效果的游戲和頁面。豐富H5的形式，推動H5的發(fā)展，去適應(yīng)新媒體的趨勢。

在視覺設(shè)計上，我們還沒有充分運(yùn)用H5給我們帶來的便利，以及其無限的拓展空間，許多的H5的動態(tài)效果依舊很簡單，我們可以在其多功能多模塊的格式下發(fā)揮想象力，將動態(tài)模塊發(fā)揮出更大的作用。

二、H5國內(nèi)外研究概況及發(fā)展趨勢

（一）技術(shù)研究方面：

2008年1月22日，H5的第一份正式草案公布。

2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布HTML5規(guī)范已經(jīng)正式定稿。

2013年5月6日，HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第—次要修訂萬維網(wǎng)的核心語言：超文本標(biāo)記語言（HTML）。其中將會逐漸設(shè)計新形態(tài)的格式，以幫助Web應(yīng)用程序的作者，努力提高新元素的互操作性。

2014年10月29日，萬維網(wǎng)聯(lián)盟正式宣布，H5標(biāo)準(zhǔn)規(guī)范最終制定已經(jīng)完成，并已公開發(fā)布。在此之前的幾年時間里，已經(jīng)有很多開發(fā)者陸續(xù)使用了H5的部分技術(shù)。

H5將推動Web進(jìn)入新的時代。H5有望成為夢想中的“開放Web平臺”（Open Web Platform）的基石，如能實(shí)現(xiàn)可進(jìn)一步推動更深入的跨平臺Web應(yīng)用。接下來，W3C將致力于開發(fā)用于實(shí)時通信、電子支付、應(yīng)用開發(fā)等方面的標(biāo)準(zhǔn)規(guī)范，還會創(chuàng)建一系列隱私、安全防護(hù)相關(guān)的措施。而這些進(jìn)步，是每一個用戶都能親身體會到的。

2015至2016年，國內(nèi)各大手機(jī)移動端APP都會在年終的時候針對于用戶一年以來操作過的記錄加以總結(jié)，H5作為主要傳播格式，應(yīng)用十分廣泛，從2015年的微信、知乎年終總結(jié)拓展到2016年例如支付寶2016賬單、知乎年終總結(jié)、豆瓣、網(wǎng)易云音樂等?？梢钥闯鯤5在新媒體中起到的作用已然不容小覷。

（二）未來的發(fā)展方向：

在云計算的快速進(jìn)步下，尤其是“平臺及服務(wù)”（PaaS）的加速部署，較少的資金運(yùn)營、更加宏偉的規(guī)格、更加簡單操作維持管理的云服務(wù)時代已經(jīng)開啟，而H5作為web云服務(wù)的前端技術(shù)順勢而起，極大增強(qiáng)了web云服務(wù)在移動終端上的展現(xiàn)與交互能力。隨著web應(yīng)用在功能、性能及業(yè)務(wù)體驗(yàn)上開始接近原生應(yīng)用，web應(yīng)用生態(tài)必然會在長尾化、輕量級的應(yīng)用領(lǐng)域擠占原屬于原生應(yīng)用的部分份額?，F(xiàn)在已有眾多瀏覽器支持H5，在網(wǎng)頁端和移動端，H5都將會發(fā)揮其巨大的作用。

三、新媒體平臺的視覺設(shè)計

為研究H5在新媒體平臺的創(chuàng)新應(yīng)用，研究小組專門開設(shè)了大工設(shè)計微信公眾平臺進(jìn)行專業(yè)的媒體運(yùn)營，在其中積累了不少關(guān)于微信公眾平臺視覺設(shè)計的經(jīng)驗(yàn)。在傳統(tǒng)的微信編輯模式下，直接用微信公眾平臺編輯視覺效果有以下幾點(diǎn)值得注意。

（一）文字

1.文字可調(diào)項(xiàng)有大小，加粗，斜體，下劃線，顏色，首行縮進(jìn)，行間距，段間距，對齊方式等。調(diào)節(jié)好這些項(xiàng)，足以讓版面抓人眼球。

2.首行不縮進(jìn)，這樣會使文字看起來更整齊，不雜亂。字體大小13px～18px比較合適，字小一點(diǎn)會有設(shè)計感，清新好看。但是太小又會看不清，影響閱讀效率。13px～15px比較適合設(shè)計類，情感類的公眾號。16px～18px比較適合新聞，財經(jīng)類的公眾號。一篇文章中的字號不要用太多，2～3種就夠用To行間距調(diào)成1.5-1.75最符合人類視覺的舒適點(diǎn)，一些設(shè)計類，文藝類的公眾號可以適當(dāng)加大行間距，凸顯設(shè)計感和清新感。

3.加粗，斜體，下劃線，改變字體顏色等都可以來標(biāo)注文章中的重點(diǎn)。不過除了少部分的英文字體，大部分字體變成斜體以后都不會美觀，所以個人比較喜歡用直接加粗或改變顏色的方式來標(biāo)注重點(diǎn)。字體的顏色不宜過多，除了灰黑色之外，字體顏色不要超過1～2種。建議每個微信公眾號都有一個和自己風(fēng)格或logo相搭配的主色，文章中用主色來突出小標(biāo)題或文中重點(diǎn)即可。endprint

每段的行數(shù)最好不要超過6行，行數(shù)太多會顯得冗長綴余，削弱讀者的閱讀興趣。段間距微信設(shè)置的5～25看上去都還比較舒適，可以根據(jù)個人的公眾號風(fēng)格自行選擇，但要注意的是每段之間一定要留一行空白，要學(xué)會留白之美。

（二）圖片

1.圖片相較文字而言給人更直觀的感受和信息，所以公眾號推送盡量多圖少字。

2.首先圖片的質(zhì)量一定要清晰，有多張圖片的時候圖片色調(diào)和大小要統(tǒng)一，如果圖片的寬度占不滿整個手機(jī)屏幕，將圖片的格式設(shè)置為居中。

3.如果要展示一些產(chǎn)品或者動態(tài)效果，GIF格式的動圖會比JPG格式的圖片效果更好，視頻里面的重點(diǎn)也可以直接用GIF格式的動圖展示出來，讓讀者更容易接收到重要信息。如今的微信公眾號編輯器功能增加了許多，對于GIF的格式寬容了許多，這也暗示了動態(tài)圖片在未來編輯上起到的作用，合理地運(yùn)用動態(tài)效果的圖片不僅能增加受眾閱讀的趣味性，還可以更能清楚地表達(dá)所想傳達(dá)的內(nèi)容，從而達(dá)到宣傳的目的。

4.微信推送的封面圖分為頭圖封面和小圖封面，頭圖封面大小是900×500px，小圖封面大小為200×200px，選來做封面的圖片要注意其大小，避免圖片變形或被裁減。

5.微信圖片可以加水印來限制圖片的使用權(quán)，水印有使用微信號和使用名稱兩種，根據(jù)自己公眾號的情況自行選擇，理論上選擇短的，水印體積小，好看的那一個。當(dāng)然，如果想防止重要內(nèi)容被遮擋，也可以選擇不添加水印。

（三）自主排版

如果個人有很高的排版能力及自我要求，可以嘗試用其他排版軟件如CorelDRAW，PS等自己排好版，導(dǎo)成圖片格式上傳到微信公眾平臺。效果會相當(dāng)不錯，但過程比較麻煩。除此之外，利用第三方微信編輯器如易點(diǎn)，135editor，ipanban等也相當(dāng)快捷，美觀。

四、項(xiàng)目案例的具體研究過程及成果

（一）項(xiàng)目主要研究內(nèi)容

1.基于TypeScript及JavaScript技術(shù)制作一系列網(wǎng)頁互動效果，也可以將其看作是移動端的web游戲，無需下載軟件即可體驗(yàn)。結(jié)合多種展現(xiàn)形式的頁面、動態(tài)特效、交互應(yīng)用（1interactive app）和數(shù)據(jù)分析（Data analysis）的元素，實(shí)現(xiàn)信息的直接傳播。并且其對于格式的要求低，初期資金投入低、完成一個項(xiàng)目所需要耗費(fèi)精力小的優(yōu)點(diǎn)，進(jìn)行不斷實(shí)踐，以達(dá)到充分掌握的程度，為下一步進(jìn)行H5的視覺創(chuàng)新搭建技術(shù)基礎(chǔ)。

2.基于微信平臺，通過新媒體的再設(shè)計，通過頁面的制作方式開發(fā)出多款新穎、有趣、生動、形象、準(zhǔn)確的信息傳播方式，用于推廣游戲，并在微信平臺通過用戶體驗(yàn)反饋對游戲進(jìn)行不斷改進(jìn)更新。

3.主要針對視覺上的效果進(jìn)行創(chuàng)新設(shè)計。結(jié)合其動態(tài)元素的特點(diǎn)，制作出生動傳神的H5頁面。

（二）項(xiàng)目研究過程

1.學(xué)習(xí)了H5的制作方法后在大工設(shè)計的微信平臺上發(fā)布了視覺效果與傳播性極佳的建筑與藝術(shù)學(xué)院教師招聘H5頁面這是初步的成果。

2.在探索方案方向的過程中，起初決定將H5與同樣是熱點(diǎn)的ardunio結(jié)合起來，結(jié)合實(shí)際的項(xiàng)目做一個寵物防丟的裝置，主要做檢測呈現(xiàn)軟界面的這一塊，在界面視覺呈現(xiàn)方式上創(chuàng)新。通過初步對ardunio的了解以及對項(xiàng)目的深入分析之后，覺得這個在新媒體方向工作量相對較少，大部分工作在寵物防丟實(shí)物這一塊，而且工作量相對偏大，于是決定改換方向。

3.決定最終方向：經(jīng)過一系列討論，決定將項(xiàng)目與專業(yè)的需求結(jié)合在一起，滿足身邊的需求，用H5技術(shù)做一個工業(yè)設(shè)計老師同學(xué)畢業(yè)設(shè)計互選的應(yīng)用，解決畢業(yè)設(shè)計學(xué)生選老師，老師選學(xué)生尷尬、繁瑣的問題。

4.方案初步：應(yīng)用取名為：師生互動選擇應(yīng)用。師生互動選擇應(yīng)用中師生互選部分一改平淡的風(fēng)格，以游戲的方式呈現(xiàn)，具有極強(qiáng)的互動性和趣味性。應(yīng)用H5的方式呈現(xiàn)，具有極強(qiáng)的傳播性與視覺性，體驗(yàn)性。

5.方案深化：中期之前我們的重頭工作放在應(yīng)用的創(chuàng)意和視覺效果上面，經(jīng)過多次討論，我們確定了應(yīng)用的風(fēng)格：使用像素風(fēng)。確定應(yīng)用的內(nèi)容：應(yīng)用以講故事為主線，中間插入游戲互動的環(huán)節(jié)。同學(xué)選在老師過程中用找人的游戲來進(jìn)行。老師同學(xué)進(jìn)行趣味性互選之后，連線過程通過算法進(jìn)行匹配，最后的結(jié)果直接通過微信發(fā)給用戶。讓師生輕松愉快地完成這個畢設(shè)互選過程。

6.經(jīng)過討論決定了最后方案：用H5做一款工業(yè)設(shè)計老師學(xué)生互選的應(yīng)用。應(yīng)用的大背景取景于大連理工大學(xué)第二教學(xué)館館，小組成員分工到現(xiàn)場實(shí)地取景，進(jìn)行大背景的視覺設(shè)計。

（三）研究成果

結(jié)合實(shí)際問題，我們利用了HTML5，CSS3，TypeScript及JavaScript等技術(shù)，制作一款工業(yè)設(shè)計畢業(yè)設(shè)計老師學(xué)生互選的應(yīng)用，解決老師同學(xué)在畢業(yè)設(shè)計互選的過程中尷尬繁瑣的問題。應(yīng)用一改之前的平?；鞒蹋糜螒虻姆绞阶尷蠋熀屯瑢W(xué)進(jìn)行互相選擇。

師生互動選擇應(yīng)用的平面風(fēng)格為像素畫風(fēng)格，大背景實(shí)地采景教學(xué)館，根據(jù)每個年級不同時期所會經(jīng)歷的課程和活動，提取出具有其特點(diǎn)的小物品們，使其形象平面化來制作大背景，同學(xué)在選老師過程中用找人的游戲來進(jìn)行。老師同學(xué)進(jìn)行趣味性互選之后，連線過程通過算法進(jìn)行匹配，最后的結(jié)果直接通過微信發(fā)給用戶。讓師生輕松愉快地完成這個畢設(shè)互選過程。應(yīng)用會發(fā)布在大工設(shè)計微信平臺上面，達(dá)到一定的用戶點(diǎn)擊量，起到宣傳大連理工大學(xué)工業(yè)設(shè)計微信平臺的作用，進(jìn)而起到宣傳工業(yè)設(shè)計的作用。后期積累一定數(shù)量的粉絲，可以通過發(fā)布廣告等途徑來獲得利益，維持微信平臺的運(yùn)轉(zhuǎn)。在微信平臺通過用戶體驗(yàn)反饋對游戲進(jìn)行不斷改進(jìn)更新，對于最終的應(yīng)用版本申請版權(quán)，正式上線并進(jìn)行推廣。

結(jié)語

新媒體的視覺設(shè)計必須跟上時代的腳步，在新的時代，大家需要了解掌握更多的新媒體傳播技術(shù)，更好地把握受眾群的需求，多加實(shí)踐，在操作中吸取經(jīng)驗(yàn)，從書本上學(xué)到的遠(yuǎn)遠(yuǎn)不足以支撐一個媒體平臺的運(yùn)營。在未來的媒體傳播方式中HTML5將會占有愈來愈多的比重，甚至是革新新媒體信息的傳播方式，我們要創(chuàng)新性地應(yīng)用HTML5，發(fā)揮其功能和效用，在了解了移動端與其的特殊性后，更加準(zhǔn)確、創(chuàng)新性地進(jìn)行新媒體的視覺設(shè)計。endprint