在以前，要做好设计还原其实非常繁琐，我自己也用过又换过不少工具，但多少总有些地方难以磨合。直到今年年初，开始接触并使用了一款叫做【摹客】的平台后，我才领略出了这一套神级的设计还原方法论！

话不多，就三点：设计标注、素材交付、还原跟进！

要知道我们的最终目标是让前端工程师将我们的设计进行还原，所以我们的设计一定要让前端工程师能“懂”。在这大半年的使用过程中，我发现摹客的协作流程非常符合这个原则。

而具体如何利用这款工具帮助自己实现设计还原，我总结了一套方法论。工具链接还有插件链接都在文末了，大家按需自取啊~

01

让前端泪流满面的标注

要解决设计还原度的问题，首先就得用极致的标注堵住前端所有的退路。对于这一点，摹客主要通过自动标注和手动标注两种方式来搭配完成。

省时省力的自动标注

我以前做设计标注的时候，通常是在完成设计后把画板复制好几个，再依次做好策略说明，布局标注和样式标注。

虽然足够细致了，但也确实很费时间，还很难实现面面俱到。而那些被忽略遗忘的小细节，往往就是导致设计还原翻车的推手！

而摹客的自动标注，则可以帮我们省略掉这个略显繁琐的步骤。因为它能够自动识别设计稿中的切图，这样前端工程师在进行页面布局的时候，只需把鼠标移动过去，就可以自动显示该模块的长宽、边距等内容。

同样，在进行多模块布局的时候，也只需要同时选中多个图层，就可以同时生成选中各图层间的间距，体验感绝对一流！

多种方式配合的手动标注

除自动标注外，摹客还支持文字标注、坐标标注、尺寸标注、区域标注、颜色标注等五种手动标注方式，可以帮助我们在设计标注中打出漂亮的“组合拳”。

标签：代码,摹客,UI,还原,设计,页面,前端,咆哮,标注
来源： https://blog.csdn.net/jongde1/article/details/121160055