公眾號(hào)輪播圖怎么制作?
公眾號(hào)輪播圖效果,今天三兒要為大家?guī)淼膬?yōu)質(zhì)案例是瑞幸咖啡,作為咖啡界的頭號(hào)品牌,他們又有哪些值得我們學(xué)習(xí)的排版技巧呢?今天我們就來揭秘!
三兒在分析了瑞幸咖啡的多篇推文內(nèi)容中發(fā)現(xiàn),他們?cè)谂虐嬷杏玫降淖疃嗟腟VG效果就是各種樣式的輪播效果,主要是用于展示咖啡新品圖片以及客戶們的評(píng)價(jià)截圖。
他們的整體排版風(fēng)格簡約大氣,通常排版內(nèi)容是以飲品圖以及實(shí)景背景元素結(jié)合,圍繞該咖啡飲品所用到的材料或者搭配少量用戶評(píng)價(jià)、門店情況來展開敘述。重點(diǎn)在于突出當(dāng)季新品,讓用戶一目了然了解到飲品的實(shí)際情況。
這里我為大家舉三個(gè)案例,以GIF圖來呈現(xiàn):
SVG效果ID:252
點(diǎn)擊上方黃色文字跳轉(zhuǎn)
SVG效果ID:92
SVG效果ID:69
2&3效果都來自同一篇內(nèi)容
點(diǎn)擊上方黃色文字即可跳轉(zhuǎn)
這3個(gè)SVG效果均來自瑞幸咖啡近期的推文內(nèi)容,雖然效果上會(huì)有一定差異,但都屬于輪播SVG的范疇。
① 在推文中瑞幸利用這類輪播效果來介紹系列新品,比如上面列舉的天堂咖啡dirty系列,利用多圖放大式輪播SVG來展示,比常用的普通滑動(dòng)在視覺上更有沖擊力。因?yàn)橥莆亩嘁造o態(tài)長圖來介紹,用戶在閱讀過程中可能會(huì)產(chǎn)生疲憊感,但加上輪播的SVG效果,形成動(dòng)態(tài)、靜態(tài)圖片對(duì)比,能讓用戶的注意力停留在動(dòng)態(tài)的產(chǎn)品圖片,加深用戶印象。
② 用圖片輪播橫向單方向SVG來展示用戶評(píng)價(jià),這是在我們之前介紹的推文之中沒有遇到過的形式,該篇內(nèi)容將用戶評(píng)價(jià)截圖做成統(tǒng)一的圖片格式,依次從左緩慢進(jìn)入視線。由于圖片截圖較多,通過這種形式既能優(yōu)化排版內(nèi)容,讓截圖全部在一屏展示,又能吸引用戶花更多時(shí)間停留觀看,了解其他顧客的優(yōu)質(zhì)評(píng)價(jià),從而對(duì)新品產(chǎn)生認(rèn)可。
輪播SVG效果很適合大家放在產(chǎn)品宣傳推廣的文章之中使用,在之前介紹的奈雪的茶優(yōu)質(zhì)案例中也有提及,在輪播SVG組件中展示產(chǎn)品圖片,能讓用戶知曉文章重點(diǎn)突出的內(nèi)容。
今天從瑞幸咖啡中我們還能學(xué)到的技巧就在于,偶爾可以在文章文末或者中間部分的位置上加入顧客的評(píng)價(jià)截圖的輪播SVG,通過顧客的好評(píng)來背書,其實(shí)會(huì)比產(chǎn)品的各種介紹來的更有效,讓用戶對(duì)新品產(chǎn)生良好印象,從而促進(jìn)購買。
在135編輯器首頁,選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。
進(jìn)入網(wǎng)頁后,選擇【互動(dòng)效果】—素材,依次找到上述效果,詳細(xì)制作教程如下:
教程在這里:
1.多圖放大式輪播
2.多圖彈動(dòng)輪播
3.圖片輪播橫向切換
案例一??
點(diǎn)擊上方黃色文字跳轉(zhuǎn)
案例二??
點(diǎn)擊上方黃色文字跳轉(zhuǎn)
上述舉例的兩個(gè)效果都用到了點(diǎn)擊切換SVG來展示飲品,第一個(gè)案例是以新年為主題,做成了拆紅包的形式,第二個(gè)案例則是以圣誕季為主題,做成拆禮物的形式,讓產(chǎn)品宣傳推廣的方式與文章主題密切結(jié)合。該SVG效果能增加推文內(nèi)容的神秘感,讓用戶懷著好奇心理,點(diǎn)擊指定地方,獲取下拉圖片的“秘密”,互動(dòng)性大大提高。
瑞幸咖啡的這兩個(gè)案例都用到的是點(diǎn)擊切換GIF圖展開,很多寶子可能在用這款效果時(shí),會(huì)單獨(dú)使用,這樣會(huì)顯得內(nèi)容稍微單薄,像上述兩個(gè)案例雖然只用了這一個(gè)組件,但他利用多個(gè)該效果組成了一個(gè)完整的內(nèi)容,比如新年主題拆紅包的案例中,這個(gè)完整的部分是由多個(gè)紅包部分構(gòu)成,“新、年、瑞、幸”,每個(gè)文字對(duì)應(yīng)一個(gè)點(diǎn)擊切換GIF圖展開的SVG,拆盲盒的效果同理。
在宣傳推廣產(chǎn)品時(shí),除了利用輪播效果外,點(diǎn)擊切換GIF圖展開也是不錯(cuò)的選擇。除了運(yùn)用在產(chǎn)品圖片展示外,像各類主題活動(dòng)推文也可以使用該效果,圍繞特定主題,比如逛展覽、拆盲盒等,制作類似的點(diǎn)擊元素(例如紅包、盲盒等),組合在一起,在展開的部分中放入活動(dòng)圖片。
在135編輯器首頁,選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。
進(jìn)入網(wǎng)頁后,選擇【互動(dòng)效果】—組合—展開—點(diǎn)擊切換GIF圖展開,ID:128,詳細(xì)制作教程如下:
點(diǎn)擊黃色文字跳轉(zhuǎn)閱讀
現(xiàn)在視頻號(hào)內(nèi)容被廣泛應(yīng)用到推文之中,然而通常視頻號(hào)的封面圖都是靜態(tài)且展示形式也很單一,插入在文章中,影響推文整體效果,因此很多大牌賬號(hào)變著花樣來設(shè)計(jì)視頻號(hào)封面圖樣式。在這篇文章中,視頻號(hào)封面展示換成了動(dòng)態(tài)效果,與整體內(nèi)容相互協(xié)調(diào),美觀度也隨之提升,更能吸引用戶點(diǎn)擊查看視頻內(nèi)容。
該文章利用了視頻號(hào)SVG,在該效果上我們可以自定義視頻號(hào)封面圖,比如這篇文章中設(shè)計(jì)的飲品gif圖封面,會(huì)比靜態(tài)的圖片效果好很多,大家要圍繞推文的排版風(fēng)格和主題來設(shè)計(jì)視頻號(hào)封面圖。
在135編輯器首頁,選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。
進(jìn)入網(wǎng)頁后,選擇【互動(dòng)效果】—素材—視頻—視頻號(hào),ID:76,詳細(xì)制作教程如下:
立即登錄