福利 | 天氣轉(zhuǎn)涼，送你一個(gè)暖男型男朋友...

2018-11-03 H5案例

今日霜降，即將進(jìn)入寒冬模式

雙十一購(gòu)物車(chē)?yán)镉袥](méi)有暖寶寶這一項(xiàng)

冬天這么冷總得備著呀

畢竟你還是只單身汪~(yú)

哈哈哈~

實(shí)在不行也可以找身邊的暖男暖女

找他們溫暖一下，熬過(guò)這個(gè)冬天

當(dāng)然了暖不暖還得先測(cè)試一下

今天以測(cè)試你是哪種暖男

開(kāi)始今天的H5案例分析

還有測(cè)試你適合哪種暖男哦~

京東x奧克斯空調(diào)：天氣漸涼，街上擦肩而過(guò)的，都是哪種暖男？

創(chuàng)意分析：

創(chuàng)意定位，天氣漸涼，這支H5將“暖男”與物理上的“暖”相結(jié)合，推廣品牌商品。男女生分角度分析，男生的角度是你是什么類(lèi)型的暖男，女生是你適合什么類(lèi)型的暖男。通過(guò)代入感的答題方式，結(jié)果生成適合你的品牌產(chǎn)品，還是很貼心的。

技術(shù)分析：

策劃上，通過(guò)答題+長(zhǎng)圖的方式，測(cè)試“你是什么類(lèi)型的暖男”或者“你適合什么類(lèi)型的暖男”。①進(jìn)入H5之后，先選擇男女，男性選擇“測(cè)測(cè)你是哪款暖男”，女性可以選擇“測(cè)測(cè)你適合哪款暖男”。②選擇之后，進(jìn)入答題測(cè)試頁(yè)面。整個(gè)答題頁(yè)面是一張長(zhǎng)圖，長(zhǎng)圖的主要內(nèi)容是街道及兩邊景色。③根據(jù)用戶選擇的性別，會(huì)有一個(gè)相應(yīng)的人物形象走在街道上，沒(méi)走到一個(gè)場(chǎng)景，會(huì)有與該場(chǎng)景相關(guān)的問(wèn)題彈出。④用戶答完所有問(wèn)題后，出現(xiàn)測(cè)試結(jié)果。根據(jù)測(cè)試結(jié)果，H5會(huì)為用戶推薦相關(guān)的奧克斯空調(diào)機(jī)型。用戶長(zhǎng)按可以保存測(cè)試結(jié)果頁(yè)面，也可以分享給朋友或者直接進(jìn)入購(gòu)買(mǎi)頁(yè)面。

視覺(jué)分析：

色調(diào)上以暖色調(diào)為主，對(duì)應(yīng)主題。設(shè)計(jì)上，長(zhǎng)圖采用卡通手繪風(fēng)格，十分有質(zhì)感。人物沿著街道出現(xiàn)問(wèn)題，對(duì)應(yīng)問(wèn)題的卡通人物圖片也與問(wèn)題相呼應(yīng)。答題測(cè)試型H5，問(wèn)題都是比較新穎。

網(wǎng)易考拉X我就是演員：

5道題揭秘你的真實(shí)職場(chǎng)人格

創(chuàng)意分析：

由熱播綜藝引出測(cè)試主題——職場(chǎng)人格測(cè)試，通過(guò)面試中可能遇到問(wèn)題測(cè)試用戶的職場(chǎng)人格，并且用出品公司作為測(cè)試題的面試情景，以此達(dá)到宣傳目的。角色分為男生和女生，相同的場(chǎng)景測(cè)試，每一個(gè)問(wèn)題都細(xì)節(jié)化，最后生成的性格分析描述的還是很詳細(xì)的。

技術(shù)分析：

與實(shí)景視頻結(jié)合的情景答題形式，整個(gè)答題過(guò)程中題目是連貫的，按照一個(gè)面試的過(guò)程來(lái)植入測(cè)試題，這道題選擇完畢后便會(huì)繼續(xù)播放視頻內(nèi)容，直至下一題。視頻答題交互的方式，很有代入感，最后生成的性格海報(bào)加上品牌活動(dòng)的優(yōu)惠券，還是很吸引人的。

視覺(jué)分析：

簡(jiǎn)約的性冷淡風(fēng)格，灰色為主色調(diào)，整個(gè)頁(yè)面非常高級(jí)且正式。整體的形式很棒，測(cè)試題是一個(gè)連貫的情景，代入感很強(qiáng)，頁(yè)面的設(shè)計(jì)和視頻部分的畫(huà)質(zhì)都很好，使整個(gè)作品顯得很高級(jí)。

自如：自如生活節(jié)，約你花式發(fā)光

創(chuàng)意分析：

策劃上，以“反轉(zhuǎn)人生”為出發(fā)點(diǎn)，如果，你可以擁有你想擁有的東西，或者生活方式，當(dāng)你真的擁有了，是否如你想的那么美好嘛。在這支H5中，做了6種如果，如果你想擁有茂密的頭發(fā)，如果你想整體無(wú)所事事，如果你想過(guò)上天天數(shù)錢(qián)的日子，如果你想成為一名有格調(diào)的藝術(shù)家，如果你可以去騎行看看外面的世界，如果你可以不問(wèn)世事隱居室外，最后給出與其幻想未來(lái)，尋找自己的發(fā)光點(diǎn)。結(jié)尾給出6個(gè)人物角色，點(diǎn)擊人物以后，生成一張人物的海報(bào)。

技術(shù)分析：

設(shè)計(jì)上，扁平顆粒度風(fēng)格，插畫(huà)人物和景物。技術(shù)上，pixi進(jìn)行景物和人物的繪制，配合Tween.js實(shí)現(xiàn)動(dòng)畫(huà)效果。

視覺(jué)分析：

色調(diào)上顏色比較豐富，手繪動(dòng)漫風(fēng)格，整個(gè)滑動(dòng)動(dòng)漫劇情效果還是很逗趣的。體驗(yàn)上，鎖屏橫屏觀看，不斷向右側(cè)滑動(dòng)瀏覽更多內(nèi)容。案例整體節(jié)奏不錯(cuò)。

天貓：我在這里遇見(jiàn)了十年后的自己

創(chuàng)意分析：

由一輛時(shí)光列車(chē)為由頭，帶著用戶前往4個(gè)明星的時(shí)光空間，并由明星的時(shí)光空間引出一個(gè)問(wèn)題，用戶需要回答問(wèn)題結(jié)束旅程抵達(dá)未來(lái)，在終點(diǎn)站會(huì)有關(guān)于十年后你的描述。

技術(shù)分析：

由時(shí)光列車(chē)串聯(lián)了4個(gè)明星的時(shí)光空間，在那里明星會(huì)說(shuō)一件自己十年來(lái)堅(jiān)持的事情，之后便由此向用戶提出一個(gè)問(wèn)題，增加用戶的帶入感。在用戶穿梭完畢所有的時(shí)光空間后，便將抵達(dá)十年后的終點(diǎn)站，在終點(diǎn)站，H5根據(jù)用戶的答題結(jié)果，會(huì)給用戶匹配一段對(duì)用戶十年后的描述，用戶可以保存分享。3D車(chē)廂、3D的時(shí)光空間，整各時(shí)光之旅的真實(shí)性很高，代入感也很強(qiáng)。列車(chē)行進(jìn)的過(guò)程中，窗外的景色和光影效果都做的十分精致。

視覺(jué)分析：

色彩效果豐富，整體的畫(huà)面非常精致，就是難免在穿梭的過(guò)程中有一些重復(fù)交互，列車(chē)行進(jìn)的部分會(huì)拖慢整體的節(jié)奏。進(jìn)入每一個(gè)人物場(chǎng)景時(shí)，場(chǎng)景都是符合該人物的風(fēng)格，回答的問(wèn)題也是符合人物形象的。

掌閱：測(cè)一測(cè)，你是書(shū)里的誰(shuí)？

創(chuàng)意分析：

創(chuàng)意上，圍繞著“在書(shū)里遇到另一個(gè)自己”展開(kāi)。以進(jìn)入圖書(shū)館場(chǎng)景后根據(jù)每一步的場(chǎng)景進(jìn)行答題選擇，每一個(gè)問(wèn)題

技術(shù)分析：

策劃上，虛擬了一個(gè)線上書(shū)店，在這個(gè)溫馨的書(shū)店里，通過(guò)書(shū)店的瀏覽過(guò)程中，出現(xiàn)4個(gè)問(wèn)題，每個(gè)問(wèn)題四個(gè)答案，挑選一本心怡的書(shū)，點(diǎn)一杯飲品，邂逅一個(gè)喜歡的人，給未來(lái)的自己寄一張明信片。通過(guò)你與場(chǎng)景發(fā)生的互動(dòng)記錄你的性格和情感觀，匹配一個(gè)來(lái)自不同書(shū)中的專(zhuān)屬角色。