随便找苹果公众号的一篇推文,大家可以点开看看:《别让它发现,你在守护它。》。
版式是很常见的长图无缝拼接,但与其他账号不同的是,这篇推文中的图片是不能点开的,不止这一篇,苹果推文中的图片基本上都是不能点开的,除了底部的二维码,因为二维码就是让人点的。
苹果为什么这么做?
图片不能点开的好处有三:
1.避免打断阅读
一图流就是为用户创造一种沉浸式的环境,让用户阅读时就像坐滑梯一样,不间断的一口气读完。
如果用户在滑动屏幕的时候,不小心点开了图片,很容易破坏内容的流畅性,从而打断阅读。
2.防止隐藏的图片露馅
如果我们在图文中使用某个样式隐藏了一些图片,比如「点击变换图片」中的第2张图片,而用户在该样式之前,恰好点开了图文中的某张图片,然后不自觉地左右滑动屏幕,苦心隐藏的图片岂不是被看到了嘛?
接着用户回到图文继续阅读,看到「点击变换图片」时,按照提示点击变换出来一张刚刚见过的图片,新鲜感必会大打折扣。
3.利于版权保护
就是说文案和图片不易被盗用了,这个就比较好理解了。
苹果将文案设计在图片上,图片又不能直接点击保存,想盗用图片的人虽然也可以截屏,但“门槛”高了,图片质量也会有所下降。
这是怎么做到的?
很简单,秘诀就是嵌入了 Svg 代码:
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 813 1364" xml:space="preserve" style="display: inline-block;width: 100%;vertical-align: top;background-position:0% 0%;background-attachment: scroll;background-repeat: no-repeat;background-size: 100%;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/5ichCnWH60HGd9smcFjPWnZhoibLyyLxqUeqTvOwsO6BxXkbH45wwsHrC8FET59dDdibVf6ZFGrpKLW9ynKyD4Eng/0?wx_fmt=png");-webkit-tap-highlight-color:transparent;">
</svg>
如果你也想实现图片不能点开的效果,可以复制上方代码至i排版编辑器(iPaiban.com)的 HTML 中,然后替换代码中的图片网址(下图红线所示),并更改图片尺寸(下图红框所示)即可。