產(chǎn)品經(jīng)理小技術(shù):二維碼這把利刃,產(chǎn)品應(yīng)該用到極致
小編導(dǎo)讀:本文有一些二維碼干貨,希望對(duì)二維碼不是非常熟悉的產(chǎn)品/開(kāi)發(fā)能有所收獲。查看本文前,請(qǐng)先確保你手機(jī)里有足夠可掃描二維碼的App(微信/微博/QQ/瀏覽器/淘寶/支付寶/我查查/360……)
二維碼,業(yè)界當(dāng)然是人人聽(tīng)說(shuō),人人用過(guò)。
這個(gè)話題,我倒是百感交集,我一直認(rèn)為,我有一種“二維碼情節(jié)”。
一方面, 我自認(rèn)為是國(guó)內(nèi)“鉆研”二維碼比較早的一個(gè)人了,大學(xué)時(shí)也自己業(yè)余開(kāi)發(fā)了一款A(yù)ndroid App“愛(ài)購(gòu)掃描”(太久沒(méi)管,現(xiàn)在幾乎無(wú)法使用),主要做條形碼比價(jià)和二維碼掃描。而在后來(lái)的工作中,依舊會(huì)接觸到二維碼的利用,讓我打開(kāi)了更多的思路;另一方面,二維碼的高度靈活,導(dǎo)致每個(gè)人、每個(gè)產(chǎn)品對(duì)它的理解都不一樣。一直以來(lái),國(guó)內(nèi)公司更是在這方面不論是產(chǎn)品功能,還是互動(dòng)營(yíng)銷(xiāo)上,都做得實(shí)在太粗糙。所以很難找到一個(gè)完美的方法,來(lái)把二維碼真正的能力詮釋出來(lái)。
這篇文章,我試著從原理、實(shí)踐以及進(jìn)階技巧三個(gè)方面,來(lái)講講二維碼可能對(duì)任意互聯(lián)網(wǎng)產(chǎn)品帶來(lái)的益處。若能真正對(duì)哪怕一個(gè)用戶帶來(lái)便利,我也倍感榮幸。
一、二維碼本質(zhì)是什么?
如果你對(duì)這個(gè)問(wèn)題了如指掌,那么請(qǐng)直接跳過(guò)。否則(尤其是非技術(shù)出身的產(chǎn)品經(jīng)理)就一定要先知道,二維碼到底是個(gè)什么東西?
一個(gè)普通的二維碼 二維碼(dimensional barcode,大家習(xí)慣稱QR Code)是用某種特定的幾何圖形按一定規(guī)律在平面(二維方向上)分布的黑白相間的圖形記錄數(shù)據(jù)符號(hào)信息的。 簡(jiǎn)單粗暴的解釋就是:二維碼它就是把一段純文本用圖形樣式轉(zhuǎn)換出來(lái)了,以便于快速掃描讀出。 這樣做的原因在于,如果我有一堆比較凌亂的文本(比如一個(gè)很長(zhǎng)的URL、一些加密后的字符串、或者一個(gè)復(fù)雜的快遞編號(hào)),想把他們快速輸入電腦/手機(jī)里的話,靠人肉是非常痛苦而容易出錯(cuò)的。但經(jīng)過(guò)二維碼巧妙的編碼后,就能用低廉的掃描槍,或者普通的手機(jī)攝像頭快速掃描錄入,大大節(jié)省了時(shí)間;而且轉(zhuǎn)換成編碼后,哪怕任意一個(gè)字母,也不可能出現(xiàn)識(shí)別錯(cuò)誤。 我這里舉幾個(gè)最普遍的例子: 1. H5官網(wǎng)、App下載地址。這個(gè)真的不必介紹太多,就是直接把網(wǎng)站或App的URL,直接生成二維碼,然后搬到WEB上或者線下進(jìn)行推廣。 2. 微信。二維碼的推動(dòng),在國(guó)內(nèi)最大的功臣就是微信,這也得益于各種電梯外賣(mài)傳單廣告會(huì)顯眼標(biāo)注的“微信掃一掃”。我們來(lái)看看微信的二維碼長(zhǎng)啥樣: 這個(gè)……二維碼吶,它看起來(lái)都是這樣對(duì)吧?但前面說(shuō)過(guò),“二維碼它就是把一段純文本用圖形樣式轉(zhuǎn)換出來(lái)了”,所以我們隨便找些工具掃描下(例如http://cli.im/deqr),上面的二維碼對(duì)應(yīng)的文本其實(shí)是這樣的:http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT。 沒(méi)錯(cuò),微信名片的二維碼,對(duì)應(yīng)的是一個(gè)特殊的URL,仔細(xì)看應(yīng)該能猜到:后面“QeD64j-EGGJnrXuB97VT”這部分內(nèi)容,就是包含了一個(gè)用戶ID的信息(并且是經(jīng)過(guò)加密的)。微信在掃描到“http://weixin.qq.com/r/”開(kāi)頭的二維碼時(shí),就把后面“QeD64j-EGGJnrXuB97VT”部分解析,搜到這個(gè)用戶。(至于為什么后面部分要加密,你猜咯?) 3. 微博。了解了微信,再來(lái)看看微博二維碼: 直接看二維碼內(nèi)容:http://weibo.cn/qr/userinfo?uid=1654762943,這個(gè)更好理解了吧?最后的UID就是微博用戶的ID了??蛻舳藪呙璧健癶ttp://weibo.cn/qr/userinfo?”開(kāi)頭信息,就抓取后面UID,并把該用戶主頁(yè)展示給掃描者。(對(duì)了,相比微信,微博二維碼里UID卻是公開(kāi)的,你認(rèn)為為什么呢?) 好了,我們常見(jiàn)二維碼也可以說(shuō)是兩類,一類是一個(gè)單純的URL,掃描就打開(kāi)網(wǎng)頁(yè),或者直接下載APP;另一類是“設(shè)計(jì)過(guò)的”URL,只有用對(duì)應(yīng)的APP掃描,才能跳轉(zhuǎn)到正確的界面。 對(duì)于第二類二維碼,除了微博微信,也還有很多。但他們?cè)诹鞒躺蠋缀跏且粋€(gè)原理:掃描內(nèi)容 –> 解析后匹配是否有固定部分 –> 獲取動(dòng)態(tài)部分 –> 跳轉(zhuǎn)到對(duì)應(yīng)界面。 現(xiàn)在我們做個(gè)實(shí)驗(yàn),還是剛剛的微信二維碼: 我們也知道,它對(duì)應(yīng)的文本信息(也算是個(gè)URL)為:http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT。 接下來(lái),請(qǐng)你依次(盡可能)完成下面的操作: 使用微信客戶端掃描上面二維碼,是什么結(jié)果? 使用Android微博(或者UC/百度瀏覽器/我查查)掃描上面二維碼,什么結(jié)果? 使用iPhone微博(或者UC/百度瀏覽器/我查查)掃描上面二維碼,什么結(jié)果? 在電腦上打開(kāi)http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT,什么結(jié)果? 找一部非主流系統(tǒng)(例如Firefox、Ubuntu)手機(jī)掃描上面二維碼,什么結(jié)果? 不管你是否嘗試了,我先來(lái)說(shuō)下結(jié)果: 直接掃描到我的賬號(hào)了,可以添加到通訊錄 直接跳轉(zhuǎn)瀏覽器開(kāi)始下載微信.apk安裝包了 直接彈出Appstore微信應(yīng)用了 地址欄很快跳轉(zhuǎn)了下,然后轉(zhuǎn)到微信官網(wǎng)了 打開(kāi)微信WAP官網(wǎng)了 So……明明是同一個(gè)URL啊,為毛它呈現(xiàn)出了5種截然不同的結(jié)果給我? 其實(shí)這里是微信利用User Agent信息,給你呈現(xiàn)了不同的結(jié)果而已。 User Agent簡(jiǎn)稱UA,簡(jiǎn)而言之,就是你訪問(wèn)任何網(wǎng)站時(shí),網(wǎng)站可通過(guò)你的UA得知你使用的操作系統(tǒng)、瀏覽器、瀏覽器內(nèi)核等信息。這個(gè)信息最終是由你的瀏覽器傳遞給對(duì)方網(wǎng)站的(所以嚴(yán)格來(lái)講你是可以修改的,看看你手機(jī)上第三方瀏覽器設(shè)置里的UA選項(xiàng))。 上面的5個(gè)例子,除了第1個(gè)原理前面講到了,后面4個(gè),都是根據(jù)用戶UA,判斷是4個(gè)平臺(tái)的用戶,所以給他們各自跳轉(zhuǎn)到了對(duì)應(yīng)的地址,提供準(zhǔn)確的服務(wù)(具體如何實(shí)現(xiàn)?那你得找開(kāi)發(fā)蟈蟈了~反正你就跟他說(shuō)我要這個(gè)功能唄)。 掌握了這個(gè)小知識(shí),你就可以很靈活地針對(duì)潛在掃描用戶做出不同對(duì)待了。最低級(jí)的利用是,我不希望以后還能看到這種下載宣傳了: 很多很多產(chǎn)品在宣傳時(shí)使用過(guò)兩張二維碼 又牽扯到另一個(gè)大話題了,先看下面兩個(gè)鏈接,還是微博二維碼格式: http://weibo.cn/qr/userinfo?uid=1654762943 http://weibo.cn/qr/userinfo?uid=1639127253 分別點(diǎn)開(kāi),明顯就是兩個(gè)用戶的微博主頁(yè)。這時(shí)候你很容易想到:我把后面的uid=xxx隨便替換,就可以查看不同的用戶主頁(yè)了吧? 沒(méi)錯(cuò)。這里在一個(gè)URL中跟在“?”后面的類似“uid=12345678”的東西,稱為參數(shù)。我們?cè)跒g覽器訪問(wèn)http://weibo.cn/qr/userinfo?uid=1654762943的過(guò)程,實(shí)際上是瀏覽器找到了http://weibo.cn/qr/userinfo這個(gè)服務(wù)窗口,給它說(shuō):“嘿,接口同志!我取個(gè)信息,uid是1654762943?!眜serinfo這個(gè)服務(wù)窗口根據(jù)從海量數(shù)據(jù)里查到了uid=1654762943的信息,返回給瀏覽器。瀏覽器最后把整個(gè)信息展示給了用戶。 繼續(xù)舉個(gè)例子,假如有這樣一個(gè)URL:http://weibo.cn/register?name=bingfeng&sex=male&age=24,這里register是注冊(cè)的意思。那如果在瀏覽器打開(kāi)這個(gè)URL,過(guò)程就可以描述為:瀏覽器找到了http://weibo.cn/register這個(gè)注冊(cè)專用服務(wù)臺(tái),給它說(shuō):“嘿,接口同志!我存?zhèn)€信息,它的名字是bingfeng,并且性別是男,哦對(duì)了,年齡是24歲。”register注冊(cè)專用服務(wù)臺(tái)拿走了這些信息,全部記錄了下來(lái),說(shuō)“存好了你走吧”,瀏覽器回來(lái)給用戶說(shuō):“存好了?!?/p>
上面講了這么一大堆,就是為了說(shuō)明一個(gè)原理:一旦涉及到動(dòng)態(tài)產(chǎn)生大量二維碼,就一定會(huì)用到URL參數(shù)。同一個(gè)參數(shù)值是不重復(fù)的,代表了特定的節(jié)點(diǎn)(某個(gè)用戶、某篇文章等)。而產(chǎn)品就是通過(guò)掃描二維碼后提取對(duì)應(yīng)參數(shù)來(lái)實(shí)現(xiàn)查找的。例如微信二維碼http://weixin.qq.com/r/QeD64j-EGGJnrXuB97VT它的參數(shù)就是QeD64j-EGGJnrXuB97VT,只是看起來(lái)和“?”不太一樣而已。 二維碼參數(shù)實(shí)例一:APP下載URL+設(shè)備ID參數(shù) 這是我2年前在新浪做的第一個(gè)產(chǎn)品,也是新浪首次試水硬件/物聯(lián)網(wǎng)的產(chǎn)品:新浪氣象站,主要功能是通過(guò)App隨時(shí)隨地查看家里室內(nèi)外的氣象數(shù)據(jù)。在使用之前,用戶必須要用微博賬號(hào)綁定買(mǎi)到的這臺(tái)設(shè)備,而綁定的過(guò)程,毫無(wú)疑問(wèn)需要用到二維碼。 那么問(wèn)題來(lái)了: 1.用戶首先需要安裝“新浪氣象站”APP; 2.一般人看到二維碼的第一反應(yīng)是:先用微信掃掃看; 3.我需要用戶使用“新浪氣象站”來(lái)掃描這個(gè)二維碼完成綁定。 如何解決上面的問(wèn)題呢?我們做了下面的二維碼,并且印刷在了設(shè)備上: 你可以掃描下載此應(yīng)用試試 這個(gè)二維碼對(duì)應(yīng)的文本是:http://cdapp.sina.cn/weatherstation/web/down?deviceid=AC000W000000587。接下來(lái),你分別用iPhone、Android和電腦瀏覽器打開(kāi)看看,是否和微信一樣,直接下載App了呢?因?yàn)檫@個(gè)URL本來(lái)就是根據(jù)用戶UA,返回了不同的下載地址。 當(dāng)用戶安裝打開(kāi)氣象站APP以后,會(huì)提示掃描該二維碼,此時(shí)其必然使用氣象站內(nèi)的掃描功能,而這時(shí)我們將掃描到的內(nèi)容解析,只提取“deviceid=AC000W000000587”這個(gè)參數(shù),成功完成了綁定。 二維碼參數(shù)實(shí)例二:一個(gè)二維碼,支持多個(gè)APP掃描使用 這個(gè)描述不夠清楚,產(chǎn)品需求其實(shí)是:微博與廠商合作推出的智能空調(diào),其首次使用依舊需要掃描二維碼綁定。但該空調(diào)特色是,既支持微博私信控制,又支持獨(dú)立APP操作。當(dāng)然,微博和APP的二維碼掃描也都要支持。 這種情況下有一個(gè)最大的限制:微博二維碼,它的形式是死的,就只能是http://weibo.cn/qr/userinfo?uid=3869385534這樣,否則微博客戶端壓根就不會(huì)處理。但在這個(gè)URL里,參數(shù)uid它只是對(duì)應(yīng)的微博號(hào),而如果我們空調(diào)APP要掃描,拿到了微博號(hào)是沒(méi)用的,必須拿到設(shè)備號(hào)。于是,我們突發(fā)奇想,直接在原URL后又加了個(gè)參數(shù)deviceID:http://weibo.cn/qr/userinfo?uid=3869385534&deviceID=ABCD987456。 這里的deviceID=ABCD987456,我們稱為無(wú)效參數(shù)。由于微博壓根就不需要這個(gè)參數(shù),所以當(dāng)向微博請(qǐng)求時(shí),它認(rèn)為這個(gè)沒(méi)用直接忽略掉。但是在我們獨(dú)立APP里,就可以專門(mén)去提取deviceID這個(gè)參數(shù),從而得到自己最需要的信息。 這樣,利用添加無(wú)效URL參數(shù),實(shí)現(xiàn)了一個(gè)二維碼為N個(gè)互不相同的客戶端服務(wù)的目的。 Q:二維碼一定都是URL內(nèi)容嗎? A:當(dāng)然不是。但在實(shí)際應(yīng)用中,由于人們習(xí)慣用微信和瀏覽器掃描,URL是最自然的形態(tài)。并且很多二維碼是為了推廣APP,URL一掃就下,最方便不過(guò)了。 Q:我想在微信里也能實(shí)現(xiàn)掃描二維碼后跳轉(zhuǎn)下載我的App(而不是被屏蔽),有辦法嗎? A:有!你去找一找鮮城,看看怎么做的。 Q:二維碼可能傳播惡意病毒嗎? A:這是個(gè)被央視報(bào)道過(guò)很多次的話題,但可惜央視每次都是斷章取義含糊其辭。二維碼本質(zhì)是字符串,所以唯一的可能就是這個(gè)字符串對(duì)應(yīng)了一個(gè)Android平臺(tái)的惡意程序,用戶掃描后不做判斷,直接安裝并打開(kāi)了這個(gè)應(yīng)用,并且絲毫沒(méi)察覺(jué)該應(yīng)用與自己期望不一致。這就和過(guò)去幾年淘寶購(gòu)物時(shí),隨便點(diǎn)擊來(lái)路不明的鏈接網(wǎng)銀付款一個(gè)道理,你說(shuō)二維碼冤枉不? Q:二維碼防偽是什么? A:理解成把過(guò)去防偽查詢需要手動(dòng)輸入的串號(hào),現(xiàn)在改自動(dòng)輸入。千萬(wàn)別因?yàn)楹芏喈a(chǎn)品印刷個(gè)小小的二維碼就覺(jué)得“是正品”了。 Q:二維碼都這么丑? A:二維碼算法具有一定兼容性,黑白塊是最容易識(shí)別的,但其實(shí)完全可以做很多美化的。這在企業(yè)宣傳設(shè)計(jì)上應(yīng)該有很大的意義。參考讓丑陋的二維碼不再突兀,Visualead要讓二維碼“隱身”在品牌Logo之后 Q:為什么作者@牛冰峰 有“二維碼情節(jié)”? A:因?yàn)樵?jīng)看不下去國(guó)內(nèi)對(duì)二維碼的低效應(yīng)用,一直想做一些事,可是一直沒(méi)有真正行動(dòng)起來(lái)。 本文作者:牛冰峰 ? 來(lái)自:牛冰峰二、現(xiàn)有產(chǎn)品都是如何利用二維碼的?
三、二維碼進(jìn)階:User Agent(UA)的利用
四、二維碼利刃:URL參數(shù)組合
五、二維碼FAQ:
說(shuō)的很對(duì),請(qǐng)問(wèn)還有沒(méi)有關(guān)于二維碼的相關(guān)知識(shí),比如用Axure制作一款掃描二維碼的原型,或者如何快速學(xué)習(xí)掌握開(kāi)發(fā)二維碼的相關(guān)知識(shí)。