編者按：二維碼現在是大街小巷的標配設計，剛接觸這類設計的同學，可能不是很清楚二維碼的設計要點。顏色與圖案的處理方法，以及如何兼顧美觀與可用性等等，今天@不到布?整理了相關的知識，幫你駕馭好二維碼設計！

說起來，二維碼算是墻外種樹，墻內開花的典型代表了：《老外看中國！有哪些國外幾乎沒有的本土特色設計？》

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

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

關于二維碼

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

關于對二維碼進行設計及再次創作，其公司是這么指出的：

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

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

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

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

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

QR 碼的基本規格

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

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

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

QR 碼的設計要點

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

顏色

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

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

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

覆蓋圖案

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

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

周圍裝飾

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

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

改變碼元形狀

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

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

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

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

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

這兩款，應該是屬于“無法解碼”那個范疇的，而微信竟然給我秒掃了（當然手機里的其他工具仍舊掃描不能…）。這究竟是為什么，我也不得而知了╮(╯▽╰)╭

【注】上面兩款 QR 碼均來自 google，侵刪。

【設計師的職場吐槽之路】

設計也分三六九等嗎？誰說不是呢！
《一入設計深似海！中國臺灣美女聊聊設計師的鄙視鏈》

前百度設計師說話了！我可以是CEO！
《別鬧！我是設計師，就不能做CEO么？》

想入行？先看看有多少坑等著你吧！
《設計師入坑指南！成為設計師之前必知的8件事》

原文地址：hikarievo.me
作者：@不到布

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量88萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege