DEMO 演示

一直以来,如何从‘视觉稿’精确的还原出对应的UI侧代码一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的沟通和消耗。

闲鱼团队在去年做了一个很特别的黑科技基于图片直接翻译成对应的 UI 侧代码,具体完成的部分,我们有一个演示的视频。

选型背景

很多人会比较好奇,为什么我会坚持使用图片做为输入源,一方面基于 sketch 或者 photoshop 等插件相对容易拿到确定性的信息,图片在某些方面容易丢失一些特征;另外基于图片的分析其实挑战更大。我们做这个选择有以下原因,首先图片作为最终的产出物,更直观和确定性,另外这个链路里对上游不会有约束性。最后也是最重要的一点基于图片的应用场景会更普适,类似场景例如自动化测试能力的支持,基于竟品直接截图

收藏 打印