2014年的时候我翻译过一本书《Responsive Design Workflow》，翻译为《响应式Web设计全流程解析》。

这本书的作者Stephen Hay是一个有丰富平面设计经验的设计师，在计算机原始时代，竞争对手都在用马克笔画设计稿，作者采用Photoshop设计流程，取得了很大的优势。而现在到了移动时代，所有的设计师都用Photoshop设计UI，作者开始思考，用Photoshop设计响应式的Web界面是不是太落后了。

于是，他开始摸索用写代码的方式，直接用HTML/CSS来制作交互稿，这样的交互稿和设计稿天然就是支持在手机上查看的，而且完全高保真（跟用户实际看到的页面一模一样）。

我个人很喜欢这个选题，不过让设计师来学代码？或者让前端工程师来学设计？这个想法还是太超前了，我在团队试过，无法很好地执行，只能做到让设计跟前端多沟通这一步。

最近本书的作者Stephen在他的博客上发表了一篇文章，我觉得写的蛮犀利，所以翻译过来（也邮件对方要到了翻译许可）。

以下是正文。

《设计师应该学代码？停止争论吧》

原文链接：Put the “designers should code” debate to rest

我的大学表演课老师曾经对我们说，“要成为戏中人，而不是表演角色”。他希望我们不要“表演”银幕中的角色；他希望我们“活”在银幕中。举个例子，如果我们希望表演一个喝醉的人，应该怎么做？我们都看过喝醉的人，所以很自然就会想要模仿一个醉鬼。但是，很多时候表演得都很假，容易被识破。因为喝醉了的人实际上是想要表现得没有喝醉。

我大学期间在一个艺术画廊打工，我们每年都会放一些孩子们的绘画出来展览。如果你仔细观察那几百幅孩子们的绘画，特别是很小的孩子，有一个共同点是他们都喜欢画他们看到东西的“形状”。他们不会画太阳，而是画一个圆圈，周围一些线条，或者波形。山峰就是三角形。一切都是一些抽象的形状。

这个天生的习惯经常会保持到一个人成年，除非他学习一些绘画知识来纠正它。事实上，学习绘画的过程，实际上是学习去看。是的，你需要学会认真地观察你的绘画对象。酒杯上的圆圈会变成椭圆形。阳光射出的硬朗线条变成颜色的渐变。你是否认为，自己不会画画，也没有艺术细胞？试试拿着一个图片，上下颠倒，然后完全照着它画一幅画。不要想象你所绘画对象的形状，不要抽象它，只需要看到什么画什么。如果你没有画画经验，这幅画将是你有史以来画得最好的一幅。

作为Web设计师，你可能做很多工作，你可能做调研、设计结构、适配、测试、布局、画线框图、设置字体、排版等等（此处省略一百字），无论如何你的作品都可能让用户阅读、交互、喜爱、厌恶、有口皆碑，或者是随时带在身上。而你设计的产品的媒介就在你面前，就是你每天使用的电脑，所以你作为设计师，实在是太幸运了，可以直接在电脑上设计站点原型。

我常常公开布道，建议设计师们学一些代码。我花了几年的时间酝酿出来这个想法，直到现在我还这样认为。但我现在认为重点不是编程本身，重点是抛弃掉设计图形化的表象这种做法。我希望设计师不要使用死板的图片来做一个代理人，来跟背后不同的设备，不同的浏览器来隔墙喊话。当我写《响应式web设计全流程解析》这本书的时候，表达了基于内容和代码制作原型的方法，有些人很喜欢，有些人则完全反对。讨厌这种方法的人，因为这种做法超出了他们的舒适区，需要他们学一些基础的HTML和CSS来让浏览器工作起来。

如果你给我一个线框图，请不要跟我说你设计了一个可交互的网站。你只是画了一个圆圈，和周围的线条，就认为这是现实？差别太大了！视觉设计会影响交互，排版会影响交互，内容会影响交互。除非你们整个团队能协力同时工作，否则你描绘的设计稿终究会在某个环节露馅。你想要设计用户交互？那就在浏览器中设计和打磨。要成为可交互的产品，不要表演可交互的产品“应该是怎样”。

这就是我的想法。不是为了代码而写代码。在几年前我写这本书的时候，很多可以帮我们把页面在浏览器中快速展现出来的工具都还没有出现。我选择代码是因为我找不到一种方法可以让我快速搭建一个真实的页面原型。我不得不使用JavaScript和命令行工具来自动生成截图。而现在我们有自动化工具可以处理这个工作了，就跟我过去做的一样，但是更直观。现在到处都有方便的工具可以让你把产品呈现在浏览器中。这在两年前还是很少见的，所以那时候我们会提倡设计师学习代码。

关于设计师是否应该学习编程，网络上有很多文章和微博争论不休，但是我认为很多都没有讨论到点子上。有人认为编程是一个专精的技能或者职业，或者说HTML和CSS实际上不是编程语言。这都不重要。

设计师一定要学习写代码吗？不一定。一个会代码的设计师会更有优势吗？我认为是。学习制作原型需要的代码知识是否比学习Photoshop更难？不是。如果我想深入研究代码，是否比深入研究Photoshop更难？是的。是否有办法不学习代码，而制作浏览器中可运行的原型？是的，现在有了。如果你学了一些代码，是否可以还是使用Photoshop（或者Sketch之类的）？当然了！

我的重点不是代码，也不是使用什么工具。我的重点是，原型设计的意义在于，让真实的浏览器媒介，给我们一些反馈。