如何制作一个漂亮的二维码 QRBTF

作者 ciaochaos CPunisher置顶：我们的二维码生成网站 qrbtf.com有人说，二维码是 线下向线上转化最重要的入口，无论是对于线下商家、自媒体运营者、策展人还是纸媒编辑，二维码都是非常重要的一环。而标准二维码形式单一、对比浓重，常常在一张海报中「拉低审美」。 缘起二维码是什么？从大学开始，大范围地接触生成艺术——利用计算机算法制作的视听艺术作品，有那么一刻，我心中也会想，二维码不也可以是一种生成艺术？ 还记得几年前的一个下午，我打开了初代 Apple Watch，我永远忘不了配对的时候，Apple Watch 上出现的动画。我看了足足五分钟，才忍心完成配对——失去观赏动画的机会。后来，我还是没忍住重装了手表，就为了再看一次这段动画。当时的我为什么这么着迷？不是因为这个动画有多「好看」，而是惊叹于我居然能通过扫描一个混沌的、肉眼看不出规律的动态图形，完成信息的识别、手表的配对。这种体验，一下子把我震撼了。原来信息的传递，可以如此的艺术化，原来生成艺术的背后，还有「还原的艺术」。后来，网络上能找到这段视频了，我也得知，苹果在五年前「Patented!」这项叫做「Invisible optical label for transmitting information between computing devices」的技术，也就是 设备间隐式光标记信息交换技术。这项技术起源于光标记，在我看来，真正有趣的是其中的「隐形」二字。这也恰恰是今天，我们想在二维码上看到的东西。二维码的默认样式对比强烈，像是一种椒盐噪声。我们想尽办法，让他变得低调、融入背景、「隐形」。这是大多数人心目中，对二维码美化、艺术二维码的共识。不满现有美化方案，自己做一个二维码生成网站二维码美化，方案还是有很多的。徒手设计是一招，商业报价千元起步；找淘宝是一招，六块钱一次，自选模版，不但丑还改不了；网上现成的编辑器是一招，要素过多，完全学不会。这些方案可以大致分为三类。一是纯手工打造，甲方爸爸换一个网址你掉一桌头发；二是模版选择，质量不高也定制不了，大多数模版还只是背景图、颜色的更换；三是专门的编辑器，太难学。于是一周前，我明白了，我无非是想要一个 满足自己的需求、满足自己的质量要求、丰富自己选择、匹配自己的工作流程 的二维码生成工具。好一个「以自我为中心」的设计。 今天，在和一位天赋异禀同学一起学习、设计、开发一周百余次 push 后，我拿出了第一个还算能用的版本。从零学习了前端框架，也终于涉猎了后端知识。上才艺：网址：qrbtf.com 复习一下所学，这个页面中我将二维码列表横向排布在一个溢出的盒子里。在移动端，我借鉴了 Apple 一个非常出色的设计。即每页放置两个二维码，而第三个二维码露出一截。这样的设计在保证对称性的同时暗示了用户这个区域是可以滑动的。这个暗示是怎么做到的呢？前有格式塔封闭性原理，用户会认为露出来的那一截背后有一个完整的二维码，后有设计心理，这一小节充当了意符的作用，是一种很棒的隐喻，远胜于文字提示、切换按钮、滑动条。由于，我只需要满足我自己的需求，就将网站的重点放在了「参数化设计」上。参数化设计什么是参数化设计？在过去，传统的艺术创作流程通常会带有「线性设计」的痕迹，比如画一幅水彩画、写一篇作文，不可撤销、一旦初始条件发生更改只能重做。这种模式逼迫、鼓励艺术家全神贯注地投入创作，一旦出错，一幅作品就毁了。到了视频剪辑领域，大家发现传统的线性编辑不再能适应浩大的影视制作工程，于是非编——非线性编辑的概念被提出。到了工业设计领域，工程量对设计流程又提出了更高的要求，程序化、流程化、参数化的方法接踵而至，提供便利的同时也降低了门槛、提高了上限。小时候我们玩过 Scratch——模块化编程。实质上，他就是一种流程化的设计，流程化不仅体现在入门级应用上，行业级应用如 Grasshopper、Houdini、UE4、Blender 等也都吸收了这种方法，打造了十分引人的「连连看系统」，通过给节点连线的方式设计，无疑是一种对创意、艺术的解放。无论是程序化（写代码）还是流程化（连连看、搭积木），无疑是一种参数化、计算机辅助的设计。在制作这样一个二维码工具之前，我花了几分钟时间，以自身体验为中心，思考了学习成本、创作体验与创作限制等维度，设计了这样一个预设样式、可调参数的生成器。提供二维码样式而不是提供编辑器，降低了学习的成本、创作的时间成本，同时可以对样式的审美感受进行统一把关，提供可调参数，满足了我以及与我需求类似的用户对更自由、更规范的统一调整方案的需要，提供 SVG 的导出，为设计师进行二次创作提供了可能。我的愿景：借力现代化设计流程，启发设计更多有趣的二维码 线性与非线性设计，都有有趣、有价值的一面，也都有各自的问题。我希望我的工具能提供我需要的 I/O，能接入我的工作流程。即便是看上去无懈可击的非线性设计，有时候也需要那样一个「神来之笔」，比如生成完二维码我可以导入我的设计工具，在中间删去一些信息点，加个头像，这一步，你认为是写程序好还是自己摆弄好？借力现代化设计流程，可以节省很多的人力成本，比如过去我们要改变二维码信息点的尺寸，只能依靠软件深处的特殊功能，或是修改图形代码，而现在，就是网站上一个参数的事情。设计、搭建这个网站，也有想要做一个二维码发布平台的企图。如果你也有兴趣，欢迎联系，加入设计、开发。最后要感谢 JZ Creatice 的一篇文章 「九分之八」二维码美化设计法，给了我一些很棒的启发。另外，我正在设法把二维码生成的工具集成到 mdnice.com，一个支持 Markdown、数学公式、CSS 样式编辑的微信公众号编辑器上面。一起期待吧！完。

本文章由javascript技术分享原创和收集