本篇文章圍繞再生農(nóng)業(yè)計(jì)劃展開(kāi)，分別講解了雀巢在再生農(nóng)業(yè)方面的實(shí)施情況，從農(nóng)林業(yè)、土地恢復(fù)、綠色邊緣等角度具體敘述。整體設(shè)計(jì)以扁平畫風(fēng)格為主，通過(guò)橫屏排版的方式來(lái)展示文章的主要內(nèi)容，讓原本看似枯燥的內(nèi)容以這種動(dòng)畫的形式展示，增強(qiáng)了文章的可讀性，讓用戶能保持耐心繼續(xù)閱讀。

在這篇文章的排版設(shè)計(jì)上看，文章整體設(shè)計(jì)精致，可能很多人會(huì)覺(jué)得只有靠定制才能實(shí)現(xiàn)，其實(shí)這篇文章利用SVG組件也能復(fù)刻，它主要利用了多次點(diǎn)擊換圖展開(kāi)SVG+點(diǎn)擊換圖SVG相結(jié)合完成了這一篇的交互效果。雖然都是我們常見(jiàn)的SVG，但這篇文章的創(chuàng)意卻是值得我們好好學(xué)習(xí)的地方。

大家通常在文章中對(duì)于點(diǎn)擊換圖SVG的使用都是比較分散的，只是作為文章的一個(gè)版塊，與其他內(nèi)容的銜接性不強(qiáng)，而這篇文章中，卻將簡(jiǎn)單的點(diǎn)擊換圖SVG融入到橫版的長(zhǎng)圖設(shè)計(jì)中，并與多次點(diǎn)擊換圖展開(kāi)SVG結(jié)合，形成完整的推文效果，帶著用戶沉浸式的瀏覽閱讀。所以我們?cè)谝院蟮膭?chuàng)意中也要養(yǎng)成整體思維。

在135編輯器首頁(yè)，選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。

進(jìn)入網(wǎng)頁(yè)后，選擇【互動(dòng)效果】—素材中找到多次點(diǎn)擊換圖展開(kāi)SVG，ID：112,點(diǎn)擊換圖SVG，ID：4，詳細(xì)制作教程如下：

多次點(diǎn)擊換圖展開(kāi)教程：點(diǎn)擊查看

點(diǎn)擊換圖SVG使用教程：點(diǎn)擊查看