注:查看本文前,请先确保你手机里有足够可扫描二维码的App(微信/微博/QQ/浏览器/淘宝/支付宝/我查查/豌豆荚/360……)

二维码,业界当然是人人听说,人人用过。

这个话题,我倒是百感交集,我一直认为,我有一种“二维码情节”。

一方面,我自认为是国内“钻研”二维码比较早的一个人了,大学时也自己业余开发了一款 Android App “爱购扫描”,主要做条形码比价和二维码扫描。而在后来的工作中,依旧会接触到二维码的利用,让我打开了更多的思路;另一方面,二维码的高度灵活,导致每个人、每个产品对它的理解都不一样。一直以来,国内公司更是在这方面不论是产品功能,还是互动营销上,都做得实在太粗糙。所以很难找到一个完美的方法,来把二维码真正的能力诠释出来。

这篇文章,我试着从原理实践以及进阶技巧三个方面,来讲讲二维码可能对任意互联网产品带来的益处。若能真正对哪怕一个用户带来便利,我也倍感荣幸。

一、二维码本质是什么?

如果你对这个问题了如指掌,那么请直接跳过。否则(尤其是非技术出身的产品经理)就一定要先知道,二维码到底是个什么东西?

一个普通的二维码

二维码(dimensional barcode,大家习惯称QR Code)是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的。

简单粗暴的解释就是:二维码它就是把一段纯文本用图形样式转换出来了,以便于快速扫描读出。

这样做的原因在于,如果我有一堆比较凌乱的文本(比如一个很长的URL、一些加密后的字符串、或者一个复杂的快递编号),想把他们快速输入电脑/手机里的话,靠人肉是非常痛苦而容易出错的。但经过二维码巧妙的编码后,就能用低廉的扫描枪,或者普通的手机摄像头快速扫描录入,大大节省了时间;而且转换成编码后,哪怕任意一个字母,也不可能出现识别错误。

二、现有产品都是如何利用二维码的?

我这里举几个最普遍的例子:

1、H5官网、App下载地址

这个真的不必介绍太多,就是直接把网站或 App 的 URL,直接生成二维码,然后搬到 WEB 上或者线下进行推广。

2、微信

二维码的推动,在国内最大的功臣就是微信,这也得益于各种电梯外卖传单广告会显眼标注的「微信扫一扫」。我们来看看微信的二维码长啥样:

微信二维码

这个…二维码呐,它看起来都是这样对吧?但前面说过,二维码它就是把一段纯文本用图形样式转换出来了,所以我们随便找些工具扫描下(例如 https://www.dute.org/qrcode-scanner),上面的二维码对应的文本其实是这样的:http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT

没错,微信名片的二维码,对应的是一个特殊的URL,仔细看应该能猜到:后面 QeD64j-EGGJnrXuB97VT 这部分内容,就是包含了一个用户ID的信息(并且是经过加密的)。微信在扫描到 http://weixin.qq.com/r/开头的二维码时,就把后面 QeD64j-EGGJnrXuB97VT 部分解析,搜到这个用户(至于为什么后面部分要加密,你猜咯?)。

3、微博

了解了微信,再来看看微博二维码:

@微博二维码

直接看二维码内容:http://weibo.cn/qr/userinfo?uid=1654762943,这个更好理解了吧?最后的 UID 就是微博用户的ID了。客户端扫描到 http://weibo.cn/qr/userinfo? 开头信息,就抓取后面 UID,并把该用户主页展示给扫描者(对了,相比微信,微博二维码里UID又是公开的,又是为什么呢?)。

好了,我们常见二维码也可以说是两类,一类是一个单纯的URL,扫描就打开网页,或者直接下载APP;另一类是“设计过的”URL,只有用对应的APP扫描,才能跳转到正确的界面。

对于第二类二维码,除了微博微信,也还有很多。但他们在流程上几乎是一个原理:

扫描内容 –> 解析后匹配是否有固定部分 –> 获取动态部分 –> 跳转到对应界面。

三、二维码进阶:User Agent(UA)的利用

现在我们做个实验,还是刚刚的微信二维码:

微信二维码

我们也知道,它对应的文本信息(也算是个URL)为:http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT

接下来,请你依次(尽可能)完成下面的操作:

  1. 使用微信客户端扫描上面二维码,是什么结果?
  2. 使用 Android 微博(或者UC/百度浏览器/我查查)扫描上面二维码,什么结果?
  3. 使用 iPhone 微博(或者UC/百度浏览器/我查查)扫描上面二维码,什么结果?
  4. 在电脑上打开 http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT,什么结果?
  5. 找一部非主流系统(例如Firefox、Ubuntu)手机扫描上面二维码,什么结果?

不管你是否尝试了,我先来说下结果:

  1. 直接扫描到我的账号了,可以添加到通讯录
  2. 直接跳转浏览器开始下载微信 .apk 安装包了
  3. 直接弹出Appstore微信应用了
  4. 地址栏很快跳转了下,然后转到微信官网了
  5. 打开微信WAP官网了

So…明明是同一个 URL 啊,为毛它呈现出了5种截然不同的结果给我?

其实这里是微信利用 User Agent 信息,给你呈现了不同的结果而已。

User Agent 简称 UA,简而言之,就是你访问任何网站时,网站可通过你的 UA 得知你使用的操作系统、浏览器、浏览器内核等信息。这个信息最终是由你的浏览器传递给对方网站的(所以严格来讲你是可以修改的,看看你手机上第三方浏览器设置里的UA选项)。

上面的5个例子,除了第1个原理前面讲到了,后面4个,都是根据用户 UA,判断是4个平台的用户,所以给他们各自跳转到了对应的地址,提供准确的服务(具体如何实现?那你得找开发蝈蝈了~反正你就跟他说我要这个功能呗)。

掌握了这个小知识,你就可以很灵活地针对潜在扫描用户做出不同对待了。最低级的利用是,我不希望以后还能看到这种下载宣传了:

很多很多产品在宣传时使用过两张二维码

上图这种奇葩形态,刨除技术因素“不懂”外,产品上也是反人类的:现在手机像素高、速度极快,很多时候扫描二维码还没等你对准就已经完成了。这种情况下,用户很有可能就「被」扫描到隔壁的一个了,那还下载个毛啊?

四、二维码利刃:URL参数组合

又牵扯到另一个大话题了,先看下面两个链接,还是微博二维码格式:

  • http://weibo.cn/qr/userinfo?uid=1654762943
  • http://weibo.cn/qr/userinfo?uid=1639127253

分别点开,明显就是两个用户的微博主页。这时候你很容易想到:我把后面的 uid=xxx 随便替换,就可以查看不同的用户主页了吧?

没错。这里在一个URL中跟在 ? 后面的类似 uid=12345678 的东西,就叫参数。我们在浏览器访问 http://weibo.cn/qr/userinfo?uid=1654762943 的过程,实际上是浏览器找到了 http://weibo.cn/qr/userinfo 这个服务窗口,给它说:“嘿,接口同志!我取个信息,uid 是 1654762943”。userinfo 这个服务窗口根据从海量数据里查到了 uid=1654762943 的信息,返回给浏览器。浏览器最后把整个信息展示给了用户。

继续举个例子,假如有这样一个URL:http://weibo.cn/register?name=bingfeng&sex=male&age=24,这里 register 是注册的意思。那如果在浏览器打开这个URL,过程就可以描述为:浏览器找到了 http://weibo.cn/register 这个注册专用服务台,给它说:“嘿,接口同志!我存个信息,它的名字是bingfeng,并且性别是男,哦对了,年龄是24岁”。register注册专用服务台拿走了这些信息,全部记录了下来,说“存好了你走吧”,浏览器回来给用户说:“存好了。”

上面讲了这么一大堆,就是为了说明一个原理:一旦涉及到动态产生大量二维码,就一定会用到URL参数。同一个参数值是不重复的,代表了特定的节点(某个用户、某篇文章等)。而产品就是通过扫描二维码后提取对应参数来实现查找的。例如微信二维码 http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT 它的参数就是 QeD64j-EGGJnrXuB97VT,只是看起来和 ? 不太一样而已。

二维码参数实例一:APP下载URL + 设备ID参数

这是我2年前在新浪做的第一个产品,也是新浪首次试水硬件/物联网的产品:新浪气象站,主要功能是通过App随时随地查看家里室内外的气象数据。在使用之前,用户必须要用微博账号绑定买到的这台设备,而绑定的过程,毫无疑问需要用到二维码。

那么问题来了:

  1. 用户首先需要安装“新浪气象站”APP
  2. 一般人看到二维码的第一反应是:先用微信扫扫看
  3. 我需要用户使用“新浪气象站”来扫描这个二维码完成绑定

如何解决上面的问题呢?我们做了下面的二维码,并且印刷在了设备上:

某APP二维码

这个二维码对应的文本是:http://cdapp.sina.cn/weatherstation/web/down?deviceid=AC000W000000587。接下来,你分别用 iPhone、Android 和电脑浏览器打开看看,是否和微信一样,直接下载 App 了呢?因为这个 URL 本来就是根据用户 UA,返回了不同的下载地址。

当用户安装打开气象站APP以后,会提示扫描该二维码,此时其必然使用气象站内的扫描功能,而这时我们将扫描到的内容解析,只提取 deviceid=AC000W000000587 这个参数,成功完成了绑定。

二维码参数实例二:一个二维码,支持多个 APP 扫描使用

这个描述不够清楚,产品需求其实是:微博与厂商合作推出的智能空调,其首次使用依旧需要扫描二维码绑定。但该空调特色是,既支持微博私信控制,又支持独立 APP 操作。当然,微博和 APP 的二维码扫描也都要支持。

这种情况下有一个最大的限制:微博二维码,它的形式是死的,就只能是 http://weibo.cn/qr/userinfo?uid=3869385534 这样,否则微博客户端压根就不会处理。但在这个 URL 里,参数 uid 它只是对应的微博号,而如果我们空调 APP 要扫描,拿到了微博号是没用的,必须拿到设备号。于是,我们突发奇想:直接在原URL后又加了个参数 deviceID。因此,最终的 URL 形式如下:

http://weibo.cn/qr/userinfo?uid=3869385534&deviceID=ABCD987456

这里的 deviceID=ABCD987456,我们称为无效参数。由于微博压根就不需要这个参数,所以当向微博请求时,它认为这个没用直接忽略掉。但是在我们独立 APP 里,就可以专门去提取 deviceID 这个参数,从而得到自己最需要的信息。

这样,利用添加无效 URL 参数,实现了一个二维码为N个互不相同的客户端服务的目的

五、二维码FAQ

Q:二维码一定都是URL内容吗?

A:当然不是。但在实际应用中,由于人们习惯用微信和浏览器扫描,URL 是最自然的形态。并且很多二维码是为了推广 APP,URL 一扫就下,最方便不过了。

Q:我想在微信里也能实现扫描二维码后下载我的 App(而不是被屏蔽),有办法吗?

A:有!你去找一找鲜城,看看怎么做的。

Q:二维码可能传播恶意病毒吗?

A:这是个被央视报道过很多次的话题,但可惜央视每次都是断章取义含糊其辞。二维码本质是字符串,所以唯一的可能就是这个字符串对应了一个 Android 平台的恶意程序,用户扫描后不做判断,直接安装并打开了这个应用,并且丝毫没察觉该应用与自己期望不一致。这就和过去几年淘宝购物时,随便点击来路不明的链接网银付款一个道理,你说二维码冤枉不?

Q:二维码防伪是什么?

A:理解成把过去防伪查询需要手动输入的串号,现在改自动输入。千万别因为很多产品印刷个小小的二维码就觉得「是正品」了。

Q:二维码都这么丑?

A:二维码算法具有一定兼容性,黑白块是最容易识别的,但其实完全可以做很多美化的。这在企业宣传设计上应该有很大的意义。

Q:为什么作者有“二维码情节”?

A:因为曾经看不下去国内对二维码的低效应用,一直想做一些事,可是一直没有真正行动起来。