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