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