網(wǎng)易新聞推出的“我在童話里遇到你的時(shí)光”長(zhǎng)圖滑動(dòng)類H5案例,以其奇幻的創(chuàng)意、精美的設(shè)計(jì)和巧妙的交互,吸引了無(wú)數(shù)用戶的目光。
?
1、活動(dòng)策劃
?
該H5隸屬于網(wǎng)易態(tài)度日歷系列第二部,以歷史上的今天為切入點(diǎn),巧妙地將童話與歷史事件、人物串聯(lián)起來(lái)。用戶一進(jìn)入H5,便會(huì)看到這樣的提問(wèn):“你說(shuō),跳進(jìn)兔子洞里會(huì)邂逅一段奇妙之旅嗎?”瞬間勾起好奇心,隨后,通過(guò)一鏡到底的滑屏特效,用戶仿佛真的跟隨愛麗絲跳進(jìn)了兔子洞,開啟了奇幻冒險(xiǎn)。 在這個(gè)過(guò)程中,《月亮旅行記》等科幻童話場(chǎng)景依次展現(xiàn),與此同時(shí),鄭和下西洋、導(dǎo)演黑澤明、《藍(lán)精靈》等歷史人物和經(jīng)典童話元素也巧妙融入。文案“你會(huì)看到,遠(yuǎn)洋的千帆百槳,承載著夢(mèng)想”,將歷史與童話的氛圍完美融合,讓用戶在感受童話奇幻的同時(shí),也能領(lǐng)略到歷史的厚重。 長(zhǎng)圖的結(jié)尾,引導(dǎo)用戶生成個(gè)人態(tài)度日歷,用戶還能上傳圖片,最終形成獨(dú)具個(gè)性的海報(bào)。頁(yè)面下方設(shè)置了關(guān)注態(tài)度日歷公眾號(hào)和再看一遍的按鈕,進(jìn)一步引導(dǎo)用戶參與互動(dòng),增強(qiáng)用戶粘性。
?
2、活動(dòng)設(shè)計(jì)
?
簡(jiǎn)潔線條勾勒夢(mèng)幻 整個(gè)H5采用黑白兩色線條為主,搭配金棕色作為輔助,這種簡(jiǎn)潔而富有質(zhì)感的配色,將內(nèi)容清晰地呈現(xiàn)出來(lái)。重點(diǎn)內(nèi)容通過(guò)特殊的設(shè)計(jì)手法加以突出強(qiáng)調(diào),既不會(huì)讓畫面顯得過(guò)于繁雜,又能讓用戶迅速捕捉到關(guān)鍵信息。在語(yǔ)言表達(dá)上,真摯且明確,用簡(jiǎn)潔的文字喚起用戶內(nèi)心深處的回憶。H5畫面設(shè)計(jì)不過(guò)分追求華麗,而是以一種細(xì)膩的方式,一點(diǎn)點(diǎn)引導(dǎo)用戶沉浸在童話的世界里,讓每一個(gè)看過(guò)的人都印象深刻。
?

3、交互設(shè)計(jì)
?
滑動(dòng)間的夢(mèng)幻穿梭 交互方式采用橫屏觀看,用戶只需慢慢向左滑動(dòng)手機(jī)屏幕,就能推動(dòng)敘事的發(fā)展 。隨著手指的滑動(dòng),背景獨(dú)白也會(huì)相應(yīng)變化,就像在翻閱一本精美的童話書,每一頁(yè)都有新的驚喜。這種簡(jiǎn)單卻流暢的交互方式,讓用戶能夠輕松上手,全身心投入到這個(gè)童話世界中,享受沉浸式的體驗(yàn)。
?
4、開發(fā)技術(shù)
?
為夢(mèng)幻體驗(yàn)賦能 在技術(shù)開發(fā)上,該H5選取了渲染速度較快的Pixi.js作為主體框架,保證了畫面的流暢展示。同時(shí),使用Scroller.js結(jié)合手勢(shì)實(shí)現(xiàn)即時(shí)的動(dòng)畫效果,讓畫面中每一個(gè)運(yùn)動(dòng)的元件都擁有獨(dú)立的運(yùn)動(dòng)軌跡與速度,成功彌補(bǔ)了2D畫面的立體局限性,為用戶帶來(lái)了更加逼真的視覺感受。
?
總之,“我在童話里遇到你的時(shí)光”H5案例,是網(wǎng)易新聞在內(nèi)容創(chuàng)新和技術(shù)應(yīng)用上的一次成功探索。藍(lán)橙互動(dòng)是一家專業(yè)的H5開發(fā)公司,歡迎咨詢藍(lán)橙客服。
掃碼了解報(bào)價(jià)