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

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

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

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

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

收藏 24
点赞 4

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。