心意派送

送上一分牛年好禮

用新春禮包加持我們的 2021

本文歸納「小編備用」2020 年

交付品牌方的各類創意互動案例

供大家創意參考，為新年“牛氣” buff 加持

一、點選

「點選切換」是目前業內最常見的圖文互動形式，以下交付寶馬、民生信用卡、奧迪品牌方的推送案例，都是基於該效果探索出的新構成方式，一起「點選」體驗一下吧。

1）點選控制Gif播放

點選播放GIF，擬態禮盒開箱效果，設計的巧思配合互動呈現有趣動效。

2）點選切換點陣圖

網格狀佈局互動，結合點擊切換圖片的效果，透過連續觸發不斷獲取新的資訊，製造驚喜感。

3）一圖流點選播放GIF

一圖流中將回家的路繪製成長卷，嵌入多組點選觸發GIF效果，無需文字鋪排，利用動圖豐富畫面資訊。

4）長按圖片切換，點選播放GIF

「長按」觸發，加上「點選」播放GIF，直觀感受快速蓄電過程豐富使用者認知，助推對產品效能的理解和接納。

二、滑動

滑動效果是互動圖文中較為簡單的一類，符合使用者閱讀習慣也易於習得互動行為。下面三種滑動效果的變化運用，再次展示出簡單技術並且效果出彩的互動創意。

1）CSS透明圖層滑動

結合集「五福」新春活動，利用「透明前景圖層」左滑，傳送品牌新春祝福，此技術也可以呈現開門、拉帷幕等效果。

2）豎版穿透滑動，元素懸浮，背景滑動

豎版穿透滑動效果，保持前景懸浮，在閱讀過程中背景滑動營造出懸浮元素的運動效果。

3）前景滑動創意構圖

技術統計+<穿透觸發播放影片>+<雙層疊加>+<深色模式適配>，帶子與背景圖呈現具有創意的設計，結合左右滑動效果形成有趣的滑動案例。

三、展開

高度展開一直是圖文中屢試不爽的互動形式，也湧現大批創意作品。「小編備用」在下面歸納了各類「展開」效果的形式參考，不妨來體驗一下：

1）高度拉伸展開

點選展開卷軸，畫面高度拉伸顯示圖文隱藏內容，引導使用者閱讀。

2）多級展開

巢狀圖文中的多級展開，若干個信封，點選後多組圖片高度拉伸，同時可觸發大圖儲存圖片。

3）播放GIF後高度展開

連續點選觸發若干張GIF，再次點選後圖文高度展開。

4）做出選擇後展開對應圖文

做出選擇後點擊展開對應圖文，展開圖文中巢狀滑動互動元件。

5）自動收縮，點選後逐段展開

多組圖片自動收縮，點選後控制圖文內容逐段展開，在展開圖文中巢狀點選切換互動元件。

四、

穿透觸發

穿透觸發效果的互動創意並不少見，透過穿透觸發隱藏資訊，刺激使用者執行互動同時不斷製造驚喜感，易於豐富使用者閱讀體驗。

1）穿透觸發彈出大圖

點選新年籤圖片，穿透觸發，彈出賓士新年祝福籤，新年籤可點選儲存。

2）彈幕位移動畫+穿透彈出大圖

彈幕迴圈位移動畫，點選彈幕彈出大圖。

3）穿透彈出大圖

穿透彈出大圖，點選寶石後，寶石變色後彈出大圖。

五、音訊互動

音訊互動效果還有什麼神仙級操作呢？不妨看看GL操刀設計的這些案例吧～

點選GIF觸發音訊和動圖，音訊結束後圖片定格ending。

音訊連續點選重複播放，點選停止。同時可以觸發GIF點選播放和點選停止。

六、創意互動

為新年 “牛氣” buff 加持最後一篇，請大家不要大意的滑過去～

1）自動售貨機-擬物互動裝置

移植自動售貨機裝置發運行流程，選擇售貨機上的對應icon，生成海報。

結合現實中具有互動流程的機械裝置，

新春推文可以結合「年貨販賣機」、「搶紅包手速測試」、「新春版娃娃機」等實現machine互動系列。

2）DIY

自由選擇選項，點選生成專屬汽車展館。

DIY創意互動，

在新春推送中可實現DIY新春換裝、變色、自定義祝福海報、DIY家庭春節佈置等內容，根據使用者選擇生成最終效果，實現使用者自定義選擇的個性化操作。

3）擬態拍一拍

擬態微信拍一拍功能，連續雙擊使圖文高度展開，顯示隱藏內容。

利用「拍一拍」結合群發新春微信紅包對話情景，實現新春氛圍推文。

4）bug彈窗效果

運用bug彈窗效果邏輯，圖文逐個彈出後逐個點選消失，最後高度展開。

透過連續點選消除畫面的方式，

可以適用搶紅包紅包、翻閱新年祝福籤等場景，引導使用者多次點選觸發效果。

5）計數求和

點選選擇商品，切換結賬圖片，末尾賬單求和運用求和技術獲取最終結果。

透過技術求和方式，可以構建團購年貨等場景，最後獲取賬單或可利用隨機生成效果。

6）前景懸浮+背景滾動

前景懸浮，點選後背景向上滾動，再次點選彈出海報。

春節推文裡或可模擬煙花向上滾動綻放背景，營造溫馨節日氛圍效果。

持續關注「小編備用」

分享前沿排版技術和互動創意精彩案例