H5創(chuàng)意匯：新浪H5，LEVI'S H5,網(wǎng)易新聞H5

新浪：旅行治愈館

創(chuàng)意分析：

創(chuàng)意定位，以旅行治愈館為名，幫用戶測算哪個(gè)旅游地是ta的治愈地，以此引出宣傳主題。

技術(shù)分析：

策劃上，本質(zhì)上還是測試題的形式，但是采取了模擬電腦測試的形式，選項(xiàng)也被模擬成了按鍵的形式。一共有六道題，測完后“機(jī)器”便會(huì)打印出測試結(jié)果。設(shè)計(jì)上，使用插畫風(fēng)格，以黑藍(lán)色為背景，不論是頁面設(shè)計(jì)還是背景音樂都充滿了神秘感。

視覺分析：

色調(diào)上以深色為主，貼切深夜主題。體驗(yàn)上，整個(gè)頁面的設(shè)計(jì)都很精致吸睛，測試題目的形式也很新穎，就是選擇選項(xiàng)后的音效略有延遲~

LEVI’S:這好像是我第一次把聲音交給別人

創(chuàng)意分析：

創(chuàng)意定位，以錄制聲音生成聲活單曲的方式，讓用戶通過H5平臺(tái)進(jìn)行單曲錄制，符合當(dāng)下流行的“全民制作人”模式。

技術(shù)分析：

策劃上，進(jìn)入H5便會(huì)有三段走心的場景文案描寫引入主題，之后便讓用戶開始錄制“聲活”，點(diǎn)擊錄音鍵便有十五秒的時(shí)間錄制，錄制完成后可以選擇試聽或者上傳，上傳后可以給自己的錄音配一段文字說明，再選擇一位制作人，通過授權(quán)便可以生成海報(bào)。

視覺分析：

設(shè)計(jì)上，簡潔的設(shè)計(jì)風(fēng)格，黑紅的配色，很有現(xiàn)代感。體驗(yàn)上，操作很流暢，但是手機(jī)錄制的效果并不是很好。中間穿插的視頻非常具有個(gè)性，每一個(gè)場景會(huì)讓人對號入座，最后陳粒的歌聲瞬間就起了雞皮疙瘩。

網(wǎng)易新聞：龍貓線上扭蛋今日營業(yè)

創(chuàng)意分析：

創(chuàng)意定位，以紀(jì)念龍貓30周年，龍貓送你禮物為創(chuàng)意點(diǎn)，讓用戶參與“龍貓線上扭蛋機(jī)”活動(dòng)，點(diǎn)擊扭蛋機(jī)可以生成各種日本動(dòng)畫卡通人物玩偶3D形象，最后生成一張海報(bào)，形成分享和回流。

技術(shù)分析：

策劃邏輯，大致分四個(gè)步驟：① 視頻動(dòng)畫，20秒勾起用戶對龍貓的回憶；② 參與扭蛋機(jī)活動(dòng)，點(diǎn)擊金幣，旋轉(zhuǎn)開關(guān)，點(diǎn)擊金蛋，會(huì)出現(xiàn)一個(gè)卡通玩偶3D形象，用戶可以旋轉(zhuǎn)觀玩偶形象，畫面底部有3個(gè)按鈕：再玩一次、拍照、收藏的玩具；③ 點(diǎn)擊拍照圖標(biāo)，會(huì)以當(dāng)前卡通玩偶效果合成一張海報(bào)，帶人物臺(tái)詞及品牌、回流二維碼；④ 點(diǎn)擊“收藏的玩具”，會(huì)顯示用戶已經(jīng)收藏的卡通玩偶形象。技術(shù)分析，其中3D部分用到了ThreeJS框架，海報(bào)部分用了畫布合成框架html2canvas，交互手勢部分則用到了很小的手勢庫AlloyFinger。

視覺分析：

體驗(yàn)上，看到龍貓，想到的不是動(dòng)畫片，而是自己的青春。想想龍貓都30歲了，看龍貓的小朋友們，是不是也都成為了大朋友。

情人節(jié)送她什么禮物？

最好的禮物是

給她送一輩子的情人節(jié)禮物！

更多創(chuàng)意H5解析

請關(guān)注H5創(chuàng)意匯

每周為你解析最熱門H5案例

人人秀原創(chuàng)文章，如若轉(zhuǎn)載請注明出處：http://m.bydok.cn/content-jugbfr