模擬陌生人社交軟件交互，這個排版效果超適合七夕！
一張圖片，點擊左側(cè)按鈕向左飛出，點擊右側(cè)向右飛出。
這是很多陌生人社交軟件上常見的一個交互效果，點擊一側(cè)是感興趣，點擊另一側(cè)則是不感興趣，以此來建立自己的社交圈。
沒用過？不知道說的什么？沒關(guān)系，點擊下方圖片體驗下你就明白了。
*素材來自GRAFF格拉夫《妳的選擇是……》
組合：連續(xù)點擊-左右飛出切換圖片+點擊展開(帶封面)
編號：11623（組合）
這就是今天給大家推薦的一個排版效果，超適合用作即將到來的七夕主題圖文創(chuàng)意。
點擊封面圖片消失后，接著連續(xù)選擇點擊圖片左半邊或右半邊，圖片便會朝左側(cè)或右側(cè)飛出切換，直至點擊最后一張圖片后，圖文展開出現(xiàn)更豐富的內(nèi)容。
該效果對應(yīng) iPaiban Pro 黑科技編輯器的「連續(xù)點擊-左右飛出切換圖片+點擊展開(帶封面)」組合（編號11623）.
該展開組合除了可調(diào)整展開的速度，還支持調(diào)整圖片飛出切換的速度。同樣的效果，來試一下快速飛出的感覺：
*素材來自小米之家《免費抽機票盲盒！》
組合：連續(xù)點擊-左右飛出切換圖片+點擊展開(帶封面)
編號：11623（組合）
在創(chuàng)意方面，它當(dāng)然不局限于七夕、情人節(jié)這樣主題，像前面的選擇禮物、定制假期都可以。
雖然最后展開的內(nèi)容是固定的，但前面的選擇切換交互大大提升了用戶的參與感。更多玩法就由大家來創(chuàng)作啦！
以第1個案例為例，一起看下制作教程吧。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組合：連續(xù)點擊-左右飛出切換圖片+點擊展開(帶封面)
編號：11623（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側(cè)「組合」按鈕，在「花樣展開」-「切換圖片+展開」分類中找到「連續(xù)點擊-左右飛出切換圖片+點擊展開(帶封面)」組合，或者直接在搜索框中搜索組合編號11623，點擊選擇。
第2步：進(jìn)入組合編輯模式
點擊「編輯組合」，進(jìn)入組合編輯模式。
在組合編輯模式中，分為展開前和展開后兩塊設(shè)置區(qū)域。展開前上傳左右飛出切換的圖片素材，展開后可以任意嵌套各種效果。
第3步：設(shè)置「展開前」內(nèi)容
①點擊「展開前」區(qū)域，在右側(cè)分別上傳封面圖、底圖和飛出切換圖。這三部分所有圖片尺寸需保持一致。
②雙擊編輯區(qū)，調(diào)整點擊展開的區(qū)觸發(fā)區(qū)域。
點擊封面圖消失，以及點擊圖片左右飛出的觸發(fā)區(qū)不支持調(diào)整，前者觸發(fā)區(qū)為整張圖片，后者每張圖片的觸發(fā)區(qū)都是左右兩邊（點擊左半邊向左飛出，點擊右半邊向右飛出）。
第4步：設(shè)置「展開后」內(nèi)容
「展開后」的內(nèi)容支持嵌套各種組件，需要什么效果就在左側(cè)「組件」分類中找到相應(yīng)的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設(shè)置參數(shù)
點擊右側(cè)紅色小三角，可以設(shè)置圖片左右飛出的動畫時長和展開時長。
另外如果預(yù)覽效果發(fā)現(xiàn)內(nèi)容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進(jìn)行調(diào)整，輸入負(fù)數(shù)為減小展開高度。
第6步：導(dǎo)入公眾號后臺
內(nèi)容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
繼續(xù)點擊最右側(cè)「預(yù)覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導(dǎo)入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現(xiàn)已全部支持免費試用了。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標(biāo)準(zhǔn)版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優(yōu)惠券，每單最高立降500元。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）