如何設(shè)計一個美觀實用的二維碼？

轉(zhuǎn)載贊6 收藏18 評論1

舉報 2015-01-08

掃描,分享朋友圈

二維碼在中國火起來基本上全靠微信，這種信息存儲方式可以保存比條形碼多得多的信息，因此在國內(nèi)通常用于鏈接地址的收發(fā)。在而在平面及網(wǎng)頁設(shè)計中，設(shè)計師們在面對這種由黑白小方塊組成的難以處理的圖片，幾乎不知該從何下手，直接 pia 在作品上又如膏藥一般，難以駕馭。

而網(wǎng)上最近也在各種盛傳經(jīng)過精心設(shè)計的二維碼，很多人也對設(shè)計二維碼充滿了興趣。之前在做傳單的時候剛好涉及到這部分的內(nèi)容，順手搜了很多資料并稍微整理了一下。

來源：喵窩

作者：阿布evo

關(guān)于二維碼

二維碼其實是是個統(tǒng)稱，如果各位坐過飛機，在飛機的登機牌上也會有一塊用于掃描的長方形區(qū)域，那是在上世紀九十年代初就出現(xiàn)的，被稱作 PDF417 格式的二維碼，現(xiàn)在廣泛應(yīng)用于航空及物流行業(yè)中。而我們現(xiàn)在更常見到的，也是本文主要探討的，是由日本 DENSO WAVE 公司在 1994 年發(fā)明的 QR 碼（全稱為快速響應(yīng)矩陣碼；英語：Quick Response Code），QR 碼由 DENSO WAVE 公司持有專利，但開放標(biāo)準(zhǔn)，不行使專利權(quán)，也就是說，任意人或組織，都可以隨意使用 QR 碼這一標(biāo)準(zhǔn)專利而無需向其專利擁有者提出申請。

關(guān)于對二維碼進行設(shè)計及再次創(chuàng)作，該公司是這么指出的：

在QR碼上重疊插圖或加以設(shè)計變形，就需要利用QR碼的糾錯功能進行讀取，而有時會因為一點污痕或缺失而無法讀取，或者讀取速度變慢，對此需要引以注意。
為了確保穩(wěn)定的讀取，還是建議遵從根據(jù)JIS、ISO的規(guī)格制定的內(nèi)容加以利用。
而且，在QR碼上重疊插圖或加入設(shè)計與QR碼的規(guī)格不符，有可能無法形成QR碼。
DENSO WAVE INCORPORATED不行使專利權(quán)僅限于符合JIS、ISO規(guī)格的QR碼，那些與規(guī)格不符的QR碼不在此列，因而DENSO WAVE INCORPORATED有可能會行使專利權(quán)。若考慮在QR碼上重疊插圖或施加設(shè)計的使用方法，請事先與DENSO WAVE INCORPORATED洽談。

這段話大概意思就是說，對 QR 碼進行設(shè)計的時候，有可能導(dǎo)致 QR 碼無法被正常讀取，而與此同時，對 QR 碼的設(shè)計行為有可能會導(dǎo)致 DENSO WAVE 來查水表。當(dāng)然這也只能算是官話，因為在他們公司的另外一段文章中，其發(fā)明者也提到

原昌宏表示：“黑白兩色的碼對人們來說已經(jīng)習(xí)以為常，我希望制作出更為漂亮、能給人們帶來驚喜的QR碼”。

所以其實 DENSO WAVE 是鼓勵用戶對 QR 碼進行設(shè)計的，畢竟這樣也可以更好地推廣 QR 碼嘛。

QR 碼具有一定的糾錯能力，根據(jù)選擇，其糾錯范圍可以從 7% 到 30%。這里所指出的“糾錯”，意味著 QR 碼的“污損面積”（包括劃痕、污跡、破損乃至掃描設(shè)備對 QR 碼圖案造成的模糊情況等等）不足上述面積的時候，QR 碼讀取設(shè)備仍有有可能讀取，現(xiàn)今所有的對 QR 碼的設(shè)計都是基于這一原理，然而值得注意的是，如果關(guān)鍵部位有污損（如定位部分），那么這個污損面積只占了不足5%，也有可能導(dǎo)致內(nèi)容無法讀取。

QR 碼的基本規(guī)格

QR 碼的最小單位被稱為碼元（一定是對岸友人翻譯的），QR 碼中的一個“小方塊”就是一個碼元。在電腦上，使用電腦識別軟件進行直接識別的話，一像素一碼元就可以了，然而，我們通常所見的 QR 碼一般都是使用手機攝像頭進行識別的，這樣來說 1 像素的圖案就太小了。對于印刷而言，可以打印出來的 QR 碼的最小尺寸是 3.57 × 3.57 mm（一碼元 4 點，折合 0.17mm，最小邊長為 21 碼元），對于顯示屏來說，這樣的大小還不到 1 像素一碼元 XDDD。而關(guān)于最大尺寸，更加無限定，實際上碼元越大，對于相機等設(shè)備來說越容易讀取，只要這個 QR 碼的大小不要超過相機的取景范圍就好~因此其官網(wǎng)推薦的大小僅有“我們建議用戶在打印范圍內(nèi)盡可能大地打印?！边@樣一句話而已╮(╯▽╰)╭

碼元必須是正方形的，如果在變形時讓碼元形狀發(fā)生了變化，那就極有可能無法讀取，在用 PS 處理 QR 碼的時候需要格外注意。而 QR 碼的信息參數(shù)如下圖：

三個定位標(biāo)志和一個校正標(biāo)志（圖中未上色的部分）是最重要的區(qū)域，這些部位破損嚴重的話，設(shè)備就根本無法讀取其內(nèi)容。另外值得一提的是綠色的“靜態(tài)區(qū)域”，其官網(wǎng)指出，QR 碼的邊緣必須留出 4 碼元以上的空白。這個規(guī)定，同樣是為了便于軟件讀取，在設(shè)計時一定要格外注意（實際上還是蠻多地方不遵守的，微信貌似對沒有靜態(tài)區(qū)域的 QR 碼也基本都能夠順利讀?。?。

QR 碼的設(shè)計要點

這里我所指處的設(shè)計要點，是指能夠順利被手機等設(shè)備讀取的要點，在 QR 碼已經(jīng)成為一種文化潮流的今天，不乏有藝術(shù)家對二維碼進行各種藝術(shù)化創(chuàng)作，好看是非常好看啦，但是其功能性幾乎都要消失殆盡了 ╮(╯▽╰)╭

顏色

改變 QR 碼的顏色，乃至改變 QR 碼背景的顏色，都是可以的。然而根據(jù)讀取軟件算法的不同，有些做法相對安全：

QR 碼圖案的顏色使用深色覆蓋。QR 碼背景的顏色使用淺色覆蓋，并盡量令顏色柔和過度，避免顏色邊緣。
QR 碼的圖案與背景顏色有較強烈的明度對比。

要格外注意的是不能使用反色對比，默認情況下，QR 碼的圖案部分為黑色，在上色的時候，也應(yīng)該讓圖案部分的顏色明度明顯低于背景。有些人以為只要圖案與背景形成對比即可，然而黑底白圖案的 QR 碼在絕大多數(shù)軟件來看都是識別不了的……

覆蓋圖案

微信的做法就是在 QR 碼中間覆蓋上自己的 Logo 或頭像，這種做法利用了 QR 碼的容錯能力。如果你是從運營或者其他人手上得到的這個 QR 碼，應(yīng)該將其視為容錯率最低（7%）的那一款。比如一枚 25 × 25 碼元的 QR 碼，其面積的 7% 就是 43.75 碼元，大約是 6 × 7 碼元，你的 Logo 只要不大于這個面積，基本上是安全的。

當(dāng)然這也要看你 Logo 放置的位置，目前測試下來看，放在中間是最安全的，而放在校正標(biāo)志附近容錯能力較差，覆蓋了定位標(biāo)志則幾乎全軍覆沒。

周圍裝飾

很多 QR 碼采取裝飾周圍空間的方式，令其構(gòu)成一幅畫面，這種做法與覆蓋圖案的區(qū)別僅在于“一個在 QR 碼內(nèi)部，一個在外部”而已。而外部裝飾明顯比破壞內(nèi)部信息圖案安全的多。

重點在于官方提出的“靜態(tài)區(qū)域”，它應(yīng)該占有 4 碼元的空間。而根據(jù) QR 碼的規(guī)格，只要有三個定位標(biāo)志和一個校正標(biāo)志，其實就足夠軟件劃出這個 QR 碼所處的空間了……唔前面也提到了很多地方并不遵守這一點，事實上因為靜態(tài)區(qū)域過小而無法解碼的情況，在我測試過的十幾款（累積所有平臺）應(yīng)用里只有一兩款，但這個區(qū)域不足確實會影響掃碼速度。如果一定要在靜態(tài)區(qū)域里添加裝飾，更安全的做法是使用淺色，使用與圖案形成明顯明度對比的顏色。

改變碼元形狀

前面提到，碼元是 QR 碼的基本存儲單位，而其形狀一定要是正方形。現(xiàn)在有一些 QR 碼在線生成網(wǎng)站，可以快速生成 QR 碼，并可以把矩形的碼元做成圓角矩形乃至圓形。藝術(shù)家也大都采取類似的手法，把 QR 碼的圖案轉(zhuǎn)化成畫面。這些能不能掃出來，完全，是看掃描軟件的。

雖然 QR 碼的糾錯能力相當(dāng)強，但我可以比較肯定地說，上面這些做法都非常危險。我們在做 QR 碼設(shè)計的時候嘗試了幾款自動生成工具所出的方案，測試了安卓 4.0、4.2、4.4 以及 iOS 6 和 7 下的微信（兩個版本）、UC瀏覽器及其他幾款掃碼工具，沒有一個異形碼可以被全部軟件識別，解碼能力最強的微信，在面對定位標(biāo)志異形的情況下也變得無法解碼。

根據(jù)實際情況，如果你的 QR 碼是僅供微信使用，變形的程度可以相對大一些（相對較小的圓角是可以容忍的。在保持定位標(biāo)志形狀不變的前提下，QR 碼圖案可以做較大改動），如果你的 QR 碼是一個網(wǎng)址，可以由任意工具掃描解碼，那么請注意，不對其做變形處理才是上策。

上面說了那么多都是通常情況…我也遇到了，幾乎解釋不了的情況。

一般來說 QR 碼變形越嚴重，所需解碼時間就越長，但是我在寫本文的時候遇到了兩枚 QR 碼：