[自译] Sketching Interfaces-从低保真线框图生成代码

Airbnb的设计工具团队，真是散发着迷人的魅力啊，从bodymovin到react for sketch，再到现在的sketching interfaces。总是在尝试着一些解放设计的工作，进取探索的愿景，让人向往。在这篇sketching interfaces中，作者阐述了自己对产品开发过程中的一些思考，试图去简化步骤，让草图直接转化为可交互的demo，视频中的效果也是很不错，不过在构建复杂页面的时候，可能就没有这么理想了，不过团队还在学习完善，期待看到一份完美的上线工具。

原文链接：Sketching Interfaces Generating code from low fidelity wireframes.

原文作者：Benjamin Wilkins

用在测试想法的时间应该是零。这是我在考虑Airbnb设计工具团队愿景的时候，写下的第一句话。我们相信，在未来的几年里，新兴技术会允许团队用一种更加直观和有表现力的方式来设计新产品，同时消除产品开发过程中的障碍。

回到现在，设计过程中的每一步，每一个产出都是一个封闭的结束，一个团队完成了项目的一部分，然后转交给下一个团队的时候，工作就结束了。项目从立项开会，然后从设计到研发；需求变成了探索，探索变成了线框和原型，这些都交付给开发者完成最终产品。但是过程上的繁琐，让传达出的意思有了各种不同的媒介，为了朝同一个目标前进，每个领域都有熟练的专家充当翻译人员。

那么我们如何简化这个过程，让我们的愿景成真呢？我们的团队已经开始探索将测试时间降到零的方法。我们在学习构建的同时，也会在这里分享我们的工作。

从草图到产品

草图在初期很常用。作为界面的设计者，草图是一种直观的表达概念方法。我们想看看如何在产品的开发过程中，跳过一些步骤，将草图立即转换为成品。

团队会议上的demo

Airbnb设计系统的文档管理做得很不错，系统里的每个组件都被命名。我们开发了一个工作原理，如果机器学习可以把一堆复杂的手写符号，例如汉字-高准确度的匹配，那么我们应该可以教会机器识别我们系统中分类的150个组件。

我们建立了最初的原型，使用十几个手绘组件作为训练数据，开源了机器学习算法，以及少量的中间代码将设计系统中的组件在浏览器中渲染。结果让我们惊喜：

https://airbnb.design/wp-content/uploads/2017/10/WireframeClassifiersmall.mp4?_=1

这个系统已经显示出了巨大的潜力。我们已经尝试使用相同的技术，从白板上转化到生动的原型，将高保真的demo转化为规范组件，并将代码转换为设计师的设计文件。

正在进行的探索

随着设计系统的运动获得了更多的动力，界面变得更加标准化，我们相信智能辅助设计和开发会被应用到下一代工具中。我们乐于和更广泛的设计师和开发者分享我们的工作，他们正在探索这一新兴领域，并了解这一趋势。

感谢设计技术团队的其他成员帮助推动这个项目：Jon Gold;Gavin Owens;David Chen;Lucas Smith.