限量報名!14款黑科技樣式可以重複使用了!

大家好，我是老沙。

我發現，每次給大家分享好玩的黑科技交互玩法和案例的時候，出現最多的一類留言通常是

「怎麼實現啊？」

「是不是需要定製？」

「定製只能使用一次嗎？」

「怎麼收費啊？」

……

關於這些問題，老沙賣個關子。因為今天和以往不同，我們一口氣給大家準備了14款黑科技樣式，都是日常圖文中最為實用且常用的，大家先看這14款樣式長啥樣。

無縫長圖(不可彈出)、

批量無縫長圖(不可彈出)

來自「星巴克中國」：

點此查看原文

雙擊-切換圖片

Demo：

_-_-_-[{"title":"雙擊-切換圖片","widgets":"[{\"type\":\"DoubleClick2ToggleWithoutTrigger\",\"options\":{\"defaultImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/aee1419b52f13f1c014ea90da992bca0.png\"},\"baseImg\":{\"media_id\":\"c47061dd240b6474502e3f29f464edfc.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/c47061dd240b6474502e3f29f464edfc.png\",\"type\":0,\"star\":false,\"name\":\"3_1604045253000_7359--3.png\",\"size\":620579,\"total\":157},\"toggleImg\":{\"media_id\":\"1967ed20ba9b273d67ce7618a0811540.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/1967ed20ba9b273d67ce7618a0811540.png\",\"type\":0,\"star\":false,\"name\":\"3_1604045254000_2097--4.png\",\"size\":552844,\"total\":157},\"dur\":1},\"styles\":\"\"}]"}]-_-_-_

👆🏻雙擊變換圖片👆🏻

小程序-圖片(無連結提示圖標)

來自「香奈兒尊享香水與美容品」：

_-_-_-[{"article_id":"739074c5555eee7849af065147865715","widgets":"[{\"type\":\"ImgMiniProgrameWithoutIcon\",\"options\":{\"baseImg\":{\"media_id\":\"d37f99fe75f06cd229645bfde848189e.jpeg\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/d37f99fe75f06cd229645bfde848189e.jpeg\",\"type\":0,\"star\":false,\"name\":\"3_1604230909000_5014--香奈兒.jpeg\",\"size\":42350,\"total\":163},\"showIcon\":false,\"appID\":\"wx8b5362b3e90cd150\",\"path\":\"\"},\"styles\":\"\"}]"}]-_-_-_

點此查看原文

小程序-圖片(默認連結提示圖標，位置可調)

Demo：

_-_-_-[{"title":"小程序-圖片(默認連結提示圖標，位置可調)","abstract":null,"article_id":"0d753c42a49428bbe4b38440b9d91f52","widgets":"[{\"type\":\"ImgMiniProgrameWithIconAnyWhere\",\"options\":{\"baseImg\":{\"media_id\":\"b97453f4160d58cfcea5f206c3a77d1d.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/b97453f4160d58cfcea5f206c3a77d1d.png\",\"type\":0,\"star\":false,\"name\":\"3_1604045522000_6540--5.png\",\"size\":324089,\"total\":158,\"width\":20,\"height\":20,\"x\":14,\"y\":12},\"appID\":\"wx7c8d593b2c3a7703\",\"path\":\"\"},\"styles\":\"\"}]"}]-_-_-_

👆🏻默認右上角的圖標，放到了左上角👆🏻

小程序-圖片(自定義提示圖標，位置可調)

Demo：

_-_-_-[{"title":"請輸入文章標題","abstract":"","article_id":"d0879da71edbc2491152a637952b5c8c","widgets":"[{\"type\":\"ImgMiniProgrameWithCustomIconAnyWhere\",\"options\":{\"baseImg\":{\"media_id\":\"e5f4500dfa184037f66f21474543a899.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/e5f4500dfa184037f66f21474543a899.png\",\"type\":0,\"star\":false,\"name\":\"5_1603887966000_8625--沙師弟.png\",\"size\":209268,\"total\":163,\"width\":46,\"height\":46,\"x\":278,\"y\":286},\"iconImg\":{\"media_id\":\"dd10ef71a379937b25d8b899d8cfaad1.jpeg\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/dd10ef71a379937b25d8b899d8cfaad1.jpeg\",\"type\":0,\"star\":false,\"name\":\"5_1603872699000_8594--WechatIMG2434.jpeg\",\"size\":120948,\"total\":163},\"appID\":\"wx25f982a55e60a540\",\"path\":\"pages/product/list/list?utm_source=wechat_post_201009bichm\"},\"styles\":\"\"}]"}]-_-_-_

👆🏻自定義提示圖標，並調整了默認位置👆🏻

超連結-圖片(無連結提示圖標)

來自「平安人壽」：

點此查看原文

超連結-圖片(默認連結提示圖標，位置可調)

Demo：

_-_-_-[{"title":"超連結-圖片(默認連結提示圖標，位置可調","abstract":"","article_id":"739074c5555eee7849af065147865715","widgets":"[{\"type\":\"ImgHrefWithIconAnyWhere\",\"options\":{\"baseImg\":{\"media_id\":\"e580dea3dcef38cfb2f800d73bd7e045.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/e580dea3dcef38cfb2f800d73bd7e045.png\",\"type\":0,\"star\":false,\"name\":\"3_1604048335000_2226--2.2.png\",\"size\":709321,\"total\":160,\"width\":28,\"height\":28,\"x\":7,\"y\":8},\"appID\":\"https://mp.weixin.qq.com/s/ybPIg-7i01o819cxDXp4NQ\",\"path\":\"\",\"widthMode\":\"autofix\",\"width\":\"343\"},\"styles\":\"\"}]"}]-_-_-_

👆🏻默認右上角的圖標，放到了左上角👆🏻

超連結-圖片(自定義圖標、位置可調)

Demo：

_-_-_-[{"title":"請輸入文章標題","abstract":"","article_id":"cfb214a8ac42e50fb950637147164f2a","widgets":"[{\"type\":\"ImgHrefWithCustomIconAnyWhere\",\"options\":{\"baseImg\":{\"media_id\":\"f0ab962834896e97067b13cf52a9e861.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/f0ab962834896e97067b13cf52a9e861.png\",\"type\":0,\"star\":false,\"name\":\"5_1603872702000_7632--大師兄.png\",\"size\":582701,\"total\":156,\"x\":4,\"y\":299,\"width\":42,\"height\":42},\"iconImg\":{\"media_id\":\"be2eba70359e3752af4ac25c56dd6a0a.jpg\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/be2eba70359e3752af4ac25c56dd6a0a.jpg\",\"type\":0,\"star\":false,\"name\":\"5_1603872713000_6352--唐三藏.jpg\",\"size\":40693,\"total\":156},\"appID\":\"https://www.playhudong.com/#/mainContainer\",\"path\":\"\"},\"styles\":\"\"}]"}]-_-_-_

👆🏻自定義提示圖標，並調整了默認位置👆🏻

無縫拼接視頻

來自「紅星美凱龍」：

_-_-_-[{"article_id":"739074c5555eee7849af065147865715","widgets":"[{\"type\":\"Img\",\"options\":{\"singleImg\":{\"media_id\":\"6dddf7ef8cec4025d1dea9d965f39d3c.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/6dddf7ef8cec4025d1dea9d965f39d3c.png\",\"type\":0,\"star\":false,\"name\":\"3_1604239844000_2040--111.png\",\"size\":631727,\"total\":167},\"isTop\":true,\"bgMode\":\"without\",\"widthMode\":\"autofix\",\"width\":\"343\",\"containerWidth\":\"343\",\"containerWidthMode\":\"autofix\",\"bgImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/3410a581ea803bcc5e9ae77f87241a76.png\"},\"imgs\":[],\"bgRepeat\":\"no-repeat\"},\"styles\":\"\"},{\"type\":\"Video\",\"options\":{\"mpvid\":\"wxv_1587898137514442754\"},\"styles\":\"\"},{\"type\":\"Img\",\"options\":{\"singleImg\":{\"media_id\":\"29d20c077dcdb04a6b081a867579773c.jpeg\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/29d20c077dcdb04a6b081a867579773c.jpeg\",\"type\":0,\"star\":false,\"name\":\"3_1604239846000_328--222.jpeg\",\"size\":31071,\"total\":167},\"isTop\":true,\"bgMode\":\"without\",\"widthMode\":\"autofix\",\"width\":\"343\",\"containerWidth\":\"343\",\"containerWidthMode\":\"autofix\",\"bgImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/3410a581ea803bcc5e9ae77f87241a76.png\"},\"imgs\":[],\"bgRepeat\":\"no-repeat\"},\"styles\":\"\"}]"}]-_-_-_

點此查看原文

橫版無縫視頻

來自「雅詩蘭黛」：

點此查看原文

橫版無縫視頻(窄屏)

來自「有時WHISKY」：

點此查看原文

隱藏式音頻(需自上傳素材)-窄屏

Demo：

_-_-_-[{"article_id":"739074c5555eee7849af065147865715","widgets":"[{\"type\":\"HiddenAudio\",\"options\":{\"baseImg\":{\"media_id\":\"a814c043d30cbd4075a6bb1423b4a804.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/a814c043d30cbd4075a6bb1423b4a804.png\",\"type\":0,\"star\":false,\"name\":\"3_1604048336000_8726--2.png\",\"size\":585186,\"total\":160},\"mid\":\"MjM5Njc2NDE0NV81MDUwMjE2ODc=\",\"x\":108,\"y\":47},\"styles\":\"\"}]"}]-_-_-_

👆🏻輕觸小女孩頭部，聽流水聲👂

隱藏式音頻(需自上傳素材)-自適應寬度

來自「春風金沙」：

_-_-_-[{"article_id":"739074c5555eee7849af065147865715","widgets":"[{\"type\":\"Img\",\"options\":{\"singleImg\":{\"media_id\":\"e2065ee18a7cc7b3032e327324298fec.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/e2065ee18a7cc7b3032e327324298fec.png\",\"type\":0,\"star\":false,\"name\":\"3_1604239614000_9822--66.png\",\"size\":33070,\"total\":165},\"isTop\":true,\"bgMode\":\"without\",\"widthMode\":\"autofix\",\"width\":\"343\",\"containerWidth\":\"343\",\"containerWidthMode\":\"autofix\",\"bgImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/3410a581ea803bcc5e9ae77f87241a76.png\"},\"imgs\":[],\"bgRepeat\":\"no-repeat\"},\"styles\":\"\"}]"}]-_-_-_

點此查看原文

點擊切換圖片(單張、設置交互區域)

來自「美的微蒸烤」：

點此查看原文

和以前單篇圖文定向定製不同，此次i排版黑科技正式開放20名限量會員，以上14款黑科技排版樣式便是為此次20名會員準備的，每一個樣式不再是只能定製應用一次，而是一年內可重複使用。

除了可重複使用，樣式還有什麼優勢？

第一，可適配深色模式。即圖片在深色模式下仍保持高亮狀態不變色，保證產品照準確的色值，給用戶完美的閱讀體驗。

   

▲正常模式與深色模式下，白色圖片的顏色對比

第二，樣式中的圖片皆可點擊不彈出。即用戶在閱讀圖文過程中不小心誤觸圖片，圖片不會彈出放大破壞閱讀的流暢性。Apple 每篇圖文都採用了這種技術。當然不想要這種效果也是可以的。

如何成為會員？

報名！

原價1200元

現只需500元起

即可全年不限量使用某一模板

掃描下方二維碼

付款報名後請一定添加

沙師弟微信（ID：Playhudong003）

如果有感興趣的企業或品牌需要定製黑科技排版，請添加玉兔微信溝通。
●i排版正在參加金鳴獎最佳移動營銷服務商評比，請大家幫忙投投票吧，一人一天可投3次！