公眾號冷門小技巧丨左右滑動圖

在這里我要感謝大頭,治好了我多年的近視,因為我特么都快瞎了。

(辣眼睛)

不過說真的,這樣的一大推圖片霸滿屏幕,還特別的長,是我就看起來特別的不爽,影響我用戶體驗,而且就連我身邊的其他小伙伴都覺得是這樣。

所以我就想有沒有能把圖片統(tǒng)一裝起來的“容器”,看起來更為順暢。

靈感往往一瞬間

這個問題我?guī)滋烨熬驮谙肓?,一直沒啥思路,直到我翻閱到某某公眾號的文章中的圖片,可以進(jìn)行左右滑動。然后在回想大頭的文章,這兩者可以結(jié)合起來用。

(類似這樣的)

這簡直是雪中送炭啊,然后我就搜集了相關(guān)的資料,這個小技巧早在之前就有使用了的,而且還不限圖片數(shù)量。

我靠,逼格那么高,為啥現(xiàn)在用的人少之又少?是我孤陋寡聞?還是這個真的是太冷門了??或者是實用性不強?

但不管怎么說,現(xiàn)在還是可以解決目前我的問題,所以我按照教程再加上自己的理解(很簡單的,教程在后面),很快就做出了一個。

(請往左滑動)


是不是覺得很有逼格,公眾號文章配圖往左往右滑動一下就就變成了另外一張圖,有點類似于網(wǎng)頁上常見的滾動圖,只不過是不會自動切換,需要主動滑動才能切換。

有利

那么這個可以左右滑動的圖片對于我們的文章有什么好處呢?

1、第一個好處:減短了文章的篇幅長度。

就像我上面說的那篇文章,因為內(nèi)容的需要,要求大量的圖片用于輔佐說明,甚至有時候不得不用上多圖。

如果用了滑動圖,原本三行的圖文就可以縮短為一行,這樣就減少了用戶閱讀文章時往下拉所花費的時間。

因為有些人看見文章標(biāo)題進(jìn)來的第一反應(yīng)不是馬上閱讀文章內(nèi)容的,而是往下拉到文章底部,看閱讀量、看dian贊量。

更重要的還是看留言區(qū)的用戶評論,因為可以依據(jù)別人的留言來判斷文章是否有閱讀的價值,所以我們要為這類型的用戶的體驗著想。

2、第二個好處:用戶視覺體驗好。

這個可以從文章排版的角度分析,多行多圖片的首先就嚴(yán)重的影響了用戶的視覺體驗。文章圖片霸屏,密密麻麻的感覺,看起來極為的不爽。

如果用滑動圖代替,化繁為簡,給用戶呈現(xiàn)簡潔的視覺體驗,這樣既可以增加互動,又可以提高了用戶對圖片的點擊率,讓圖片的內(nèi)容更為容易曝光。

也有弊

凡事物都有兩面性,使用這種滑動圖也是有著不好的一面。

1、犧牲了更多的內(nèi)容,具有局限性。

原本可以直接展現(xiàn)更多的內(nèi)容在用戶面前,但如果這么做,因為滑動圖的是主要呈現(xiàn)第一張圖片的,后面的需要主動滑動才能呈現(xiàn)出來。

除非把內(nèi)容圖片拼接在一起呈現(xiàn),但是這樣的話也會縮小內(nèi)容的曝光率,所以這是主要的問題就是引導(dǎo)用戶去進(jìn)行滑動,也有著一定的被動性。

2、實用性不強,適用場景有限。

滑動圖適用的場景是什么?我個人覺得,比較常見的就是文章內(nèi)容多圖、長圖、圖片海報等這幾種場景。

但是這幾種場景出現(xiàn)的情況不是很高,一般正常的運營者在排版時,都會考慮到避免這種情況的出現(xiàn)。

但不管怎么說這個滑動圖,還是有一席之地的用處的,至少...還可以用來裝逼。

但可能還有些小白不知道得如何做出這種效果,這其實是通過代碼來實現(xiàn)的,不過一說到代碼很多人都頭大,就連我這個學(xué)計算機(jī)的也覺得頭大。

下面我就給大家分享一個快速簡單上手的教程,讓大家文章逼格高檔次。

制作教程

這里我用的是某編輯器(私聊我吧),找到一個“卡片”的選項,在往下拉(隱藏得很深),找到“左右滑動樣式”,鼠標(biāo)點擊一下就可以添加到排版框里面了。

然后點擊圖片,圖片底部就會顯示一個小的菜單欄,有四個實用的的小功能:1、替換圖片;2、圖片陰影;3、圖片邊框;4、圓形圖片。這里我們先把我們想要的圖片換上。

后面的圖片替換也是同理可得,或者是刪完所有圖片,然后進(jìn)行多圖上傳,最后就可以粘貼復(fù)制到公眾號后臺編輯了。

成功的提示就是圖片下面有一個滾動條顯示(只能在PC電腦端看見,手機(jī)端看不見的)。

需要注意的問題

在制作滑動圖的過程中還需要注意一些細(xì)節(jié)問題

1、文章同行的圖片數(shù)量保持在2~3張是最合適的。如果超過3張圖片以上,可能在進(jìn)行頁面邊距調(diào)整的時候會被進(jìn)行壓縮,那內(nèi)容也就被壓縮了。。

2、圖片的尺寸保持一致的問題。因為一大一小的圖片進(jìn)行滑動,那還不如不弄的好,也影響用戶視覺體驗。這方面不難的,可用美圖秀秀這種修圖軟件解決。

3、頁面邊距大小的問題。這個是我在操作的過程中發(fā)覺的,直接使用某編輯器進(jìn)行頁面邊距調(diào)整,在復(fù)制到公眾號上發(fā)覺滑動的樣式已經(jīng)改變了。

所以,這時候我就把它復(fù)制粘貼到阿木說過的“構(gòu)思編輯器”里面進(jìn)行邊距調(diào)整,果然這方法是可行的,這樣就可以根據(jù)自己的愛好進(jìn)行調(diào)整了。

4、左右滑動樣式“容器”和圖片鋪滿手機(jī)屏幕的問題。因為在使用的過程中發(fā)覺,最原始的樣式代碼中的圖片大小是固定的,導(dǎo)致圖片無法鋪滿屏幕,出現(xiàn)空缺。

不過也不用擔(dān)心這個問題,根據(jù)上面的情況,我已經(jīng)把“左右滑動圖”調(diào)整為自動適應(yīng)屏幕大小。只要在PC上直接復(fù)制我的例子,粘貼到后臺在替換掉圖片即可。

如果出現(xiàn)意外不能使用,可以在后臺回復(fù)“動圖”即可獲取左右滑動圖的源代碼。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容