“極氪汽車古風(fēng)長(zhǎng)卷的彈窗效果，是怎么做的？”
最近有小伙伴刷到了極氪汽車的一篇圖文，直呼：“像古風(fēng)畫(huà)卷一樣，太美了！”。
這篇《極氪啟歲丨循龍跡，尋龍運(yùn)》不僅在設(shè)計(jì)上獨(dú)具匠心，而且結(jié)合使用了SVG交互，點(diǎn)擊圖文中閃爍的光點(diǎn)將會(huì)彈窗展示不同的內(nèi)容。
我們先來(lái)看下效果：
▲GIF演示
這種「懸浮彈窗」的SVG交互有很多品牌都在推文中使用過(guò)，那么極氪汽車的這篇特殊在哪里呢？
首先，我們常見(jiàn)的豎屏圖文已經(jīng)見(jiàn)怪不怪了，從設(shè)計(jì)角度出發(fā)，我們可以將圖文旋轉(zhuǎn)排版，引導(dǎo)大家橫屏查看。同時(shí)橫屏也可以呈現(xiàn)更為壯觀的效果，比如呈現(xiàn)出一副唯美的畫(huà)卷。
其次，懸浮彈窗的交互需要用戶點(diǎn)擊才能觸發(fā)，這里我們一般通過(guò)閃爍的光標(biāo)來(lái)引導(dǎo)大家點(diǎn)擊的觸發(fā)區(qū)域或者位置在哪里，這就要求在設(shè)計(jì)上把光標(biāo)做成閃爍的GIF圖。
那么，我們有沒(méi)有辦法通過(guò)交互實(shí)現(xiàn)這樣的效果呢？答案當(dāng)然是：有的！
這里以極氪汽車的這篇圖文為例，我們通過(guò)「iPaiban Pro 小助手瀏覽器插件」來(lái)下載素材進(jìn)行參考學(xué)習(xí)，可以看到總共有3張靜態(tài)圖。
其中引導(dǎo)點(diǎn)擊的提示文字和畫(huà)卷內(nèi)容設(shè)計(jì)在底圖上，彈窗圖是透明底色的png格式，需留意只有透明底的png圖片在點(diǎn)擊彈窗的時(shí)候才不會(huì)遮蓋底圖。最后是光點(diǎn)的圖，這里只設(shè)計(jì)了一個(gè)白色圓點(diǎn)，同樣也是png格式。
下面拆解下排版步驟????????，一起看下如何制作的吧。
詳細(xì)教程：
工具：iPaiban Pro黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：點(diǎn)擊-懸浮彈窗(無(wú)限次彈出,不同關(guān)閉位置)
編號(hào)：11118（組件）
組件：閃爍遮罩
編號(hào)：11113（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「彈出|彈窗」分類中找到「點(diǎn)擊-懸浮彈窗(無(wú)限次彈出,不同關(guān)閉位置)」組件，或者直接搜索組件編號(hào)11118，點(diǎn)擊選擇。
第2步：上傳圖片素材
在右側(cè)需要上傳兩部分圖片：背景圖和彈窗圖。
背景圖為用戶還未點(diǎn)擊時(shí)顯示的圖片；彈窗圖為用戶可以點(diǎn)擊彈窗的圖片。背景圖和所有彈窗圖的尺寸需保持一致。
點(diǎn)擊「示例圖片」替換背景圖和彈窗圖。
第3步：設(shè)置觸發(fā)區(qū)域
雙擊編輯區(qū)上傳的背景圖，會(huì)出現(xiàn)一個(gè)觸發(fā)區(qū)域調(diào)整窗口。
觸發(fā)區(qū)序號(hào)為幾即代表第幾張彈窗圖，案例里只使用了1張彈窗圖，那么2代表的是底圖上的彈窗觸發(fā)區(qū)域，設(shè)置好位置后我們點(diǎn)擊下一張，設(shè)置序號(hào)1即彈窗圖的關(guān)閉位置。
觸發(fā)區(qū)間不可重疊，調(diào)整觸發(fā)區(qū)到合適位置后，一定點(diǎn)擊「點(diǎn)我隱藏觸發(fā)區(qū)域」在預(yù)覽中才不會(huì)顯示紅色的觸發(fā)區(qū)域。
第4步：選擇組件
點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「特殊」分類中找到「閃爍遮罩」組件，或者直接搜索組件編號(hào)11113，點(diǎn)擊選擇。
第5步：上傳圖片素材
點(diǎn)擊「換圖」替換閃爍遮罩圖。
第6步：調(diào)整閃爍時(shí)間
鼠標(biāo)左鍵長(zhǎng)按拖拽「滑桿」設(shè)置閃爍時(shí)間。
第7步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊最右側(cè)「預(yù)覽草稿」掃碼預(yù)覽效果，效果滿意后接著點(diǎn)擊「同步至微信后臺(tái)」就可以了。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）