用像素管线思考，提升美术到前端的产出效率

前言

大家好，我是扫地盲僧，一名懂点技术、会点设计的产品经理，目前担任UU跑腿-效率工程负责人。很荣幸被蚂蚁集团Oasis团队邀请分享关于《提升美术到前端的产出效率》课题。此行收获颇丰，也结识了很多行业内的大佬，受益匪浅。

正文

一、设计稿与前端的分离

设计稿与前端的分离是提升美术到前端产出效率的第一步。传统的工作流程中，美术会将设计稿直接交付给前端工程师，然后前端工程师再根据设计稿进行开发。这种方式存在着诸多问题：

• 美术和前端工程师沟通成本高：由于设计稿和代码是两个完全不同的体系，美术和前端工程师需要花费大量的时间进行沟通，才能将设计稿准确地还原到前端页面上。
• 美术和前端工程师工作效率低：由于设计稿和代码是两个完全不同的体系，美术和前端工程师需要分别进行工作，这就导致了工作效率低下。
• 设计稿和前端页面不一致：由于设计稿和代码是两个完全不同的体系，在开发过程中很容易出现设计稿和前端页面不一致的情况。

为了解决这些问题，我们需要将设计稿与前端进行分离。具体来说，我们可以使用以下两种方法：

• 使用设计工具生成代码： 目前市面上有很多设计工具，如Sketch、Figma等，都可以直接将设计稿生成代码。这样，前端工程师就可以直接使用这些代码进行开发，从而减少了沟通成本和工作量。
• 使用像素级还原工具： 像素级还原工具可以将设计稿中的每一个像素都还原到前端页面上，从而确保设计稿和前端页面的一致性。

二、美术工程师的职责

美术工程师是负责将设计稿还原到前端页面的工程师。美术工程师需要具备以下技能：

• 美术功底：美术工程师需要具备一定的美术功底，才能理解设计稿中的设计意图。
• 前端开发技能：美术工程师需要具备一定的前端开发技能，才能将设计稿还原到前端页面上。
• 沟通能力：美术工程师需要具备良好的沟通能力，才能与美术和前端工程师进行有效沟通。

美术工程师在团队中起着承上启下的作用，是美术和前端工程师之间的桥梁。美术工程师的工作质量直接影响着产品的美观度和用户体验。

三、像素级还原

像素级还原是指将设计稿中的每一个像素都还原到前端页面上。像素级还原可以确保设计稿和前端页面的一致性，从而提升用户体验。

要想实现像素级还原，我们需要使用像素级还原工具。像素级还原工具可以自动将设计稿中的每一个像素都还原到前端页面上，从而节省了大量的人工劳动。

目前市面上有很多像素级还原工具，如Zeplin、Avocode等，我们可以根据自己的需求选择合适的工具。

四、案例分享

在UU跑腿，我们使用Sketch和Zeplin来提升美术到前端的产出效率。具体来说，我们的工作流程如下：

• 美术在Sketch中完成设计稿。
• 美术将设计稿导出为Zeplin格式。
• 前端工程师在Zeplin中查看设计稿，并使用Zeplin自动生成的代码进行开发。
• 前端工程师将开发好的页面提交给测试人员进行测试。
• 测试人员对页面进行测试，并反馈问题。
• 前端工程师根据测试人员的反馈修改页面。

这种工作流程大大提高了美术和前端工程师的工作效率，也确保了设计稿和前端页面的一致性。

总结

提升美术到前端的产出效率，需要从以下几个方面入手：

• 设计稿与前端的分离
• 美术工程师的职责
• 像素级还原

通过以上几个方面的优化，我们可以大大提高美术和前端工程师的工作效率，从而助力团队快速、高效地交付高质量产品。