前端是设计到代码的搬运工？（上）

本文讨论前端开发，对，就是做网页和app。

进化史

自古以来，前端工作流都是设计师先出设计图——当然此处设计师会惨遭各方指点江山——再由前端工程师实现，但“实现”所代表的工作方式因公司和团队而异，其间生产力的云泥之别，绝非“实现”两个字所能涵盖….

QuarkXExpress/Photoshop 诞生的年代——1987/1990

这个年代的微软的操作系统和绝大多数应用程序还在使用字符界面，但Mac是图形化的啊！所以第一版设计软件都是Apple专用，设计主要是面向海报／印刷品等等。

至于软件UI嘛，90年代那会儿的软硬件支持都差点意思，能有256色和640x480已经惊为天人了，你要是给个设计：按钮下的drop shadow，宽度2px角度215？抱歉，不存在的。直到革命性的Windows 95和对应的Photoshop发布之后，PC上的设计才进入快车道。

Dreamweaver/Firework/Flash

设计真正普及开来，还是要靠2000年的网络泡沫，毕竟传统桌面软件开发者和用户都有限，而浏览器里网页面向的是连大爷大妈都包括在内的普通用户，不知道多了几个量级。

如果按照传统的制作工艺，如此海量的网页猴年马月才能完工啊？所幸当时的技术水平已经可以支持“所见即所得”的设计流程，应运而生的Dreamweaver就是凭借和当时主流浏览器IE/NS的完美兼容独领风骚好几年——竞争对手微软的FrontPage最终扑街，就是因为从设计导出最终HTML代码时的质量太糟糕。

而web要求的各种设计少不了图片的装饰，Firework作为和Dreamweaver同公司产品，在“将图片集成进HTML”这个流程里和后者结合得天衣无缝(这活儿FrontPage怎么也干不利索），加上现在虽然已经人人喊打但当时人见人爱的Flash，出品公司MicroMedia已经威胁到了Adobe——于是被后者收购了。

手写HTML/Css原教旨主义的复辟

进入web 2.0时代之后，吃瓜群众对网页的美观和易用性有了更进一步的要求，“带着数据做设计”，web 1.0时代的三剑客有些力不从心了。但无论如何，直接编辑HTML和css总是没有问题的，我就在浏览器里直接看效果。

本来MicroMedia三剑客时代的设计人员已经可以覆盖前端的大部分工作，但随着页面功能复杂化不可避免要引入大量javascript代码，于是前端编码和设计成了跷跷板的两头，渐行渐远。

Sketch上场

iPhone的出现，不仅无中生有创造出了“移动互联网”这个新世界，而且扩展了“前端工程师”这个职位的工作范围。

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。我们尽力让 Sketch容易理解并上手简单，有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。对于绝大多数的数字产品设计，Sketch 都能替代Adobe Photoshop，Illustrator 和 Fireworks。

——摘自《sketch用户手册》

俗话说“分久必合合久必分”，用在设计和编码上也是合适的。

设计师手里的工具五花八门，Ps/Figma/xd/quark/sketch/axure怎么看怎么有意思，作为一个前端工程师，只能苦逼的把玩npm和浏览器，还要面对“对齐了吗？这都看不出来？”的业务沟通，真是岂有此理！！！

每个前端工程师，都有一颗想当设计师的心。

——否则，他就去做后端了。