白板随手一画,嗖嗖变成代码:AI是否能取代UI设计师?

  • 时间:
  • 浏览:0
  • 来源:大发pk10_pk10遗漏_大发pk10遗漏

文/郭一璞

来源:量子位(QbitAI)

“这次的新产品首页,亲戚亲戚我们歌词 歌词 都 有否则 想法?”你正在和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日始于英文英文,否则 项目有2一一俩个 多月的时间来完成作业。也但是说,否则那两家欧洲公司给力语句,大约明年夏天就都里能 用了。

好在别家也出过不少类式的产品,找个开源的试一试,我们歌词 歌词 都 家的UI都被你吓哭了。

微软Sketch2Code

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

大致的步骤是另一一俩个 的:

“·用户把买车人画的手绘草稿拍照上传。

视觉模型检测在图像中出显 的HTML部件,标记出亲戚我们歌词 歌词 都 的位置。

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

布局算法根据各部件的边框空间信息生成网格社会形态。

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

整个过程运用了微软自定义视觉模型、微软计算机视觉服务以及Azure的一系列服务,将亲戚我们歌词 歌词 都 串联在了同时。

Uizard家的pix2code

丹麦的Uizard Technologies公司另一一俩个 发过一篇论文,介绍了亲戚我们歌词 歌词 都 训练的pix2code模型,都里能 识别UI部件,并生成效果图。

否则 模型的训练大约都要三步:

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

其次,都要让否则 模型学着前端代码,生成语法和语义正确的代码样本;

最后,重复前一一俩个 多步骤进行训练。

演示效果大约是另一一俩个 :

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

Airbnb

Airbnb内控 就一一俩个 多多项目都里能 实现将手绘的网页部件直接转化为成品。

亲戚我们歌词 歌词 都 认为,像汉字否则 几千个错综复杂的手写符号都都里能 通过机器识别,没办法 一百多种网页UI常用部件拿来识别会是更容易的。

于是,亲戚我们歌词 歌词 都 用十十哪几个 UI部件训练了一一俩个 多原型,都里能 将白板上的草图自动生成原型代码和设计文件。

▲ 左边是生成的效果

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

猜你喜欢

美國職業籃球聯賽\湖人主場險勝帝王

【大公報訊】湖人昨天在NBA常規賽主場對陣帝王遇上苦戰,主隊球星勒邦占士錄得29分及11次助攻的「雙雙」佳績及在最後5.5秒連入兩記罰球,去掉 大前鋒安東尼戴維斯在最後關頭封

2020-01-19

G. Verschueren数据,G. Verschueren新闻,G. Verschueren视频,G. Verschueren身价

首页新闻视频直播数据APP懂球号直播君广告合作协议G.VerschuerenG.Verschueren俱乐部:Ternesse国籍:比利时身高:CM位置:后卫年龄:28岁体重:

2020-01-19

龙族幻想龙语装备怎么得?龙语装备获取方法介绍

龙族幻想游戏里龙语装备怎样会获得,获取你这些装备的途径土法子有有几个种呢,以下亲们 来一块儿看下龙语装备的获得土法子汇总。龙族幻想龙语获得土法子龙语是极品装备,他提供的属性有

2020-01-19

Xbox平台:《刺客信条:大革命》0.79刀促销

IT之家12月28日消息 近日,数字零售商CDkeys正在进行《刺客信条:大革命》这款游戏的促销,目前售价0.79美元(约合5.1元人民币),非常值得入手。但必须注意的是,该售

2020-01-19

K. Philipsen数据,K. Philipsen新闻,K. Philipsen视频,K. Philipsen身价

K.PhilipsenK.Philipsen俱乐部:哈德斯国籍:比利时身高:CM位置:后卫年龄:32岁体重:KG号码:号生日:1987-05-50惯用脚:赛季俱乐部上场首发进球

2020-01-19