中國人民銀行的這篇嵌套展開圖文,是怎么做的?
上周中國人民銀行發布的一篇SVG交互圖文,用手繪漫畫配合嵌套展開的交互效果演繹了一出《防范非法集資情景喜劇》,有趣又有料,咱們趁熱打鐵,今天就來看看是怎么制作的。
這里給大家直接貼過來:
這篇圖文中一共有6個展開,其中1個展開中嵌套著另外5個平級展開,這種嵌套展開的效果給人層層遞進的感覺,非常適合具有故事性的圖文。
而它制作起來也并不難,因為在 iPaiban Pro 黑科技編輯器中有專門的嵌套展開組合,使用它可以很方便地在展開中嵌套展開。
另外你也可以在「品牌時光機」SVG案例庫里搜索找到此文,iPaiban Pro 的高級版會員,或者擁有這里面的組件權限的 iPaiban Pro 用戶點擊「一鍵還原草稿」直接就可以制作同款交互。
一起看下用 iPaiban Pro 制作《防范非法集資情景喜劇》圖文的整個過程:
i排版黑科技
詳細教程:
工具:iPaiban Pro 黑科技編輯器,網址:x.iPaiban.com組合:點擊展開(可嵌套展開,固寬)編號:10875(組合)組合:點擊展開(有觸發區)編號:10051(組合)
第1步:選擇組合
登錄 iPaiban Pro 編輯器后,點擊編輯器左側「組合」按鈕,在「嵌套展開」分類中選擇「點擊展開(可嵌套展開,固寬)」組合,或者在組合中直接搜索編號10875。
第2步:進入組合編輯模式
如下所示,點擊「編輯組合」,進入組合編輯模式。
在組合編輯模式中,我們需要設置展開前和展開后的內容。
第3步:設置展開前和展開后的內容
展開前的內容只有一張圖片,點擊展開前區域,然后在右側點擊「換圖」上傳圖片。
設置展開后的內容,總共分為3步:添加組件位-拖動組件/組合到組件位中-上傳素材。
每需要一個交互效果按照這3步走就可以,動圖演示:
選擇什么組件/組合大家根據自己想要的交互效果來定,央行《防范非法集資情景喜劇》圖文在展開中嵌套了5個展開組合,所以我們需要放置5個組件位,然后分別拖入「點擊展開(有觸發區)」組合(編號:10051),如下所示:
第4步:編輯二級展開
在展開后的內容中拖入點擊展開組合后,接著用同樣的方法在展開中嵌套「全能無縫圖」組件,然后上傳素材即可。
第5步:調整展開效果的參數
每一個展開組合至少可以調整2個參數:展開時長和展開高度,點擊右側紅色小三角可以看到。
展開高度一般無需調整,但當大家在手機上預覽時,如果發現展開后有多余的空白或者沒有展現出全部內容,這時候就可以通過調整展開高度使其精準展開。
第6步:導入公眾號后臺
內容編輯完畢后,點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
效果滿意后接著點擊「同步至微信后臺」同步到自己的公眾號就可以了。
局部導入可參考:《iPaiban Pro小助手v2.0安裝和使用教程》
轉載請在文章開頭和結尾顯眼處標注:作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載,授權事宜請聯系作者本人,侵權必究。
本文禁止轉載,侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權,侵權必究。
評論
評論
推薦評論
暫無評論哦,快來評論一下吧!
全部評論(0條)