又是一周匯總時刻，讓我們一起看看2021年初，「小編備用」準備了哪些值得一看的交互圖文呢？
1.模擬帳單生成效果-點擊加入購物車，生成相同帳單
你的2021預言帳單來了-梅賽德斯奔馳
梅賽德斯奔馳這篇推文是場景模擬帳單效果的優化運用，同樣設計別出心栽模擬網購的消費場景，畫面色彩絢麗，看到時有眼前一亮的感覺，文中利用點擊切換效果模擬網購下單加入購物車環節。推文末尾與「小編備用」帳單生成不同的是，在交互上沒用嵌套複雜的求和效果而是使用了高度展開模擬出票效果，主要是在主題上扣緊圖文內容，人們在結帳付款的壓力被巧妙化解，宣傳「0首付」夢想帳單的主題。簡單的交互效果，集合優秀的擬態消費場景設計，實現讓用戶更沉浸的閱讀體驗。
2. svg跑馬燈動畫
2021型走江湖指南-梅賽德斯奔馳
這篇推送看似簡單，但是細節滿分。在設計的細節上，滑動圖片外圍運用了全代碼生成的一個跑馬燈動畫視效。原理是運用animate平移動畫實現的文字循環播放效果，同時將文字精確定點外圍使其懸浮在圖片上，結合循環播放的平移動畫就構成了一個細節滿分的炫酷跑馬燈啦。
3.多級展開
元旦剛過，就開始想著過年了-東風標緻
多級展開效果在元旦匯總的文章中，也為大家介紹了不少有趣的案例。然而依舊樂此不疲列舉展開的案例，為大家介紹多級展開更多高級有意思的玩法。比如說東風標緻這篇圖文裡，利用與背景相同白底的GIF構成更貼近現實的設計感，以場景為主線人物故事貫穿全文，技術配合多級展開結合圖文內容的延續，將人一個個主人公的故事內容變得更充實飽滿，推動了故事發展也帶出文章主旨，同時增加閱讀趣味性。
4.高度展開+點擊切換視頻
在嗎？聽聽立邦和馬賽克樂隊的新歌-立邦中國
同樣是展開效果顯示隱藏內容，立邦中國的推文裡複雜的嵌套了其他交互組件，再次展示了互動設計的魅力。在展開內容後，嵌套了滑動切換的圖層將信息儘可能縮減在同一空間，便利用戶閱讀。除此之外，視頻封面遮罩的組件運用將圖文設計和交互效果完美融合，給圖文閱讀又帶來一分驚喜。
5.高級循環banner
請查收，與鵬友一起奔跑的2020！-小鵬汽車
在小鵬汽車推送裡，結合裡很多細節滿分的交互效果，但最值得一提的還是文末的高級循環banner設計。在文末處集合2020年小鵬汽車成長高光時刻內容，構成2020小鵬汽車的裡程碑banner設計。這樣的設計實現由用戶自主控制的，不限方向的輪播切換，且可以點擊方向圖標處或者底下小圓點都可以調轉到對應連結，滿足了展示多層內容的需求同時也提高了信息傳播的效率。
6.連續點擊切換位圖
最後一個艙位，快！-一加科技
最後一個艙位，快！-一加科技
一加科技的圖文裡，主要使用的是連續點擊切換效果，實現翻頁式的閱讀體驗，減少排版設置的空間也為了用戶更沉浸式的閱讀體驗。除此之外，在圖文細枝末節處，都是運用了SVG代碼控制的動畫特效，比如切換圖片出現的漸變放大、相機閃爍效果、座椅升起的漸變效果，看似GIF的動態實則運用了SVG代碼技術實現的，有效帶動了閱讀的趣味性。
更多精彩內容敬請關注「小編備用」吧！