從(cong)2014下半年起(qi),各(ge)種H5游(you)戲和(he)專題頁紛紛嶄露頭角(jiao)。“H5”,這(zhe)個(ge)(ge)由HTML5簡化而來(lai)的詞匯,借由微信這(zhe)個(ge)(ge)移(yi)動(dong)社交(jiao)平臺,正在(zai)走進(jin)更(geng)多人的視(shi)野。本(ben)文聚焦于基于微信傳播的H5頁面的視(shi)覺設計(ji),通過一些案例分析來(lai)談談設計(ji)思(si)路(lu)與(yu)方法,希望與(yu)大家(jia)進(jin)行(xing)交(jiao)流探討。
H5原本是一種制作萬維網頁面的標準計算機語言,由HTML5簡化而來的詞匯,HTML5的設計目的是為了(le)在移動設備上(shang)支持(chi)多媒體。由(you)于(yu)微信(xin)迅速的崛起,H5語言編寫的界面和(he)微信(xin)瀏覽器比較兼(jian)容,借由(you)微信(xin)移動社(she)交(jiao)平臺,走進大(da)家(jia)的視野,也開始越來越火。
首先從功能與設計目標來看, H5專題頁面主要有以類型(xing):活動運(yun)營型(xing)、品(pin)牌(pai)宣傳型(xing)、產品(pin)介(jie)紹型(xing)、總結報告(gao)型(xing)、賀(he)卡邀(yao)請函型(xing)、職位招聘型(xing)、故事(shi)講述(shu)型(xing)、教學教程(cheng)型(xing)。
為活動(dong)推廣運營(ying)而打造(zao)的(de)(de)(de)H5頁面是(shi)最常見的(de)(de)(de)類型,形(xing)式多變(bian),包括游戲、邀請(qing)函(han)、賀卡、測(ce)試題(ti)等形(xing)式。與以往簡單的(de)(de)(de)靜態廣告圖片傳(chuan)播不同(tong),如(ru)(ru)今的(de)(de)(de)H5活動(dong)運營(ying)頁需(xu)要(yao)有更(geng)強的(de)(de)(de)互動(dong)、更(geng)高質量(liang)、更(geng)具話題(ti)性的(de)(de)(de)設計(ji)來(lai)促成用(yong)戶分享傳(chuan)播。從進入微信H5頁面到最后落(luo)地(di)到品牌App內(nei)部,如(ru)(ru)何設計(ji)一套合適(shi)的(de)(de)(de)引流路線也頗為重要(yao)。
大眾點(dian)評為(wei)電影《狂怒》設計的(de)(de)推廣(guang)頁便(bian)深諳此道。復古擬物(wu)風(feng)格的(de)(de)視(shi)覺(jue)設計讓人眼前一亮,富有質感的(de)(de)舊票(piao)(piao)根、忽閃(shan)的(de)(de)霓虹(hong)燈,配以幽默(mo)的(de)(de)動畫與音效(xiao),恨不(bu)(bu)得(de)每個選項都點(dian)一遍。圍繞“選擇”這個品牌關鍵詞,用引人入勝(sheng)的(de)(de)測試題讓用戶把(ba)人生當作大片來選擇,選到最后一題引出“大眾點(dian)評選座看(kan)電影”,一鍵直達App購(gou)票(piao)(piao)頁面。即使明知(zhi)是軟文也忍不(bu)(bu)住帶著“矮油不(bu)(bu)錯,這個頁面有點(dian)diao噢”的(de)(de)心情點(dian)擊(ji)了分享。
不同(tong)于講(jiang)究時效性的活動運(yun)營(ying)頁,品(pin)牌(pai)(pai)宣傳型(xing)H5頁面等同(tong)于一個品(pin)牌(pai)(pai)的微官網,更傾向于品(pin)牌(pai)(pai)形象(xiang)塑造,向用(yong)戶傳達品(pin)牌(pai)(pai)的精神態度。在設(she)計上(shang)需(xu)要(yao)運(yun)用(yong)符合品(pin)牌(pai)(pai)氣質的視(shi)覺(jue)語言(yan),讓用(yong)戶對品(pin)牌(pai)(pai)留下深(shen)刻印象(xiang)。
伴隨(sui)著(zhu)浪(lang)漫的(de)(de)(de)鋼琴旋律,《首草先(xian)生的(de)(de)(de)情書》以(yi)一位男士(shi)的(de)(de)(de)口吻娓娓道來在成長歷(li)程(cheng)中對妻(qi)子的(de)(de)(de)愛(ai)與愧疚,最(zui)后引出“首草——滋陰(yin)圣品(pin),愛(ai)妻(qi)首選”的(de)(de)(de)宣傳語。設計上(shang)采用回憶(yi)般的(de)(de)(de)黑白(bai)色調,簡單(dan)的(de)(de)(de)照片加文字(zi),配以(yi)花(hua)瓣掉落、水面漣漪等(deng)輕動畫,渲染出唯美(mei)優雅的(de)(de)(de)氣氛(fen)。“首草”這(zhe)個全(quan)新(xin)的(de)(de)(de)高端養生草藥品(pin)牌,用H5打出了一副走心的(de)(de)(de)情感牌,讓用戶記住了“半(ban)生只(zhi)為(wei)你”的(de)(de)(de)愛(ai)妻(qi)品(pin)牌形(xing)象。
聚(ju)焦于產品功能(neng)介紹,運(yun)用(yong)H5的互動技術優勢盡情展(zhan)示產品特性,吸(xi)引用(yong)戶(hu)買買買。
這一類(lei)型的H5頁(ye)面(mian)多見(jian)于汽車品牌,LEXUS NX是其中(zhong)的優秀代表案(an)例。精致(zhi)和(he)極富質感的建模(mo)、細(xi)膩的光效營造出酷炫的視覺風(feng)格。用(yong)手指跟隨光的軌跡切割畫(hua)面(mian)揭開序幕(mu),通(tong)過合理優雅的觸碰、摩擦、滑動(dong)等互動(dong)形式(shi)帶(dai)領用(yong)戶一同探索(suo)產品的7大特性,宏觀和(he)微觀都照顧周全。
自從的(de)(de)十年(nian)賬單引發熱議后(hou),各(ge)大企業的(de)(de)年(nian)終總結(jie)現也(ye)熱衷于用H5技術實現,優秀的(de)(de)互動體(ti)驗令原本乏味的(de)(de)總結(jie)報告有趣生(sheng)動了起來。
《京東的十大(da)(da)(da)任性》用(yong)10張橫屏頁面講述了京東在2014年(nian)的十大(da)(da)(da)成(cheng)就(jiu),視(shi)覺設(she)計上采(cai)用(yong)簡潔的扁平風(feng)插畫,加入(ru)紙(zhi)面質感形成(cheng)復古卡片拼貼(tie)感。不(bu)同頁面間通過手指滑(hua)動實現流暢的視(shi)差滾動效果,最后(hou)還有(you)劉總這個小(xiao)彩蛋。一(yi)口(kou)氣(qi)看(kan)完后(hou)大(da)(da)(da)概就(jiu)了解2014年(nian)京東都干(gan)了哪些大(da)(da)(da)事。
每(mei)個人都(dou)喜歡收到(dao)(dao)賀(he)卡(ka)或(huo)邀(yao)請的(de)感(gan)覺,抓住(zhu)這一心理(li),品牌推出了各種(zhong)H5頁面形式(shi)的(de)禮物、賀(he)卡(ka)、邀(yao)請函,通過提升用戶(hu)好(hao)感(gan)度來潛移默化地(di)達到(dao)(dao)品牌宣(xuan)傳的(de)目的(de),在(zai)邀(yao)請的(de)同時也展(zhan)示了自己的(de)產(chan)品與品牌,可以(yi)一舉(ju)多得!
為了展(zhan)現自己獨特的芒(mang)果(guo)视频下载,招聘(pin)型H5已然成(cheng)為企業(ye)應(ying)該(gai)好好利用的擴音器。快速(su)分享QQ,微信,微博等,求職者一鍵報名,效(xiao)果(guo)數據隨時監控。(講故事、員工代(dai)言、簡單(dan)直白(bai))
講(jiang)個好(hao)故事,引發情感共鳴(ming),不論H5頁(ye)面的(de)形式如何(he)多(duo)變,有價值(zhi)的(de)內容始終是(shi)第一位的(de)。在有限的(de)篇幅里,學會講(jiang)故事,引發用戶(hu)的(de)情感共鳴(ming),將對內容的(de)傳播形成極大的(de)推動。
H5的翻(fan)頁形式,特別適合步驟式的教程(cheng)表現。一步一頁,通過滑動這種交互(hu)形式,可以加深對(dui)于步驟的理解(jie)和(he)認識,有著出人意料(liao)的學習效(xiao)果。
在確(que)定(ding)了專題頁(ye)的(de)(de)功(gong)能(neng)目(mu)標(biao)之后(hou),接下來就是關鍵(jian)的(de)(de)設計(ji)階段了。如何有的(de)(de)放矢地(di)進行設計(ji),需(xu)要考慮到具體的(de)(de)應用場景和傳播對象,從用戶(hu)角度(du)出發去思考什么樣的(de)(de)頁(ye)面(mian)是用戶(hu)最(zui)想看的(de)(de)最(zui)會(hui)去分享的(de)(de)。以(yi)下列(lie)舉(ju)幾種常見的(de)(de)H5專題頁(ye)表(biao)現形(xing)式:
簡(jian)單(dan)圖文是早期最典(dian)型的(de)(de)H5專題(ti)頁形式。“圖”的(de)(de)形式千變萬化,可以是照片、插畫、GIF等。通過翻頁等簡(jian)單(dan)的(de)(de)交互操(cao)作(zuo),起到類(lei)似幻燈片的(de)(de)傳播效果(guo)。考驗的(de)(de)是高質量的(de)(de)內(nei)容本身和講故事的(de)(de)能力。
滴(di)滴(di)打車這個案例就(jiu)是典型的(de)簡單圖(tu)(tu)文型H5專題頁,用(yong)幾張照(zhao)片(pian)故事串起了整套頁面。視覺簡潔(jie)有(you)力,采用(yong)整屏黑白(bai)照(zhao)片(pian),點綴以滴(di)滴(di)的(de)品(pin)牌(pai)橙色(se)。每(mei)切換一(yi)張圖(tu)(tu)片(pian),文字就(jiu)漸隱浮現(xian),沒有(you)其他互動形(xing)式,讓觀眾聚焦于內(nei)容,通(tong)過陌(mo)生人(ren)之間的(de)真情聯系來(lai)塑造品(pin)牌(pai)的(de)正能量形(xing)象。
也有不甘平淡的(de)(de)(de)精彩案(an)例。在(zai)除夕夜全(quan)國人(ren)(ren)民(min)瘋狂搶紅(hong)包(bao)的(de)(de)(de)時(shi)刻(ke),微(wei)信(xin)推出了《從(cong)此看(kan)盡中國人(ren)(ren)的(de)(de)(de)名與利》這(zhe)樣一(yi)個專題頁(ye)。第(di)一(yi)眼就(jiu)被鎮(zhen)住了,好親切的(de)(de)(de)RMB~每(mei)個頁(ye)面都(dou)是一(yi)張人(ren)(ren)民(min)幣(bi)風景局部放大圖,創作(zuo)者加入巧妙的(de)(de)(de)創意(yi)元(yuan)素與微(wei)動態(tai)進行細膩刻(ke)畫,帶(dai)觀眾走進了人(ren)(ren)民(min)幣(bi)的(de)(de)(de)微(wei)觀世(shi)界。每(mei)一(yi)張鈔票圖案(an)配合發人(ren)(ren)深省(sheng)的(de)(de)(de)文(wen)案(an),在(zai)推廣微(wei)信(xin)紅(hong)包(bao)的(de)(de)(de)同時(shi)呼吁人(ren)(ren)們(men)重新審(shen)視人(ren)(ren)情與名利的(de)(de)(de)奧義。
每個人都喜歡收到禮(li)物(wu)的(de)(de)感覺,抓(zhua)住這一心理,品(pin)牌(pai)推出(chu)了各種(zhong)H5形式的(de)(de)禮(li)物(wu)、賀卡、邀請函,通過(guo)提升(sheng)用(yong)戶好感度來(lai)潛移默(mo)化(hua)地達到品(pin)牌(pai)宣(xuan)傳的(de)(de)目的(de)(de)。既然是(shi)禮(li)物(wu),那創(chuang)意(yi)和制作(zuo)便是(shi)重要(yao)的(de)(de)加分項。
AKQA創意營銷公司在圣誕之際獻(xian)上(shang)了一份厚(hou)禮——夢幻水(shui)晶(jing)球(qiu)(qiu)。通過移(yi)動手機,鏡頭從(cong)水(shui)晶(jing)球(qiu)(qiu)外不(bu)斷搖晃推近,漸漸走進水(shui)晶(jing)球(qiu)(qiu)的(de)微觀世界(jie)里(li)。通過手機環顧(gu)四周,可以360度欣賞水(shui)晶(jing)球(qiu)(qiu)里(li)的(de)全景(jing),搖一搖雪花便(bian)漫天(tian)飄(piao)灑。寫下你的(de)祝福并分享給(gei)朋友,相信一定會驚艷(yan)到(dao)對方。這個H5頁面(mian)使用(yong)(yong)了重力感應、3D等技(ji)術,文字與BGM的(de)使用(yong)(yong)也十(shi)分講究,給(gei)用(yong)(yong)戶帶來(lai)了完(wan)美的(de)互動體(ti)驗,值(zhi)得細細品味(wei)。
Evernote在(zai)過年期間也別出(chu)心裁地推出(chu)語音(yin)賀(he)卡,通過公眾號引導用戶對其發送一(yi)條語音(yin)消息,然(ran)后把(ba)這條祝福(fu)語音(yin)結合中國風動畫做成一(yi)張獨(du)一(yi)無二的語音(yin)賀(he)卡發送給朋友(you)。整(zheng)體(ti)色調也是(shi)以(yi)Evernote品牌色為主(zhu),同時蘊(yun)含著一(yi)絲優雅的年味(wei),十分討(tao)巧。
問答形式(shi)的(de)H5頁面也(ye)屢(lv)見不鮮了,利用(yong)(yong)用(yong)(yong)戶(hu)的(de)求知欲和(he)探索(suo)欲,一路選選選,看最后(hou)到底(di)是(shi)(shi)什么成(cheng)績。一條清晰的(de)線索(suo)是(shi)(shi)必要的(de),最后(hou)到達的(de)結果頁也(ye)需要合理不突兀,如果能(neng)輔以出彩的(de)視覺和(he)文(wen)案(an),弱化答題的(de)枯燥感那就再好不過(guo)了。
與(yu)本文開(kai)頭一(yi)樣也(ye)是(shi)大眾點評(ping)的項目,這次是(shi)為姜(jiang)文的電(dian)影《一(yi)步之遙(yao)》做持續(xu)推廣,讓用戶為姜(jiang)文的代表(biao)作評(ping)分。視覺設計(ji)依舊出彩,開(kai)腦(nao)洞的創意和動畫設計(ji)令人(ren)叫絕(一(yi)定要掃(sao)一(yi)掃(sao)體驗下!)。延續(xu)了懷舊大字(zi)報風格,字(zi)體、文案、裝飾元(yuan)素等細節處理(li)也(ye)十分用心。問答形式的H5頁面能做到這個份上也(ye)是(shi)蠻拼的。
從 “圍住神(shen)經貓”、“看(kan)你有多色”等單純小(xiao)游(you)戲(xi)(xi)再到杜蕾斯“一夜N次(ci)郎(lang)”(即山寨(zhai)版(ban)“別踩(cai)白塊兒”)等品牌植入式小(xiao)游(you)戲(xi)(xi),H5游(you)戲(xi)(xi)因為操(cao)作簡(jian)單、競(jing)技(ji)性強,一度風(feng)靡朋友圈(quan),但創意缺(que)乏和(he)同(tong)質化現象導致用戶(hu)對無(wu)腦(nao)小(xiao)游(you)戲(xi)(xi)逐漸(jian)產(chan)生了厭倦。品牌要在(zai)游(you)戲(xi)(xi)上做到成功傳(chuan)播(bo),需要在(zai)玩(wan)法和(he)設計上多下點功夫(fu)。
Same在(zai)圣誕節推出了一(yi)款名為《圣誕老人拯(zheng)救(jiu)計劃》的(de)(de)(de)H5小游(you)戲(xi)(xi),操作非常簡單,只需(xu)用(yong)手指(zhi)交替上滑,把角色的(de)(de)(de)脖子(zi)向(xiang)(xiang)上拉到無限長,游(you)戲(xi)(xi)會記錄你拉的(de)(de)(de)最(zui)高距離,跟朋友(you)比(bi)一(yi)比(bi)誰比(bi)較長。界(jie)面清新可(ke)愛,與Same的(de)(de)(de)招(zhao)牌(pai)畫風一(yi)致,游(you)戲(xi)(xi)角色也是(shi)Same的(de)(de)(de)品(pin)牌(pai)角色,通(tong)過(guo)幽默惡搞的(de)(de)(de)游(you)戲(xi)(xi)向(xiang)(xiang)用(yong)戶傳(chuan)達Same獨到有(you)趣的(de)(de)(de)產(chan)品(pin)文化。
一個(ge)H5頁(ye)面設計品(pin)質(zhi)的(de)出(chu)眾與否,會直接影響(xiang)其傳播效果,甚至影響(xiang)到用戶對(dui)品(pin)牌(pai)形象(xiang)的(de)認知。在這里(li)總結出(chu)以(yi)下的(de)設計要點:
要(yao)成就(jiu)高品質(zhi)的用戶體(ti)驗,必須考(kao)慮(lv)到細節(jie)與整體(ti)的統一性。復古擬物的視(shi)覺(jue)風格,那(nei)(nei)字體(ti)就(jiu)不能過于(yu)現代;幽默(mo)調(diao)侃的調(diao)調(diao),那(nei)(nei)文案措辭就(jiu)不能過于(yu)嚴肅(su);打情(qing)感內容牌的,動效(xiao)就(jiu)不能過于(yu)花哨。
大眾點(dian)評姜文電影推廣系列的《九步(bu)之遙(yao)》H5專題頁便牢牢抓(zhua)住(zhu)了這一點(dian)。從(cong)二(er)維碼入口到(dao)性感的loading頁,再到(dao)最后(hou)分(fen)享提示的設計,包括文案措辭和背景音效,無不與整體的戲(xi)虐風保持一致(zhi),給到(dao)用戶一個完整統(tong)一的互動體驗。
尤其關注“分享提示”這個細節(jie)設計(ji),比起一(yi)個簡單(dan)的(de)箭頭和一(yi)句冷冰冰的(de)“點(dian)這里分享”,用心的(de)細節(jie)設計(ji)帶來的(de)高品質和好(hao)感(gan)度是顯而易見的(de)。再(zai)貼(tie)幾(ji)個精彩(cai)案例:
想要你(ni)的H5專題頁一夜爆紅,第一時間抓住熱點并火(huo)速(su)上線,借機進行品牌宣傳也不失為一條(tiao)捷徑。
天(tian)天(tian)P圖(tu)抓(zhua)住(zhu)武(wu)則天(tian)熱播(bo)的(de)契機推出了(le)風靡海內(nei)外的(de)媚(mei)娘妝,同時《全民COS武(wu)媚(mei)娘》的(de)H5互動頁也(ye)第一(yi)時間上(shang)線,操(cao)作簡單易上(shang)手,一(yi)鍵(jian)上(shang)傳照片就(jiu)能(neng)立(li)刻完成媚(mei)娘妝,與萬千媚(mei)娘們進(jin)行(xing)PK,娛樂了(le)大(da)眾(zhong)又推廣了(le)產品。
網(wang)易(yi)娛樂在武媚娘(niang)剪(jian)胸(xiong)風波的風口浪尖(jian)上推出了名為《神還(huan)原武媚娘(niang)被剪(jian)胸(xiong)真相》的H5專題(ti)頁(ye),放下節(jie)操用極(ji)富想象(xiang)力的粗曠(kuang)草圖風向廣大觀眾“還(huan)原”了真相。一(yi)時間被瘋狂轉發,網(wang)易(yi)娛樂也算是順勢自(zi)我(wo)宣傳了一(yi)把。
不論H5的(de)形式如何多變,有價(jia)值的(de)內容始終(zhong)是(shi)第一位的(de)。在有限的(de)篇幅里,學(xue)會講故事,引發用戶(hu)的(de)情感共(gong)鳴(ming),將對內容的(de)傳播形成極大(da)的(de)推(tui)動。
LEVI’S新年優惠活(huo)動專題頁以第一(yi)人(ren)稱的口吻,用(yong)小時候簡樸卻(que)熱鬧(nao)的新年與長大后(hou)富足卻(que)乏味的新年做對(dui)比,用(yong)手繪風渲染出(chu)(chu)親切的懷舊氛圍。最后(hou)引(yin)出(chu)(chu)“這個新年,把壓力(li)和束(shu)縛打包扔(reng)掉(diao),用(yong)新鮮(xian)的眼光感(gan)(gan)受生活(huo),一(yi)起活(huo)出(chu)(chu)趣(qu)”的品(pin)牌推廣slogan,代入感(gan)(gan)極強的故事無疑(yi)是驅(qu)動分享的源動力(li)。
隨著技(ji)術的(de)發展,如今(jin)的(de)HTML5擁(yong)有眾(zhong)多出彩的(de)特性,讓我們(men)能輕松實現繪圖、擦(ca)除、搖一搖、重力(li)感應、擦(ca)除、3D視(shi)圖等互(hu)(hu)動效(xiao)果。相較于(yu)(yu)塞入各(ge)種不同種類的(de)動效(xiao)導致頁面混亂臃腫,我們(men)更提倡的(de)是合理運用技(ji)術,用心專注(zhu)于(yu)(yu)為用戶提供流暢(chang)的(de)互(hu)(hu)動體驗。
典型(xing)的(de)(de)案例是在(zai)(zai)雙12推出的(de)(de)預售推廣H5專題頁(ye)(ye)。在(zai)(zai)瀏覽過程(cheng)(cheng)中我只使用(yong)了一(yi)種向上滑動(dong)(dong)的(de)(de)手(shou)勢,而(er)頁(ye)(ye)面呈現出來(lai)的(de)(de)效(xiao)果卻猶如(ru)一(yi)個流暢的(de)(de)動(dong)(dong)態GIF。設(she)計師巧妙利用(yong)圖(tu)形(xing)(xing)設(she)計與組(zu)合,在(zai)(zai)滑動(dong)(dong)過程(cheng)(cheng)中營造出一(yi)種豐富(fu)的(de)(de)視差滾(gun)動(dong)(dong)效(xiao)果,單個圖(tu)形(xing)(xing)元素的(de)(de)遮(zhe)罩、旋轉與整體頁(ye)(ye)面的(de)(de)動(dong)(dong)勢配(pei)合極為(wei)默(mo)契。
隨著(zhu)手(shou)機(ji)硬件的(de)升級、HTML5技術的(de)發(fa)展以及微信(xin)平臺(tai)的(de)開放,HTML5的(de)跨(kua)平臺(tai)、低成本、快(kuai)迭代(dai)等優(you)勢被(bei)進(jin)一步(bu)凸顯(xian),這對身處(chu)于移動互聯網大潮的(de)企業(ye)主(zhu)、品牌、設計(ji)師和開發(fa)者來說,都將是一個最好的(de)時代(dai)。未(wei)來必將涌現更(geng)多優(you)秀的(de)H5頁(ye)面,讓(rang)我們拭目以待。