“保時(shí)捷、小米汽車圖文中的選配換色效果，怎么做啊？”
小米汽車一經(jīng)上市發(fā)布便引起熱議，小米汽車上市推文的一個(gè)排版效果也有不少小伙伴來(lái)問。
點(diǎn)擊任一顏色選項(xiàng)，隨即切換為對(duì)應(yīng)顏色的產(chǎn)品圖片，左滑可進(jìn)行其他選配，這種排版怎么做？
體驗(yàn)一下：
*素材來(lái)自小米汽車《小米SU7 正式上市！售價(jià)21.59萬(wàn)起》
其實(shí)在1月份i排版就給大家介紹過保時(shí)捷的類似交互：
*素材來(lái)自保時(shí)捷中國(guó)《718 街頭“顯眼”包》
組件：點(diǎn)擊-無(wú)限選擇切換圖片
編號(hào)：11765（組件）
現(xiàn)在小米汽車的效果相當(dāng)于在保時(shí)捷這個(gè)交互的基礎(chǔ)上多了一個(gè)左滑，該效果同樣使用 iPaiban Pro 編輯器就能實(shí)現(xiàn)，只需使用一個(gè)左滑組合嵌套即可。
下面一起看下具體如何制作吧：
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組合：左滑組合(自動(dòng)對(duì)齊)
編號(hào)：10249（組合）
組件：點(diǎn)擊-無(wú)限選擇切換圖片
編號(hào)：11765（組件）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組合」按鈕，在「滑動(dòng)組合」分類中找到「左滑組合(自動(dòng)對(duì)齊)」組合，或者直接搜索組合編號(hào)10249，點(diǎn)擊選擇。
第2步：嵌套組件
點(diǎn)擊「編輯組合」，進(jìn)入組合編輯頁(yè)面。
組合默認(rèn)有兩個(gè)組件位，每一個(gè)組件位相當(dāng)于一個(gè)滑動(dòng)頁(yè)，如果想要添加滑動(dòng)頁(yè)，點(diǎn)擊「添加組件位」即可。我們需要3個(gè)滑動(dòng)頁(yè)，所以這里點(diǎn)擊添加一個(gè)組件位。
組件位用于嵌套各種效果組件。嵌套方式為：拖動(dòng)左側(cè)需要的組件到組件位中。
根據(jù)需要，這里我們拖動(dòng)「點(diǎn)擊-無(wú)限選擇切換圖片」組件（編號(hào)：11765）至3個(gè)組件位中：
第3步：配置組件
①上傳組件圖片
點(diǎn)擊嵌套在組件位中的「點(diǎn)擊-無(wú)限選擇切換圖片」組件，會(huì)看到在右側(cè)需要上傳兩部分圖片：背景圖和切換圖。
背景圖為用戶還未點(diǎn)擊時(shí)顯示的圖片；切換圖為用戶可以點(diǎn)擊切換的圖片。
所以背景圖這里我們可以上傳切換圖的第一張圖片，點(diǎn)擊「+」號(hào)按順序批量上傳所有切換圖。
背景圖和所有切換圖的尺寸需保持一致。
②設(shè)置組件觸發(fā)區(qū)
如圖所示，雙擊圖片調(diào)出觸發(fā)區(qū)域調(diào)整窗口調(diào)整觸發(fā)區(qū)。觸發(fā)區(qū)序號(hào)為幾即代表第幾張切換圖，用戶點(diǎn)擊該序號(hào)所在位置便會(huì)切換該圖片。
觸發(fā)區(qū)之間不可重疊，調(diào)整觸發(fā)區(qū)到合適位置后，一定點(diǎn)擊「保存設(shè)置并退出」才算設(shè)置成功。
③上傳滑動(dòng)背景圖
3個(gè)組件設(shè)置完畢后，點(diǎn)擊頁(yè)面空白處，會(huì)看到有一個(gè)左滑組合的背景圖設(shè)置。
為了防止在蘋果手機(jī)上滑動(dòng)到末尾時(shí)露出白底顯得突兀，這里我們可以上傳一張純黑背景圖。背景圖尺寸和滑動(dòng)圖尺寸保持一致。
第4步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊左上角「保存并退出」退出組合編輯模式，接著點(diǎn)擊最右側(cè)「預(yù)覽草稿」掃碼預(yù)覽效果，效果滿意后接著點(diǎn)擊「同步至微信后臺(tái)」就可以了。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(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條）