H5頁面設(shè)計是什么?

H5頁面設(shè)計是什么意思?下面由尚品中國網(wǎng)站制作公司和大家分享一下：

H5是指第5代HTML，就是所謂的HTML5，也指用H5語言制作的一切數(shù)字產(chǎn)品。所謂HTML是“超文本標(biāo)記語言”的英文縮寫。我們上網(wǎng)所看到網(wǎng)頁，多數(shù)都是由HTML寫成的。“超文本”是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。而“標(biāo)記”指的是這些超文本必須由包含屬性的開頭與結(jié)尾標(biāo)志來標(biāo)記。瀏覽器通過解碼HTML，就可以把網(wǎng)頁內(nèi)容顯示出來，它也構(gòu)成了互聯(lián)網(wǎng)興起的基礎(chǔ)。

HTML的第一版1991年開始研發(fā)，1993年發(fā)布。本來每隔一段時間HTML都應(yīng)該進(jìn)行更新，但是自1999年12月HTML4.01發(fā)布以來，就再也沒有更新。此后的十多年，互聯(lián)網(wǎng)行業(yè)發(fā)生了翻天覆地的變化，人們逐漸意識到原有的HTML已經(jīng)不能適應(yīng)互聯(lián)網(wǎng)的發(fā)展了。這時出現(xiàn)了兩個組織分別提出了新的方案：WHATWG和W3C。前者開發(fā)了Web Applications 1.0，后者則開發(fā)了XHTML2.0。在2006 年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建新一代的HTML，這就是H5。

H5在2008年發(fā)布草案以來，并未引起廣泛關(guān)注，而是進(jìn)入了長期的迭代優(yōu)化周期。直到去年10月W3C終于宣布，經(jīng)過長達(dá)8年的努力，HTML5標(biāo)準(zhǔn)規(guī)范最終制定完成并向全世界開放。H5標(biāo)準(zhǔn)規(guī)范的開放注定成為一個劃時代意義的事件，H5工具也漸露光芒，比如能可視化制作，不需要寫代碼的H5制作工具互動大師就受到了各方的關(guān)注。
　　
H5之所以能引發(fā)如此廣泛的效應(yīng)，根本在于它不再只是一種標(biāo)記語言，它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺，像H5工具互動大師提供免插件的音視頻、圖像動畫、本地存儲以及更多酷炫而且重要的功能，并使這些應(yīng)用標(biāo)準(zhǔn)化和開放化，從而使互聯(lián)網(wǎng)也能夠輕松實現(xiàn)類似桌面的應(yīng)用體驗。

H5的最顯著的優(yōu)勢在于跨平臺性：比如用互動大師搭建的站點與應(yīng)用可以兼容PC端與移動端、Windows與Linux、安卓與IOS。它可以輕易地移植到各種不同的開放平臺、應(yīng)用平臺上，打破各自為政的局面。這種強(qiáng)大的兼容性可以顯著地降低開發(fā)與運營成本，可以讓企業(yè)特別是創(chuàng)業(yè)者獲得更多的發(fā)展機(jī)遇。

此外，H5的本地存儲特性也給使用者帶來了更多便利；基于H5開發(fā)的輕應(yīng)用比本地APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，而且無需下載占用存儲空間，特別適合手機(jī)等移動媒體。而互動大師讓開發(fā)者無需依賴第三方瀏覽器插件即可創(chuàng)建高級圖形、版式、動畫以及過渡效果，這也使得用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果。

介紹完HTML5是什么之后，再讓大家欣賞一下HTML5的設(shè)計案例吧：

1.活動運營型

為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態(tài)廣告圖片傳播不同，如今的H5活動運營頁需要有更強(qiáng)的互動、更高質(zhì)量、更具話題性的設(shè)計來促成用戶分享傳播。從進(jìn)入微信H5頁面到最后落地到品牌App內(nèi)部，如何設(shè)計一套合適的引流路線也頗為重要。

大眾點評為電影《狂怒》設(shè)計的推廣頁便深諳此道。復(fù)古擬物風(fēng)格的視覺設(shè)計讓人眼前一亮，富有質(zhì)感的舊票根、忽閃的霓虹燈，配以幽默的動畫與音效，恨不得每個選項都點一遍。圍繞“選擇”這個品牌關(guān)鍵詞，用引人入勝的測試題讓用戶把人生當(dāng)作大片來選擇，選到最后一題引出“大眾點評選座看電影”，一鍵直達(dá)App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯，這個頁面有點diao噢”的心情點擊了分享。



2.品牌宣傳型

不同于講究時效性的活動運營頁，品牌宣傳型H5頁面等同于一個品牌的微官網(wǎng)，更傾向于品牌形象塑造，向用戶傳達(dá)品牌的精神態(tài)度。在設(shè)計上需要運用符合品牌氣質(zhì)的視覺語言，讓用戶對品牌留下深刻印象。

伴隨著浪漫的鋼琴旋律，《首草先生的情書》以一位男士的口吻娓娓道來在成長歷程中對妻子的愛與愧疚，最后引出“首草——滋陰圣品，愛妻首選”的宣傳語。設(shè)計上采用回憶般的黑白色調(diào)，簡單的照片加文字，配以花瓣掉落、水面漣漪等輕動畫，渲染出唯美優(yōu)雅的氣氛。“首草”這個全新的高端養(yǎng)生草藥品牌，用H5打出了一副走心的情感牌，讓用戶記住了“半生只為你”的愛妻品牌形象。



3.產(chǎn)品介紹型

聚焦于產(chǎn)品功能介紹，運用H5的互動技術(shù)優(yōu)勢盡情展示產(chǎn)品特性，吸引用戶買買買。

這一類型的H5頁面多見于汽車品牌，LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細(xì)膩的光效營造出酷炫的視覺風(fēng)格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優(yōu)雅的觸碰、摩擦、滑動等互動形式帶領(lǐng)用戶一同探索產(chǎn)品的7大特性，宏觀和微觀都照顧周全。



4.總結(jié)報告型

自從支付寶的十年賬單引發(fā)熱議后，各大企業(yè)的年終總結(jié)現(xiàn)也熱衷于用H5技術(shù)實現(xiàn)，優(yōu)秀的互動體驗令原本乏味的總結(jié)報告有趣生動了起來。

《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就，視覺設(shè)計上采用簡潔的扁平風(fēng)插畫，加入紙面質(zhì)感形成復(fù)古卡片拼貼感。不同頁面間通過手指滑動實現(xiàn)流暢的視差滾動效果，最后還有劉總這個小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。



二．形式為功能服務(wù)

在確定了專題頁的功能目標(biāo)之后，接下來就是關(guān)鍵的設(shè)計階段了。如何有的放矢地進(jìn)行設(shè)計，需要考慮到具體的應(yīng)用場景和傳播對象，從用戶角度出發(fā)去思考什么樣的頁面是用戶最想看的最會去分享的。以下列舉幾種常見的H5專題頁表現(xiàn)形式：

1.簡單圖文

簡單圖文是早期最典型的H5專題頁形式。“圖”的形式千變?nèi)f化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質(zhì)量的內(nèi)容本身和講故事的能力。

滴滴打車這個案例就是典型的簡單圖文型H5專題頁，用幾張照片故事串起了整套頁面。視覺簡潔有力，采用整屏黑白照片，點綴以滴滴的品牌橙色。每切換一張圖片，文字就漸隱浮現(xiàn)，沒有其他互動形式，讓觀眾聚焦于內(nèi)容，通過陌生人之間的真情聯(lián)系來塑造品牌的正能量形象。


也有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅包的時刻，微信推出了《從此看盡中國人的名與利》這樣一個專題頁。第一眼就被鎮(zhèn)住了，好親切的RMB~每個頁面都是一張人民幣風(fēng)景局部放大圖，創(chuàng)作者加入巧妙的創(chuàng)意元素與微動態(tài)進(jìn)行細(xì)膩刻畫，帶觀眾走進(jìn)了人民幣的微觀世界。每一張鈔票圖案配合發(fā)人深省的文案，在推廣微信紅包的同時呼吁人們重新審視人情與名利的奧義。


2.禮物/賀卡/邀請函

每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達(dá)到品牌宣傳的目的。既然是禮物，那創(chuàng)意和制作便是重要的加分項。

AKQA創(chuàng)意營銷公司在圣誕之際獻(xiàn)上了一份厚禮——夢幻水晶球。通過移動手機(jī)，鏡頭從水晶球外不斷搖晃推近，漸漸走進(jìn)水晶球的微觀世界里。通過手機(jī)環(huán)顧四周，可以360度欣賞水晶球里的全景，搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友，相信一定會驚艷到對方。這個H5頁面使用了重力感應(yīng)、3D等技術(shù)，文字與BGM的使用也十分講究，給用戶帶來了完美的互動體驗，值得細(xì)細(xì)品味。


Evernote在過年期間也別出心裁地推出語音賀卡，通過公眾號引導(dǎo)用戶對其發(fā)送一條語音消息，然后把這條祝福語音結(jié)合中國風(fēng)動畫做成一張獨一無二的語音賀卡發(fā)送給朋友。整體色調(diào)也是以Evernote品牌色為主，同時蘊含著一絲優(yōu)雅的年味，十分討巧。


3.問答/評分/測試

問答形式的H5頁面也屢見不鮮了，利用用戶的求知欲和探索欲，一路選選選，看最后到底是什么成績。一條清晰的線索是必要的，最后到達(dá)的結(jié)果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。

與本文開頭一樣也是大眾點評的項目，這次是為姜文的電影《一步之遙》做持續(xù)推廣，讓用戶為姜文的代表作評分。視覺設(shè)計依舊出彩，開腦洞的創(chuàng)意和動畫設(shè)計令人叫絕（一定要掃一掃體驗下！）。延續(xù)了懷舊大字報風(fēng)格，字體、文案、裝飾元素等細(xì)節(jié)處理也十分用心。問答形式的H5頁面能做到這個份上也是蠻拼的。



4.游戲

從 “圍住神經(jīng)貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強(qiáng)，一度風(fēng)靡朋友圈，但創(chuàng)意缺乏和同質(zhì)化現(xiàn)象導(dǎo)致用戶對無腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設(shè)計上多下點功夫。

Same在圣誕節(jié)推出了一款名為《圣誕老人拯救計劃》的H5小游戲，操作非常簡單，只需用手指交替上滑，把角色的脖子向上拉到無限長，游戲會記錄你拉的最高距離，跟朋友比一比誰比較長。界面清新可愛，與Same的招牌畫風(fēng)一致，游戲角色也是Same的品牌角色，通過幽默惡搞的游戲向用戶傳達(dá)Same獨到有趣的產(chǎn)品文化。



三．為設(shè)計加分的4個要點

一個H5頁面設(shè)計品質(zhì)的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認(rèn)知。在這里總結(jié)出以下的設(shè)計要點：

1.細(xì)節(jié)與統(tǒng)一

要成就高品質(zhì)的用戶體驗，必須考慮到細(xì)節(jié)與整體的統(tǒng)一性。復(fù)古擬物的視覺風(fēng)格，那字體就不能過于現(xiàn)代；幽默調(diào)侃的調(diào)調(diào)，那文案措辭就不能過于嚴(yán)肅；打情感內(nèi)容牌的，動效就不能過于花哨。

大眾點評姜文電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了這一點。從二維碼入口到性感的loading頁，再到最后分享提示的設(shè)計，包括文案措辭和背景音效，無不與整體的戲虐風(fēng)保持一致，給到用戶一個完整統(tǒng)一的互動體驗。



尤其關(guān)注“分享提示”這個細(xì)節(jié)設(shè)計，比起一個簡單的箭頭和一句冷冰冰的“點這里分享”，用心的細(xì)節(jié)設(shè)計帶來的高品質(zhì)和好感度是顯而易見的。再貼幾個精彩案例：



2.緊跟熱點，利用話題效應(yīng)

想要你的H5專題頁一夜爆紅，第一時間抓住熱點并火速上線，借機(jī)進(jìn)行品牌宣傳也不失為一條捷徑。

天天P圖抓住武則天熱播的契機(jī)推出了風(fēng)靡海內(nèi)外的媚娘妝，同時《全民COS武媚娘》的H5互動頁也第一時間上線，操作簡單易上手，一鍵上傳照片就能立刻完成媚娘妝，與萬千媚娘們進(jìn)行PK，娛樂了大眾又推廣了產(chǎn)品。



網(wǎng)易娛樂在武媚娘剪胸風(fēng)波的風(fēng)口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁，放下節(jié)操用極富想象力的粗曠草圖風(fēng)向廣大觀眾“還原”了真相。一時間被瘋狂轉(zhuǎn)發(fā)，網(wǎng)易娛樂也算是順勢自我宣傳了一把。



3.講個好故事，引發(fā)情感共鳴

不論H5的形式如何多變，有價值的內(nèi)容始終是第一位的。在有限的篇幅里，學(xué)會講故事，引發(fā)用戶的情感共鳴，將對內(nèi)容的傳播形成極大的推動。

LEVI’S新年優(yōu)惠活動專題頁以第一人稱的口吻，用小時候簡樸卻熱鬧的新年與長大后富足卻乏味的新年做對比，用手繪風(fēng)渲染出親切的懷舊氛圍。最后引出“這個新年，把壓力和束縛打包扔掉，用新鮮的眼光感受生活，一起活出趣”的品牌推廣slogan，代入感極強(qiáng)的故事無疑是驅(qū)動分享的源動力。



4.合理運用技術(shù)，打造流暢的互動體驗

隨著技術(shù)的發(fā)展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現(xiàn)繪圖、擦除、搖一搖、重力感應(yīng)、擦除、3D視圖等互動效果。相較于塞入各種不同種類的動效導(dǎo)致頁面混亂臃腫，我們更提倡的是合理運用技術(shù)，用心專注于為用戶提供流暢的互動體驗。

典型的案例是淘寶在雙12推出的預(yù)售推廣H5專題頁。在瀏覽過程中我只使用了一種向上滑動的手勢，而頁面呈現(xiàn)出來的效果卻猶如一個流暢的動態(tài)GIF。設(shè)計師巧妙利用圖形設(shè)計與組合，在滑動過程中營造出一種豐富的視差滾動效果，單個圖形元素的遮罩、旋轉(zhuǎn)與整體頁面的動勢配合極為默契。


尚品中國總結(jié)：隨著手機(jī)硬件的升級、HTML5技術(shù)的發(fā)展以及微信平臺的開放，HTML5的跨平臺、低成本、快迭代等優(yōu)勢被進(jìn)一步凸顯，這對身處于移動互聯(lián)網(wǎng)大潮的企業(yè)主、品牌、設(shè)計師和開發(fā)者來說，都將是一個最好的時代。未來必將涌現(xiàn)更多優(yōu)秀的H5頁面，讓我們拭目以待。