07.04 “一键关注”失效？两种神排版恢复！

<table><tbody>

除了干货，其它什么也没有

职场

数据

新媒体

设计

极客

企业级新媒体托管服务：021 37218818

微信近期上线正式的“关注公众号”广告投放服务，并选择了业内此前流行的卡片样式（见本文）。

为避免混淆，微信团队通过更改带透明度图片的查看方式，使得原先很多公众号常用的关注小卡片完全失效。

但是没有什么排版问题是不能解决的，如果有，那就问 JZ。下面来看两种具体解决办法和模板。

二维码隐形法

这里涉及一种在图像透明度保持 1 的情况下（完全可见）依然让你无法察觉的排版策略，其卡片效果如下▼

除了干货，其他什么也没有

职场｜数据｜媒体｜设计｜极客

就其原理，其实和《别当新媒体小编了，他们太……》中的矩阵按钮完全一致。即在一张 PNG 图片中：

• 文案内容均为白色

• 二维码黑色部分镂空

由于微信采用的是截屏二维码扫描模式，因此当二维码进入图片查看状态时，黑色的查看器背景能重新填充镂空部分，被系统“误判”为一个有效二维码。这种新的卡片设计模式，极其适合格调较高的品牌，在不遮挡到按钮边框、文字的情况下，你还可以添加更多黑白纹理内容。

当然，这里会比较考验新媒体人对二维码镂空的图像处理能力。以下为样式的代码 DEMO，既可以用于这里的隐形二维码式也可以用于后面的溢出卡片式▼

如果你确实无法处理好相关效果，可以点击下方小程序请求 JZ 的技术支援服务▼

卡片溢出法

卡片溢出法是 JZ 首席讲师 GL 昨晚发布的另一种解决方案。同样，我们要隐藏的卡片在参数上是“可见”的，但是在 CSS 布局的时候，凭借<code><overflow>/<code>确保溢出父元素的内容不可见。

图片隐藏对排版而言其实应用场景曾十分广泛。比如一度被苹果绞杀的“赞赏”就可以通过如下效果引导 iOS 用户。

▼ 布局示意图 ▼

也欢迎你加入整个知识星球高处不胜寒的新媒体运营社群，日常社群活动包括：1.每周一节视频课 2.每日接收行业早报 3.任意向社内大神提问 4.高频共享代码包 5.高频共享设计素材 6.高频共享图文教程 7.社员互评互助 8.不定期任务挑战 ……开放年费制度（￥365）

其他你会感兴趣的内容

回复 大 V阅读圈内大号背后隐秘故事

回复 排版获取更多专业图文排版教程

回复 代码学习其他高阶代码创业设计

回复 H 5开启移动营销的技术进阶路

H5、平面、视频等数字营销服务请致电

TEL：（021）3721 8818

抱歉，除了干货，其他什么也没有。

閱讀更多 JZ多媒體解決方案 的文章

關鍵字: 交通银行 设计 iOS