H5頁(yè)面作為線上宣傳推廣利器，能夠融入各種元素，同時(shí)也能把主題內(nèi)容展現(xiàn)的淋漓盡致，很多商家都習(xí)慣利用H5來(lái)做品牌推廣?，F(xiàn)在的網(wǎng)絡(luò)閱讀行業(yè)也逐漸興起，其推廣事業(yè)也需要發(fā)展，那么H5頁(yè)面能夠帶動(dòng)我們網(wǎng)絡(luò)閱讀行業(yè)的推廣工作嗎？下面小編就來(lái)給大家分享幾個(gè)以書籍為主題的H5案例，看看具體效果如何吧。

案例：閱過(guò)山川 益起讀書

品牌：QQ瀏覽器

1.創(chuàng)意定位，QQ瀏覽器聯(lián)合深圳出版集團(tuán)以“閱過(guò)山川 益起讀書”為主題，展示若干山里需要讀書的人群，然后呼吁大家通過(guò)QQ瀏覽器搜“益起讀書”活動(dòng)，來(lái)參與閱讀時(shí)長(zhǎng)兌現(xiàn)公益捐書活動(dòng)。

2.策劃邏輯，① Loading部分：在加載進(jìn)度百分比進(jìn)展中，展示清楚主題：你的閱讀，將兌換成一本本承載著夢(mèng)想和智慧的書籍。閱過(guò)山川，給大山中的那個(gè)TA，最好的答案。

 ② 過(guò)程動(dòng)畫：伴隨著文案出現(xiàn)，粒子聚合打散特效把一本書打散聚合成一個(gè)小飛機(jī)。點(diǎn)擊“立即出發(fā)”按鈕，整體屏幕隨著飛機(jī)收納進(jìn)一個(gè)手機(jī)界面，然后，一束光帶著用戶“穿越”到了長(zhǎng)圖頁(yè)。

 ③ 長(zhǎng)圖展示：豎向長(zhǎng)圖，中間有熱點(diǎn)交互。從城市到山川，背景過(guò)渡自然，青山綠水，白云繚繞，讓用戶在向下滑動(dòng)的過(guò)程中，賞心悅目。西藏、云南、廣西、貴州部分實(shí)景拍攝，設(shè)置交互熱點(diǎn)，點(diǎn)擊后，彈出那些渴望閱讀的人，既有小孩，也有老人。

④ 長(zhǎng)圖頁(yè)底部，有“立即前往讀書”按鈕，點(diǎn)擊后，進(jìn)入捐書落地頁(yè)。展示累計(jì)閱讀時(shí)長(zhǎng)、捐贈(zèng)愛(ài)心圖書本數(shù)、捐贈(zèng)圖書人數(shù)等，底部設(shè)有“我也要捐書”按鈕，提供跳轉(zhuǎn)進(jìn)入活動(dòng)頁(yè)面。

3.視覺(jué)交互，開(kāi)篇用粒子聚合的炫酷特效，把書打散重聚為一個(gè)小飛機(jī)，然后再融合到QQ瀏覽器APP屏幕中，然后再放大，進(jìn)入到自然的大山大川中，視覺(jué)很是震撼和富有創(chuàng)意。交互上，主要以點(diǎn)擊和滑動(dòng)為主，彈出的海報(bào)，可以長(zhǎng)按保存到相冊(cè)。

案例：發(fā)現(xiàn)你的靈魂好書

品牌：喜馬拉雅聽(tīng)

1.創(chuàng)意定位，喜馬拉雅聽(tīng)?zhēng)慊仡檿械慕?jīng)典場(chǎng)景，和經(jīng)典描述，引發(fā)用戶的聽(tīng)書欲望，并根據(jù)用戶的興趣推薦書籍，同時(shí)宣傳新一波的會(huì)員福利。

2.策劃邏輯，導(dǎo)語(yǔ)過(guò)后，用戶選擇自己的喜歡的書籍類型（一共4種類型），類型不同接下來(lái)的題目也不相同，進(jìn)入選擇題階段（共4道題），每道題都是經(jīng)典書籍中的某一場(chǎng)景，或根據(jù)某個(gè)選段設(shè)置的問(wèn)答，用戶根據(jù)描述選擇答案，選擇后，答案浮現(xiàn)，全部選擇完畢后，用戶輸入名字，查看推薦書籍，最后用戶可點(diǎn)擊登錄喜馬拉雅APP直接去聽(tīng)推薦書籍，或查看會(huì)員福利詳情。

3.設(shè)計(jì)上，深色調(diào)，作品中的場(chǎng)景和燈光都比較昏黃，每道題根據(jù)說(shuō)的內(nèi)容繪制人物和場(chǎng)景，段落摘選能引發(fā)用戶對(duì)書籍內(nèi)容的回憶。

案例：你是一本什么書

品牌：騰訊新聞

1.創(chuàng)意定位，測(cè)試報(bào)告H5，每個(gè)人都可以是一本獨(dú)一無(wú)二的書籍，通過(guò)性格檢測(cè)試題，生成自己的人生之書，進(jìn)行個(gè)人性格解析。

2.策劃邏輯，打開(kāi)作品后，標(biāo)題呈三維立體圓柱狀圍著一本書旋轉(zhuǎn)，用戶可滑動(dòng)界面讓書變幻不同的角度和顏色，點(diǎn)擊“開(kāi)始測(cè)試”，上方的緩慢旋轉(zhuǎn)的標(biāo)題字會(huì)變成題目，題目?jī)?nèi)容在下方出現(xiàn)，分別是你希望的人設(shè)，和愛(ài)人走散的處理方法，會(huì)被哪個(gè)故事開(kāi)頭吸引，會(huì)被什么治愈，讀書時(shí)喜歡聽(tīng)的音樂(lè)，答題完畢后自動(dòng)生成帶有用戶名的書名，用戶可點(diǎn)擊切換書名，最后生成海報(bào)，包括書的最后樣子，三個(gè)性格關(guān)鍵詞及解析，作品二維碼，和其他作品跳轉(zhuǎn)觸點(diǎn)。

3.設(shè)計(jì)上，三維圓環(huán)形圍繞書本轉(zhuǎn)動(dòng)的字體效果很有玄幻的感覺(jué)，書本也呈熒光漸變色不斷變換，新穎的動(dòng)態(tài)效果能一直抓住眼球，題目設(shè)定也比較有趣，貓爪，珍珠奶茶，逆天改命等答案元素，與熱詞熱點(diǎn)融合，題目中作為答案節(jié)選的句子也比較熟悉，都是經(jīng)典節(jié)選，做題的時(shí)候感覺(jué)很親切。

以上就是本次案例分享的全部?jī)?nèi)容，如需體驗(yàn)更多案例，可關(guān)注我們藍(lán)橙互動(dòng)微信公眾號(hào)，如有H5頁(yè)面定制開(kāi)發(fā)服務(wù)需求，可直接咨詢網(wǎng)站客服，獲取最新開(kāi)發(fā)信息及合作流程。

相關(guān)文章：《漫畫類H5案例》