今天帶來一些好玩的二維碼和相關小科普。並通過實際案例告訴大家怎樣把一個平淡乏味的二維碼設計得超級酷炫！
我曾經以為，二維碼就是這樣的
或者是這樣的
好看一點的也不過是這樣的…
直到有一天，boss說：
於是我便去問度娘：啥是「流弊」的二維碼？
接著我的世界觀被兇殘的刷新了…
這都是些什麼鬼！
有這樣的
這樣的
這樣的
還有這樣的
然而這些的確就是二維碼，而且掃描識別神馬的一點問題都沒有！於是我一邊凌亂一邊心中吶喊：我也要設計出這麼流弊的二維碼！
那麼怎樣來開始設計呢？我們先來搞清楚二維碼的運作原理吧。
二維碼小科普
這貨為什麼叫「二維碼」？
我們先來看看「一維碼」長啥樣——
這不就就是我們在商品包裝上經常見到的條形碼麼！
為什麼要取個這麼高端的名字…
仔細想想，似乎也很有道理，因為條形碼只能在一個維度，也就是x軸上存儲數據。
那麼問題來了，一維碼只能存儲阿拉伯數字0~9的數據，特麼不夠用啊！腫麼辦！
那麼，增加一個維度好了，讓y軸上也能存儲數據不就行了嘛！是不是很機智！
所以二維碼就產生了。
我不禁對發明二維碼的大哥充滿無限崇拜…趕緊來問問度娘發明二維碼的天才是誰。
度娘說：二維碼是上世紀80年代的時候由歪果仁發明的（根本沒說是哪位大哥嘛），而且碼制有很多種，有PDF417、QR Code、Code 49、Code 16K、Code One（已暈）。我們平時最常用的那種是QR Code，QR即「Quick Response」的縮寫，意為快速識別。QR Code最早由日本人發明，應用於汽車製造，目的是對生產流程中的每一個零件進行追蹤。
二維碼儲存數據的方式
那麼問題又來了，這一堆白的黑的方塊怎麼能存儲數據的？
機智的我又求助於度娘…得到的答案是：二進位碼。
聯想到高中時候電腦課上學的計算機原理，我好像突然懂了！
所有的電腦程式本質上都是一堆0和1組成的代碼對不對！對於電腦程式來說，有0和1這兩個數字就有了一切！（頓時覺得自己好聰明！）
在二維碼中，白色的方塊代表0，黑色的方塊代表1。
二維碼能容納多少數據
既然二維碼是用二進位存儲數據的，那麼如果把一個app做成二維碼，掃一下就安裝好，每個月可以節省不少流量呢，啊哈哈哈~
圖樣圖森破！二維碼的數據存儲量是有限制的！
二維碼的大小限制：最低21x21，最高177x177的矩陣。
存儲數據：
數字——最多7098字符
字母——最多4296字符
二進位數——最多2953位元組
日文——最多1817字符
中文漢字——最多984字符（UTF-8），1800字符（BIG-5）
然而…
任天堂fc版超級瑪麗，容量41k（41984位元組）
app什麼的根本塞不下好嗎？！
QR碼的結構
簡單分析一下二維碼的結構吧——
紅色區域：位置探測圖形，用於標識二維碼面積大小；
藍色區域：定位圖形，用於標識二維碼x和y軸的走向；
綠色區域：校正圖形，也是定位用的；
剩下的區域都是存儲數據的！就這麼簡單！
怎麼設計一個流弊的二維碼
設計一個流弊的二維碼你最需要知道的是——
沒有捷徑！
沒有捷徑！
沒有捷徑！
重要的事情說三遍！！！
不會有軟體幫你生成這樣的二維碼，所以我們能做的就是，一點一點的去畫。
首先，你需要一個good idea
創意是一切設計的靈魂，在設計二維碼的時候也不例外。先在腦海中形成具體的構思，然後把它以視覺呈現出來。
以下有幾種創意方法可以參考：
1.色彩表現法
2.局部遮擋法
3.元素嫁接法
4.整體造型法
5.場景再造法
描一描，畫一畫
創意是一切設計的靈魂，在設計二維碼的時候也不例外。先在腦海中形成具體的構思，然後把它以視覺呈現出來。
具體操作方式就很簡單了，有點像玩秘密花園填色本。
以用photoshop為例，把原始二維碼放在下層，在上面新建圖層，把你的創意對照原始二維碼的樣子畫下來就ok了。
測試測試再測試
設計好的二維碼再好看，如果不能被識別也毫無意義，好好測試一下自己的作品，不要幾個小時的心血白費了。
儘可能用手頭的所有平臺測試吧，iphone4~iphone6s，安卓的各個機型，試試看長按圖片能不能識別…
不同的設備識別二維碼的能力是不一樣的。安卓平臺的手機在識別度上似乎的確比ios差那麼一些。
最後的一些注意事項
1.關注色彩對比度
原始二維碼採用黑白兩色，是因為黑白對比度最高。因此0、1兩個代碼的色彩對比度越高越容易被識別。將設計好的二維碼去色後檢查不失為一個好的辦法。
你可以用任何自己喜歡的顏色創作二維碼，可以用對比色代替黑白方塊，儘管有的對比色在去色以後灰度值是相近的。
2.柵格的形狀
二維碼的基本結構是矩陣，組成矩陣的最小單位是1柵格。
每個柵格的形狀可以不規則。
1柵格中至少78%的面積必須被填滿（我自己算的，但願沒算錯…）
3.不可以反白
白色柵格代表編碼0，黑色柵格代表編碼1。反白後編碼就會錯誤，無法識別
4.善用容錯機制
當原始二維碼的圖案無法滿足創意需要時，可以利用二維碼的容錯機制，增加或刪除一些柵格，甚至可以遮擋部分圖形。
5.找bug先從位置探測圖形入手
二維碼的位置探測圖形非常重要，必須要被清晰而明顯的表現出來。
如果你的設計無法被識別，嘗試提高位置探測圖形的對比度。
來源：Zcool（請謹慎識別文中二維碼~~）