专栏首页社区的朋友们【小程序码设计篇】菊花绽放
原创

【小程序码设计篇】菊花绽放

作者:lincolnlin,endyxu,changoran

2017 年四月,微信正式推出了小程序码。小程序码的使命及诞生的过程, 扫码背后藏了什么秘密?小程序码又为何长得像菊花? | 你问鹅答 一文已经作过一番介绍。本文将为你剖析更多关于小程序码的技术细节。

小程序码的前世

初见小程序码,犹如一朵盛开的菊花。

其实这种脑洞大开的异形码并非微信首创,Facebook、kik、snapchat 等公司都研发了自己体系的码。

从设计的图形上,我们把上述方案简单分成:

• 平面类 如 qrcode ,snapchart code

• 环状类 如 fb code,kik code,

考虑到专利风险,又要兼顾优雅美观,我们最终选择放射状作为我们的 base 方案,也就是最后面世的“菊花码”。

小程序码的构成

小程序的 3 个“牛眼”用来定位,放射线条编码信息,这是一个大家都懂的原理。但”麻雀虽小,五脏俱全“,小程序码与 QRCode 类似,同样包含了定位区,编码信息区,元信息区等部分,除此以外,我们还加入了自定义 Logo 区,下面让我们来解剖一下小程序码。

如何生成一个小程序码

”万丈高楼平地起“,那小程序码是如何一砖一瓦构建起来的呢?我们以一个实例来演示小程序码的生成 。

1 .定位点

定位点主要用于标记小程序码的大小及在图中的位置,与 QRCode 类似,我们采用了 3+1 的方案,3 个主定位点加一个辅助定位点。可以发现,定位点的对角连线交点刚好是码的圆心,3 个主定位点又刚好组成一个等腰直角三角形。以上的特征,非常有利于定位识别。

2 .信息编码区

我们会把原始编码的字符串,转换成 01 的序列,再加入纠错码,得到最终 01 序列。我们只需要把 01 序列按一定的编码路径,填充到信息编码区的方格中即可(0 为白,1 为黑)。小程序在图案编码阶段,也是按点编码的的,并没有线的概念。

3 .掩码图案

填充好编码区之后,我们发现图案与设计稿大相径庭,并没有发射状线条的感觉。究其原因,是因为黑色点过于稀疏。所以我们还要做 mask,加上掩码图案。

mask 的原理其实就是拿一个掩码图案与原图做 XOR 操作,在解码阶段,再做一次 XOR 操作,两次 XOR 操作,我们得到了原始的数据区。

我们按照一定的规则,预先设定了 32 种 mask 模板。在码生成阶段,会寻找一个最佳的 mask,让我们的黑白分布更具线条感。mask 完成后,我们得到了下面的效果图。

4 .元信息区

前面我们提到,小程序码分为多个版本,每个版本有 4 个纠错 Level,同时 mask 阶段又有一个独特的 mask id。这些信息,我们称之为元信息,需要独立编码到图案中,并且本身具备纠错能力。

至此,我们已经把所有必不可少的信息写入到图案中,码本身已经是可识别的了。为了让整体更加美观,需要对内外圈再进行一些处理。

5 .轮廓填充区

为了凸显 logo 的形状,我们在内圈留了一些区域作为轮廓填充区。

6 .边缘补全区

最外圈也不带有编码信息,用于勾勒图案的轮廓,总体上我们有以下两种方案

方案一更突出图案更加圆的特点,但方案二可以让线条显得更加错落有致,也是我们的最终选择。

可扩展

  • 为了让小程序码在编码容量上的需求,我们设计了 36 线,54 线,72 线三种版本,每个版本支持由低到高 L,M,Q,H 四种纠错等级,分别能纠错 10%,15%,25%,35%的信息。
  • 不同的版本,在不同的纠错 Level 下,采用不同的字符集,其最大编码容量如下

编后语

从小程序码设计上,有以下几个特点

  • 高识别度 保留最核心的中间区域给使用者自定义,让每个品牌商都有自己的专属码
  • 高容错 实际应用中,大部分 QRCode 由于中间部分被 logo 覆盖,有效编码区域丢失。而小程序码是无损的,在相同纠错等级的情况下,容错性更高。
  • 更安全 QRCode 由于其开放性,容易成为“病毒”的温床。而小程序码采用完全私有的协议,只有微信可以生成,也只有微信可以解码,用户可以放心的打开扫一扫。

最后我们再通过下图,感受一下小程序码这朵“菊花”绽放的过程。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 各种字符编码详解

    相信很多人编程中经常遇到编码问题,也在这上面踩了不少坑。花了点时间把所有常用的编码搞清楚。

    serena
  • iOS 架构设计之冗余性思考

    做客户端开发的同学都知道业务需求千变万化,你永远不知道他未来会变化成什么样子。而作为开发人员也绝对不喜欢需求变更。我们极不情愿跟着这纷繁复杂的变化屁股后面,而疲...

    serena
  • 开源助力腾讯云容器服务

    腾讯很多业务早已经跑在容器平台上,所以说腾讯内部对容器这块也积累了很多经验和教训,这次分享的主题,就是当我们把容器服务放在云上的时候,我们碰到的一些问题,以及我...

    serena
  • 腾讯技术开放日 | 保障视频连线画质清晰且流畅,腾讯会议有这些优化实践

    导读 | 腾讯会议自去年12月底推出,在疫情期间极速扩容,日活跃用户超过1000万。面对数量庞大的用户,以及他们背后网络、设备的多样性,该如何针对各个场景进行...

    腾讯音视频实验室
  • 问题分析:什么导致mysql乱码?

    之前出现过一些因为mysql编码使用不正确,导致出现页面乱码的bug,比如utf8不支持Emoji表情等等。这里对乱码问题做下分析,沉淀下来避免再次出现

    王昂
  • 微信更新!朋友圈变傻,但小程序更好用了

    这次更新是小版本更新,从 6.7.0 升级到 6.7.1。官方的更新说明就一个——「可以把常用的小程序添加到我的小程序」

    用户1745481
  • 微信更新!朋友圈变傻,但小程序更好用了

    这次更新是小版本更新,从 6.7.0 升级到 6.7.1。官方的更新说明就一个——「可以把常用的小程序添加到我的小程序」

    用户1745481
  • 小程序5种推广策略,赶紧干!

    小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念。小程序能够实现消息通知、...

    用户1745481
  • 五大渠道,让小程序推广不再难!

    小程序发展至今,之所以被众多商家和企业重视,也是因为其易推广的特点。在流量成本如此高的情况下,小程序的低成本获客可以算是互联网的一股清流了。

    场景录小程序
  • 引流效果显著,小程序商业化进入快车道

    小程序从2017年上线至今已有3年,从寂寂无名到流量新贵,特别是疫情期间,基于微信平台上,小程序的日活跃用户达到了4.5亿,无论是从流量还是应用场景来说,小程序...

    耐思智慧

扫码关注云+社区

领取腾讯云代金券