移動(dòng)互聯(lián)網(wǎng)環(huán)境下的H5設(shè)計(jì)形式探究

李昱嬌

摘? 要：筆者依托于移動(dòng)互聯(lián)網(wǎng)發(fā)展向好的大環(huán)境，對(duì)H5設(shè)計(jì)樣式予以了細(xì)致探究，對(duì)其優(yōu)越性和展現(xiàn)方式都予以了充分剖析。確認(rèn)了H5設(shè)計(jì)不論選取哪一種樣式，都需將出發(fā)點(diǎn)定位于全局性能和服務(wù)這兩大層面之上，使其信息資源逐步多樣化，從客戶立場(chǎng)出發(fā)，研發(fā)出能夠迎合運(yùn)用場(chǎng)景的性能，以達(dá)到設(shè)計(jì)美學(xué)價(jià)值和商業(yè)推廣經(jīng)濟(jì)價(jià)值這二者的深度融合。

關(guān)鍵詞：移動(dòng)互聯(lián)網(wǎng)? H5設(shè)計(jì)? 形式

移動(dòng)互聯(lián)網(wǎng)本質(zhì)上來說是互聯(lián)網(wǎng)與移動(dòng)通信兩者的融合，伴隨著5G時(shí)代的來臨還有移動(dòng)終端設(shè)施的日益更新化，移動(dòng)互聯(lián)網(wǎng)的發(fā)展勢(shì)頭可謂是所向披靡，隨著互聯(lián)網(wǎng)核心用語標(biāo)準(zhǔn)規(guī)范的制作結(jié)束，H5面世首日便廣受好評(píng)。消費(fèi)升級(jí)帶來的后營銷時(shí)代，讓移動(dòng)營銷逐漸演變成了深層次、多樣化的營銷樣式，涵蓋內(nèi)容有很多，不限于次元穿越、劇情交互還有明星直播等。H5公布相關(guān)標(biāo)準(zhǔn)規(guī)范之后，不但能借助編程達(dá)到相應(yīng)效果，還能借助部分零代工具像是無需插件的語音視頻、本地儲(chǔ)存還有圖像動(dòng)畫等達(dá)成可視化制作，同時(shí)達(dá)成相關(guān)APP的輕應(yīng)用體驗(yàn)。

1? H5優(yōu)越性剖析

H5擁有十分靈活的特性，可將其運(yùn)用于多元化的平臺(tái)之上，同時(shí)其兼容性也是十分惹眼的，能夠切實(shí)減少軟件研發(fā)和運(yùn)行的花費(fèi)，可以讓企業(yè)在發(fā)展中得到更多的經(jīng)濟(jì)收益和潛在機(jī)遇。將H5和APP比對(duì)剖析可知，其研發(fā)耗時(shí)更少，運(yùn)用階段中聯(lián)網(wǎng)速率和啟動(dòng)速率都更高，不但不會(huì)對(duì)終端設(shè)施的內(nèi)存造成一定的占用，對(duì)于移動(dòng)終端的媒體平臺(tái)而言，適用性更是有所提升。H5的導(dǎo)流入口是極其多元的，這一優(yōu)越性能夠讓商家在尚品宣傳方面領(lǐng)先一大步。此外，H5的更新?lián)Q代也是十分及時(shí)的，不管是差量更新還是實(shí)時(shí)更新，門檻都在逐步下降，不但涵蓋了嗨爆朋友圈的H5小游戲，還涵蓋了京東購物節(jié)和淘寶造物節(jié)等知名網(wǎng)絡(luò)熱門訊息，H5將其優(yōu)越性充分展現(xiàn)，潛能也被挖掘得淋漓盡致。

2? H5表現(xiàn)形式探究

在確認(rèn)性能目標(biāo)以后，就需落實(shí)接下來一個(gè)很關(guān)鍵的步驟與設(shè)計(jì)。就H5的視覺效果而言，涵蓋了三大核心要素：一是色彩;二是文字;三是圖像，三者彼此配合，方能實(shí)現(xiàn)立體的視覺效果的傳輸，賦予其在獨(dú)特語境的獨(dú)特含義，借此向大眾傳達(dá)所要傳達(dá)的思想、概念還有信息等。怎樣有選擇性地在為數(shù)不多的頁面內(nèi)進(jìn)行設(shè)計(jì)，一定要牢牢把控3個(gè)方面：一是潛在客戶和目標(biāo)客戶的心理狀況;二是場(chǎng)景的靈活應(yīng)用;三是內(nèi)容傳輸?shù)年P(guān)鍵點(diǎn)。盡量使得用戶在打開H5頁面那一瞬間有眼前一亮的感受，隨之心動(dòng)不已，進(jìn)而主動(dòng)分享。此篇文章將慣用的H5設(shè)計(jì)樣式予以了細(xì)致的探討。

2.1 幻燈片展示形式

這一種H5是最基礎(chǔ)的一種表現(xiàn)樣式，簡(jiǎn)單來說就是頁面內(nèi)容的相關(guān)呈現(xiàn)，若想實(shí)現(xiàn)這一任務(wù)，可以借助的第三方工具的種類十分多元。縱使常規(guī)而言，客戶自身對(duì)這種樣式的H5的參與感并不會(huì)特別強(qiáng)烈，顧客自主的轉(zhuǎn)發(fā)數(shù)量和轉(zhuǎn)化效率也都不是很高，但對(duì)企業(yè)而言，借助這種成本不高且簡(jiǎn)單易行的H5，能夠?qū)崿F(xiàn)緊追熱點(diǎn)的效果，反應(yīng)迅速，實(shí)現(xiàn)熱點(diǎn)第一時(shí)間的轉(zhuǎn)化。縱使是基礎(chǔ)的展現(xiàn)式H5，也能夠借助版面和內(nèi)容來實(shí)現(xiàn)對(duì)顧客的吸引，若前一個(gè)階段的策劃足夠的清晰，獨(dú)一無二的設(shè)計(jì)風(fēng)格一樣能夠?qū)崿F(xiàn)十分優(yōu)良的傳輸效果。就常規(guī)的設(shè)計(jì)版面而言，直線型畫面是比較符合既定認(rèn)知規(guī)范的，簡(jiǎn)潔的直線分割更易塑造出沉穩(wěn)且品質(zhì)感滿滿的頁面基調(diào)，傳達(dá)出一種莊重且理性十足的氣氛，還能在視覺上對(duì)差異化內(nèi)容起到一定的、清晰的劃分作用。

就視覺沖擊力而言，斜線型版面顯然是更為強(qiáng)大的，全局版面的律動(dòng)感也是更為優(yōu)良的，且指引性極佳，易給民眾傳達(dá)一種平面延續(xù)的錯(cuò)覺。輔以適宜的動(dòng)態(tài)特效，就能在第一時(shí)間為消費(fèi)者帶來強(qiáng)烈的畫面沖擊感，傾斜角的大小和沖擊感的大小成正比例的關(guān)系，較適宜運(yùn)用的場(chǎng)合有很多，涵蓋但不限于推薦、促銷還有活動(dòng)等。圓形版面呈現(xiàn)在手機(jī)屏幕上時(shí)具有天然的聚焦視線的能力，適宜一些重要信息、主圖還有主標(biāo)題等的呈現(xiàn)。

2.2 交互式

假使展示型H5觸碰到了“視覺設(shè)計(jì)”的技能點(diǎn)，那么交互式H5便觸碰到了“交互設(shè)計(jì)”的技能點(diǎn)。相較于紙媒而言，互聯(lián)網(wǎng)傳輸?shù)囊粋€(gè)最大的優(yōu)越性在于使用者參與度的增強(qiáng)，在網(wǎng)絡(luò)環(huán)境中，使用者能夠依托于自身進(jìn)度實(shí)現(xiàn)相關(guān)數(shù)據(jù)的獲得和轉(zhuǎn)換，此時(shí)H5也不再局限于老式的翻頁，不需一味地等待動(dòng)態(tài)特效的加載，H5頁面的設(shè)計(jì)過程逐步被用戶體驗(yàn)所影響。尤其是交互式H5更加深了用戶體驗(yàn)的深層性，提升了用戶的參與度，用戶參與感更強(qiáng)烈、更真實(shí)，分享的意愿也更高了。

2.3 答題測(cè)試、數(shù)據(jù)提交式

倘若交互設(shè)計(jì)是在構(gòu)建一種用戶、產(chǎn)品和服務(wù)這三者之間的、有一定實(shí)際意義的聯(lián)系，那么數(shù)據(jù)提交類H5就是對(duì)上述聯(lián)系的數(shù)據(jù)歸納。該類H5一方面能夠幫助企業(yè)實(shí)現(xiàn)對(duì)消費(fèi)者的產(chǎn)品宣傳，另一方面也能同步實(shí)現(xiàn)對(duì)使用者相關(guān)數(shù)據(jù)的搜集。這種H5能夠?qū)⑹褂谜叩那笾吞骄坑枰猿浞值恼{(diào)動(dòng)和利用，逐步地將使用者引領(lǐng)到既定目標(biāo)軌道上，所以要在第一時(shí)間將線索明晰化，使用者借助相關(guān)引導(dǎo)進(jìn)行題目回答，最終達(dá)到的結(jié)果也得足夠科學(xué)且不唐突，若能配合以巧妙的視覺特效和文案，用戶體驗(yàn)將會(huì)更加優(yōu)良。使用者在網(wǎng)絡(luò)上將自己的選擇輸入之后，企業(yè)后臺(tái)會(huì)依照輸入的相關(guān)數(shù)值進(jìn)行數(shù)值分析，同時(shí)對(duì)使用者的消費(fèi)態(tài)度、需求、喜好等進(jìn)行全面剖析，將目標(biāo)受眾的群體范圍進(jìn)一步縮小化。

2.4 動(dòng)態(tài)游戲式

一旦“交互設(shè)計(jì)”和“數(shù)據(jù)庫”這兩大技能點(diǎn)都被觸動(dòng)之后，黑科技也就自覺出場(chǎng)了。相較于上述幾類H5開發(fā)方式，游戲類H5的研發(fā)耗資和科技含量都是更高的，它需多個(gè)環(huán)節(jié)的協(xié)調(diào)和輔助，比如激勵(lì)手段、游戲制作、設(shè)計(jì)、創(chuàng)意還有策劃等。最初風(fēng)靡起來的“神經(jīng)貓”可謂是火爆了朋友圈的存在。此游戲的研發(fā)耗時(shí)僅為一天半，美術(shù)和程序都只有一個(gè)人的迷你團(tuán)體研發(fā)并上線的“魔性”《圍住神經(jīng)貓》小游戲上線短短3d，訪問量就已經(jīng)破億。這樣一個(gè)簡(jiǎn)簡(jiǎn)單單的小游戲，所帶來的傳播效用卻是極其驚人的，很多公司由此對(duì)H5游戲的研發(fā)躍躍欲試。隨后一大批質(zhì)量?jī)?yōu)異的H5小游戲接連問世，它們已經(jīng)不再局限于對(duì)舊爆款游戲的小幅度改動(dòng)，而是選擇將游戲題目回答和視覺要素甚至是AR/VR技術(shù)彼此融合，進(jìn)而實(shí)現(xiàn)視覺傳播質(zhì)量方面的更上一層樓。

2.5 復(fù)合功能式

H5的初始名稱是Web Application 1.0，APP應(yīng)用的完整稱謂亦即Application。但H5技術(shù)和APP的差異性在于，前者研發(fā)的重點(diǎn)在于基于核心底層從零開始重建全部互聯(lián)網(wǎng)的根基，但后者只需基于舊式的語言基礎(chǔ)來實(shí)現(xiàn)相應(yīng)的研發(fā)即可。因此APP火爆的時(shí)間要遠(yuǎn)遠(yuǎn)早于H5。H5技術(shù)的研發(fā)人員在研發(fā)初始階段就為應(yīng)用設(shè)置了內(nèi)核，使用者無需再下載安裝很多的APP，只需像PC時(shí)代一般，借助瀏覽器登錄即可。所以，曾有預(yù)言稱，H5技術(shù)有可能讓移動(dòng)互聯(lián)網(wǎng)回歸到瀏覽器時(shí)代。倘若APP是為移動(dòng)互聯(lián)網(wǎng)增光添彩的存在，那H5就是為互聯(lián)網(wǎng)全局打造了一個(gè)最新的平臺(tái)與框架。就使用者層面而言，若想實(shí)現(xiàn)產(chǎn)品測(cè)試、一鍵導(dǎo)航、在線預(yù)訂還有參會(huì)邀請(qǐng)等功能，都可以直接登錄瀏覽器，無需再次下載APP，因此，使用便捷度大大提升，被服務(wù)的范疇也更加寬泛。就企業(yè)層面而言，需把功能型H5視作是一個(gè)商品，需對(duì)其進(jìn)行持續(xù)的更新?lián)Q代，以迎合使用者需要。

3? 結(jié)語

現(xiàn)階段HTML5已然邁入速率恒定且速度較快的發(fā)展階段，同時(shí)在很多行業(yè)實(shí)現(xiàn)了跨越式發(fā)展，上述行業(yè)涵蓋但不限于AR/AV、教育、移動(dòng)營銷、移動(dòng)應(yīng)用還有手機(jī)網(wǎng)游等，以HTML5為根基的“移動(dòng)互聯(lián)網(wǎng)+”的時(shí)代即將來臨。此篇文章中提及的只是部分慣用的H5類型，現(xiàn)實(shí)設(shè)計(jì)過程中，H5能夠依托于多元用戶需要選取多元技能疊加應(yīng)用，最終實(shí)現(xiàn)視覺傳輸還有使用者體驗(yàn)這兩大層面的最優(yōu)效果。

參考文獻(xiàn)

[1] 胡曉林，馬振龍.基于H5技術(shù)的微信交互式廣告在交互設(shè)計(jì)方面的“優(yōu)勢(shì)整合”創(chuàng)新思考[J].包裝工程，2016（24）：124-129.

[2] 劉銘.西域明珠APP程序開發(fā)的構(gòu)思與應(yīng)用[J].電子技術(shù)與軟件工程，2014（9）：266-267.