零基础学编程，设计师你们还等什么？

学会一门计算机语言貌似越来越重要了，从草根到设计师，有志于在移动互联网领域一展手脚的人如过江之鲫，不可胜数，但真正能把想法转化为现实的，寥寥可数。究其原因，无非是找不到合适的程序员写代码。之前36氪也报道过，资深程序员对于和设计师合作开发产品态度很谨慎，所以呢，最好的方法就是设计师自己先学一门语言，这样一来很多问题就相对简单了。

关于打脸的小故事：我有个朋友，之前是个好战分子，有一次问我，你给人打过脸么？他很想知道我是不是会因为害怕被打脸而抵制打架。后来我们找了一个机会参与了一场酒吧斗殴，结果我发现被打脸也不是件坏事，它能很迅速的激起你的血性，让你毫不犹豫的加入战斗。

编程和打脸其实挺相似，没接触过的人老以为那是另一个次元的产物，这样的想法使人们不敢轻易去尝试学习编程。之前有个口号被喊了很多年，大致就是“设计师最好去学编程”之类的。我最开始学编程的时候只是想减轻自己的工作量，但后来发现通过编程实现的效果要好很多，让我能从本质上了解到自己作品的运行方式。想想看，如果你都不了解基本的技术，你怎么能设计出优秀的产品呢？所以说，设计师们，试着去学学编程把。

左勾拳：准备工作

首先，你需要在你的机器上安装processing，这是一种基于java的新兴语言，主要处理图像和动画，是很多设计师的最爱（更多内容请自行百度google）。搞定之后先看下边这段十分钟的视频，在视频里我给出了一些最简单最基本的例子，如果感兴趣你可以重新写一遍，会对你有所帮助。（点击下载源代码）如果你之前没有任何编程经验的话，我相信当你运行你写的代码的时候一定会非常惊喜的，其实编程没那么神秘呵。

除了上述画圈圈玩的把戏之外，学习processing最重要目的是让你能够从程序员的角度去思考问题，在这里你能学到所有关于编程的基础知识：对象、变量、类等等，你会发现当有一件事情需要重复很多次的时候，最好的方法就是写一个函数执行很多遍，而不是写很多遍同一个函数。

当你开始把这些函数当作解决问题的工具的时候，这些工具就是你的智慧财富。设计的本质是解决问题，解决问题需要用到工具，那么，更多的工具也就意味着有可能设计出更优秀的产品。就像你学会了一个新的photoshop技巧，那么这个技巧从此以后就被你所用，成为你能力的一部分了。俗话说，技多不压身，就是这个道理。

通过编程使自己的设计超越静态可能会成为你提升自己设计能力的一条有效途径，你能很直观的发现编程对你工作的提升，而且能清晰的了解到所接触到的数据的结构。这些会给你的设计带来意想不到的好处。

右勾拳：案例学习，fluxabstract

大约一个月以前，我决定做一个关于co.design的试验，这个试验试图创造一个更有趣一点标题图片来替代一直以来的静态图片，但是这个标题不会是交互式的，因为这样有可能喧宾夺主，使正文不章。

这个动态图片会是一个循环的动画，它会以非常慢的速度运动，这样不会影响读者的体验。做这个动画的目的在于反映电影艺术在互联网文化里的发展趋势，顺便再现一段普通的gif动画。从某种方式来讲，这是对早期互联网动画的致敬。

当然，光有概念是不行的，得有具体得实施方案，正好最近co.design需要标题图片，我意识到，我可以在这上面做文章。我可以做一个循环的动画，以一张做底，另一张图片以条纹状覆盖在它上边，向这一个方向缓慢移动。当然，选图必须是完全符合co.design的风格的。

现在，方案也有了，接下来怎么办呢？起初我想做一个ae模板，这样其他设计师就可以很简单的插入图片导出动画了，但是这样一来，人们也失去了对最终效果的控制，每一次输出的动画也都会千篇一律、失去变化，这有点不合我的初衷。

我需要做一个更灵活的工具，使其他设计师可以控制部分参数，比如说改变线条的粗细、角度，改变图片移动的速度等等。这样一来，过去那些基础软件就不符合我的要求了，我必须自己用processing写一款小工具来实现我的要求。

不过真正坐下来写代码的时候我心理一点都没底。我最先做了个倾斜的多边形，通过变量来控制每个角的位置。在让边框加粗的过程中出现了很多问题，幸好都一一解决了。接着我以相同的参数又做了一个多边形，这样它们就能以相同的参数运行，只是后一个对多边形的起点是第一个的终点。接着让两个多边形适配，并以不同的图案填充，通过控制图片在x轴上的位置使得其看起来在缓缓移动。

现在，核心功能已经实现了，接着要实现的就是能在图形化界面上控制参数。我决定使用andreas schlegel的contro p5库。processing的函数库其实是java函数库库的一部分，你能很容易的把这些函数用到你自己的作品中。接下来我又用到了sdrop库（实现拖拽功能），也是andreas schlegel写的，这样其他设计师就能直接把图片从桌面拖拽到我写的程序里了。最后我又使用了gifanimation库，这样能把动画输出为gif动态图。

不过在输出的时候我遇到了大麻烦，通过上述功能输出的2秒的1280*720动态图片高达20m，而要实现完整的动画需要一个800m的动态图片，这是不可能在网页上使用的，唯一的解决办法就是把gif格式替换为视频格式，这样我需要实现更多点的控制（用许多单独的图片构造动画显然不太合适）。

最终我找到了andreas colubri的gsvideo库，这个函数能让我输出ogg格式的视频，这个视频能把80秒的循环动画压缩到20m。

组合拳：最终效果一般

我不是正经八百的科班出身，又没学过专门的编程知识，能力毕竟有限，做出来的用户界面差强人意。最终的成品有两个单独的窗口，一个呈现动画另一个做控制界面用。我不得不用一个按钮来覆盖动画中的拖拽手柄，否则它就得单独输出了。

有件事必须得提醒，动画输出的时间会很长，而且在输出之前你没法确定它到底能不能工作。输出完之后，动画就会显现在屏幕上原来代码的位置，代码当然就消失了。

fluxabstract很明显是业余作品，如果一个真正的程序员看到很可能会真的来打我的脸。但是，值得骄傲的是，我是以一个设计师的身份让我最初的想法变成现实的。

co.design决定把这个项目做成开源的，所以你能在这下载到所有代码和图片。有兴趣的朋友不妨拿去看看。