注:查看本文前,请先确保你手机里有足够可扫描二维码的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
接下来,请你依次(尽可能)完成下面的操作:
- 使用微信客户端扫描上面二维码,是什么结果?
- 使用 Android 微博(或者UC/百度浏览器/我查查)扫描上面二维码,什么结果?
- 使用 iPhone 微博(或者UC/百度浏览器/我查查)扫描上面二维码,什么结果?
- 在电脑上打开
http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT
,什么结果? - 找一部非主流系统(例如Firefox、Ubuntu)手机扫描上面二维码,什么结果?
不管你是否尝试了,我先来说下结果:
- 直接扫描到我的账号了,可以添加到通讯录
- 直接跳转浏览器开始下载微信 .apk 安装包了
- 直接弹出Appstore微信应用了
- 地址栏很快跳转了下,然后转到微信官网了
- 打开微信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随时随地查看家里室内外的气象数据。在使用之前,用户必须要用微博账号绑定买到的这台设备,而绑定的过程,毫无疑问需要用到二维码。
那么问题来了:
- 用户首先需要安装“新浪气象站”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:因为曾经看不下去国内对二维码的低效应用,一直想做一些事,可是一直没有真正行动起来。