Airbnb AI將草圖原型轉(zhuǎn)代碼了

本文為翻譯文,原文地址:《Sketching Interfaces - Generating code from low fidelity wireframes.》https://airbnb.design/sketching-interfaces/

------ 以下為翻譯內(nèi)容 --------

用來測試一個idea的時間應該短到零。這是我在思考 Airbnb 設計工具組遠景目標時想到的第一句話。我們相信,在接下來的幾年里,新興的技術(shù)將會讓設計團隊用直觀的方法設計新產(chǎn)品,同時去除產(chǎn)品開發(fā)過程中的種種障礙。

現(xiàn)在設計過程中的每一步以及每個產(chǎn)出的設計品都是個死胡同。每當一個人把自己那一部分工作完成后,就交給下一個人去完成其他部分,而他自己的工作就停止了。項目進度從股東會議到設計到開發(fā);需求變成探索,探索變成原型,然后交給開發(fā)做成最終產(chǎn)品。然而這些繁重的步驟只是一個相同的目標從一種媒介到另一種媒介的轉(zhuǎn)化,最終都是朝著一個共同目標邁進的。每一步都需要各自領(lǐng)域的專家來完成這種轉(zhuǎn)化。

所以,我們要怎么樣讓這個流程變得更流暢,來讓我們的目標實現(xiàn)呢?我們團隊開始研究怎么把測試idea的時間縮短為零。在此,我將分享我們在這過程中學到的和實現(xiàn)的東西。

手繪出產(chǎn)品(Sketch to product)

我們自然而然地先以手繪作為研究方向。作為界面設計師,手繪是一個表達概念的直觀方式。我們想試試怎樣跳過產(chǎn)品開發(fā)中間幾步,直接將手繪稿變成最終產(chǎn)品。

團隊會議上的demo

Airbnb的設計系統(tǒng)有很完整的文檔,系統(tǒng)中每一個組件都有命名。我們認為,如果機器學習算法可以高度精確地識別出成千上萬的手寫符號,比如手寫中文漢字,那么我們也應該可以讓機器來識別我們設計系統(tǒng)中的150個組件。

我們用十幾個手繪組件作為訓練數(shù)據(jù),用開源的機器學習算法以及一些銜接代碼來將我們設計系統(tǒng)中的組件渲染到瀏覽器上,創(chuàng)建了初始原型。我們對結(jié)果非常驚喜:


demo視頻

這個系統(tǒng)已經(jīng)顯示了巨大的潛力。我們用同樣的技術(shù)去試驗將白板手繪實時轉(zhuǎn)化為代碼原型,將高保真原型轉(zhuǎn)化為組件標注給我們的工程師,以及將產(chǎn)品代碼轉(zhuǎn)化為設計文件給我們的設計師,用于迭代。

進行中的探索

隨著設計系統(tǒng)化的逐漸流行,以及界面越來越標準化,我們相信人工智能輔助下的設計和開發(fā)會在下一個時代更好地發(fā)展。我們非常高興能與這么多有志于探索這個領(lǐng)域并想看看這個領(lǐng)域怎么發(fā)展的設計師和開發(fā)者分享我們的工作。請持續(xù)關(guān)注我們未來的更新,我們在繼續(xù)試驗和開發(fā)。設計工具的主管Lucas Smith將將往后幾期文章中深入講解我們的研究和文獻,告訴大家我們的方法。

想知道我們更多的想法以及愿景,請看下面的視頻。該視頻中,我講了一些關(guān)于組件化和設計系統(tǒng)的思考。


騰訊視頻

感謝設計技術(shù)團隊的其他成員幫忙推進這個項目:Jon Gold, Gavin Owens, David Chen, Lucas Smith。

-------- 翻譯結(jié)束 -----------

未來已來。我之前一篇文章還設想過人工智能對設計的改變,如今就已經(jīng)有了demo。世界變化之快,超出我們的想象。

我是楊寶玲,一個不設限的設計師。歡迎關(guān)注我的公眾號BaolingUX,期待與你的思想碰撞。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容