本帖最后由 冰点柠檬茶 于 2018-2-23 17:52 编辑 炫酷动态二维码教程•解读二维码•静态二维码视觉优化•动态二维码制作
091025nd38cg5adt8madtg.gif
(1.91 MB, 下载次数: 0, 售价: 3 U点)
随着智能手机的普及，移动互联网的迅猛发展，二维码肩负着越来越重要的任务。看网页要扫二维码，加好友要扫二维码，支付要扫二维码，骑车要扫二维码，甚至连下卖早点的摊子都有一个收费二维码。•解读二维码当你的面前同时出现这样的两个二维码，你更想去扫哪一个呢？答案不言而喻，炫酷的动态二维码可以让你的二维码从一堆庸脂俗粉中脱颖而出。
085601vyrylmu2yrrirzot.gif
(66.2 KB, 下载次数: 0, 售价: 2 U点)
在制作炫酷的动效二维码之前，首先要了解二维码的基本概念和原理。二维码是一种比一维码更高级的条码格式，它可以在水平和垂直方向也就是x轴与y上存储信息，存储汉字、数字和图片等信息，因此二维码的应用领域要比条形码广多。二维码的存储原理为二进制，在二维码中，白色的方块代表0，黑色的方块代表1。其实我们也不必完全了解二维码的所有原理，但是如果我们要制作动态二维码，必牢记它的识别原理。
085720h6y3t9gqrgqc9hg6.png
(24.81 KB, 下载次数: 0, 售价: 2 U点)
二维码的识别原理如下图，每个色块担负着不同的数据存储任务。
085759hc90giuuon0u0uno.png
(187.89 KB, 下载次数: 0, 售价: 4 U点)
解众所周知二维码的识别方式分两种：长按识别和扫码识别。在设计动态二维码时，出现过可以被扫描识别却不能被长按识别的问题，为此不得不一步步的寻找原因。最后找到了原因，引申出一个与识别率息息相关的知识点：二维码的容错率。容错率是指二维码在正常识别的前提下可被遮挡的部分占总二维码面积的百分比。错率越高，可被遮挡的面积越大，二维码图案也越复杂。但是，二维码的复杂程度也不完全取决于二维码的容错率。在容错率一定的情况下二维码包含的信息越多，二维码也会越复杂。当原始二维码的图案无法满足创意需时，就可以利用二维码的容错机制，增加或删除一些栅格，甚至可以遮挡部分图形。
085911kr66c60s6u66n0w6.png
(47.46 KB, 下载次数: 0, 售价: 3 U点)
•静态二维码视觉优化先推荐一个在线编辑网站，草料二维码。 高级美化模式可调整二维码容错率，以及二维码的样式，主要分为液态，直角与圆点。通过尝试调整容错率与二维码的外观来选择一个最符合你创意发挥的原始码。在这一步，慎重挑选样式对往后的创作起着关键作用。最后，下载二维码，到此你就完成了二维码的基础优化，获得了可用于动态二维码制作的基础图形。有2点需要注意!1 请在美化的每一个关键步骤使用手机测试是否能够正常扫描。2 使用多台iOS/安卓的机器，多次测试在扫码识别和长按识别两种识别情况下的识别情况。
090038ckkwkgkzpkzgp5nw.png
(364.16 KB, 下载次数: 0, 售价: 4 U点)
接下来的工作的重头戏就是静态二维码的视觉美化了，因为我们的最终目标是动态二维码，所以在做静态美化时要时刻想着为后续的动态设计服务。在与需求方沟通完需求、确定方向之后，就可以大刀阔斧的对二维码进行改造了。二维码的美化，一般有如下五种形式。前三种比较直观，在这儿就不展开说了，主要介绍后两种：整体造型和场景再造整体造型法更多关注二维码内容上的创意方法，将二维码包含的业务功能以图形表达出来，优点是直观易懂，相对比较简单，适合二维码新手入门理解二维码的识别规则。场景再造法不再局限于将二维码平铺，可以使用变形、透视的方法，甚至模拟出类似3d场景的效果。这种方法对二维码的改动较大，只有深谙二维码识别原理的老师傅才能驾驭。将场景氛围与二维码功能结合，达到更高的品牌识别度。
090142h5xtxv3v6xt752ta.png
(219.53 KB, 下载次数: 0, 售价: 4 U点)
090142a0qr2l44204xrdl2.png
(180.36 KB, 下载次数: 0, 售价: 6 U点)
介绍完方法，就继续以马上飞为例，进一步美化二维码。主要做法是把原来的二进制黑色内容码替换成更漂亮的图形和色彩。在替换二维码内容时要要注意的是：二维码的基本结构是矩阵，组成矩阵的最小单位是1栅格。所以每个栅格的形状可以是不规则的，但是被遮挡的面积必须高于80%才能被识别。遵循这样的替换原则可以保证你的视觉美化工作完成之后能够很好地在各种情况下被识别。第一次制作动态二维码时，很容易把大量的时间和精力放在改造二维码的内容上，而忽视了整体风格的一致性。正确的姿势应该是，当我们拿到需求时，首先应该整体规划二维码的视觉风格，先确定我们的风格样式后，再来统一的规划内容元素的摆放，毕竟内容只是动效二维码的一部分。具体操作起来就相对容易了，根据二维码的布局，结合自己的创意开始构思二维码的内部布局，有点像玩秘密花园填色本。
090223bz1dh1hhssddrsta.png
(42.36 KB, 下载次数: 0, 售价: 2 U点)
以用photoshop为例，把原始二维码放在最底层，在上面新建图层，把你的创意对照原始二维码的样子画下来就ok了。设计微小的视觉元素来填充替换原来的二维码内容。替换的元素首要关注色彩对比度，对比度越高越容易识别。这就是为什么原始二维码采用黑白两色，是因为黑白对比度最高。因此0、1两个代码的色彩对比度越高越容易被识别。在替换的过程中，也需要随时测试二维码的可识别性。当原始二维码的图案无法满足创意需要时，可以利用二维码的容错机制，增加或删除一些栅格，甚至可以遮挡部分图形。在替换完视觉元素之后保证可识别的前提下，就可以添加环境元素了。
090323jglgjuzzgq1z7z9f.png
(100.36 KB, 下载次数: 0, 售价: 6 U点)
090323ducwoj9j9cv6ag4g.png
(184.72 KB, 下载次数: 0, 售价: 3 U点)
动态二维码可以使用多重工具制作，把图层细分后主要会使用AE或FLASH。在把PS文件导入制作动效之前，将ps里需要动起来的图层与静态图层分开，梳理一下它们之间的关系，方便后续的动效制作。
090457idosh8oftodtoffs.png
(102.48 KB, 下载次数: 0, 售价: 6 U点)
以下为AE制作教程将准备好的psd文件拖到ae中，导入种类：合成-保持图层大小，勾选 — 可编辑的图层样式。
090648t8bvzs75lb3r5vpw.png
(194.89 KB, 下载次数: 0, 售价: 6 U点)
接下来我们按图层的先后顺序把文案：“长按二维码关注” 做一个缩放的动态效果。因为时间轴只有三秒，把七个字体安排在三秒钟内就需要对字体效果做一个规划。
090723qlj3sq3q865z5s6j.png
(259.64 KB, 下载次数: 0, 售价: 1 U点)
090756ivt5axwwu9uv65vz.png
(190.89 KB, 下载次数: 0, 售价: 6 U点)
090756s3f9ll3a9l9aflfw.png
(336.55 KB, 下载次数: 0, 售价: 4 U点)
读二
090843s4e6zziedskuxzlx.png
(178.19 KB, 下载次数: 0, 售价: 3 U点)
090843qxgklpkaa6t2p3xn.png
(317.43 KB, 下载次数: 0, 售价: 6 U点)
以此为例！维码在制作过程中，我还发现了一个现象二维码深色，底色浅色时能辨认二维码浅色，底色深色时，却不能辨认
091156e3ig0c9bbddz8u5f.png
(38.55 KB, 下载次数: 0, 售价: 6 U点)
091156x1dq78i98g770tz1.png
(11.81 KB, 下载次数: 0, 售价: 2 U点)
总结最后总结一下，制作动态二维码的心得和我曾经踩过的坑： 一定要随时测试二维码的识别效果，不要等扫不出来了，返工回去试容错率要用不同系统，不同品牌的手机多做测试，至少要覆盖主流机型，不要等上线了爆出某些品牌手机扫不出来的bug。当发现识别不出来的时候先从二维码定位点找问题。谢谢！！解读二维码 |
