♝点击上方“交互设计学堂”关注我们,送电子书

最近看到在“Baidu Create 2019”的百度AI交互设计论坛上，设计师分享了他们的最新成果：百度人工智能交互设计院与百度研究院商业智能实验室合作，基于百度自主研发、开源开放的深度学习框架飞桨（PaddlePaddle），让系统在每个模块组合形成的不同界面中找到最优解，在模型框架内给出任何一种设计，机器都能快速预测用户的偏好结果，设计师将以此为基础给出符合用户喜好与使用习惯的最佳解决方案。

现在的深度学习能用于界面设计吗？能基于深度学习给出符合用户喜好与使用习惯的最佳解决方案吗？这是AI设计的重点方向之一，今天聊一下我的个人看法，首先总结一下我们现在设计存在的问题：

1.受限于业务方

虽然我们一直讲以用户为中心的设计，但是大部分的设计需求都是由业务方或者老板决定的，如果需求不合理，它会严重影响你的设计方案。

2.出了错误可能自己都不知道

有些设计师可能会因为缺乏时间、实践或者经验等原因把自己局限在舒适区，也有可能因为不知道更先进的设计方法和设计规范导致自己的设计方案出现错误。

3.强调竞品分析，但不知道竞品为什么要这样做

改版时我们会参考做得好的竞品，很多时候我们只停留在表面的界面改版上，但我们并不知道他们背后的数据是怎样的，也不知道他们的长远规划，究竟是什么原因才会设计成这样。

4.设计维护成本高

一般一个项目有多个设计师参与，设计师的加入或者离开会对整个项目产生影响；加上项目不断的更新迭代和上述三个原因会导致正确的设计方案维护成本较高，所以在很多产品上都能看到不同的设计错误，包括布局违规、资源违规、文本违规，这些违规的背后很有可能是因为没有人力或者忘记去维护。

5.不懂得面向编程的思维方式

简单点说，现在大部分的设计师就是业务方和程序员之间的桥梁，他们的任务就是将业务方的需求翻译成界面设计然后交给程序员。有些时候设计师设计的界面可能和程序员理解的界面结构不一样，导致程序员开发时会引入与GUI相关的错误。背后的原因是设计师缺乏编程领域的知识，不知道界面模型和代码之间存在相当大的抽象差距，导致程序员看到的界面可能是“乱码”。

如果将深度学习用于界面设计，会对上述问题产生影响吗？首先，什么是深度学习？我们可以把深度学习理解为一个黑盒子，通过输入大量的训练数据后，它能找到数据之间的关联和特征，然后自我构建一个模型，最后研究人员把测试数据放到模型里进行测试。如果测试结果准确率很高，那么我们可以认为这个深度学习模型是有效的，否则是无效的。简单粗暴理解的话： 深度学习就是找规律，但是需要基于大量数据才能找到正确的规律。这属于数据驱动设计的范围。

如何正确获取大量的界面数据？当然不是在Dribble和Behance下载各种图片。2017年美国一些研究人员发表了一篇论文，名叫《Rico：移动应用数据集，用于构建数据驱动的设计应用程序》。在论文中，作者从Google Play商店下载了9,772个免费应用程序，涵盖27个类别。作者还在UpWork上招募了13名工作人员，花费了2,450个小时在不同应用上产生了10,811个用户交互跟踪。最后整个数据集包括了72k个UI界面的视觉，文本，结构和交互式设计属性。Rico还公开了Google Play商店中的商店元数据，包括应用类别、平均评分、评分数量和下载次数。

可以说，Rico这篇论文的作者做了一件非常伟大的事情。除了这篇论文，外国逐渐出现了少量的深度学习和界面设计的相关技术和论文，我已经把相关论文翻译成中文版，如果对相关论文和Rico的数据集感兴趣，可以在公众号“薛志荣”后台回复“论文”获取下载链接。BTW，Rico数据集超过了200GB，需要科学上网下载。

我整理了一下现有技术和论文，深度学习对界面设计的影响主要有以下五个方面：

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，看起来很美好，但体验过后发现Sketch2Code的效果并不理想，主要有以下几点：

1.能识别部分控件，但准确率较低。

2.无法识别控件的高度。

3.布局识别效果并不好。

4.对中文识别效果并不友好。

大家可以上https://sketch2code.azurewebsites.net/尝试体验

既然已经有草稿自动生成界面的人工智能，那么深度学习能不能脱离草稿自主生成界面设计？是有可能的，可以通过GAN（Generative Adversarial Networks，生成式对抗网络）自动生成，简单理解的话，GAN就是通过找出不同图片的风格后进行拼接。目前已经有人在研究和利用GAN自动生成建筑室内设计，下面的视频就是宾夕法尼亚大学建筑学的郑豪博士给出的案例。但是个人认为，GAN自动生成界面只具备可能性，其实没有任何实质意义。因为界面设计和室内不一样，室内设计生成的是一张布局图，但界面设计里需要考虑业务目标，同时还要考虑不同界面之间的关系，每一个界面的布局和流程都会影响下一个界面的设计，因此它要比室内设计复杂得多。

基于GAN的室内设计自动生成

机器能不能直接获取设计经验？这是具备可行性的，最近和Mixlab的朋友们探讨了以上问题，以下是我们的讨论内容：

最后和郑豪博士聊了一下公式内容，按照郑豪博士的说法“暴力数学拟合”，看完他给的公式后简直无力反驳。但过后我陷入了沉思：既然这条公式这么简单粗暴，为什么要花费如此大精力要计算机自己学习人类的经验呢？为什么不直接把已有的经验传授给机器？ 目前大部分设计都和几何设计学有关，那么我们是不是可以把几何设计等相关经验输入进去就好了？基本上所有小屏设计的规律都是有规律所寻的，那就是各平台的设计规范。如果我们把大量的基于Android和iOS规范的设计截图输入到神经网络里进行深度学习，最后得到的结论可能就是每一个控件的样式和设计规范类似，那么我们为什么不直接把现有的Android和iOS设计规范梳理成规则告诉计算机呢？以下是郑豪博士的见解：

简单点，如果为了让机器自主学会设计规范，那么可以通过神经网络的方式进行训练，但是最终的效果跟教会机器设计规范是基本一致的，而且后者的成本低很多，以及成功率相对高一点。

最后一个问题，那么深度学习能不能绕开业务方完全凭借经验自动生成整个界面和流程设计？这里可以给一个明确的回应，现在的人工智能还不具备这样的思考和创造能力，理由如下：

1.界面和流程的优化并不只是Bug的修补，还需考虑增添、删减和修改功能，便于整个产品的长远发展，但人工智能还不具备这样的能力。

2.深度学习最终看收集的数据是什么。如果我们收集到的数据是普遍性的，那么产出物一定是具有普遍性的结论，例如大部分用户对于相同控件但不同样式的认知是怎样的、相同布局下用户的操作行为是怎样的。能不能通过不同产品的界面设计知道最佳设计是什么？不能，不同的商业目标会有不一样的设计目标，因此会产生不一样的设计，这不具备普适性。那么，能不能通过竞品的界面设计知道相同业务的最佳设计是什么？个人认为做不到，因为其他应用的业务数据和流程分析都属于商业机密，无法得到，因此无法建模。

3.如果想根据每个人的习惯爱好自动生成千人千面的界面设计，那么收集的数据一定是每个人的隐私数据，而且是这个用户的全部隐私数据，这样才能知道这位用户的习惯爱好是什么，但目前无论iOS还是Android系统都不允许应用过分收集用户的隐私数据，所以这个想法的可能性几乎为零。

上述全部内容更多是研究层面的结论和可行性探索，但全部都没达到可商业化落地的阶段，包括以上的技术和论文。最近和研究AI设计的小伙伴们聊了一下，都有一个明确的共识：研究AI设计需要投入大量的人力和物力，最终的结果真的可以商业化吗？即使可以，能把之前投入的钱给拿回来吗？目前看起来很难，可能只有Adobe、Sketch等设计工具供应商才会持续投入资源研究，例如Adobe在2016年开发了Adobe Sensei深度学习平台，我们可以共同期待一下他们未来几年为我们提供的AI设计工具。

文献

1.Automated Reporting of GUI Design Violations for Mobile Apps.

2.Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps.

3.Rico: A Mobile App Dataset for Building Data-Driven Design Applications.

4.A Deep Learning based Approach to Automated Android App Testing.

感谢阅读！

转载自：公众号 薛志荣

加老D私人微信18605817040，和老D一起学交互，老D会在朋友圈发精选文章和招聘信息