My Secret Rainbow

线框图自动化和人工智能在UX设计中的应用

为用户创建直观和引人入胜的体验是大大小小的公司的一个重要目标。为了实现这一目标，由构思创意、原型设计和用户测试组成的循环驱动着现代产品的设计过程。产品团队一直在寻找改善这一循环的方法。出于他们的努力，设计领域在过去几年里发生了巨大的变化。而线框图和原型设计工具的兴起让设计师比以往更容易验证假设。

但是，尽管有了这些发展，即使是最先进的原型开发工具仍然需要产品团队花费大量的时间和精力。设计师一直在寻找能够帮助他们更高效地开展工作的工具和技术，人工智能（AI）因此顺势进入了设计工具的领域。

新一代的AI系统有望简化线框图的设计流程，旨在帮助设计师瞬间完成将创意从绘图板变为真实产品的过程。本文将探讨AI将如何做到这一点。

当今的设计工作流程

首先，在研究AI是如何改变线框图设计之前，我们需要了解一下当前的设计工作流程，即设计师和开发人员在创建功能产品时遵循的一系列步骤。我们可以找出大多数团队在产品设计流程中所遵循的步骤：

1. 研究和分析。产品团队进行用户研究，并以规范的形式创建产品需求。
2. 头脑风暴和创意构思。设计师分析产品需求，进行头脑风暴会议，勾勒出想法，并与团队成员和利益相关者进行讨论，最后将其中一些想法转化为低保真的线框图。
3. 重新创建从草图到数字化的布局。根据产品设计过程的阶段和可用资源的不同，可能需要几分钟、几小时甚至几天的时间才能将低保真设计工件变成数字化模型。
4. 根据数字化布局制作原型。虽然许多设计工具都具有内置的功能，可以将模型变成原型，但设计师必须投入时间来准确组织每个屏幕上的内容。
5. 设计验证。用户通过对设计进行测试以发现可用性缺陷，然后设计人员根据这些信息对拟议的设计进行修改。
6. 对设计进行编码。工程团队介入并将原型变成真实的产品。

正如你所看到的，工作流程是一个多步骤的过程。通常需要数周的时间和跨团队合作才能将一个想法转变成一个概念。

教机器理解用户界面

从当今的设计工作流程中可以看出，从产品的构思到与用户进行测试之间有两个步骤：从草图到数字化的布局重建，以及从数字布局进行原型设计。设计师们正在寻找自动化这些步骤的方法。

设计工作流程中的一些步骤是多余的，需要设计师们把时间用在更多的创意任务上。图片来源：Tony Beltramelli。

说到利用自动化来简化产品设计，自然要从线框图开始，因为这是一种直观的表达概念的方法。目前，设计师们花费大量时间将线框图转换为设计布局。但是，如果机器能够自动完成这些呢？Wireframing AI（利用计算机视觉和机器学习算法）可以教机器理解草图，将其自动转换为用户界面。利用这项技术，可以跳过产品开发生命周期中的几个步骤，瞬间将草图转化为最终设计。

要了解线框图设计的未来，请看来自Uizard的5分钟演示，了解如何使用原生移动设计将纸质草图转换成原型。

 

这个演示展示了如何教机器理解用户界面的方法。

• Wireframing AI  https://hackernoon.com/teaching-machines-to-understand-user-interfaces-5a0cdeb4d579
• Uizard  https://uizard.io/

将视觉设计变成代码

一旦设计师们最终确定了UI的外观，便将其交付给前端开发人员，以将其实现为代码。将可视化设计转化为代码的这一阶段也会给整个工作流程带来摩擦，因为当开发人员对已经存在的图形化的东西进行编码时，有些东西可能会在编译中丢失。AI可以为设计师提供一个前端编码的机会，以简化该步骤。

例如，一项名为pix2code的技术，承诺可以将设计师创作的数字草图转化为计算机代码。使用pix2code技术的结果主要取决于样本大小。使用pix2code技术的公司可以用数千对手绘线框草图及其对应的代码来进行AI数据集训练。其结果确实让人印象深刻。Uizard将该技术应用于其模型，能够从单个输入图像中生成针对三个不同平台（iOS、Android和web）的代码，准确率超过77%。

Uizard并不是唯一一家朝这个方向努力的公司。如下图所示，Airbnb Sketching Interfaces也提供了一个类似的概念。Airbnb创建的线框图自动化技术可以对白板图纸中的原型进行实时编码。由于Airbnb团队在其设计系统中对组件进行了标准化，所以在进行视觉设计时，该应用会将草图与标准的UI组件设计进行匹配。

Airbnb的AI系统可以识别标准手绘元素，并自动将其渲染为源代码。图片来源：Airbnb。

这个Airbnb的例子表明，在创建设计系统方面投入的所有努力很快就会得到回报。基于AI的工具将利用设计系统中的信息，自动将草图分类到已定义的组件和样式中。这样一来，将可以生成遵循公司UI设计准则的用户界面。这也意味着，其结果将在很大程度上取决于设计系统中的组件和准则的定义是否考究。

• pix2code https://arxiv.org/abs/1705.07962
• 77% https://uizard.io/research/
• Airbnb Sketching Interfaces https://airbnb.design/sketching-interfaces/

使用线框图AI改进设计探索

AI不仅可以作为将原始图纸转换为高保真模拟图或原型的工具，还可以作为探索创意本身的工具。深度学习算法可以获取输入参数（设计人员想要创造的东西），并根据参数提出设计的多个变体。通过使用线框图AI，设计人员可以指定一个设计的大体方向；机器将为其探索所有可能的方案，然后根据原始需求提出最佳设计解决方案。深度学习研究人员Jonathan Hui 的文章「AI：捕捉UI模型并在几秒钟内完成原型设计」提供了这种技术的运作方式。

AI从同一个UI模型图中生成不同的布局。图片来源：Jonathan Hui。

• AI：捕捉UI模型并在几秒钟内完成原型设计  https://medium.com/@jonathan_hui/automate-the-ui-design-process-with-ai-pix2code-f3a91ac5567e

使用基于AI的内容生成器

设计任务的自动化并不限于自动生成的布局。当设计人员在设计线框图时，他们通常使用内容占位符而不是真正的内容。像生成对抗网络（GAN）这样的技术可以很好地帮助生成内容，这些内容将用真实的内容代替通用的占位符，从而使结果与真实的产品相似。

像「This Person Does Not Exist」这样的项目，一个根据真人图像数据生成假人面部图像的GAN技术，已经为设计师们节省了大量的时间，而这些时间本来是要花在为他们的设计寻找相关内容上的。毫无疑问，线框图自动化将开始在其功能集中引入像「This Person Does Not Exist」这样的工具，这样设计人员就不需要为了寻找占位符内容而离开他们正在进行的线框图工作了。

• 生成对抗网络  https://baike.baidu.com/item/Gan/22181905
• This Person Does Not Exist  https://www.thispersondoesnotexist.com/

AI会取代UI设计师和前端开发人员吗？

简而言之，用算法完全取代设计师或开发人员的想法听起来很未来主义，但担心人工智能取代这些角色是没有必要的。产品设计是一个复杂的过程，有很多假设和未知领域。当设计师在做一个新项目时，他们会做出很多大大小小的决定；很多设计决策都是基于设计师个人的品味和对需求的理解。通常来说，不能以清晰的规范格式来提供设计要求。因此，我们不可能指望一台机器就能把抽象的东西变成一个伟大的设计。

因此，当我们谈论在设计中使用自动化时，我们指的是人机之间的创造性合作。基于AI系统的真正威力在于两者的协同作用，机器将帮助设计人员更高效地工作。AI深度学习擅长提取出无数种模式，并将其转化为设计决策，但是需要由设计师选择他们认为最佳的模式。相应地，AI驱动的工具的兴起将帮助我们重新定义设计师的角色，他们将被解放出来，把更多的时间投入到需求收集和探索中。

总结

AI辅助线框图将成为未来设计工具中不可或缺的功能。线框图自动化将帮助设计人员专注于测试功能设计工件，而不是将时间投入到打磨像素上。AI工具将为设计师创造一个外骨骼，提高他们的工作效率和决策速度。

 

英文原文：https://xd.adobe.com/ideas/process/wireframing/wireframing-automation-ai-ux-design/