不知道你是不是也有這種困惑？其實(shí)三兒剛開始接觸svg時(shí)，也是如此，使用同樣的svg組件，但制作出來的效果卻截然不同。

三兒曾向同事尋求幫助，他們說：那是因?yàn)槟憧吹眠€不夠多，做得還不夠多，看得多了，做得多了一切都會(huì)水到渠成。

三兒為你準(zhǔn)備了一些svg案例，希望看后你能有新收獲，新體會(huì)。

??查看原文

#一把精美的銅鎖，吸引用戶想要探究“鎖”背后的密碼，高亮閃爍的“密碼”，降低交互門檻，完成密碼輸入，“銅鎖”解開，展開的是另一段佳話，完美契合七夕主題，優(yōu)雅且優(yōu)美，讓人難忘。

??查看原文

#展開前是問題，展開后是回答，問題一目了然，回答清晰可見，點(diǎn)擊回收，不會(huì)顯得內(nèi)容冗長，給予用戶良好的閱讀體驗(yàn)。

??查看原文

#gif圖總是能在第一眼就吸引讀者，增加文章動(dòng)感，試問：一個(gè)包裝精美的禮物盒，有誰不想要拆開看看里面“藏”著什么樣的寶貝嗎？合理利用人的好奇心，能夠驅(qū)動(dòng)用戶繼續(xù)閱讀。

??查看原文

#點(diǎn)擊展開是很基礎(chǔ)的svg組件，但如何通過“文案”引導(dǎo)，內(nèi)容搭配是一個(gè)相當(dāng)考驗(yàn)創(chuàng)作者的水平，看似簡單的效果，運(yùn)用得當(dāng)也能取得不錯(cuò)的效果，下面我們還將再看一個(gè)【點(diǎn)擊展開】案例。

??查看原文

#同樣是【點(diǎn)擊展開】，但兩個(gè)案例呈現(xiàn)的風(fēng)格是迥然不同的，組件效果雖是相同的，但文案、美工處理都完美地展現(xiàn)了自己想要表達(dá)的內(nèi)容，這就是成功的。

#以上所有效果，均可在135svg編輯器內(nèi)直接搜索組件名稱或組件ID使用。

#很多效果無法在pc端直接瀏覽，想要預(yù)覽svg整體效果，最好是【保存同步】至微信后臺(tái)，發(fā)送預(yù)覽鏈接到手機(jī)上預(yù)覽。