<table><tbody>
除了乾貨，其它什麼也沒有
職場
數據
新媒體
設計
極客
新媒體高級交互排版定製：021 37218818
老闆進入了設計部的誇誇群
丟下一句“改回第一稿”……
（點擊上方綠色的「發送」按鈕）
當然以上對話純屬虛構，是 JZ 為大家提供的一個趣味交互圖文 SVG 代碼模版。只要點擊按鈕就可以發送短句，並支持修改群成員的回覆。修改方法將在後文詳述，歡迎免費取用，但我們目前不向任何第三方編輯器授權引用。
模板保留了文字的文本格式，在快捷修改後能夠生成新的誇誇群效果，比如▼
老闆又進入了新媒體部的誇誇群
又丟下一句“預算不夠的！”……
（點擊上方綠色的「發送」按鈕）
如何獲取模版
如果想獲取模板，可參與明天的第三期《硬核運營》微淘直播。我們將分享新媒體行業的黑科技軟件/工具/網站，並在直播過程中提供模版下載的超鏈接。模板包含了
.html 代碼包和AI 設計稿。
直播時間
3月22日13:00開始
複製以下口令，打開淘寶即可
￥pEprbxoCFe6￥
模版內含
如何使用模版
1.構思誇誇群的劇情
比如第一句文案可以是“XX產品上新了！”，下方群友誇誇產品；也可以是“XX項目啟動了！”下方群友誇誇項目等……總之，你一共需要確定五段文案，以及群的名稱要另行設定。
2.代碼修改
在編輯器中直接通過查找功能，可以鎖定模板中的對應文字位置。第一句文案在兩處出現（文本框+對話框），其餘文案各一次。每段文案修改時，除了最後一行請確保每行 10 個全角字符。代碼的閱讀、書寫、修改基本規則在新書《硬核運營》中P132-146頁可查閱▼
3.設計修改
注意如果對 AI 矢量稿進行了調整，那麼代碼的對應內容需要重構。務必確保對教程《教程｜高級 SVG 交互式排版入門指南》嫻熟掌握，在修改時，不要輕易改動圖層順序。
4.定製服務
更長篇幅的誇誇群特效或其他創意交互圖文，可添加微信號 Zhuoya_Work 或致電 021 37218818 聯繫。
技術實現原理
面向開發者級粉絲，我們依然提供對本套模板的一些技術分析講解。首先，單次點擊後的連續動畫觸發，運用的是和《》相同的設計原理，其 AI 中的圖層編組順序尤其重要▼
其次，本作品也重點實驗了對<code><pointer-events>/<code>穿透觸發的應用——手機殼透明圖片通過<code><margin-top>/<code>覆蓋住了交互區，基於穿透觸發確保了用戶依然可以擊中下方的 SVG 模塊。我們在上一期《》中應用到了它。
最後，本模板設計了基本的防誤觸，以一個透明矩形完整覆蓋了對話區域避免用戶提前擊中使得動畫中途啟動▼
進一步的模版製作全流程教學，我們將在以下課程中更新一節對應視頻課程（本課程內含《硬核運營》圖書）▼
長卷式SVG高級交互圖文設計標準流程
卡地亞的這套創意排版是如何實現的？
蘋果的這套創意排版是如何實現的？
星巴克五仁月餅排版出現重大失誤
哪些排版技巧簡單卻創意非凡？
文科生，如何學好代碼 H5 排版？
其他你會感興趣的內容
回覆 H 5閱讀更多移動營銷技術帖
回覆 廣告學習更多創意廣告策劃案
回覆 排版查看花式新媒體排版技術
回覆 矢量瞭解免費矢量素材的圖庫
回覆
二維碼入門藝術化二維碼設計H5、平面、視頻等數字營銷服務請致電
TEL：（021）3721 8818
合作客戶：APEC 峰會 | 中國航天科技集團 | 香奈兒 | 肯德基（湖南） | 華為 | 三星中國 | 中國國際航空 | 湖北省電視臺 | 河南衛視 |浙江省人民廣播電臺 | 三生製藥 | 交通銀行 | 建設銀行 | 真格基金 | 南方週末 | 上海閔行教育學院 | 牛津大學出版社 | 新東方集團 | 偉巴斯特 | 雪佛蘭汽車 | 觀致汽車 | 雷諾汽車 | TNS 新華信 | 高力國際｜第一太平戴維斯｜德國萊茵｜蓋茨基金會｜追星集團
抱歉，除了乾貨，其他什麼也沒有。
閱讀更多 JZ多媒體解決方案 的文章
