二維碼這把利刃,產品應該用到極致

2 評論 17980 瀏覽 90 收藏 18 分鐘

注:本文有一些二維碼干貨,希望對二維碼不是非常熟悉的產品/開發能有所收獲。

注2:查看本文前,請先確保你手機里有足夠可掃描二維碼的App(微信/微博/QQ/瀏覽器/淘寶/支付寶/我查查/360……)

二維碼,業界當然是人人聽說,人人用過。

這個話題,我倒是百感交集,我一直認為,我有一種“二維碼情節”。

一方面, 我自認為是國內“鉆研”二維碼比較早的一個人了,大學時也自己業余開發了一款Android App(太久沒管,現在幾乎無法使用),主要做條形碼比價和二維碼掃描。而在后來的工作中,依舊會接觸到二維碼的利用,讓我打開了更多的思路;另一方面,二維碼的高度靈活,導致每個人、每個產品對它的理解都不一樣。一直以來,國內公司更是在這方面不論是產品功能,還是互動營銷上,都做得實在太粗糙。所以很難找到一個完美的方法,來把二維碼真正的能力詮釋出來。

這篇文章,我試著從原理、實踐以及進階技巧三個方面,來講講二維碼可能對任意互聯網產品帶來的益處。若能真正對哪怕一個用戶帶來便利,我也倍感榮幸。

一、二維碼本質是什么?

如果你對這個問題了如指掌,那么請直接跳過。否則(尤其是非技術出身的產品經理)就一定要先知道,二維碼到底是個什么東西?

一個普通的二維碼

二維碼(dimensional barcode,大家習慣稱QR Code)是用某種特定的幾何圖形按一定規律在平面(二維方向上)分布的黑白相間的圖形記錄數據符號信息的。

簡單粗暴的解釋就是:二維碼它就是把一段純文本用圖形樣式轉換出來了,以便于快速掃描讀出。

這樣做的原因在于,如果我有一堆比較凌亂的文本(比如一個很長的URL、一些加密后的字符串、或者一個復雜的快遞編號),想把他們快速輸入電腦/手機里的話,靠人肉是非常痛苦而容易出錯的。但經過二維碼巧妙的編碼后,就能用低廉的掃描槍,或者普通的手機攝像頭快速掃描錄入,大大節省了時間;而且轉換成編碼后,哪怕任意一個字母,也不可能出現識別錯誤。

二、現有產品都是如何利用二維碼的?

我這里舉幾個最普遍的例子:

H5官網、App下載地址

這個真的不必介紹太多,就是直接把網站或App的URL,直接生成二維碼,然后搬到WEB上或者線下進行推廣。

微信

二維碼的推動,在國內最大的功臣就是微信,這也得益于各種電梯外賣傳單廣告會顯眼標注的“微信掃一掃”。我們來看看微信的二維碼長啥樣:

牛冰峰的微信二維碼

這個……二維碼吶,它看起來都是這樣對吧?但前面說過,“二維碼它就是把一段純文本用圖形樣式轉換出來了”,所以我們隨便找些工具掃描下(例如http://cli.im/deqr),上面的二維碼對應的文本其實是這樣的:http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT。

沒錯,微信名片的二維碼,對應的是一個特殊的URL,仔細看應該能猜到:后面“QeD64j-EGGJnrXuB97VT”這部分內容,就是包含了一個用戶ID的信息(并且是經過加密的)。微信在掃描到“http://weixin.qq.com/r/”開頭的二維碼時,就把后面“QeD64j-EGGJnrXuB97VT”部分解析,搜到這個用戶(至于為什么后面部分要加密,你猜咯?)。

微博

了解了微信,再來看看微博二維碼:

@牛冰峰 的微博二維碼

直接看二維碼內容:http://weibo.cn/qr/userinfo?uid=1654762943,這個更好理解了吧?最后的UID就是微博用戶的ID了??蛻舳藪呙璧健癶ttp://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?!眜serinfo這個服務窗口根據從海量數據里查到了uid=1654762943的信息,返回給瀏覽器。瀏覽器最后把整個信息展示給了用戶。

繼續舉個例子,假如有這樣一個URL:http://weibo.cn/register?name=bingfeng&sex=male&age=24,這里register是注冊的意思。那如果在瀏覽器打開這個URL,過程就可以描述為:瀏覽器找到了http://weibo.cn/register這個注冊專用服務臺,給它說:“嘿,接口同志!我存個信息,它的名字是bingfeng,并且性別是男,哦對了,年齡是24歲?!眗egister注冊專用服務臺拿走了這些信息,全部記錄了下來,說“存好了你走吧”,瀏覽器回來給用戶說:“存好了?!?/p>

上面講了這么一大堆,就是為了說明一個原理:一旦涉及到動態產生大量二維碼,就一定會用到URL參數。同一個參數值是不重復的,代表了特定的節點(某個用戶、某篇文章等)。而產品就是通過掃描二維碼后提取對應參數來實現查找的。例如微信二維碼http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT它的參數就是QeD64j-EGGJnrXuB97VT,只是看起來和“?”不太一樣而已。

二維碼參數實例一:APP下載URL+設備ID參數

這是我2年前在新浪做的第一個產品,也是新浪首次試水硬件/物聯網的產品:新浪氣象站,主要功能是通過App隨時隨地查看家里室內外的氣象數據。在使用之前,用戶必須要用微博賬號綁定買到的這臺設備,而綁定的過程,毫無疑問需要用到二維碼。

那么問題來了:

  1. 用戶首先需要安裝“新浪氣象站”APP;
  2. 一般人看到二維碼的第一反應是:先用微信掃掃看;
  3. 我需要用戶使用“新浪氣象站”來掃描這個二維碼完成綁定。

如何解決上面的問題呢?我們做了下面的二維碼,并且印刷在了設備上:

你可以掃描下載此應用試試

這個二維碼對應的文本是: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: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:因為曾經看不下去國內對二維碼的低效應用,一直想做一些事,可是一直沒有真正行動起來。

#專欄作家#

牛冰峰,人人都是產品經理專欄作家,互聯網產品人(汪),精釀啤酒愛好者。曾在新浪負責鮮城產品設計工作,目前在『找型』奮斗,會拼命讓美發變得更享受。擅長對產品體驗細節的打磨和把握,每天有超過18小時在深度使用各種產品上;有過豐富的物聯網/智能家電產品失敗經歷、深刻感悟;主張以使用場景為核心的服務設計。

本文系作者授權發布,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 您好,很感謝您的文章讓我面對用戶需求能夠根據您的循環漸進講解懂得,有個技術性問題感覺只能問您了,請問通過其他客戶端掃碼能否判斷當前app有被下載,如果下載跳轉到當前app,沒有下載跳轉到下載app頁面

    回復
  2. 非常贊,我和作者一樣也有強烈的二維碼情結,對于國內二維碼發展現狀來說還遠遠沒有把二維碼的能力給釋放出來,希望以后能夠有機會一起探討關于二維碼的功能應用,已加你微信!

    來自廣東 回復