Apple、GUCCI等品牌的圖文為什么精致？教你下載他們的素材慢慢學
制作了同樣的動圖，使用了同樣的交互效果，為什么很多大品牌的排版還是總顯得更精致一些？
這是很多剛接觸交互排版的小伙伴常常遇到的苦惱，相信一些使用很久交互排版的可能也會有這個疑惑。
其實原因很簡單：細節，細節，還是細節。
細節兩個字說起來簡單，做起來……也不難，但是麻煩。
用Apple、GUCCI、沃爾沃和蕉內的4個案例給大家說下就明白了。
1Apple
下面是Apple圖文《新 macOS，連 iPhone 和 iPad 都點贊》開頭的一個動態效果，很多人以為是一張單次播放的動圖。
▲為方便展示說明，此處為錄制的循環播放動圖，原動態效果請進入原文查看
但是，當你讓設計師制作了同樣效果的動圖并插入圖文中后，你可能會發現兩個問題：動效不是那么順滑，圖片也沒有那么清晰了。
這是因為公眾號后臺對動圖進行了壓縮，而這種壓縮是難以避免的。那Apple怎么弄的？
下載Apple原文的素材，一下就真相大白了。
它其實是將4張靜態圖用代碼實現的動態效果，讀者打開圖文，4張圖片依次浮現，效果比動圖精致很多。
該效果用 iPaiban Pro 編輯器的「自動-逐行顯示」組件（編號：11111）可以實現，教程：《文案自動一行一行地顯示，這是怎么做到的？》
也就是說，圖文中的動態效果，能用排版實現最好不要做成動圖。
2GUCCI
GUCCI這個視頻號圖片很是經典，這種動態效果肯定是動圖了，但它不是一張簡單的動圖。
GUCCI為什么這么做？還是為了避免公眾號后臺對動圖的壓縮，如果將這兩張圖片制作成一張動圖，那視頻號樣式就沒那么清晰了。
也就是說，動圖中的元素能拆分的盡量拆分，后期再通過排版拼合。
像「遮罩」「零高圖片」「多層圖片」等組件都很適合拼合圖片，相關教程：
《別用Ps了，背景圖＋ GIF 超簡單！雙層、三層都能疊加》
上面兩個例子都是討論的在動效方面讓圖文更精致，之前老沙整理過《如何像蘋果公眾號的動圖一樣清晰？》的5種方法，戳藍字可了解更多。
下面再講講圖片角標：
3沃爾沃汽車
原生的的超鏈接圖片和小程序圖片在右上角都會自帶角標，而角標太多則會影響圖文整體的美觀，所以老沙之前建議大家使用 iPaiban Pro 編輯器的相關組件去掉角標。
但角標還有一個提示點擊的作用，有小伙伴擔心去掉角標影響打開率，那怎么辦？
沃爾沃是這樣做的：重新設計角標，與圖片設計風格相融合。這樣美觀和提示作用就都兼顧到了。
4蕉內
我們再看蕉內的這個圖片角標，其實也做了小小的優化，大家下載素材就能發現角標是和圖片設計在一起的。
以上只是一小部分細節的例子，想要發現這些細節，第1步就是把素材下載下來，通過素材，大家可以好好研究那些優秀的排版是怎么做出來的。
下載圖文素材就用 iPaiban Pro 小助手v2.0插件，它不僅可以一鍵下載圖片，還會將下載的圖片自動打包并以【公眾號-日期-圖文標題】格式命名好，壓縮包里的圖片也是按文章里展示順序一一排列好了。
下面近20篇圖文的800多張圖片下載僅僅用了不到8分鐘。
詳細安裝和使用教程：《iPaiban Pro小助手v2.0來啦！》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）哦。
一個互動
你還知道哪些
可以提升排版精致度的細節？
留言區聊聊
● SVG 黑科技交互排版????????
點個“在看”
戳沙小僧（playhudong033）
領交互圖文案例庫30天會員
（含數千品牌的32000+案例）
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）