《SVG 交互排版不翻車指南》
排版排得多了，難免會遇到一些莫名的問題。
比如普通圖文排版不知道怎么就錯亂了，老沙之前寫過導致普通排版錯亂的5個原因，感興趣的可以戳：《排版，為什么總會出現錯亂？》
今天咱們再說說 SVG 交互排版，SVG 交互排版經常出現的問題不是錯亂，而是失效，比如一個圖文展開效果怎么點擊也無法展開、一張二維碼圖片長按無法識別等。
一旦出現交互效果失效的情況，大家可以從以下7個方面排查一下。
1.組件使用錯誤
前面說的二維碼圖片長按無法識別的問題大多便是組件使用錯誤造成的，在 iPaiban Pro 黑科技編輯器中有多個無縫圖相關組件，每個都有自己獨特的特點，如果一張圖片上的二維碼長按無法識別，這張圖片很可能使用了「無縫圖(不可彈出)」組件。
大家可以長按下面兩張圖片體驗下，一個可以識別二維碼，一個不可以識別：
關于如何選擇合適的無縫圖組件，大家可以看下這篇詳細介紹：《圖文里的二維碼長按無法識別，怎么回事？》
另外還有一些可能用錯的組件，比如點擊切換圖片用成了長按切換、左滑用成了右滑等，大家在使用時要注意。
2.觸發區域忘記設置
為了讓交互更加精細，體驗更好，iPaiban Pro 黑科技編輯器中的很多組件都提供了觸發區域的設置。
可以調整觸發區域的組件，除了組件卡片上有說明，選中后在編輯區右上角也會有提示。
鼠標雙擊圖片，我們就可以通過調整紅色區域來確定觸發區域的大小和位置。
可以設置觸發區域的組件，觸發區域默認在圖片的左上角。
在大家怎樣點擊圖片中間都無法觸發交互的時候，可以點擊圖片左上角試試，如果成功觸發，那就說明忘記調整觸發區域了。
3.復制代替導入代碼
因為交互效果的復雜性和特殊性，在 iPaiban Pro 黑科技編輯器中制作好的排版，不能直接復制，而是需要以導入代碼的方式導入到公眾號后臺，這樣可以大大避免排版效果出現問題。
在生成代碼的窗口提供了兩種導入代碼的方式，一種是利用小助手插件導入，一種是在瀏覽器的「檢查」模式下導入，大家根據自己的習慣選擇哪種都可以。
如果我們成功導入了公眾號一篇排版，還想將這篇排版放在其他公眾號中，切記還是按照導入代碼的方式進行導入，不能復制現在公眾號中的排版粘貼到其他公眾號中，否則交互很可能都會失效。
4.導入代碼后觸發交互
我們導入圖文到公眾號后，很多人在編輯頁面就開始操作體驗交互效果，這種做法是錯誤的。
比如一個點擊切換圖片效果，我們在編輯頁面點擊進行了觸發，那推送后的圖文中很可能只顯示切換后的圖片。
導入到公眾號后我們第一時間要做的應該是點擊「保存」按鈕，然后點擊「預覽」發送到手機上預覽效果，不能在編輯頁面觸發任何交互。
另外，如果我們只是局部導入的交互排版，最好也不要隨便編輯非交互部分的內容，而是應該完全確認后再導入。
5.瀏覽器不適配
目前，無論是 iPaiban Pro 黑科技編輯器還是公眾號后臺本身，適配性最好的都是 Chrome（谷歌）瀏覽器。
如果不是在谷歌瀏覽器使用的 iPaiban Pro 黑科技編輯器，交互效果失效，很可能是瀏覽器不適配造成的。
所以編輯器最好是配合谷歌瀏覽器來使用，谷歌瀏覽器下載網址：
https://www.google.cn/chrome/
6.素材使用不當
如果我們的交互排版中用到了音頻、視頻或者需要添加外鏈時，應該注意以下三點：
1.在哪個公眾號發布圖文，就要在這個公眾號上傳音頻來提取id，否則點擊觸發區域無法播放音頻；
2.圖文發布后切勿刪除后臺上傳的視頻，否則圖文中的視頻會顯示被刪除；
3.訂閱號和未開通微信支付的服務不支持插入外鏈，如果想要在圖文中添加外鏈，一定提前確認自己的公眾號是否有權限，一般只有開通微信支付的服務號支持添加。
7.微信限制
SVG 交互效果都是基于公眾號平臺的規則來開發的，但公眾號平臺的規則也會發生變化，規則一旦改變，有些交互效果可能就會受到限制。
不過大家不用擔心，這種情況很少發生，并且規則改變一般不會影響推送后的效果哦。
排版出現問題，除了以上原因，肯定還會有其他未知的因素。
再專業的排版技術人員，也不能保證永遠不會出錯，但排得多了，并不斷總結經驗教訓，每次在推送前都認真檢查預覽效果，出錯的情況一定會越來越少。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）