如何看懂设计师给到的设计图？

在我的第一段实习经历中，由于业务需求特性我做得最多的工作就是，根据UI设计师的设计图还原编码。这项工作的难点不在于编码难度，而在于看懂设计图本身。元素位置、元素色相、资源文件，都需要花费很大地精力和设计师沟通。回想起来，那是我短暂职业生涯中最艰苦的一段记忆，我和设计小姐姐一度关系紧张。

直到有一天，我发现了Zeplin大法，用上了它我的工作瞬间变得的心应手许多！！

Zeplin简介

今天就来给大家介绍这款软件—Zeplin（官网地址：https://zeplin.io/），它是集标注、切图、云存储、Guideline和生成前端代码于一体的协作软件。作者在团队中已经使用了一段时间，亲测好用，软件的主要功能是标注，引入团队后设计师再也不用标注，前端工程师看标注的效率也提高，一举两得。

Zeplin出现之前，在早期PS时代都是用马克曼给界面标注，sketch出现之后，有类似measure这样的插件可以实现自动标注，但使用上还是很繁琐，得到的产出物也并不方便工程师使用。

我们标注的稿子大部分都是如上图所示，标注和效果图合在一起，标注会遮挡