PSD2CMS：从设计稿自动发布页面——阿里女工程师单丹访谈

在上个月结束的阿里巴巴技术嘉年华 D2 前端技术论坛中，一位女性前端工程师为大家带来了一个新颖的分享：PSD2CMS——由设计稿自动发布页面的系统。InfoQ 对她进行了采访，聊到了 PSD2CMS 的前因后果，以及一位女性程序员的阳光生活。

InfoQ：请先做个自我介绍吧。

单丹：各位好，我是单丹。毕业于天津大学，来自于辽宁沈阳。2010 年 8 月加入阿里巴巴，目前是中文站前端单身女开发一枚。热爱编码，热衷前端技术。应用 node、mongodb 完成多项应用，也曾致力于前端单元测试。目前专注于改善前端工作环境的工具类产品研发。当然，比写前端代码时间更长的是跳舞和户外。目前是公司精舞门爵士课堂的掌门，也曾和队友一起攀登过透明梦柯大雪山、四川半脊峰等等。

InfoQ：这次你的演讲主题是一个从 PSD 稿直接发布页面的系统，能否简单介绍一下你们这个系统？

单丹：系统称为 PSD2CMS。CMS[Content management system] 是可以编辑修改发布页面的系统，各大公司应该都有各自类似的页面管理系统。PSD 是 Photoshop 的一种专用文件格式。PSD2CMS 定义为 Photoshop 设计稿完成后，自动完成页面发布的一个系统。系统由三部分组成：一是运行在 Photoshop 环境中的插件，完成图层解析和页面生成；二是页面发布系统 CMS，完成图片上传，页面发布等功能；三是连接二者的预览服务器，提供数据持久化和页面的预览等服务。

InfoQ：为什么会有这样一个系统呢？

单丹：EDM、论坛帖、活动页是电商类网站运营最常使用的方式，在运营需求中占比很高。这类静态页面的共同点是生命周期短、复用性及语义化要求不高。在本系统出现之前，最常使用的方法有如下两种：一是使用 photoshop 自带的切片工具导出页面，再结合 dreamwaver 添加热区。这种方法存在的问题是文字会被做成图片而不能后期编辑，代码性能不佳，浏览器兼容不理想。二是手动编码。但由于这类需求的技术含量低，手动编码方式既耗时又枯燥。

本系统通过 Photoshop 插件的方式实现了页面的自动生成，并通过预览服务器连接到 CMS（页面发布系统），实现了设计稿完成后页面自动发布的功能。既减少了需求方的麻烦，又缩短了整个页面开发的工作流。

InfoQ：能不能介绍一下 PSD2CMS 的系统研发团队？

单丹：PSD2CMS 是跨团队的一次项目合作。项目成员除了前端团队的同学，还有 CMS 系统的开发同学。插件开发由万先甲、沈剑平和我完成，预览服务器由何城军和我负责开发。余平春、郑钦明负责 CMS 系统中图片上传、页面发布等功能。作为项目经理，我也负责日常的项目计划跟进、资源协调等工作。除了项目组成员，在这里要感谢前端组同学和老大之昊和李浩的支持。当有同学投入到 PSD2CMS 的开发时，其他同学默默无闻的分担了更多的需求。同时要感谢阿里巴巴中文站方凳会的支持。他们给了我们很多好的建议和意见。

InfoQ：在过程中遇到了什么困难，是如何解决的？

单丹：在开发过程中，我们遇到了很多难点。英文资料有限，翻遍整个互联网也许只能找到这两份儿参考文档。作为相对冷门的一个领域，能搜集到的中文资料几乎没有。开放的 API 有限，不能满足需求。而且，API 文档上有些方法的参数也没有清晰的说明，最初只能靠猜想。比如获取混合样式文本图层的样式。就是当一个文本图层中的存在多种样式文字的情况。原生的 API 只能取到一个文本图层首个字符的样式。在一个文本图层中不同的文字使用了不用的样式情况下，取不到文字的样式差别。Photoshop 提供了一个很有用的对象，ActionReference。当 API 不能完成你的需求时，首先想到使用这个对象。理论上，它可以指定为 PS 里任何对象的引用，这样就可以获得这些对象的属性。它有一个 putEnumerated 方法，API 上只描述了这个方法入参类型是枚举型。而哪些值可以作为输入显然是应该有一个集合的。后来，我们发现了一个没有任何说明的 TypeID 的列表。而这些关键字，就是 putEnumerated 方法的入参。经过最初痛苦的摸索，终于实现了这个功能。

其实，除了 API 带给我们的难题，还有思路上的难点。比如如何判断一个图层或者选区内的图片是单色。因为如果是单色，我们可以利用背景色代替背景图，这将很好的提高页面加载的速度。最初，我们是用取样本点对比的方式。但如果选区很大，样本点很多，效率是个问题。采集少的样本点，精确度又差。最终的方案是使用了直方图。利用 Photoshop 里直方图的信息，可以一目了然的看到图片是否单色。

除了技术上的难点，最大的困难是资源。在 PSD2CMS 出现之前，我们的情况是很艰难的。一度只有三五个前端却面对 40 多个后端和几十个设计师。我们怀揣着用 PS 插件实现页面自动化开发的美好的想法，每天却被需求和项目压得喘不过气。我们又不能对老板说：我们想做的插件有多么重要。需求还是优先。于是，大家咬咬牙，想出了最终的办法就是：Just do it。利用一切还可以利用的时间，疯狂的工作，坚持着做下去。直到静态页面的需求可以使用 PSD2CMS 来完成，我们的资源情况得到了缓解，有了更多的时间去做优化和推广。坚持走出第一步，就会将我们周围的环境慢慢改变成一个更加良好的生态圈。

InfoQ：现在这个系统在哪些地方有应用，效果怎么样？

单丹：在完成 PSD2CMS 后，我们进行了公司内部的推广，也收到了很多反馈。PSD2CMS 不只是减轻了前端同学的工作，而是改善了整个工作流。比原来一个典型的需求，设计师做设计可能需要 4 个小时，前端开发 demo 可能需要 4 个小时，需求方接到 demo 后上传图片修改代码等等的需要 2 个小时。但使用 PSD2CMS 之后，设计师完成设计后点击提交，需求方预览页面，点个按钮直接就可以发布。所以，使用 PSD2CMS 前后工作流有三个明显的变化：一是需求方的时间缩短了，苦恼减少了, 对他们来讲接触代码是个痛苦的事情；二是前端工程师从工作流中消失了，静态页面不再需要前端了；三是，整个工作流变短了，至少缩短了 50%。

使用 PSD2CMS 生成页面的优势是，文本图层可以生成文字方便后期编辑，浏览器兼容性好，代码简洁，生成速度快等等。因此，我们想将它应用到更广的领域比如网站的频道页面，而不单单只是静态活动页面。但，它目前的局限限制了它的应用范围。最明显的一点是生成的页面布局死板。这样后期页面修改时很难维护。同时，各网站都有各自的页面布局要求，我们也希望不仅仅是解放了我们自己的工作时间，也能接入到更多的系统，帮助到更多的人。为此，我们对系统做了进一步的规划。规划主要包括三点：第一，将页面生成模块搬到 node 端来实现，这将为系统的扩展提供更大方便；第二，定义通用的图层数据对象模型；第三，定义通用的页面管理系统接口。后两点的目的是降低个性化系统的接入门槛。

InfoQ：PSD2CMS 有对外开源的计划吗？

单丹：前端本身就是拥抱开源的。目前 Photoshop 通用 API 部分已经在 github 上开源，还在整理中。下一期完成系统模块化后，也会将通用的部分开源，比如 PS 图层解析模块。这也是规划里我们定义了通用的图层数据对象模型的原因。

InfoQ：题外话，做为一位爱户外、爱旅行、爱摄影的女性程序员，你对广大程序员 GG 有什么话想说吗？

单丹：这个问题够犀利，我只当自己是个程序员，还没有从女性程序员这个视角考虑过问题。 首先，作为女程序员，并没感觉到什么特别。虽然历史上最早的一批程序员，开创了软件业的程序员，是一批女性。这其中的 Augusta Ada King 被认为是世界上第一个程序员。她的父亲是英国诗人拜伦，母亲是数学家安妮·伊莎贝拉。Ada 继承了父母双方的优点，兼具了科学家和艺术家气质。她们还是很特别的。 关于爱好，我喜欢户外运动，特别是爬山。也许，是经过一番艰苦之后登顶的那一瞬间的感动，召唤着我一次又一次的冲向那些 no fire no signal 的地方。也许，是渴望回归到一个简单的、质朴的、纯粹的、原始的世界，唤回心灵的宁静，体会生命的大美。也许，身体里本来就涌动着与生俱来的对自由的渴望，回归大自然的渴望。也许，不疾不徐的穿林，狂奔的下降，肆意的上升，意犹未尽的腐败，神采飞扬的争论，这旅途本身也太过吸引。也许，确实不是为了什么，却会为自己为小伙伴们的点点滴滴热泪盈眶。爬山除了有其感性的一面，也需要理性的思考。其本身就是个系统工程。通常的一次远征，需要提前一两个月做准备，包括体能训练、技术训练、队友磨合、物质准备、路线及备用方案准备等等。MBA 教材中关于团队的 5 个 P 的要素在这里都有体现。我始终认为，喜欢户外运动的同学一定是懂得享受生活热爱生活的，并有一种永不放弃拼搏向上的精神。

编后记：

通过 PSD2CMS 上线的页面可以参看下面几个：

• http://page.1688.com/sbtg/index.html
• http://view.1688.com/cms/promotion/hongbao/index.html
• http://page.1688.com/new-recruit-project.html
• http://cxt.1688.com/tbzm.html

单丹在 ADC 上的演讲 ppt 下载链接可以点击此处。