- 簡(jiǎn)體
- 簡(jiǎn)體中文 English
H5頁(yè)面設(shè)計(jì)是什么?
H5是指第5代HTML,就是所謂的HTML5,也指用H5語(yǔ)言制作的一切數(shù)字產(chǎn)品。所謂HTML是“超文本標(biāo)記語(yǔ)言”的英文縮寫。我們上網(wǎng)所看到網(wǎng)頁(yè),多數(shù)都是由HTML寫成的。“超文本”是指頁(yè)面內(nèi)可以包含圖片、鏈接,甚至音樂、程序等非文字元素。而“標(biāo)記”指的是這些超文本必須由包含屬性的開頭與結(jié)尾標(biāo)志來標(biāo)記。瀏覽器通過解碼HTML,就可以把網(wǎng)頁(yè)內(nèi)容顯示出來,它也構(gòu)成了互聯(lián)網(wǎng)興起的基礎(chǔ)。
HTML的第一版1991年開始研發(fā),1993年發(fā)布。本來每隔一段時(shí)間HTML都應(yīng)該進(jìn)行更新,但是自1999年12月HTML4.01發(fā)布以來,就再也沒有更新。此后的十多年,互聯(lián)網(wǎng)行業(yè)發(fā)生了翻天覆地的變化,人們逐漸意識(shí)到原有的HTML已經(jīng)不能適應(yīng)互聯(lián)網(wǎng)的發(fā)展了。這時(shí)出現(xiàn)了兩個(gè)組織分別提出了新的方案: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)入了長(zhǎng)期的迭代優(yōu)化周期。直到去年10月W3C終于宣布,經(jīng)過長(zhǎng)達(dá)8年的努力,HTML5標(biāo)準(zhǔn)規(guī)范最終制定完成并向全世界開放。H5標(biāo)準(zhǔn)規(guī)范的開放注定成為一個(gè)劃時(shí)代意義的事件,H5工具也漸露光芒,比如能可視化制作,不需要寫代碼的H5制作工具互動(dòng)大師就受到了各方的關(guān)注。
H5之所以能引發(fā)如此廣泛的效應(yīng),根本在于它不再只是一種標(biāo)記語(yǔ)言,它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺(tái),像H5工具互動(dòng)大師提供免插件的音視頻、圖像動(dòng)畫、本地存儲(chǔ)以及更多酷炫而且重要的功能,并使這些應(yīng)用標(biāo)準(zhǔn)化和開放化,從而使互聯(lián)網(wǎng)也能夠輕松實(shí)現(xiàn)類似桌面的應(yīng)用體驗(yàn)。
H5的最顯著的優(yōu)勢(shì)在于跨平臺(tái)性:比如用互動(dòng)大師搭建的站點(diǎn)與應(yīng)用可以兼容PC端與移動(dòng)端、Windows與Linux、安卓與IOS。它可以輕易地移植到各種不同的開放平臺(tái)、應(yīng)用平臺(tái)上,打破各自為政的局面。這種強(qiáng)大的兼容性可以顯著地降低開發(fā)與運(yùn)營(yíng)成本,可以讓企業(yè)特別是創(chuàng)業(yè)者獲得更多的發(fā)展機(jī)遇。
此外,H5的本地存儲(chǔ)特性也給使用者帶來了更多便利;基于H5開發(fā)的輕應(yīng)用比本地APP擁有更短的啟動(dòng)時(shí)間,更快的聯(lián)網(wǎng)速度,而且無需下載占用存儲(chǔ)空間,特別適合手機(jī)等移動(dòng)媒體。而互動(dòng)大師讓開發(fā)者無需依賴第三方瀏覽器插件即可創(chuàng)建高級(jí)圖形、版式、動(dòng)畫以及過渡效果,這也使得用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果。
介紹完HTML5是什么之后,再讓大家欣賞一下HTML5的設(shè)計(jì)案例吧:
1.活動(dòng)運(yùn)營(yíng)型
為活動(dòng)推廣運(yùn)營(yíng)而打造的H5頁(yè)面是最常見的類型,形式多變,包括游戲、邀請(qǐng)函、賀卡、測(cè)試題等形式。與以往簡(jiǎn)單的靜態(tài)廣告圖片傳播不同,如今的H5活動(dòng)運(yùn)營(yíng)頁(yè)需要有更強(qiáng)的互動(dòng)、更高質(zhì)量、更具話題性的設(shè)計(jì)來促成用戶分享傳播。從進(jìn)入微信H5頁(yè)面到最后落地到品牌App內(nèi)部,如何設(shè)計(jì)一套合適的引流路線也頗為重要。
大眾點(diǎn)評(píng)為電影《狂怒》設(shè)計(jì)的推廣頁(yè)便深諳此道。復(fù)古擬物風(fēng)格的視覺設(shè)計(jì)讓人眼前一亮,富有質(zhì)感的舊票根、忽閃的霓虹燈,配以幽默的動(dòng)畫與音效,恨不得每個(gè)選項(xiàng)都點(diǎn)一遍。圍繞“選擇”這個(gè)品牌關(guān)鍵詞,用引人入勝的測(cè)試題讓用戶把人生當(dāng)作大片來選擇,選到最后一題引出“大眾點(diǎn)評(píng)選座看電影”,一鍵直達(dá)App購(gòu)票頁(yè)面。即使明知是軟文也忍不住帶著“矮油不錯(cuò),這個(gè)頁(yè)面有點(diǎn)diao噢”的心情點(diǎn)擊了分享。
2.品牌宣傳型
不同于講究時(shí)效性的活動(dòng)運(yùn)營(yíng)頁(yè),品牌宣傳型H5頁(yè)面等同于一個(gè)品牌的微官網(wǎng),更傾向于品牌形象塑造,向用戶傳達(dá)品牌的精神態(tài)度。在設(shè)計(jì)上需要運(yùn)用符合品牌氣質(zhì)的視覺語(yǔ)言,讓用戶對(duì)品牌留下深刻印象。
伴隨著浪漫的鋼琴旋律,《首草先生的情書》以一位男士的口吻娓娓道來在成長(zhǎng)歷程中對(duì)妻子的愛與愧疚,最后引出“首草——滋陰圣品,愛妻首選”的宣傳語(yǔ)。設(shè)計(jì)上采用回憶般的黑白色調(diào),簡(jiǎn)單的照片加文字,配以花瓣掉落、水面漣漪等輕動(dòng)畫,渲染出唯美優(yōu)雅的氣氛。“首草”這個(gè)全新的高端養(yǎng)生草藥品牌,用H5打出了一副走心的情感牌,讓用戶記住了“半生只為你”的愛妻品牌形象。
3.產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹,運(yùn)用H5的互動(dòng)技術(shù)優(yōu)勢(shì)盡情展示產(chǎn)品特性,吸引用戶買買買。
這一類型的H5頁(yè)面多見于汽車品牌,LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細(xì)膩的光效營(yíng)造出酷炫的視覺風(fēng)格。用手指跟隨光的軌跡切割畫面揭開序幕,通過合理優(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)了起來。
《京東的十大任性》用10張橫屏頁(yè)面講述了京東在2014年的十大成就,視覺設(shè)計(jì)上采用簡(jiǎn)潔的扁平風(fēng)插畫,加入紙面質(zhì)感形成復(fù)古卡片拼貼感。不同頁(yè)面間通過手指滑動(dòng)實(shí)現(xiàn)流暢的視差滾動(dòng)效果,最后還有劉總這個(gè)小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。
二.形式為功能服務(wù)
在確定了專題頁(yè)的功能目標(biāo)之后,接下來就是關(guān)鍵的設(shè)計(jì)階段了。如何有的放矢地進(jìn)行設(shè)計(jì),需要考慮到具體的應(yīng)用場(chǎng)景和傳播對(duì)象,從用戶角度出發(fā)去思考什么樣的頁(yè)面是用戶最想看的最會(huì)去分享的。以下列舉幾種常見的H5專題頁(yè)表現(xiàn)形式:
1.簡(jiǎn)單圖文
簡(jiǎn)單圖文是早期最典型的H5專題頁(yè)形式。“圖”的形式千變?nèi)f化,可以是照片、插畫、GIF等。通過翻頁(yè)等簡(jiǎn)單的交互操作,起到類似幻燈片的傳播效果??简?yàn)的是高質(zhì)量的內(nèi)容本身和講故事的能力。
滴滴打車這個(gè)案例就是典型的簡(jiǎn)單圖文型H5專題頁(yè),用幾張照片故事串起了整套頁(yè)面。視覺簡(jiǎn)潔有力,采用整屏黑白照片,點(diǎn)綴以滴滴的品牌橙色。每切換一張圖片,文字就漸隱浮現(xiàn),沒有其他互動(dòng)形式,讓觀眾聚焦于內(nèi)容,通過陌生人之間的真情聯(lián)系來塑造品牌的正能量形象。
也有不甘平淡的精彩案例。在除夕夜全國(guó)人民瘋狂搶紅包的時(shí)刻,微信推出了《從此看盡中國(guó)人的名與利》這樣一個(gè)專題頁(yè)。第一眼就被鎮(zhèn)住了,好親切的RMB~每個(gè)頁(yè)面都是一張人民幣風(fēng)景局部放大圖,創(chuàng)作者加入巧妙的創(chuàng)意元素與微動(dòng)態(tài)進(jìn)行細(xì)膩刻畫,帶觀眾走進(jìn)了人民幣的微觀世界。每一張鈔票圖案配合發(fā)人深省的文案,在推廣微信紅包的同時(shí)呼吁人們重新審視人情與名利的奧義。
2.禮物/賀卡/邀請(qǐng)函
每個(gè)人都喜歡收到禮物的感覺,抓住這一心理,品牌推出了各種H5形式的禮物、賀卡、邀請(qǐng)函,通過提升用戶好感度來潛移默化地達(dá)到品牌宣傳的目的。既然是禮物,那創(chuàng)意和制作便是重要的加分項(xiàng)。
AKQA創(chuàng)意營(yíng)銷公司在圣誕之際獻(xiàn)上了一份厚禮——夢(mèng)幻水晶球。通過移動(dòng)手機(jī),鏡頭從水晶球外不斷搖晃推近,漸漸走進(jìn)水晶球的微觀世界里。通過手機(jī)環(huán)顧四周,可以360度欣賞水晶球里的全景,搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友,相信一定會(huì)驚艷到對(duì)方。這個(gè)H5頁(yè)面使用了重力感應(yīng)、3D等技術(shù),文字與BGM的使用也十分講究,給用戶帶來了完美的互動(dòng)體驗(yàn),值得細(xì)細(xì)品味。
Evernote在過年期間也別出心裁地推出語(yǔ)音賀卡,通過公眾號(hào)引導(dǎo)用戶對(duì)其發(fā)送一條語(yǔ)音消息,然后把這條祝福語(yǔ)音結(jié)合中國(guó)風(fēng)動(dòng)畫做成一張獨(dú)一無二的語(yǔ)音賀卡發(fā)送給朋友。整體色調(diào)也是以Evernote品牌色為主,同時(shí)蘊(yùn)含著一絲優(yōu)雅的年味,十分討巧。
3.問答/評(píng)分/測(cè)試
問答形式的H5頁(yè)面也屢見不鮮了,利用用戶的求知欲和探索欲,一路選選選,看最后到底是什么成績(jī)。一條清晰的線索是必要的,最后到達(dá)的結(jié)果頁(yè)也需要合理不突兀,如果能輔以出彩的視覺和文案,弱化答題的枯燥感那就再好不過了。
與本文開頭一樣也是大眾點(diǎn)評(píng)的項(xiàng)目,這次是為姜文的電影《一步之遙》做持續(xù)推廣,讓用戶為姜文的代表作評(píng)分。視覺設(shè)計(jì)依舊出彩,開腦洞的創(chuàng)意和動(dòng)畫設(shè)計(jì)令人叫絕(一定要掃一掃體驗(yàn)下?。?。延續(xù)了懷舊大字報(bào)風(fēng)格,字體、文案、裝飾元素等細(xì)節(jié)處理也十分用心。問答形式的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ì)無腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播,需要在玩法和設(shè)計(jì)上多下點(diǎn)功夫。
Same在圣誕節(jié)推出了一款名為《圣誕老人拯救計(jì)劃》的H5小游戲,操作非常簡(jiǎn)單,只需用手指交替上滑,把角色的脖子向上拉到無限長(zhǎng),游戲會(huì)記錄你拉的最高距離,跟朋友比一比誰比較長(zhǎng)。界面清新可愛,與Same的招牌畫風(fēng)一致,游戲角色也是Same的品牌角色,通過幽默惡搞的游戲向用戶傳達(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ù)古擬物的視覺風(fēng)格,那字體就不能過于現(xiàn)代;幽默調(diào)侃的調(diào)調(diào),那文案措辭就不能過于嚴(yán)肅;打情感內(nèi)容牌的,動(dòng)效就不能過于花哨。
大眾點(diǎn)評(píng)姜文電影推廣系列的《九步之遙》H5專題頁(yè)便牢牢抓住了這一點(diǎn)。從二維碼入口到性感的loading頁(yè),再到最后分享提示的設(shè)計(jì),包括文案措辭和背景音效,無不與整體的戲虐風(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ì)帶來的高品質(zhì)和好感度是顯而易見的。再貼幾個(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)單易上手,一鍵上傳照片就能立刻完成媚娘妝,與萬千媚娘們進(jìn)行PK,娛樂了大眾又推廣了產(chǎn)品。
網(wǎng)易娛樂在武媚娘剪胸風(fēng)波的風(fēng)口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁(yè),放下節(jié)操用極富想象力的粗曠草圖風(fēng)向廣大觀眾“還原”了真相。一時(shí)間被瘋狂轉(zhuǎn)發(fā),網(wǎng)易娛樂也算是順勢(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)的故事無疑是驅(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è)。在瀏覽過程中我只使用了一種向上滑動(dòng)的手勢(shì),而頁(yè)面呈現(xiàn)出來的效果卻猶如一個(gè)流暢的動(dòng)態(tài)GIF。設(shè)計(jì)師巧妙利用圖形設(shè)計(jì)與組合,在滑動(dòng)過程中營(yíng)造出一種豐富的視差滾動(dòng)效果,單個(gè)圖形元素的遮罩、旋轉(zhuǎn)與整體頁(yè)面的動(dòng)勢(shì)配合極為默契。
尚品中國(guó)總結(jié):隨著手機(jī)硬件的升級(jí)、HTML5技術(shù)的發(fā)展以及微信平臺(tái)的開放,HTML5的跨平臺(tái)、低成本、快迭代等優(yōu)勢(shì)被進(jìn)一步凸顯,這對(duì)身處于移動(dòng)互聯(lián)網(wǎng)大潮的企業(yè)主、品牌、設(shè)計(jì)師和開發(fā)者來說,都將是一個(gè)最好的時(shí)代。未來必將涌現(xiàn)更多優(yōu)秀的H5頁(yè)面,讓我們拭目以待。
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁(yè)面設(shè)計(jì)風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計(jì)開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽(yáng)網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機(jī)端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計(jì)
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
網(wǎng)絡(luò)營(yíng)銷與相關(guān)學(xué)科
網(wǎng)站制作公司尚品中國(guó):網(wǎng)絡(luò)營(yíng)銷作為一個(gè)誕生不久的交叉專業(yè)領(lǐng)域,目前已經(jīng)...
2012-08-21 -
網(wǎng)站建設(shè)的制作與調(diào)查
一、 搜索引擎的介紹最近的學(xué)習(xí)與研究發(fā)現(xiàn)(www.sino-web.n...
2012-04-13 -
北京網(wǎng)站建設(shè)中網(wǎng)站優(yōu)化容易被忽略的部分是什么?
今天就不說網(wǎng)站上關(guān)鍵詞的排名了。今天就來說說seo優(yōu)化過程中容易忽略的...
2021-09-27 -
網(wǎng)絡(luò)證券:虛擬化的先導(dǎo)
為什么網(wǎng)絡(luò)證券會(huì)有如此迅速的發(fā)展?為什么在互聯(lián)網(wǎng)狀況調(diào)查中,會(huì)有高達(dá)5...
2014-09-11 -
集團(tuán)網(wǎng)站建設(shè)如何才能更體現(xiàn)集團(tuán)的全面實(shí)力?
對(duì)于網(wǎng)站建設(shè),相信許多朋友都不會(huì)覺得陌生,特別是近幾年來,隨著科技的...
2023-02-07 -
都有哪些你不知道的網(wǎng)頁(yè)設(shè)計(jì)師基礎(chǔ)技能
迅速發(fā)展趨勢(shì)的技術(shù)應(yīng)用、千姿百態(tài)的發(fā)展趨勢(shì)、數(shù)不勝數(shù)的軟件和素材,全部...
2019-09-17
預(yù)約專業(yè)咨詢顧問溝通!
免責(zé)聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請(qǐng)您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動(dòng)。
2、本站不承擔(dān)用戶因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國(guó)家有關(guān)法律法規(guī),當(dāng)本聲明與國(guó)家法律法規(guī)沖突時(shí),以國(guó)家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請(qǐng)您及時(shí)與我們,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com