白板随手一画,嗖嗖变成代码,AI要取代UI设计师了?

作者: 郭一璞 2018-10-16 09:54:59

 

“这次的新产品首页,大家有什么想法?”你正在和 UI、前端、市场、运营部门开会。

“先把活动 banner 放到最上面?”

“然后给不同栏目加 icon,放两排就够了。”

“下面可以放专栏的位置。”

“***下别忘了加用户菜单。”

……

你一边听着同事们七嘴八舌的建议,一边就把原型图在白板上画了出来:“我们按这个来讨论一下吧,时间不等人,后面还要 UI 设计、前端开发……”

“差不多长这样是吧?”前端开发小丁打断了你的发言。

小丁的电脑上,正按照你说的样子,运行着一个页面,每一处 banner、按钮、跳转都可以点击,所有文字、图片都放在了它应该出现的地方,一旁的 HTML 代码简洁清晰,就像产品已经做出来了一样。

这么快,怎么做到的?

难道,这群开发人员都是 AI 吗?

嗯……可能真的是。

手绘框图,同步自动生成

小丁用的,就是下面视频中的方法,摄像头实时拍摄白板上的草稿,就可以自动生成设计、开发好了的网页。

视频中,产品经理在白板上勾勒原型草图。

而屏幕上,显示着识别的过程,同时正在生成代码和 UI 界面预览。

放大的细节清晰地展示出了识别的过程。

随着画图的那位产品经理停笔,识别也就完成了,此时的代码清晰可鉴。

网页也生成了,和正常的网页一样,可以随意调整大小并适配。

整个过程中,电脑借助摄像头拍摄到产品经理正在白板上绘制的原型草稿,一边就即时“画”出了 UI,生成了代码,展示着成品网页。

产品经理画一个 banner,屏幕上就出现一个 banner;

产品经理标一个小标题,屏幕上就出现一个小标题;

产品经理画一个文字区域,屏幕上就出现一个文字区域。

每一步都是机器自动识别产品经理画出来的东西,直接变成相应的网页样式,还附带了 HTML 代码。进行任何增删,都可以实时跟进、更新。

此前,确定一个网页长什么样子,要产品经理、UI、前端、市场运营们聚在一起,沟通、讨论、扯皮,出N个方案,开N场会议,花费数天乃至数周才能完成。

从分析需求开始,产品经理出原型图,大家开会修改×N;

UI 绘制设计图,大家开会修改×N;

前端写好代码,大家检查沟通×N……

不仅如此,有些人想象力捉急,看不到最终的成品,就发现不了问题,还要让产品、UI、前端重新来一次,一再返工。

于是,工期越推越长,加班越来越晚,发际线越来越高……

现在,有了这个工具,大家只要在白板上勾勾画画,就可以立马看到成品长什么样,敲定方案,一次成型,还可以直接拿去改进 UI 和代码,给设计师和前端开发省了不少功夫,能把一两个星期的工作,压缩到一两天,效率提升N倍。

来自欧洲的 teleportHQ

这个草稿生成网页的视频在 LinkedIn 和 Twitter 上疯传,视频中的那个神奇的工具到底是什么呢?

这个工具出自一个名为 teleportHQ 的项目,由 Evo Forge 和 Corebuild 两家欧洲公司合作创立,欧洲区域发展基金(European Fund for Regional Development)出资赞助,他们希望这个项目能让非技术人员也能方便的创建可视化的应用程序和 web 页面。

该项目通过支持向量机(SVM)、神经网络和 XGBoost 三种方式,实现对 web 页面的语义分割,目前已经可以生成 React,React Native,Vue,HTML/CSS 和 AngularJS 代码。

引发 Twitter“震惊体”

虽然正式的产品还没有面世,不过一众 Twitter 网友都惊呆了,他们看到这个视频的反应是这样:

这样:

还有这样:

网友们纷纷表示,这简直是未来本来了!

“有时候我会觉得看到了未来,嗯,比如看到这个的时候。”

“虽然感觉 UI 们会凉凉,但是并不妨碍这个很 cool 啊!”

但另一些设计师觉得,这能给自己省下大把大把的时间。

还有人畅想了这种技术的未来应用。

“等到了 2025 年,所有的演讲估计都会是演讲者手绘,然后 AI 来自动生成的啦。”

不过也有人觉得,实时同步虽然很牛逼,但是,仿佛无卵用。

“毫无疑问,视频很棒,但是视频里最厉害实时转换的恰恰是最没用的,我们为什么需要每一步都实时转化成代码?”

还有其他家可供选择

看了这个炫酷的效果,你是不是也想在自家的脑暴大会上用上它?

不过,目前这个 teleportHQ 还没开发完。从 2017 年 8 月 16 日开始,这个项目有 24 个月的时间来完成作业。也就是说,如果那两家欧洲公司给力的话,大概明年夏天就可以用了。

好在别家也出过不少类似的产品,找个开源的试一试,隔壁家的 UI 都被你吓哭了。

微软 Sketch2Code

今年夏天,微软就开源了一个名为 Sketch2Code 的项目,可以把用户上传的界面手绘图转化为 HTML 页面。

大致的步骤是这样的:

“· 用户把自己画的手绘草稿拍照上传。

· 视觉模型检测在图像中出现的 HTML 部件,标记出他们的位置。

· 识别所有部件中的手写文本。

· 布局算法根据各部件的边框空间信息生成网格结构。

· HTML 生成引擎使用上述信息来生成 HTML 代码。”

整个过程运用了微软自定义视觉模型、微软计算机视觉服务以及 Azure 的一系列服务,将他们串联在了一起。

Uizard 家的 pix2code

丹麦的 Uizard Technologies 公司曾经发过一篇论文,介绍了他们训练的 pix2code 模型,能够识别 UI 部件,并生成效果图。

这个模型的训练大概需要三步:

首先,需要通过计算机视觉技术来识别场景(屏幕截图)和 UI 组件(按钮,文本区域等);

其次,需要让这个模型学会前端代码,生成语法和语义正确的代码样本;

***,重复前两个步骤进行训练。

演示效果大概是这样:

pix2code 已经产品化,产品名字和他们公司名字一样,叫做 Uizard。目前看来效果也相当不错了,根据视频的演示,不仅可以通过手机扫描直接生成 UI 效果图,还可以直接导入 UI 设计软件中进行修改。

Airbnb

Airbnb 内部就有一个项目可以实现将手绘的网页部件直接转化为成品。

他们认为,像汉字这种几千个复杂的手写符号都可以通过机器识别,那么一百多种网页 UI 常用部件拿来识别会是更容易的。

于是,他们用十几个 UI 部件训练了一个原型,可以将白板上的草图自动生成原型代码和设计文件。

△ 左边是生成的效果
△ 左边是生成的效果

这项技术已经用在了 Airbnb 产品的开发设计中。

传送门

teleportHQ

https://teleporthq.io/

(包含两篇技术博客)

微软的 Sketch2Code

https://github.com/Microsoft/ailab/tree/master/Sketch2Code

pix2code: 从 GUI 截图生成代码

作者:Tony Beltramelli,UIzard Technologies,丹麦

论文:https://arxiv.org/abs/1705.07962

github:https://github.com/tonybeltramelli/pix2code

网站:https://uizard.io/research/#pix2code

另一作者改进的开源项目:https://github.com/ashnkumar/sketch-code

Airbnb 的 Sketching Interfaces

https://airbnb.design/sketching-interfaces/

代码 开发 AI
上一篇:大数据和人工智能的未来可以归结为一件事 下一篇:电信业成为最大AI市场 2021年将迎来重要拐点
评论
取消
暂无评论,快去成为第一个评论的人吧

更多资讯推荐

支持108种语言的谷歌翻译如何用AI让翻译质量越来越好?

谷歌表示,在提高语言翻译的质量方面,已经取得了进展。在即将发表的博客文章中,该公司详细介绍了新的创新技术。

包永刚 ·  1天前
您可以信赖的5个AI解决方案提供商

经过全面的研究和分析,我们选择了您可以信赖的五家人工智能解决方案提供商,以获取最可靠的AI服务。

闻数起舞 ·  2天前
2020年人工智能(AI)十大趋势应用

人工智能或机器智能通过学习算法模拟类似人类的智能。如今,人工智能已入侵几乎每个行业。人工智能行业最近在几乎每个领域都蓬勃发展。让我们看看机器智能或AI在各个领域中的应用。

小熊大学AI ·  3天前
微软用 AI 取代人工编辑,解雇多名新闻工作者

微软将解雇 Microsoft News 和 MSN 团队中的数十名新闻工作者和编辑人员。大部分受影响的员工属于 Microsoft SANE(搜索、广告、新闻、Edge 浏览器)部门。

佚名 ·  4天前
人工智能的三大领域及其工业应用

在本文中,我将解释人工智能技术的三个主要方向,即语音识别,计算机视觉和自然语言处理。

工业应用 ·  4天前
人工智能项目:需要注意的七件事

维度R的一份报告显示,十分之八的AI失败了,而96%的AI则在标注,标明和建立模型置信度方面遇到了问题。以下是人工智能项目失败的7个常见原因。

闻数起舞 ·  4天前
2020年优秀AI软件开发工具

人工智能对软件工程和科技公司的影响不可否认,而且还在不断增加。 有许多组织正在利用这项革命性的技术来创建开箱即用的功能强大的Web和移动应用程序。 无论大小,企业都可以利用AI来提高投资回报率,提高效率并很大程度地降低运营风险。

闻数起舞 ·  2020-05-31 14:02:50
达摩院AI进入中国科技馆,首张AI识别新冠CT成科技抗疫历史见证

5月29日消息,全国科技工作者日来临之际,一个特别的藏品入选中国科技馆“2020数字馆藏”——阿里巴巴达摩院AI识别标注的第一张新冠肺炎CT影像。达摩院AI作为科技抗疫的历史见证,被写入中国科技发展史。

佚名 ·  2020-05-29 16:56:59
Copyright©2005-2020 51CTO.COM 版权所有 未经许可 请勿转载