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