??? ?
很多品牌的圖文排版，每次必用「點(diǎn)擊展開(kāi)」的交互效果。
但每次「點(diǎn)擊展開(kāi)」的效果并不完全相同。
這次向大家介紹一種看似簡(jiǎn)單，但不一樣的花樣展開(kāi)效果。來(lái)看看下面這些案例感受一下吧。
點(diǎn)擊向上移出切換圖片后展開(kāi)：
*素材來(lái)自滬上阿姨《新品！維C天花板「超頂刺梨」登場(chǎng)！》
組合：點(diǎn)擊向上移出切換圖片+展開(kāi)(有觸發(fā)區(qū))
編號(hào)：10995（組合）
點(diǎn)擊向下移出切換圖片后展開(kāi)：
*素材來(lái)自深藍(lán)汽車(chē)DEEPAL《深藍(lán)汽車(chē)上海車(chē)展首秀，都「秀」了些什么》
組合：點(diǎn)擊向下移出切換圖片+展開(kāi)(有觸發(fā)區(qū))
編號(hào)：10996（組合）
點(diǎn)擊向左、向右移出切換圖片后展開(kāi)：
*素材來(lái)自華洛芙Wellendorff《因愛(ài)轉(zhuǎn)動(dòng)》
組合：點(diǎn)擊向左移出切換圖片+展開(kāi)(有觸發(fā)區(qū))
編號(hào)：10993（組合）
組合：點(diǎn)擊向右移出切換圖片+展開(kāi)(有觸發(fā)區(qū))
編號(hào)：10994（組合）
點(diǎn)擊指定觸發(fā)區(qū)，原本的圖片可以從上、下、左、右四個(gè)方向移出，切換新的圖片并自動(dòng)展開(kāi)剩余的內(nèi)容。
上述案例效果使用 iPaiban Pro 黑科技編輯器的對(duì)應(yīng)組合即可實(shí)現(xiàn)，相較于常見(jiàn)的點(diǎn)擊切換圖片，這種點(diǎn)擊移出切換圖片的方式，給人一種揭示重大消息或內(nèi)容的感覺(jué)。
四個(gè)方向的制作流程一致，均支持設(shè)置點(diǎn)擊觸發(fā)區(qū)域、圖片的移出切換時(shí)長(zhǎng)和圖文的展開(kāi)時(shí)長(zhǎng)。
以第1個(gè)滬上阿姨的案例為例，一起來(lái)看看這個(gè)效果是如何制作的吧。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組合：點(diǎn)擊向上移出切換圖片+展開(kāi)(有觸發(fā)區(qū))
編號(hào)：10995（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組合」按鈕，在「花樣展開(kāi)」-「切換圖片+展開(kāi)」分類(lèi)中找到「點(diǎn)擊向上移出切換圖片+展開(kāi)(有觸發(fā)區(qū))」組合，或者直接在搜索框中搜索組合編號(hào)10995，點(diǎn)擊選擇。
第2步：進(jìn)入組合編輯模式
點(diǎn)擊「點(diǎn)擊此處配置」，進(jìn)入組合編輯模式。
在組合編輯模式中，分為展開(kāi)前和展開(kāi)后兩塊設(shè)置區(qū)域。
第3步：設(shè)置「展開(kāi)前」內(nèi)容
①上傳圖片：點(diǎn)擊「展開(kāi)前」區(qū)域，在右側(cè)點(diǎn)擊2個(gè)「換圖」按鈕，分別上傳準(zhǔn)備好的「點(diǎn)擊前」和「點(diǎn)擊后」的圖片。兩種圖片尺寸需保持一致。
②調(diào)整觸發(fā)區(qū)域：雙擊「展開(kāi)前」區(qū)域圖片顯示觸發(fā)區(qū)域，拖動(dòng)紅色色塊調(diào)整觸發(fā)區(qū)域。（觸發(fā)區(qū)不建議完全貼近圖片邊緣，否則可能影響觸發(fā)）
第4步：設(shè)置「展開(kāi)后」內(nèi)容
「展開(kāi)后」的內(nèi)容支持嵌套各種組件，需要什么效果就在左側(cè)「組件」分類(lèi)中找到相應(yīng)的組件拖動(dòng)到組件位中，然后上傳需要的素材即可。
添加組件位-拖動(dòng)組件到組件位中-上傳圖片，每需要一個(gè)樣式就按照這3步操作：
第5步：設(shè)置參數(shù)
點(diǎn)擊右側(cè)紅色小三角，可以設(shè)置切換時(shí)長(zhǎng)和展開(kāi)時(shí)長(zhǎng)。
「切換時(shí)長(zhǎng)」指點(diǎn)擊后圖片移出切換的時(shí)間。「展開(kāi)時(shí)長(zhǎng)」即圖文全部展開(kāi)花費(fèi)的時(shí)長(zhǎng)。
如果預(yù)覽效果發(fā)現(xiàn)內(nèi)容沒(méi)有完全展開(kāi)或者展開(kāi)過(guò)長(zhǎng)，可以通過(guò)「加減展開(kāi)高度（px）」進(jìn)行調(diào)整，輸入負(fù)數(shù)減小展開(kāi)高度。
第6步：導(dǎo)入公眾號(hào)后臺(tái)
內(nèi)容編輯完畢后，點(diǎn)擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁(yè)面。
繼續(xù)點(diǎn)擊最右側(cè)「預(yù)覽草稿」，效果滿意后接著點(diǎn)擊「同步至微信后臺(tái)」就可以了。
使用同步功能無(wú)需頻繁在編輯器和微信后臺(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條）