夏日創(chuàng)意SVG排版教程 - 雀巢集團(tuán)案例分析
探索雀巢集團(tuán)如何用創(chuàng)新的SVG排版技巧！本文提供詳細(xì)的SVG交互效果制作教程，從編輯器操作到動(dòng)畫設(shè)置，手把手教你打造吸引眼球的夏日主題推文。立即學(xué)習(xí)如何將你的社交媒體內(nèi)容轉(zhuǎn)換為清涼的夏日體驗(yàn)，提升用戶參與度和品牌宣傳效果。
夏風(fēng)拂過(guò)歲月的詩(shī)行
開始書寫熱烈的篇章
又是一年盛夏至
你想好怎么做
夏日的創(chuàng)意SVG排版了嗎
別擔(dān)心
三兒給大家找來(lái)了
雀巢集團(tuán)的夏日主題推文
一起來(lái)學(xué)習(xí)他的創(chuàng)意玩法吧
（來(lái)自雀巢集團(tuán)）
這篇來(lái)自雀巢集團(tuán)夏日主題的推文，利用SVG組件和巧妙的創(chuàng)意設(shè)計(jì)，讓我們看到了推文的兩種狀態(tài)，推文一開篇就引入了夏季高溫的話題，引起人們的共鳴，再以給夏日降溫的互動(dòng)，讓推文內(nèi)容切換到清涼狀態(tài)，通過(guò)這樣的前后反差，帶用戶從炎熱過(guò)渡到清涼，給用戶來(lái)了一場(chǎng)奇妙的體驗(yàn)，同時(shí)也起到了很好的產(chǎn)品宣傳推廣的效果。
這篇推文用到的SVG組件為點(diǎn)擊全文漸進(jìn)式換內(nèi)容-自定義觸發(fā)，ID：360。該效果被許多品牌都有使用過(guò)，除了用在這種夏日主題以外，其實(shí)還可以用在其它色彩反差的推文中，比如：推文開始為黑白色的狀態(tài)，擦除后推文變?yōu)椴噬膬?nèi)容。
接下來(lái)三兒就來(lái)為大家講解這類效果怎樣制作。
① 首先在編輯器頁(yè)面左側(cè)選擇【SVG編輯器】，進(jìn)入SVG編輯器之后在【互動(dòng)效果】中搜索組件ID：360，名稱：點(diǎn)擊全文漸進(jìn)式換內(nèi)容-自定義觸發(fā)，將其放到編輯頁(yè)面。
② 我們需要為組件添加圖片，即位移小元素、初始背景圖、變化后背景圖。
在放入位移小元素部分的圖片時(shí)，要使用透明底的圖片，且需要與背景圖的寬度保持一致。位移元素部分圖片整體的高度可以按元素高度裁切，不要上下留白太多。
③上傳完位移小元素后，接著就上傳初始背景圖和變化后背景圖。(這里所有圖片需要寬度一致，并且變化前后背景圖的總高度需要保持一致）
添加好初始背景圖就需要為圖片設(shè)置觸發(fā)點(diǎn)擊切換的區(qū)域，拖拽紅色虛線區(qū)域，即可改變觸發(fā)區(qū)域的大小和位置。
接著再添加變化后的背景圖即可。
④ 全部圖片設(shè)置完成后，就需要調(diào)整組件細(xì)節(jié)，包括動(dòng)畫漸變時(shí)長(zhǎng)和元素移入時(shí)長(zhǎng)，以及新舊內(nèi)容分隔線位置。
新舊內(nèi)容分割線是指設(shè)置分割線在位移小元素圖片高度占比的位置，比如設(shè)置為50%，分割線就在小元素圖片的中間位置；設(shè)置為100%，分割線就在小元素圖片底部。
⑤ 整個(gè)SVG組件的內(nèi)容制作好之后，選擇右上角的【同步】【導(dǎo)出】就可以導(dǎo)入到公眾號(hào)后臺(tái)了。
以上就是三兒分享的全部?jī)?nèi)容
如果覺(jué)得還不錯(cuò)
記得點(diǎn)贊+在看哦
如果你還有什么想看想學(xué)的
歡迎在評(píng)論區(qū)留言哦
*本文所涉及的素材僅供學(xué)習(xí)交流使用，侵聯(lián)刪
立即登錄
