年終盤點(diǎn)季！看各大品牌如何用H5做出漂亮的數(shù)據(jù)報(bào)告？

原創(chuàng) 贊1 收藏8 評(píng)論

舉報(bào) 2016-12-09

掃描,分享朋友圈

每到年底，各家陸續(xù)進(jìn)入盤點(diǎn)季，不僅是對(duì)過(guò)去一年的回顧，更是一種拉近與用戶距離的方式。小編總結(jié)數(shù)據(jù)類H5無(wú)非有兩種，用戶型和產(chǎn)品型。前者因?yàn)閭€(gè)性化及共鳴性能快速引發(fā)傳播，后者因?yàn)楹w有趣的知識(shí)也能快速刷屏。快到年底又在發(fā)愁數(shù)據(jù)報(bào)告型H5怎么做，希望下面的案例能幫到你。

數(shù)據(jù)報(bào)告類 x 創(chuàng)意H5 x 互動(dòng)營(yíng)銷

01 中國(guó)青年報(bào)：這半年“中國(guó)經(jīng)濟(jì)之車”開的怎么樣？

小編有話說(shuō)：經(jīng)濟(jì)報(bào)道其實(shí)與老百姓關(guān)系很大，什么房?jī)r(jià)物價(jià)、就業(yè)消費(fèi)等信息我們都要通過(guò)系列報(bào)道去了解，但呆板沉悶的經(jīng)濟(jì)數(shù)據(jù)很少人喜歡看，更別說(shuō)分享了。中國(guó)青年報(bào)出品的這則H5，把中國(guó)經(jīng)濟(jì)半年的發(fā)展比喻成在公路上行駛的汽車，在路上先后設(shè)置四個(gè)關(guān)卡：居民消費(fèi)CPI、新增就業(yè)、民間投資和消費(fèi)增長(zhǎng)，每個(gè)關(guān)卡先拋出問(wèn)題，給予用戶思考時(shí)間，然后再“一探究竟”，“專家怎么說(shuō)”。一問(wèn)一答的形式，配上清新自然的版面設(shè)計(jì)，讓用戶閱讀枯燥的經(jīng)濟(jì)報(bào)道也不乏味。

02 歐萊雅男士：懶人大數(shù)據(jù)

小編有話說(shuō)：為了宣傳自家產(chǎn)品，歐萊雅也是夠拼的，居然拿出了大數(shù)據(jù)撐腰（數(shù)據(jù)的準(zhǔn)確度大家看看也行了，認(rèn)真你就輸了）。這個(gè)H5主要分為兩部分：仿微信圖文、引導(dǎo)購(gòu)買頁(yè)。前者套用微信圖文的形式，模仿兒時(shí)單機(jī)游戲的像素畫風(fēng)，很有懷舊感，用一系列數(shù)據(jù)支持，得出男人就是比女人懶的結(jié)論。過(guò)度場(chǎng)景用“明星代言人視頻+微信消息彈出”，說(shuō)實(shí)話有點(diǎn)生硬，感覺純粹是炫技需要，而且現(xiàn)在微信內(nèi)置瀏覽器對(duì)于視頻暫不支持，播放條什么的直接顯示還是很不美觀。

03 騰訊互娛：移動(dòng)頁(yè)面用戶行為報(bào)告

小編有話說(shuō)：這個(gè)知識(shí)型的H5很可能是你老板發(fā)給你的，“看看，多研究些數(shù)據(jù)，對(duì)你做爆款有幫助”。話雖然夸張了點(diǎn)，但有理走遍天下，騰訊作為H5最大的展示平臺(tái)，發(fā)布這組數(shù)據(jù)對(duì)行業(yè)內(nèi)人士還是挺干貨的。加載頁(yè)、高峰期、流失率，每一個(gè)我們關(guān)注的H5數(shù)據(jù)都用黑白風(fēng)格加小動(dòng)畫表現(xiàn)出來(lái)，黃色標(biāo)注則為重點(diǎn)信息。設(shè)計(jì)和交互不是重點(diǎn)，滿滿的干貨才是這則H5流傳甚廣的原因。

04 知乎：我的知乎五周年

小編有話說(shuō)：數(shù)據(jù)型H5最能引起用戶共鳴的就是展現(xiàn)用戶的行為，還記得年初微信公開課的那則H5嗎，用大數(shù)據(jù)展現(xiàn)你在微信中的每一次行為，這個(gè)H5用的就是類似套路。輸入用戶名和密碼，點(diǎn)擊Enter，就能回顧自己在知乎上的每一次動(dòng)態(tài)，自己都不記得的，機(jī)器全幫你記住了，看的時(shí)候有種挺神奇的感覺，“當(dāng)初我為什么要關(guān)注這個(gè)話題呢？”用命令行輸出的方式自動(dòng)展現(xiàn)，十足的高科技畫風(fēng)，不過(guò)為什么我看的時(shí)候，總有一種盜取用戶信息的感覺呢，科科。

05 Nice：看，報(bào)告，黃的

小編有話說(shuō)：這則H5的名字看著就污污的，一下子就激起了打開的欲望。設(shè)計(jì)風(fēng)格上采用Nice的品牌色黃色，很亮眼，也符合目標(biāo)受眾年輕群體彰顯個(gè)性的審美。長(zhǎng)頁(yè)面展示，手指滑屏下翻，體驗(yàn)上很流暢，每一屏都有逗趣的圖標(biāo)動(dòng)畫吸引眼球，很像GIF，但是技術(shù)上是用CSS3動(dòng)畫實(shí)現(xiàn)的，素材更小，整體看下來(lái)完全就是讀報(bào)的感覺，還有動(dòng)圖配合，特別有趣。以后小程序正式版發(fā)布后，是不是好多紙媒報(bào)刊都要選用這種形式發(fā)布新聞了？還挺期待的。

06 個(gè)推：大數(shù)據(jù)告訴你睡不夠的程序猿

小編有話說(shuō)：這個(gè)H5的內(nèi)容定位就很有趣“睡不夠的程序猿”，分別從入睡時(shí)間、起床時(shí)間、睡眠時(shí)長(zhǎng)和各地程序猿睡眠排行榜展示程序員人群的睡眠現(xiàn)狀。光是看內(nèi)容，就覺得很有趣：“單身的程序猿比戀愛的程序猿多睡12分鐘”、“寧夏程序猿的睡眠時(shí)長(zhǎng)最短”、“青海程序猿的睡眠時(shí)長(zhǎng)最長(zhǎng)”、“海南程序猿工作最拼”...很好奇這些數(shù)據(jù)是怎么采集來(lái)的？這個(gè)H5用Maka制作，全程手指滑動(dòng)翻頁(yè)，但效果上加入了線性動(dòng)畫，表現(xiàn)力上比一般的滑動(dòng)H5生動(dòng)很多。

07 騰訊OMG：OMG星系之旅

小編有話說(shuō)：這個(gè)H5將騰訊系的8大App構(gòu)建成“OMG星系”，帶領(lǐng)用戶完成一次探險(xiǎn)之旅，最后引導(dǎo)下載相關(guān)App，中間過(guò)程平鋪直敘并有數(shù)據(jù)輔助說(shuō)明，不會(huì)有很強(qiáng)烈的硬廣感覺。深藍(lán)色的設(shè)計(jì)風(fēng)格，營(yíng)造出科幻之感，騰訊吉祥物小Q作為導(dǎo)游，一一介紹八大星球（對(duì)應(yīng)8個(gè)App），每一個(gè)星球都有對(duì)應(yīng)LOGO展示，點(diǎn)擊下方“收集數(shù)據(jù)”按鈕，可以看到每個(gè)App的男女使用比例和全國(guó)各省使用排行。“科幻的視覺效果+旅程故事”這種套路現(xiàn)在還是很火，不妨一試。

08 淘寶：淘寶數(shù)據(jù)報(bào)告里沒告訴你的事兒

小編有話說(shuō)：每年淘寶都會(huì)出一份類似的“漲姿勢(shì)”報(bào)告，內(nèi)容全是由大數(shù)據(jù)分析得出，真的不是為了吸引眼球哦。這個(gè)H5是今年年初淘寶制作的，右上角有目錄菜單可以跳到指定頁(yè)，整體看下來(lái)真的感嘆淘寶物品種類之全，受眾之廣。內(nèi)容選取上，很精準(zhǔn)的GET到大家的好奇心，如“把淘寶當(dāng)百科了解年輕人”“投胎投的好，做鬼都比做人好”，看到標(biāo)題就很想看！技術(shù)上，用了白鷺引擎加速，體驗(yàn)很流暢。

09 大眾點(diǎn)評(píng)：中國(guó)燒烤大數(shù)據(jù)報(bào)告

小編有話說(shuō)：說(shuō)到數(shù)據(jù)展現(xiàn)，大眾點(diǎn)評(píng)可是這領(lǐng)域的專家，手中掌握全國(guó)人民的吃喝玩樂(lè)信息，只要切入點(diǎn)好，還怕沒人轉(zhuǎn)？說(shuō)起吃，天朝人民稱老二，沒人敢稱老大吧。這個(gè)H5以燒烤大數(shù)據(jù)為主題，用豐富的表格、折線圖和文字展現(xiàn)中國(guó)燒烤市場(chǎng)的各種數(shù)據(jù)，包括快速增長(zhǎng)的受眾市場(chǎng)、市場(chǎng)爆發(fā)時(shí)間、燒烤市場(chǎng)的體量等。顏色上以深藍(lán)為主配合草綠點(diǎn)綴，給人以很專業(yè)很權(quán)威的感覺。這個(gè)H5是走行業(yè)報(bào)告路線的，受眾是行業(yè)人員，所以不要說(shuō)文案太死板了哦。

10 網(wǎng)易新聞：數(shù)據(jù)告訴你，你是如何一步步輸?shù)羧松?/span>

小編有話說(shuō)：?jiǎn)尉托侣勯T戶來(lái)看，網(wǎng)易新聞算是國(guó)內(nèi)做的最好的，新聞更新及時(shí)，有趣的跟帖，點(diǎn)贊和踩等互動(dòng)，讓看新聞很日程化的事情變得很娛樂(lè)。這個(gè)H5收集了城市和鄉(xiāng)鎮(zhèn)兩組大數(shù)據(jù)，從出生、教育、老年等幾個(gè)方面向我們展示了兩個(gè)區(qū)域人們生活水平的差異。在H5的左下角，還保留了網(wǎng)易新聞可以跟帖、點(diǎn)贊、猛踩等功能。視覺上，選用了磚紅和暖黃搭配，色調(diào)比較暗沉，給人以比較嚴(yán)肅的感覺，圖形化的表現(xiàn)避免了數(shù)據(jù)報(bào)告類H5閱讀枯燥的問(wèn)題。

作者公眾號(hào)：拇指部落Game (ID：muzhibuluo)

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場(chǎng)。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。