用戶(hù)界面設(shè)計(jì)過(guò)程涉及大量創(chuàng)造性的迭代工作。這個(gè)過(guò)程通常從在白板或白紙上畫(huà)草圖開(kāi)始，設(shè)計(jì)師和工程師分享他們的想法，盡力表達(dá)出潛在的客戶(hù)場(chǎng)景或工作流程。當(dāng)他們?cè)谀硞€(gè)設(shè)計(jì)上達(dá)成一致之后，通過(guò)照片的形式將草圖拍下來(lái)，然后手動(dòng)將草圖翻譯成 HTML 代碼。翻譯過(guò)程需要耗費(fèi)很多時(shí)間和精力，通常會(huì)減慢設(shè)計(jì)過(guò)程。
如果可以將白板上手繪的設(shè)計(jì)立即反映在瀏覽器中，那會(huì)怎樣？如果我們能夠做到這一點(diǎn)，在設(shè)計(jì)頭腦風(fēng)暴結(jié)束時(shí)，我們就可以擁有一個(gè)已經(jīng)由設(shè)計(jì)師、開(kāi)發(fā)人員甚至客戶(hù)驗(yàn)證過(guò)的現(xiàn)成原型，這將為網(wǎng)站和應(yīng)用程序開(kāi)發(fā)省不少時(shí)間。現(xiàn)在，微軟已經(jīng)借助 AI 做到了這一點(diǎn)，同時(shí)他們還將這個(gè)項(xiàng)目在 Github 上開(kāi)源了。

Sketch2Code 是什么？

Sketch2Code 是一個(gè)基于 Web 的解決方案，使用 AI 將手繪的用戶(hù)界面草圖轉(zhuǎn)換為可用的 HTML 代碼。Sketch2Code 由微軟和 Kabel、Spike Techniques 合作開(kāi)發(fā)。讀者可以在 GitHub 上找到與 Sketch2Code 相關(guān)的代碼、解決方案開(kāi)發(fā)過(guò)程和其他詳細(xì)信息。

Sketch2Code 項(xiàng)目地址：https://github.com/Microsoft/ailab/tree/master/Sketch2Code

下圖演示了利用 Sketch2Code 將手繪草圖轉(zhuǎn)換成代碼的操作過(guò)程。在微軟官方網(wǎng)站上可以做更多嘗試：https://sketch2code.azurewebsites.net/

image

Sketch2Code 是如何工作的？

讓我們來(lái)看看使用 Sketch2Code 將手繪草圖轉(zhuǎn)換成 HTML 代碼的過(guò)程：

• 用戶(hù)將圖片上傳到網(wǎng)站上。

• 自定義視覺(jué)模型預(yù)測(cè)在圖像中出現(xiàn)的 HTML 元素，并將它們的位置標(biāo)出來(lái)。

• 手寫(xiě)文本識(shí)別服務(wù)讀取預(yù)測(cè)元素中的文本。

• 布局算法根據(jù)預(yù)測(cè)元素的邊框空間信息生成網(wǎng)格結(jié)構(gòu)。

• HTML 生成引擎使用上述信息來(lái)生成 HTML 代碼。

工作流程如下所示：

image

Sketch2Code 的架構(gòu)設(shè)計(jì)

Sketch2Code 使用了以下組件：

• 微軟自定義視覺(jué)模型（Custom Vision）：這個(gè)模型是基于不同的手繪稿的圖象訓(xùn)練得出的，并標(biāo)記了與常見(jiàn) HTML 元素（如文本框、按鈕、圖像等）相關(guān)的信息。

• 微軟計(jì)算機(jī)視覺(jué)服務(wù)：用于識(shí)別設(shè)計(jì)元素中的文本。

• Azure Blob Storage：保存與 HTML 生成過(guò)程的每個(gè)步驟相關(guān)的信息，包括原始圖像、預(yù)測(cè)結(jié)果、布局和分組信息等。

• Azure Function：它作為后端入口點(diǎn)，通過(guò)與其他服務(wù)發(fā)生交互來(lái)協(xié)調(diào)生成過(guò)程。

• Azure Website：用戶(hù)界面前端，用戶(hù)可以在這里上載設(shè)計(jì)圖，并查看生成的 HTML。

以上組件通過(guò)如下架構(gòu)組合在一起：

image
是不是感覺(jué)躍躍欲試？

你可以在這里找到 Sketch2Code 的開(kāi)源代碼：

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

也可以在這里對(duì) Sketch2Code 的實(shí)際效果進(jìn)行驗(yàn)證：https://sketch2code.azurewebsites.net/

---

查看原文
http://www.infoq.com/cn/news/2018/09/Ms-sketch2Code-opensourcing

總結(jié)

以上是生活随笔為你收集整理的前端要凉？微软开源Sketch2Code，草图秒变代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。