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

更多资讯推荐

AI艺术日渐繁荣,未来何去何从?

利用人工智能创作而成的画作近年来越来越受瞩目,有的作品甚至能在知名拍卖行拍得高价。但这类作品仍有不少问题需要解答,比如它的作者是开发出算法的程序员还是计算机呢?AI艺术的市场未来将走向何方呢?

网易智能 ·  23h前
人工智能进入大学校园带来了哪些变化

在一个人的教育生涯中,大学如何成为最好的学习体验?高等教育的目的就是发展技能,探索新理论,并将其应用于现实生活中。在整个学习期间,鼓励学生完成学习任务,熟练掌握技能,同时培养一个健康的、积极的、和谐的生活态度。

风车云马 ·  1天前
图灵奖得主Yoshua Bengio:深度学习当务之急,是理解因果关系

深度学习擅长在大量数据中发现模式,但无法解释它们之间的联系,而图灵奖获得者Yoshua Bengio想要改变这一点。

佚名 ·  3天前
人工智能遇冷,自动驾驶受阻?

2016到2019,人工智能经历了梦幻般的三年,但人工智能的历史规律告诉我们:高潮过后可能会引来新的一波沉寂,人工智能助推下的自动驾驶也会受到波及。

佚名 ·  3天前
对于人工智能的恐惧及其5个解决方法

实施人工智能技术的IT领导人可能会感到一些恐惧,这有着充分的理由。人工智能在拥有数十年发展和应用历史的同时却有着奇怪的定位,但对于许多人来说,人工智能仍然是一种未来主义的感觉。

Kevin Casey ·  2019-10-12 11:23:04
AI核心难点之一:情感分析的常见类型与挑战

情感分析或情感人工智能,在商业应用中通常被称为意见挖掘,是自然语言处理(NLP)的一个非常流行的应用。文本处理是该技术最大的分支,但并不是唯一的分支。情绪AI有三种类型及其组合。

Veronika Vartanova ·  2019-10-12 10:14:41
机器学习帮你预测电池寿命:精确了解电池还能充几次 精选

电池寿命的确定,是移动硬件发展的重要一环,但是由于电池电化学反应的不确定性以及不同的使用环境和习惯,电池寿命变成了一门玄学。不过柏林的三位小伙伴,利用Tensorflow,在原有的预测体系基础上。更近一步,完成了电池的全寿命预测。

靓科技解读 ·  2019-10-11 13:00:40
专家认为对“人工智能+教育”应持审慎态度

随着人工智能不断发展,人脸识别技术被越来越多地应用于校园中。据了解,一所知名大学2019级新生“刷脸”就能瞬间完成报到程序,系统是这所学校的学生研发的,学生对着摄像头,人脸识别系统就开始进行比对,眨眼间就能完成扫描,整个报到注册手续几乎不到一秒钟。

新华网客户端 ·  2019-10-11 09:37:43
Copyright©2005-2019 51CTO.COM 版权所有 未经许可 请勿转载