设计师变奏曲：从 Angular.js 到 vue.js

背景

许多人眼中的设计师都是跟图形打交道。UI和视觉设计师确实如此，在分工明确的大公司中也是如此。分工明确的大公司往往有专门的前端工程师，他们负责把视觉稿用代码尽可能1:1地实现出来。然而，并不是所有的公司都能有BAT那样的产品设计及开发团队。

不少中小型公司并没有足够的资源去配置如此详尽的分工。不少工程师不仅要负责后端，还要负责前端。虽然这些工程师也能够用HTML和CSS把页面做出来，但往往由于没有足够的时间去考虑页面前端重构的最优结构，及缺少对网页无障碍访问要求的了解，产出的前端页面代码往往并非最佳实践。

在国内，尚未有法律或条例对网页的无障碍访问有所要求。但放在欧美的许多国家，由于法律规定网页需支持无障碍访问(Web accessibility - 维基百科 )，如果残疾人无法访问网站，网站的拥有者将被视为违法。例如，在英国，网站若对某些人群设置障碍，则网站违反了2010年的平等法案（Equality Act 2010 - 维基百科），网站的拥有者将会受到法律制裁。因为没有明确的法律约束，需要在产品设计与开发过程注入的这方面的精力与成本就相对欧美一些网站低了不少。当然，BAT的一些设计团队也有网页无障碍访问的需求意识，在他们的团队博客中也有发文翻译。而大公司的前端人员也因为职能的明确，能有时间和精力去探索与精进。

问题

可是以上的这些和Angular.js及Vue.js有什么关系呢？

上面的这些背景情况给没有足够人力资源的小型设计开发团队带来了一个挑战。当设计师输出了用Axure做的交互原型，又或是用Sketch设计好的稿子，在通过跟产品经理沟通确认了之后，到开发那步就遇上了大麻烦。由于工程师们大都主打Java，虽知晓基本的HTML，但在前端标签选用上不是清一色的TABLE TD，就是不带class的DIV套DIV。在页面的头部HEADER加载了十来个CSS文件，打开主要的样式表，是洋洋洒洒六七千行直接用CSS写的代码。最后页面的功能是实现了，但是和交互设计原型比起来，页面看起来总觉得哪里不对劲。因为工程师没有注意到一些设计的细节，诸如留白、边距、阴影等等，更别提精确到像素了。工程师找设计师过目，设计师只能说没达到设计需求，可也不知道该怎么改用Java生成的代码。工程师可能因此要反反复复修改，再找设计师审。这样的设计开发合作效率非常低，怎么办？

解决问题

好在八九年前就因为想要亲手制作网页而系统自学了HTML和CSS，加之遍历用户体验相关书籍，知道一些基本的HTML和CSS实践。 所以在第一家公司，我开始直接使用HTML+CSS+简单的JavaScript来输出设计产出物，来做原型展示及开发沟通。更擅长后端的工程师们于是不需要再自己拼凑前端样式，只需要用SVN获得最新的HTML原型，就可以根据我提供的HTML原型稿进行开发，class和CSS都已订好。他们只需要添加少量JavaScript来实现交互效果，也节省了更多反复沟通审阅的时间用于后端及新功能的开发。

对于设计师来说，产品设计元素的一致性大大有助于用户快速上手一款产品。对于大型且复杂的企业级网站来说更是如此。设计师用设计稿来管理设计元素是管理的方法之一，直接通过代码来管理设计元素也是一种方法。只是换了一种工具而已。但相比图形，直接通过代码管理产品设计元素将是更直接高效的方法。因为图形软件和浏览器的渲染方式不太一样，看设计稿和看图片的体验确有差别。而设计师只需要稍加学习前端重构的知识，就能在小团队中更高效地与开发者协作。如果设计与开发的效率提高了，这对一家公司来说，将大大节省时间成本，而设计师的价值也就在此体现。

在小团队中，如果直接用HTML和CSS制作原型能够提高设计与开发的沟通效率，那么在这一方法应用之后，还有效率提升的空间吗？答案是：有！

更高效地解决问题

HTML原型的好处是能够在最短的时间内产出最接近于真实产品的效果。而真实产品中少不了数据。如果单是用HTML和CSS写原型，遇到表格，列表这类需要些样本数据的结构怎么办。这些部分可能会让你的HTML文件看起来有一长串，而工程师不需要这一长串冗余的结构，他们只需要知道在哪里需要插入数据。

这时候就要用到诸如JavaScript框架了，小标题提到的Angular.js和Vue.js都是JavaScript框架的一种。在这些框架的官方网站，你会看到大量文档，教你实现各种目标事件或是绑定数据，渲染页面。

过去的四年，我一直用Angular.js来参与高保真原型的设计。对于设计师来说，你不需要用这类框架来实现一个完全能用的应用，你需要的，是用更短的时间，在原型中放入样本数据，并呈现交互效果。

大约4年前，Angular.js推出，经过了一番学习和折腾之后，终于实现了在原型中绑定数据的效果。由于网站页面结构的一致性，这些原型的部分元素慢慢地就变成了模板。你可以在新的原型中直接复制粘贴他们，然后更改一些数据，就可以快速输出目标需求解决方案。

结合了Angular.js数据绑定和基本交互事件的高保真原型到了工程师那里依然只是个参考，你可以不必在意工程师是否应用了这套框架，只需在意工程师是否依照原型，应用了预期的设计效果。

就这样，伴随着Angular.js，我在四年的时间里用这套方法完成了一百多个需求的设计原型。产品经理和工程师也都能快速适应设计师的产出物。沟通基本没有什么障碍。

当然，用Angular.js做原型设计也有美中不足的地方。因为Angular.js的控制器必须在服务器环境下才能正常运作。如果工程师没有给这个原型文件夹开个服务器，有些数据和交互事件就不能正常显示。再有Angular对在UI控件和Route的设置上有些麻烦，对于可重用的UI元素，不能在短时间内快速调用。

于是在2016年，我开始学习和采用Vue.js。Vue.js不仅补足了上述的美中不足之处，不需要给页面开服务器，所有的交互、数据渲染都能正常运行。Vue.js的UI component方法也更易学易使用，有助于设计师进行UI模块化管理。运行时Vue.js也比Angular.js 1.x 给人人感觉性能更好，速度更快。Vue.js的作者Evan You是设计师背景的国人，Vue.js的文档和整体体验设计很不错。Vue.js如今的新版本发布频率也很高，得到了国际友人的一致肯定。

总而言之

无论你是在分工明确的大公司，还是在需独挡多面的小团队，学习前端开发，并应用到设计叫服务中去对设计环节的效率提升都是有益无害的。即时你无需亲自出HTML版的设计原型，熟悉一点编程逻辑也能帮助开发你的左脑，让你更加聪明。

设计师，时候开始学习写代码了。