二維碼，如何設(shè)計創(chuàng)意二維碼(4)

我曾經(jīng)以為，二維碼就是這樣的

或者是這樣的

好看一點的也不過是這樣的……

直到有一天，boss說:

于是LZ便去問度娘：啥是“流弊”的二維碼？

接著LZ的世界觀被兇殘的刷新了……

這都是些什么鬼！

有這樣的

這樣的

這樣的

還有這樣的

然而這些的確就是二維碼，而且掃描識別神馬的一點問題都沒有！于是LZ一邊凌亂一邊心中吶喊：我也要設(shè)計出這么流弊的二維碼！

那么怎樣來開始設(shè)計呢？我們先來搞清楚二維碼的運作原理吧。

這貨為什么叫“二維碼”？

我們先來看看“一維碼”長啥樣——

這不就就是我們在商品包裝上經(jīng)常見到的條形碼么！

為什么要取個這么高端的名字……

仔細(xì)想想，似乎也很有道理，因為條形碼只能在一個維度，也就是x軸上存儲數(shù)據(jù)。

那么問題來了，一維碼只能存儲阿拉伯?dāng)?shù)字0-9的數(shù)據(jù)，特么不夠用��！腫么辦！

那么，增加一個維度好了，讓y軸上也能存儲數(shù)據(jù)不就行了嘛！

是不是很機智！

所以二維碼就產(chǎn)生了。

LZ不禁對發(fā)明二維碼的大哥充滿無限崇拜……趕緊來問問度娘發(fā)明二維碼的天才是誰。

度娘說：二維碼是上世紀(jì)80年代的時候由歪果仁發(fā)明的（根本沒說是哪位大哥嘛），而且碼制有很多種，有PDF417、QR Code、Code 49、Code 16K、Code One（LZ已暈）。我們平時最常用的那種是QR Code，QR即“Quick Response”的縮寫，意為快速識別。QR code最早由日本人發(fā)明，應(yīng)用于汽車制造，目的是對生產(chǎn)流程中的每一個零件進行追蹤。

二維碼儲存數(shù)據(jù)的方式

那么問題又來了，這一堆白的黑的方塊怎么能存儲數(shù)據(jù)的？

機智的LZ又求助于度娘……得到的答案是：二進制碼

聯(lián)想到高中時候電腦課上學(xué)的計算機原理，LZ好像突然懂了！

所有的電腦程序本質(zhì)上都是一堆0和1組成的代碼對不對！對于電腦程序來說，有0和1這兩個數(shù)字就有了一切！擼主頓時覺得自己好聰明！

在二維碼中，白色的方塊代表0，黑色的方塊代表1。

二維碼能容納多少數(shù)據(jù)

既然二維碼是用二進制存儲數(shù)據(jù)的，那么如果把一個app做成二維碼，掃一下就安裝好，每個月可以節(jié)省不少流量呢，啊哈哈哈~

圖樣圖森破！二維碼的數(shù)據(jù)存儲量是有限制的！

二維碼的大小限制：最低21x21，最高177x177的矩陣

存儲數(shù)據(jù)：

數(shù)字——最多7098字符

字母——最多4296字符

二進制數(shù)——最多2953字節(jié)

日文——最多1817字符

中文漢字——最多984字符（UTF-8），1800字符（BIG-5）

然而……

任天堂fc版超級瑪麗

容量41k（41984字節(jié)）

app什么的根本塞不下好嗎��！

QR碼的結(jié)構(gòu)

簡單分析一下二維碼的結(jié)構(gòu)吧——

紅色區(qū)域：位置探測圖形，用于標(biāo)識二維碼面積大小

藍(lán)色區(qū)域：定位圖形，用于標(biāo)識二維碼x和y軸的走向

綠色區(qū)域：校正圖形，也是定位用的

剩下的區(qū)域都是存儲數(shù)據(jù)的！就這么簡單！

設(shè)計一個流弊的二維碼你最需要知道的是——

沒有捷徑！沒有捷徑！沒有捷徑！

重要的事情說三遍

不會有軟件幫你生成這樣的二維碼，所以我們能做的就是，一點一點的去畫。

首先，你需要一個good idea

創(chuàng)意是一切設(shè)計的靈魂，在設(shè)計二維碼的時候也不例外。先在腦海中形成具體的構(gòu)思，然后把它以視覺呈現(xiàn)出來。

以下有幾種創(chuàng)意方法可以參考：

1.色彩表現(xiàn)法

2.局部遮擋法

3.元素嫁接法

4.整體造型法

5.場景再造法

描一描，畫一畫

創(chuàng)意是一切設(shè)計的靈魂，在設(shè)計二維碼的時候也不例外。先在腦海中形成具體的構(gòu)思，然后把它以視覺呈現(xiàn)出來。

具體操作方式就很簡單了，有點像玩秘密花園填色本。

以用photoshop為例，把原始二維碼放在下層，在上面新建圖層，把你的創(chuàng)意對照原始二維碼的樣子畫下來就ok了。

測試測試再測試

設(shè)計好的二維碼再好看，如果不能被識別也毫無意義，好好測試一下自己的作品，不要幾個小時的心血白費了。

盡可能用手頭的所有平臺測試吧，iphone4-iphone6s，安卓的各個機型，試試看長按圖片能不能識別……

不同的設(shè)備識別二維碼的能力是不一樣的。LZ就發(fā)現(xiàn)安卓平臺的手機在識別度上似乎的確比ios差那么一些。（我就是黑安卓！怎么樣�。�

1.關(guān)注色彩對比度

? 原始二維碼采用黑白兩色，是因為黑白對比度最高。因此0、1兩個代碼的色彩對比度越高越容易被識別。將設(shè)計好的二維碼去色后檢查不失為一個好的辦法。

? 你可以用任何自己喜歡的顏色創(chuàng)作二維碼，可以用對比色代替黑白方塊，盡管有的對比色在去色以后灰度值是相近的。

2.柵格的形狀

?二維碼的基本結(jié)構(gòu)是矩陣，組成矩陣的最小單位是1柵格。

?每個柵格的形狀可以不規(guī)則

?1柵格中至少78%的面積必須被填滿（我自己算的，但愿沒算錯……）

3.不可以反白

?白色柵格代表編碼0，黑色柵格代表編碼1。反白后編碼就會錯誤，無法識別

4.善用容錯機制

?當(dāng)原始二維碼的圖案無法滿足創(chuàng)意需要時，可以利用二維碼的容錯機制，增加或刪除一些柵格，甚至可以遮擋部分圖形。

5.找bug先從位置探測圖形入手

?二維碼的位置探測圖形非常重要，必須要被清晰而明顯的表現(xiàn)出來。

?如果你的設(shè)計無法被識別，嘗試提高位置探測圖形的對比度

好了，以上說了辣么多，希望能對大家的創(chuàng)作起到幫助！

最后，展示一組我們團隊設(shè)計的創(chuàng)意二維碼~