白板随手一画,嗖嗖变成代码,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年将迎来重要拐点
评论
取消
暂无评论,快去成为第一个评论的人吧

更多资讯推荐

人工智能能否使机器具有流体智力?

麻省理工学院和奥地利研究人员为灵活的人工智能创造了“液体”机器学习。

千家网 ·  2021-06-01 10:38:55
美城市Baltimore可能颁布最严格的面部识别禁令

据介绍,拟议的法令将禁止私人或商业组织,甚至执法机构在城市使用面部识别技术。

千家网 ·  2021-06-01 09:34:07
当“追风筝的人”遇上了无人机……

随着我国用电需求的不断增长,电网建设的持续扩大,“追风筝的人”愈发力不从心。在逐渐增大的电力运维压力面前,电力工人由于作业效率、范围、成本、安全性和作业环境等方面的限制,愈发难以满足行业发展需求。在此背景下,无人机带来了福音。

智能制造网 ·  2021-05-31 20:48:45
大流行是否改变了人工智能的地位,从“想要”到“必须”?

在一个受新冠肺炎及其后果影响的世界里,采用人工智能正在成为一种主流现实。越来越多的行业正在以前所未有的速度试验和适应人工智能,无论是健康、教育、零售还是制造业。

Cassie ·  2021-05-31 18:17:50
日本将向月球发送变形机器人球:整颗球重250g

5月31日消息,据外媒报道称,日本将发送一颗长相特别的球型机器人到月球去。据悉,这个球型机器人由日本宇宙航空研究开发机构 (JAXA) 与索尼、同志社大学和玩具制造商 Tomy 合作开发,未来,其在抵达月球表面后,会“展开”成药丸型完整装置,捕捉月球表面的图像并且以研究月球土壤为主要目标。

环球网 ·  2021-05-31 15:15:09
值得关注 人工智能这5大趋势将给世界带来影响

人工智能不再是未来的技术。将我们日常工作自动化的机器变得越来越聪明,人工智能对我们生活的影响超出了我们的想象。在过去的十年中,我们见证了对人工智能相关技术的需求显著增长。

Yu ·  2021-05-31 15:14:35
AI时代,需要发挥知识图谱+知识管理的双轮价值

AI时代,需要发挥知识图谱+知识管理的双轮价值,才能真正实现从流程驱动、数据驱动走向知识驱动。

东方林语 ·  2021-05-31 09:15:14
市场规模将突破22亿?教育机器人发展迅速

除了科普类教育机器人,近年来用于家庭教育、辅助教学的各型教育机器人层出不穷,越来越频繁地出现了人们的日常生活当中。由于教育机器人的发展势如破竹,受到了业内及资本力量广泛关注。

智能制造网 ·  2021-05-28 17:31:50
Copyright©2005-2021 51CTO.COM 版权所有 未经许可 请勿转载