動態(tài)二維碼的原理和設(shè)計思路(上)
動態(tài)二維碼的原理和設(shè)計思路(上)

最近大博石發(fā)現(xiàn)了看起來挺高大上的東西,一直嚷嚷著要我做一個。我瞥了一眼,哦不就是動態(tài)二維碼嗎,我知道這個東西。老早就有了,不難,只不過這個做起來有點耗時而且會消耗你的耐心而已。
大博石:那你簡單的做一個唄!
我:呸,什么叫簡單的做一個。我怎么聽起來那么像“朋友,幫幫忙給我做個logo唄,隨便做一個就行了”、“這個圖你就隨便p一下,簡簡單單的就行了,不用那么復(fù)雜”的,這明顯是在忽悠我嘛。
大博石:那你現(xiàn)在做不做?。课乙源蟛┦纳矸菝钅憬o我做出來。

我:呵呵,好的好的。你是大boss你說了算!
大博石:那這個你要做多久?
我:先別急嘛,我先給你講講原理。提到二維碼呢,不得不提提它的前身條形碼。條形碼是將多個寬度不等的黑條白條按一定的編碼順序排列的標(biāo)識符,它只能在x軸方向上存儲,換個角度來講,條形碼只是在一個維度上識別的,所以也有稱條形碼為一維碼。

大博石:啊。。。你跑偏了???
我:包括我們在商場或者其他什么店鋪上看到的條形碼其實都是這個原理,但是這個很有局限性,先不說轉(zhuǎn)個方向能不能識別,況且只能識別0-9的數(shù)字編成的標(biāo)識符。但是你有沒有想過真的不夠用啊。所以二維碼就此誕生了。

大博石:哎哎哎,這些我都不想聽?給我講重點?
我:二維碼很好的解決了字符延伸以及方向性的問題。那么問題來了。二維碼是如何識別的呢。這就要涉及到計算機(jī)的原理了。我記得我們大學(xué)的時候?qū)W過一門課就叫做《計算機(jī)導(dǎo)論》。講了上面我?guī)缀醵纪浟?,唯一還記得的就是二進(jìn)制的原理。哈哈機(jī)智如我,學(xué)以致用就是這么來的。是一個叫馮·諾依曼的人應(yīng)用到計算機(jī)里的,有興趣的朋友可以去百度一下。
大博石:裝bility,又在秀智商?
我:二維碼其實就是將數(shù)字、文字、字母等字符轉(zhuǎn)換稱二進(jìn)制01,再替換到二維碼中的黑白兩種”方塊“。白色代表0,而黑色代表1。那么接下來就簡單了,只需要把要變成二維碼的鏈接或者文字轉(zhuǎn)換成二進(jìn)制01就可以了,怎么轉(zhuǎn)化成0和1的呢?自己百度,在此省略一萬字...。
大博石:呵呵,那那三個方塊是什么鬼?
我:啊,你聽我說完嘛,二維碼雖然都是以二進(jìn)制01構(gòu)成的。但是還有幾個特殊的地方,首先上面我們提到的方向性的問題。就是為什么我們從不同角度掃描二維碼都可以識別呢。其主要就是這三個”眼睛“確定了面積范圍之后,中間相交的xy軸在作祟。這三個”眼睛“我們稱之為碼眼。顧名思義就是二維碼的眼睛。起識別二維碼范圍的作用,而xy軸即確定了二維碼的方向。

大博石:搞笑,那為什么不是四個“眼睛”呢?
我:額。。。我們都知道要想構(gòu)成一個面。必須有三個點,兩點連成線而三點連成面。不需要四個就能確定二維碼的方向,而且減少成三個節(jié)省識別區(qū)域,大大提高了二維碼的利用率。特別要注意的這里還有一個叫矯正圖形的東西,也是定位用的。
大博石:哎哎哎,你話太多了?時間還沒確定好嗎?
我:你不要打斷我的話,我還沒講完呢!
大博石:還有什么沒講的,不就是給你一個鏈接你給我轉(zhuǎn)成二進(jìn)制然后排列整齊嗎?
我:這就尷尬了,還要自己這樣一個個計算然后排整齊的話,那就不用搞生產(chǎn)了??萍及l(fā)展到今天肯定有快速生成二維碼的工具吖?比如說“草料二維碼”這個網(wǎng)站。你可以直接將文字、圖片、網(wǎng)站鏈接甚至微信公眾號都可以直接生成二維碼。

大博石:為什么我看到有些二維碼遮住一部分都還可以識別?
我:咳咳,當(dāng)然這樣生成二維碼方便快捷而且不容易出錯。其實二維碼還有一個容錯機(jī)制。就是當(dāng)一個二維碼遮住一部分甚至毀壞一部分后都還可以識別。我們稱之為容錯率。二維碼的容錯率有7%、15%、25%和30%就是當(dāng)遮住二維碼的部分都可以識別出來就要看容錯率的機(jī)制了。容錯率越大二維碼越是復(fù)雜,其實就是備份了幾份,當(dāng)一部分遮住的時候另一部分也可以識別出來。


大博石:吖杰夠了,講這些跟做動態(tài)二維碼由什么關(guān)系?到底什么時候可以完成?
我:要讓你知道理論啊,知其然知其所以然嘛。那要怎么做這個動態(tài)二維碼呢。答案是沒有捷徑!沒有捷徑!沒有捷徑!構(gòu)思好布局,與動效往上面排版就是了。
大博石:也就是說,剩下的就是交給美工美化一下?
我:美工?你才是美工,你丫的才是美工!你全家都是美工。

結(jié)局:大博石憤吖杰卒!
下一篇只有吖杰來講一下動態(tài)二維碼的設(shè)計思路和一些要注意的細(xì)節(jié),上干貨了。








































