本期為大家?guī)淼膬?yōu)質(zhì)案例是CC卡美珠寶品牌的推文內(nèi)容《許個愿吧》，這篇文章是以新年愿望為主題，利用無限次點(diǎn)擊展開點(diǎn)擊回縮效果來介紹自己的珠寶產(chǎn)品。推文的首圖是一張精心設(shè)計(jì)的珠寶產(chǎn)品展示圖片。而具體的產(chǎn)品內(nèi)容則隱匿在首圖之下，需要用戶通過點(diǎn)擊之后才可了解，而每展開一個產(chǎn)品內(nèi)容則對應(yīng)一個新年愿望，比如醒獅的項(xiàng)鏈代表著一路發(fā)財(cái)，與推文主題相呼應(yīng)。這樣的設(shè)計(jì)在保證排版美觀的同時又能與用戶形成很好的互動，下面就具體展開講解。

??gif圖效果展示

這篇文章中用到的效果為無限次點(diǎn)擊展開點(diǎn)擊回縮（變化首圖）效果，ID:129。大家對點(diǎn)擊展開的效果應(yīng)該都不陌生，該文章中用到的svg，在點(diǎn)擊展開的基礎(chǔ)上添加了無限次展開回縮的效果，讓用戶能夠與推文進(jìn)行多次互動，提高推文的留存率。

此效果在節(jié)省排版空間的基礎(chǔ)上，優(yōu)化了排版布局。如果將單個珠寶產(chǎn)品信息海報圖直觀的展示在推文中，整體看上去就會比較平淡，且每個單獨(dú)的產(chǎn)品海報銜接在一起，內(nèi)容上顯得很松散，不統(tǒng)一。但是將每個產(chǎn)品具體的信息隱匿在一張完整的海報之下，能夠在不破壞整體推文美觀度的情況下，盡可能展示更多的內(nèi)容。比如在該篇文章中將每部分展開的珠寶產(chǎn)品內(nèi)容對應(yīng)一個新年愿望：笑看生活、一路發(fā)財(cái)?shù)?，且產(chǎn)品的寓意與新年愿望的文案是有關(guān)聯(lián)的，整體設(shè)計(jì)巧妙。

此效果也增強(qiáng)了推文的互動性。點(diǎn)擊展開的方式增加了產(chǎn)品內(nèi)容的神秘感，激起用戶的好奇心，讓用戶通過點(diǎn)擊特定的按鈕來查看具體內(nèi)容，同時無限次點(diǎn)擊展開回縮的效果，讓用戶可以多次點(diǎn)擊，停留更多的時間和注意力進(jìn)行閱讀，一定程度上提高了文章的留存率。

① 在這篇文章中看到的完整首屏海報圖片其實(shí)是由多個無限次點(diǎn)擊展開回縮效果拼接而成，通過將海報中的各個產(chǎn)品圖片切割成幾部分，再依次編輯每部分的內(nèi)容而實(shí)現(xiàn)的。