戰勝柯潔的深度學習，有可能取代設計師嗎？

最近看到在「Baidu Create 2019」的百度 AI 交互設計論壇上，設計師分享了他們的最新成果：百度人工智能交互設計院與百度研究院商業智能實驗室合作，基于百度自主研發、開源開放的深度學習框架飛槳（PaddlePaddle），讓系統在每個模塊組合形成的不同界面中找到最優解，在模型框架內給出任何一種設計，機器都能快速預測用戶的偏好結果，設計師將以此為基礎給出符合用戶喜好與使用習慣的最佳解決方案。

設計存在的問題

現在的深度學習能用于界面設計嗎？能基于深度學習給出符合用戶喜好與使用習慣的最佳解決方案嗎？這是 AI 設計的重點方向之一，今天聊一下我的個人看法，首先總結一下我們現在設計存在的問題：

1. 受限于業務方

雖然我們一直講以用戶為中心的設計，但是大部分的設計需求都是由業務方或者老板決定的，如果需求不合理，它會嚴重影響你的設計方案。

2. 出了錯誤可能自己都不知道

有些設計師可能會因為缺乏時間、實踐或者經驗等原因把自己局限在舒適區，也有可能因為不知道更先進的設計方法和設計規范導致自己的設計方案出現錯誤。

3. 強調競品分析，但不知道競品為什么要這樣做

改版時我們會參考做得好的競品，很多時候我們只停留在表面的界面改版上，但我們并不知道他們背后的數據是怎樣的，也不知道他們的長遠規劃，究竟是什么原因才會設計成這樣。

4. 設計維護成本高

一般一個項目有多個設計師參與，設計師的加入或者離開會對整個項目產生影響；加上項目不斷的更新迭代和上述三個原因會導致正確的設計方案維護成本較高，所以在很多產品上都能看到不同的設計錯誤，包括布局違規、資源違規、文本違規，這些違規的背后很有可能是因為沒有人力或者忘記去維護。

5. 不懂得面向編程的思維方式

簡單點說，現在大部分的設計師就是業務方和程序員之間的橋梁，他們的任務就是將業務方的需求翻譯成界面設計然后交給程序員。有些時候設計師設計的界面可能和程序員理解的界面結構不一樣，導致程序員開發時會引入與 GUI 相關的錯誤。背后的原因是設計師缺乏編程領域的知識，不知道界面模型和代碼之間存在相當大的抽象差距，導致程序員看到的界面可能是「亂碼」。

如果將深度學習用于界面設計，會對上述問題產生影響嗎？首先，什么是深度學習？我們可以把深度學習理解為一個黑盒子，通過輸入大量的訓練數據后，它能找到數據之間的關聯和特征，然后自我構建一個模型，最后研究人員把測試數據放到模型里進行測試。如果測試結果準確率很高，那么我們可以認為這個深度學習模型是有效的，否則是無效的。簡單理解的話：深度學習就是找規律，但是需要基于大量數據才能找到正確的規律。這屬于數據驅動設計的范圍。

如何正確獲取大量的界面數據？當然不是在 Dribbble 和 Behance 下載各種圖片。2017 年美國一些研究人員發表了一篇論文，名叫《Rico：移動應用數據集，用于構建數據驅動的設計應用程序》。在論文中，作者從 Google Play 商店下載了 9,772 個免費應用程序，涵蓋 27 個類別。作者還在 UpWork 上招募了 13 名工作人員，花費了 2,450 個小時在不同應用上產生了 10,811 個用戶交互跟蹤。最后整個數據集包括了 72k 個 UI 界面的視覺、文本、結構和交互式設計屬性。Rico 還公開了 Google Play 商店中的商店元數據，包括應用類別、平均評分、評分數量和下載次數。

可以說，Rico 這篇論文的作者做了一件非常偉大的事情。

深度學習對界面設計的影響

我整理了一下現有技術和論文，深度學習對界面設計的影響主要有以下五個方面。

1. 設計搜索

Rico 最主要的功能是設計搜索，它能根據關鍵詞或者截圖找到類似的結構，還可以通過應用名字找到相關的應用截圖，不僅能為設計師提供靈感，還能大幅度提升設計師的工作效率。以下是作者在 ACM SIGCHI 2017 上的發表視頻：

2. 組件類型和布局推薦

Rico 公開了 Android 視圖層次結構中包含的所有元素的屬性（例如位置，維度）以及它們之間的結構關系。通過 Rico 提供的視圖層次結構，研究人員有機會訓練出 UI 布局的模型。和 Sublime 等編程工具一樣，當我們在畫交互圖的時候，設計工具可以實時給予我們布局上的建議，我們選擇某個布局推薦后，它會自動幫我們補全剩余的布局設計，大幅度提升交互設計師的工作效率。

3. 用戶交互建模

在《基于深度學習的自動Android應用程序測試方法》論文中提到名為 Humanoid 的技術， Humanoid 的核心是一個深度神經網絡模型，它能預測用戶更可能與哪些 UI 元素進行交互以及如何與其進行交互。同時，Humanoid 還可以根據 GUI 頁面的重要性對 GUI 頁面上的可能交互進行優先級排序。Humanoid 能幫助我們完成用戶交互的建模和測試，更好地實現設計目標。

4. 自動檢測GUI中的錯誤

在《自動報告移動應用程序的GUI設計違規》論文中，作者提出了一種名為 GVT（Gui Verification）的方法，它能通過計算機視覺技術和啟發式檢查來識別 GUI 實現中的常見錯誤，包括像素的差異大小、布局違規、文本違規和資源違規，然后構建一份報告，其中包含了屏幕截圖、代碼信息以及設計違規的精確描述。論文最后表示，這項技術已經被華為的一千多名設計師和工程師使用，滿意度較高。

5. UI代碼自動生成

2017 年 UIzard 開源了一款名叫 pix2code 的神經網絡工具，它能將界面截圖翻譯成界面代碼；2018 年 Airbnb 和微軟相繼發布了自己的最新研究成果，設計師可以通過草圖直接生成界面代碼，減少視覺稿設計、前端開發的工作量。基于草稿的界面生成主要原理是找到手繪控件和系統控件樣式之間的規律，然后尋找草稿中控件的布局關系，最后翻譯成界面布局和頁面代碼。微軟開源了相應的代碼 Sketch2Code（詳細介紹：http://www.czdes.cn/sketch2code-design-sketches-become-the-code），看起來很美好，但體驗過后發現 Sketch2Code 的效果并不理想，主要有以下幾點：

• 能識別部分控件，但準確率較低；
• 無法識別控件的高度；
• 布局識別效果并不好；
• 對中文識別效果并不友好。

△ 大家可以上?https://sketch2code.azurewebsites.net/?嘗試體驗

既然已經有草稿自動生成界面的人工智能，那么深度學習能不能脫離草稿自主生成界面設計？是有可能的，可以通過 GAN（Generative Adversarial Networks，生成式對抗網絡）自動生成，簡單理解的話，GAN 就是通過找出不同圖片的風格后進行拼接。目前已經有人在研究和利用 GAN 自動生成建筑室內設計，下面的視頻就是賓夕法尼亞大學建筑學的鄭豪博士給出的案例。但是個人認為，GAN 自動生成界面只具備可能性，其實沒有任何實質意義。因為界面設計和室內不一樣，室內設計生成的是一張布局圖，但界面設計里需要考慮業務目標，同時還要考慮不同界面之間的關系，每一個界面的布局和流程都會影響下一個界面的設計，因此它要比室內設計復雜得多。

△ 基于GAN的室內設計自動生成

機器能不能直接獲取設計經驗？這是具備可行性的，最近和 Mixlab 的朋友們探討了以上問題，以下是我們的討論內容：

最后和鄭豪博士聊了一下公式內容，按照鄭豪博士的說法「暴力數學擬合」，看完他給的公式后簡直無力反駁。但過后我陷入了沉思：既然這條公式這么簡單粗暴，為什么要花費如此大精力要計算機自己學習人類的經驗呢？為什么不直接把已有的經驗傳授給機器？目前大部分設計都和幾何設計學有關，那么我們是不是可以把幾何設計等相關經驗輸入進去就好了？基本上所有小屏設計的規律都是有規律所尋的，那就是各平臺的設計規范。如果我們把大量的基于 Android 和 iOS 規范的設計截圖輸入到神經網絡里進行深度學習，最后得到的結論可能就是每一個控件的樣式和設計規范類似，那么我們為什么不直接把現有的 Android 和 iOS 設計規范梳理成規則告訴計算機呢？以下是鄭豪博士的見解：

簡單點，如果為了讓機器自主學會設計規范，那么可以通過神經網絡的方式進行訓練，但是最終的效果跟教會機器設計規范是基本一致的，而且后者的成本低很多，以及成功率相對高一點。

最后一個問題，那么深度學習能不能繞開業務方完全憑借經驗自動生成整個界面和流程設計？這里可以給一個明確的回應，現在的人工智能還不具備這樣的思考和創造能力，理由如下：

界面和流程的優化并不只是 Bug 的修補，還需考慮增添、刪減和修改功能，便于整個產品的長遠發展，但人工智能還不具備這樣的能力。

深度學習最終看收集的數據是什么。如果我們收集到的數據是普遍性的，那么產出物一定是具有普遍性的結論，例如大部分用戶對于相同控件但不同樣式的認知是怎樣的？相同布局下用戶的操作行為是怎樣的？能不能通過不同產品的界面設計知道最佳設計是什么？不能，不同的商業目標會有不一樣的設計目標，因此會產生不一樣的設計，這不具備普適性。那么，能不能通過競品的界面設計知道相同業務的最佳設計是什么？個人認為做不到，因為其他應用的業務數據和流程分析都屬于商業機密，無法得到，因此無法建模。

如果想根據每個人的習慣愛好自動生成千人千面的界面設計，那么收集的數據一定是每個人的隱私數據，而且是這個用戶的全部隱私數據，這樣才能知道這位用戶的習慣愛好是什么，但目前無論是 iOS 還是 Android 系統都不允許應用過分收集用戶的隱私數據，所以這個想法的可能性幾乎為零。

上述全部內容更多是研究層面的結論和可行性探索，但全部都沒達到可商業化落地的階段，包括以上的技術和論文。最近和研究 AI 設計的小伙伴們聊了一下，都有一個明確的共識：研究 AI 設計需要投入大量的人力和物力，最終的結果真的可以商業化嗎？即使可以，能把之前投入的錢給拿回來嗎？目前看起來很難，可能只有 Adobe、Sketch 等設計工具供應商才會持續投入資源研究，例如 Adobe 在 2016 年開發了 Adobe Sensei 深度學習平臺，我們可以共同期待一下他們未來幾年為我們提供的 AI 設計工具。

文獻

• Automated Reporting of GUI Design Violations for Mobile Apps.
• Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps.
• Rico: A Mobile App Dataset for Building Data-Driven Design Applications.
• A Deep Learning based Approach to Automated Android App Testing.

歡迎關注作者的微信公眾號：「薛志榮」