“先點后滑，Apple這個排版效果怎么做的啊？”
如果讓你把點擊和滑動兩個效果組合一下，你會怎么設計？
Apple給出了答案：
*素材來自Apple《出門玩啦！手持這套絕活，旅行全程罩住你。》
組件：Apple同款-點擊向左移出+左滑(自動對齊)
編號：11702（組件）
點擊一下封面圖，滑動圖從向左移入進場，就是這么簡單，但很實用。
那可以怎么用？
比如通過封面圖，我們先簡要介紹產品的功能，然后滑動圖中具體介紹；也可以在封面圖設置一個懸念，引導用戶點擊在滑動圖中揭示答案……用法很多。
Apple做產品一直追求的就是極簡舒服實用，具體到這樣一個小小的排版交互上，依舊如此。
使用 iPaiban Pro 黑科技編輯器可制作同款效果啦，另外還有衍生的點擊+右滑效果：
*素材來自Apple《出門玩啦！手持這套絕活，旅行全程罩住你。》
組件：點擊向右移出+右滑(自動對齊)
編號：11703（組件）
下面一起看下制作教程吧：
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：Apple同款-點擊向左移出+左滑(自動對齊)
編號：11702（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「點擊」-「滑動切換」分類中找到「Apple同款-點擊向左移出+左滑(自動對齊)」組件，或者直接搜索組件編號11702，點擊選擇。
第2步：上傳圖片素材
點擊頁面右側「換圖」按鈕，上傳封面圖，點擊「+」號批量上傳滑動圖。封面圖和所有滑動圖的尺寸需保持一致。
第3步：調整觸發區域
雙擊編輯區上傳的圖片，調出點擊觸發區。紅色色塊即代表觸發區域，拖動紅色色塊到指定位置即可。
第4步：調整動畫參數
在頁面右側最下方，滑動滑桿可調整封面圖移出的動畫時間。
點擊最右側「預覽草稿」可隨時預覽效果，然后根據效果不斷進行調整即可。
第5步：導入公眾號后臺
預覽效果滿意后點擊右側「同步至微信后臺」就可以了。
使用同步功能不用頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼預覽在公眾號的效果。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。
新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）