白板隨手一畫，嗖嗖變成代碼，AI要取代UI設(shè)計師了？

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

新聞人工智能

現(xiàn)在，有了這個工具，大家只要在白板上勾勾畫畫，就可以立馬看到成品長什么樣，敲定方案，一次成型。

　　“這次的新產(chǎn)品首頁，大家有什么想法？”你正在和 UI、前端、市場、運(yùn)營部門開會。

　　“先把活動 banner 放到最上面？”

　　“然后給不同欄目加 icon，放兩排就夠了。”

　　“下面可以放專欄的位置。”

　　“***下別忘了加用戶菜單。”

　　……

　　你一邊聽著同事們七嘴八舌的建議，一邊就把原型圖在白板上畫了出來：“我們按這個來討論一下吧，時間不等人，后面還要 UI 設(shè)計、前端開發(fā)……”

　　“差不多長這樣是吧？”前端開發(fā)小丁打斷了你的發(fā)言。

　　小丁的電腦上，正按照你說的樣子，運(yùn)行著一個頁面，每一處 banner、按鈕、跳轉(zhuǎn)都可以點(diǎn)擊，所有文字、圖片都放在了它應(yīng)該出現(xiàn)的地方，一旁的 HTML 代碼簡潔清晰，就像產(chǎn)品已經(jīng)做出來了一樣。

[[246240]]

　　這么快，怎么做到的？

　　難道，這群開發(fā)人員都是 AI 嗎？

　　嗯……可能真的是。

　　手繪框圖，同步自動生成

　　小丁用的，就是下面視頻中的方法，攝像頭實(shí)時拍攝白板上的草稿，就可以自動生成設(shè)計、開發(fā)好了的網(wǎng)頁。

　　視頻中，產(chǎn)品經(jīng)理在白板上勾勒原型草圖。

　　而屏幕上，顯示著識別的過程，同時正在生成代碼和 UI 界面預(yù)覽。

　　放大的細(xì)節(jié)清晰地展示出了識別的過程。

　　隨著畫圖的那位產(chǎn)品經(jīng)理停筆，識別也就完成了，此時的代碼清晰可鑒。

　　網(wǎng)頁也生成了，和正常的網(wǎng)頁一樣，可以隨意調(diào)整大小并適配。

　　整個過程中，電腦借助攝像頭拍攝到產(chǎn)品經(jīng)理正在白板上繪制的原型草稿，一邊就即時“畫”出了 UI，生成了代碼，展示著成品網(wǎng)頁。

　　產(chǎn)品經(jīng)理畫一個 banner，屏幕上就出現(xiàn)一個 banner；

　　產(chǎn)品經(jīng)理標(biāo)一個小標(biāo)題，屏幕上就出現(xiàn)一個小標(biāo)題；

　　產(chǎn)品經(jīng)理畫一個文字區(qū)域，屏幕上就出現(xiàn)一個文字區(qū)域。

　　每一步都是機(jī)器自動識別產(chǎn)品經(jīng)理畫出來的東西，直接變成相應(yīng)的網(wǎng)頁樣式，還附帶了 HTML 代碼。進(jìn)行任何增刪，都可以實(shí)時跟進(jìn)、更新。

[[246246]]

　　此前，確定一個網(wǎng)頁長什么樣子，要產(chǎn)品經(jīng)理、UI、前端、市場運(yùn)營們聚在一起，溝通、討論、扯皮，出N個方案，開N場會議，花費(fèi)數(shù)天乃至數(shù)周才能完成。

　　從分析需求開始，產(chǎn)品經(jīng)理出原型圖，大家開會修改×N；

　　UI 繪制設(shè)計圖，大家開會修改×N；

　　前端寫好代碼，大家檢查溝通×N……

　　不僅如此，有些人想象力捉急，看不到最終的成品，就發(fā)現(xiàn)不了問題，還要讓產(chǎn)品、UI、前端重新來一次，一再返工。

　　于是，工期越推越長，加班越來越晚，發(fā)際線越來越高……

[[246247]]

　　現(xiàn)在，有了這個工具，大家只要在白板上勾勾畫畫，就可以立馬看到成品長什么樣，敲定方案，一次成型，還可以直接拿去改進(jìn) UI 和代碼，給設(shè)計師和前端開發(fā)省了不少功夫，能把一兩個星期的工作，壓縮到一兩天，效率提升N倍。

　　來自歐洲的 teleportHQ

　　這個草稿生成網(wǎng)頁的視頻在 LinkedIn 和 Twitter 上瘋傳，視頻中的那個神奇的工具到底是什么呢？

　　這個工具出自一個名為 teleportHQ 的項(xiàng)目，由 Evo Forge 和 Corebuild 兩家歐洲公司合作創(chuàng)立，歐洲區(qū)域發(fā)展基金（European Fund for Regional Development）出資贊助，他們希望這個項(xiàng)目能讓非技術(shù)人員也能方便的創(chuàng)建可視化的應(yīng)用程序和 web 頁面。

　　該項(xiàng)目通過支持向量機(jī)（SVM）、神經(jīng)網(wǎng)絡(luò)和 XGBoost 三種方式，實(shí)現(xiàn)對 web 頁面的語義分割，目前已經(jīng)可以生成 React，React Native，Vue，HTML/CSS 和 AngularJS 代碼。

　　引發(fā) Twitter“震驚體”

　　雖然正式的產(chǎn)品還沒有面世，不過一眾 Twitter 網(wǎng)友都驚呆了，他們看到這個視頻的反應(yīng)是這樣：

[[246250]]

　　這樣：

[[246251]]

　　還有這樣：

[[246252]]

　　網(wǎng)友們紛紛表示，這簡直是未來本來了！

　　“有時候我會覺得看到了未來，嗯，比如看到這個的時候。”

　　“雖然感覺 UI 們會涼涼，但是并不妨礙這個很 cool 啊！”

　　但另一些設(shè)計師覺得，這能給自己省下大把大把的時間。

　　還有人暢想了這種技術(shù)的未來應(yīng)用。

　　“等到了 2025 年，所有的演講估計都會是演講者手繪，然后 AI 來自動生成的啦。”

　　不過也有人覺得，實(shí)時同步雖然很牛逼，但是，仿佛無卵用。

　　“毫無疑問，視頻很棒，但是視頻里最厲害實(shí)時轉(zhuǎn)換的恰恰是最沒用的，我們?yōu)槭裁葱枰恳徊蕉紝?shí)時轉(zhuǎn)化成代碼？”

　　還有其他家可供選擇

　　看了這個炫酷的效果，你是不是也想在自家的腦暴大會上用上它？

　　不過，目前這個 teleportHQ 還沒開發(fā)完。從 2017 年 8 月 16 日開始，這個項(xiàng)目有 24 個月的時間來完成作業(yè)。也就是說，如果那兩家歐洲公司給力的話，大概明年夏天就可以用了。

　　好在別家也出過不少類似的產(chǎn)品，找個開源的試一試，隔壁家的 UI 都被你嚇哭了。

　　微軟 Sketch2Code

　　今年夏天，微軟就開源了一個名為 Sketch2Code 的項(xiàng)目，可以把用戶上傳的界面手繪圖轉(zhuǎn)化為 HTML 頁面。

　　大致的步驟是這樣的：

　　“· 用戶把自己畫的手繪草稿拍照上傳。

　　· 視覺模型檢測在圖像中出現(xiàn)的 HTML 部件，標(biāo)記出他們的位置。

　　· 識別所有部件中的手寫文本。

　　· 布局算法根據(jù)各部件的邊框空間信息生成網(wǎng)格結(jié)構(gòu)。

　　· HTML 生成引擎使用上述信息來生成 HTML 代碼。”

　　整個過程運(yùn)用了微軟自定義視覺模型、微軟計算機(jī)視覺服務(wù)以及 Azure 的一系列服務(wù)，將他們串聯(lián)在了一起。

　　Uizard 家的 pix2code

　　丹麥的 Uizard Technologies 公司曾經(jīng)發(fā)過一篇論文，介紹了他們訓(xùn)練的 pix2code 模型，能夠識別 UI 部件，并生成效果圖。

　　這個模型的訓(xùn)練大概需要三步：

　　首先，需要通過計算機(jī)視覺技術(shù)來識別場景（屏幕截圖）和 UI 組件（按鈕，文本區(qū)域等）；

　　其次，需要讓這個模型學(xué)會前端代碼，生成語法和語義正確的代碼樣本；

　　***，重復(fù)前兩個步驟進(jìn)行訓(xùn)練。

　　演示效果大概是這樣：

　　pix2code 已經(jīng)產(chǎn)品化，產(chǎn)品名字和他們公司名字一樣，叫做 Uizard。目前看來效果也相當(dāng)不錯了，根據(jù)視頻的演示，不僅可以通過手機(jī)掃描直接生成 UI 效果圖，還可以直接導(dǎo)入 UI 設(shè)計軟件中進(jìn)行修改。

　　Airbnb

　　Airbnb 內(nèi)部就有一個項(xiàng)目可以實(shí)現(xiàn)將手繪的網(wǎng)頁部件直接轉(zhuǎn)化為成品。

　　他們認(rèn)為，像漢字這種幾千個復(fù)雜的手寫符號都可以通過機(jī)器識別，那么一百多種網(wǎng)頁 UI 常用部件拿來識別會是更容易的。

　　于是，他們用十幾個 UI 部件訓(xùn)練了一個原型，可以將白板上的草圖自動生成原型代碼和設(shè)計文件。

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