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

李昱嬌

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

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

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

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

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

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

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

2.1 幻燈片展示形式

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

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

2.2 交互式

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

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

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

2.4 動態(tài)游戲式

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

2.5 復(fù)合功能式

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

3? 結(jié)語

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

參考文獻

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

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