设计师必备！如何设计一个美观实用的二维码？

编者按：二维码现在是大街小巷的标配设计，刚接触这类设计的同学，可能不是很清楚二维码的设计要点。颜色与图案的处理方法，以及如何兼顾美观与可用性等等，今天@不到布 整理了相关的知识，帮你驾驭好二维码设计！

说起来，二维码算是墙外种树，墙内开花的典型代表了：《老外看中国！有哪些国外几乎没有的本土特色设计？》

二维码在中国火起来基本上全靠微信，这种信息存储方式可以保存比条形码多得多的信息，因此在国内通常用于链接地址的收发。在而在平面及网页设计中，设计师们在面对这种由黑白小方块组成的难以处理的图片，几乎不知该从何下手，直接 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