H5頁(yè)面設(shè)計(jì)是什么意思？以下內(nèi)容由推來(lái)客網(wǎng)站制作公司分享：

H5指的是第五代HTML，即所謂的HTML5，也泛指所有用H5語(yǔ)言制作的數(shù)字產(chǎn)品。所謂HTML是“超文本標(biāo)記語(yǔ)言”的縮寫(xiě)。我們?cè)诰W(wǎng)上看到的大多數(shù)網(wǎng)頁(yè)都是用HTML 編寫(xiě)的。 “超文本”是指一個(gè)頁(yè)面可以包含圖片、鏈接甚至音樂(lè)和程序等非文本元素。而“標(biāo)記”是指這些超文本必須由包含屬性的開(kāi)始和結(jié)束標(biāo)志來(lái)標(biāo)記。瀏覽器可以通過(guò)解碼HTML來(lái)顯示網(wǎng)頁(yè)內(nèi)容，這也構(gòu)成了互聯(lián)網(wǎng)興起的基礎(chǔ)。

HTML第一版于1991年開(kāi)發(fā)，1993年發(fā)布，本來(lái)HTML應(yīng)該每隔一段時(shí)間就更新一次，但自從1999年12月發(fā)布HTML4.01后，就再也沒(méi)有更新過(guò)。接下來(lái)的十年間，互聯(lián)網(wǎng)行業(yè)發(fā)生了翻天覆地的變化，人們逐漸意識(shí)到原來(lái)的HTML已經(jīng)不能適應(yīng)互聯(lián)網(wǎng)的發(fā)展。這時(shí)，有兩個(gè)組織提出了新的解決方案：WHATWG和W3C。前者開(kāi)發(fā)了Web Applications 1.0，后者開(kāi)發(fā)了XHTML2.0。 2006年，雙方?jīng)Q定合作打造新一代HTML，即H5。

自2008年發(fā)布草案以來(lái)，H5并沒(méi)有引起廣泛關(guān)注，而是進(jìn)入了一個(gè)長(zhǎng)期的迭代優(yōu)化周期。直到去年10月，W3C終于宣布，經(jīng)過(guò)8年的努力，終于制定了HTML5標(biāo)準(zhǔn)規(guī)范，并向全世界開(kāi)放。 H5標(biāo)準(zhǔn)規(guī)范的開(kāi)放注定會(huì)成為一個(gè)劃時(shí)代的事件，H5工具也逐漸展現(xiàn)出自己的光彩。例如，無(wú)需編寫(xiě)代碼即可可視化生產(chǎn)的H5生產(chǎn)工具交互大師就受到了各方的關(guān)注。

H5之所以能造成如此廣泛的影響，是因?yàn)樗辉僦皇且环N標(biāo)記語(yǔ)言。它為下一代互聯(lián)網(wǎng)提供了一個(gè)新的框架和平臺(tái)。像H5工具交互大師，提供免插件音視頻、圖片動(dòng)畫(huà)、本地存儲(chǔ)等更炫酷重要的功能，并將這些應(yīng)用標(biāo)準(zhǔn)化開(kāi)放，讓互聯(lián)網(wǎng)輕松實(shí)現(xiàn)桌面級(jí)應(yīng)用體驗(yàn).

H5最顯著的優(yōu)勢(shì)在于它的跨平臺(tái)性：例如用Interactive Master構(gòu)建的站點(diǎn)和應(yīng)用程序可以兼容PC和移動(dòng)、Windows和Linux、Android和IOS。可以方便的移植到各種開(kāi)放平臺(tái)和應(yīng)用平臺(tái)，打破了各自為政的局面。這種強(qiáng)大的兼容性可以顯著降低開(kāi)發(fā)和運(yùn)營(yíng)成本，使企業(yè)尤其是創(chuàng)業(yè)者獲得更多的發(fā)展機(jī)會(huì)。

此外，H5的本地存儲(chǔ)特性也為用戶帶來(lái)了更多便利；基于H5開(kāi)發(fā)的輕應(yīng)用比本地APP啟動(dòng)時(shí)間更短，聯(lián)網(wǎng)速度更快，而且不需要下載和占用存儲(chǔ)空間，特別適用于手機(jī)等移動(dòng)媒體。 Interactive Master 允許開(kāi)發(fā)者在不依賴第三方瀏覽器插件的情況下創(chuàng)建高級(jí)圖形、布局、動(dòng)畫(huà)和過(guò)渡效果，這也讓用戶以更少的流量享受炫酷的視覺(jué)和聽(tīng)覺(jué)效果。介紹完HTML5是什么之后，再讓大家欣賞一下HTML5的設(shè)計(jì)案例吧：1.活動(dòng)運(yùn)營(yíng)型

為活動(dòng)宣傳運(yùn)營(yíng)而打造的H5頁(yè)面是最常見(jiàn)的類型，形式多樣，包括游戲、請(qǐng)柬、賀卡、試題等。不同于以往簡(jiǎn)單的靜態(tài)廣告圖片傳播，如今的H5活動(dòng)運(yùn)營(yíng)頁(yè)面需要以更強(qiáng)的交互性、更高的質(zhì)量、更有話題性的設(shè)計(jì)來(lái)促進(jìn)用戶的分享和傳播。從進(jìn)入微信H5頁(yè)面，到最終登陸品牌APP內(nèi)部，如何設(shè)計(jì)合適的引流路徑也相當(dāng)重要。

大眾點(diǎn)評(píng)為電影《狂怒》設(shè)計(jì)的宣傳頁(yè)深諳此道。復(fù)古的擬物化視覺(jué)設(shè)計(jì)吸睛，有質(zhì)感的舊票根、閃爍的霓虹燈、幽默的動(dòng)畫(huà)和音效。你迫不及待地點(diǎn)擊每一個(gè)選項(xiàng)。圍繞“選擇”這一品牌關(guān)鍵詞，以引人入勝的試題，讓用戶選擇自己的人生大片。最后一題引出“大眾點(diǎn)評(píng)選座位看電影”，一鍵直達(dá)app購(gòu)票頁(yè)面。雖然知道是軟文，但還是懷著“短油不錯(cuò)，這個(gè)頁(yè)面有點(diǎn)屌”的心情忍不住點(diǎn)了分享。

2.品牌宣傳型

與時(shí)效性強(qiáng)的活動(dòng)運(yùn)營(yíng)頁(yè)面不同，品牌推廣H5頁(yè)面相當(dāng)于一個(gè)品牌的微官網(wǎng)，更傾向于塑造品牌形象，向用戶傳遞品牌的精神態(tài)度。在設(shè)計(jì)方面，需要運(yùn)用符合品牌氣質(zhì)的視覺(jué)語(yǔ)言，讓用戶對(duì)品牌留下深刻的印象。

伴隨著浪漫的鋼琴旋律，《首草老師的情書(shū)》以男人的聲音講述了自己在成長(zhǎng)過(guò)程中對(duì)妻子的愛(ài)與愧疚，最后引出了“第一草——養(yǎng)陰，心愛(ài)之人的首選”的口號(hào)妻子”。設(shè)計(jì)采用回憶般的黑白色調(diào)，簡(jiǎn)單的照片加文字，搭配花瓣飄落、水波紋等輕動(dòng)畫(huà)，渲染出唯美優(yōu)雅的氛圍。全新高端養(yǎng)生草藥品牌“壽草”，用H5打出發(fā)自內(nèi)心的情感品牌，讓用戶記住“只為你半生”的愛(ài)妻品牌形象。

9032.jpg" width="590" />

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

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

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



4.總結(jié)報(bào)告型

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

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



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

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

1.簡(jiǎn)單圖文

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

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


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


2.禮物/賀卡/邀請(qǐng)函

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

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


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


3.問(wèn)答/評(píng)分/測(cè)試

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

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



4.游戲

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

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



三．為設(shè)計(jì)加分的4個(gè)要點(diǎn)

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

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

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

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



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



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

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

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



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



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

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

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



4.合理運(yùn)用技術(shù)，打造流暢的互動(dòng)體驗(yàn)

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

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


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

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！