AIGC绘图工具在UI界面设计中的应用探析

摘要：随着人工智能技术的不断发展，其在设计过程中的应用越来越广泛和深入。AIGC（Artificial Intelligence Graphics Creator） 绘图工具能够将输入语句转换为图像，这类工具也被称为人工智能图像生成工具。文章将以Midjourney为例，探讨AIGC绘图工具在UI界面设计中的应用，包括如何使用AIGC绘图工具快速生成界面效果图、图标、产品图、吉祥物等图形元素，如何利用指令对图形元素进行修改和优化，从而发掘AIGC在提升UI设计效率和质量方面的潜力。

关键词：AIGC；UI界面设计

中图分类号：TP311        文献标识码：A

文章编号：1009-3044（2023）26-0108-04

开放科学（资源服务）标识码（OSID）

0 引言

随着技术的不断进步，人工智能在设计领域的应用越来越广泛和深入。在UI界面设计过程中，人工智能也扮演了重要的角色，帮助设计师创建和编辑图形元素，使得UI界面更加美观、易用和功能完善。近年来人工智能生成内容技术的崛起，AIGC绘图工具受到了行业的广泛关注。目前，业内普遍认为AIGC已经接近商业应用水平，可以在文字、图片、视频、代码和音乐等领域输出高质量的内容[1]。AIGC的内容蓝海正在从辅助协作和降本提效向智能创作和增值创造扩散，为人工智能逻辑下的内容生态带来了全新的创作思路[2]。因此，本文将探讨AIGC绘图工具在UI界面设计中的应用，以期为UI界面设计提效。

1 AIGC概念及AIGC绘图工具简介

人工智能在最近几年发展迅速，人工智能逐渐从内容学习、内容理解走向了内容生成阶段。人工智能生成内容（AI Generated Content，下文简称AIGC） 迅速发展，AIGC技术成为了人工智能发展的一个重要分支领域[3]。 AIGC的内涵是人工智能在计算机生成内容的深入发展阶段中，按照预设程序进行数据收集、整理和分析，生成文学、艺术、新闻等多个领域的内容[4]。AIGC通过机器翻译、文档自动摘要、智能文本生成、自动问答系统、文档分类检索以及图像识别等技术自动生成所需内容[5]，因此其应用广泛，比如自动聊天回复、翻译、文章续写、绘图、视频合成等，使用AIGC技术进行内容创作受到了各领域的广泛关注。

绘图是AIGC技术的一个重要的应用领域。AIGC绘图结合计算机图形学和人工智能技术，实现多种图形任务，如图像生成、图像处理、模型训练等。本文使用的AIGC绘图工具，是指将输入语句转换为图像的工具，这类工具也被称为人工智能图像生成工具（AI Image Generator） 。目前的AIGC绘图工具主要是使用文本到图像的模型生成，通过输入一段指令（Prompt） ，AIGC绘图工具根据指令能够输出多张图片。

目前，主要的AIGC绘图工具是DALL-E、Midjourney和Stable Diffusion，它们各有不同的特点和用途。DALL-E是基于OpenAI开发的，可以根据自然语言输入生成图像。DALL-E的最大特点是可以生成非常真实的图像，并且支持多种不同的场景和风格，例如生成动物、物品、场景等。Midjourney是基于GPT模型和Discord社区开发的，可以生成各种艺术作品，例如画作、音乐、动画等。Midjourney最大的特点是可以根据用户输入的关键词或者主题生成具有艺术性的作品，这些作品可以用于商业用途或者个人娱乐。使用Midjourney需要一定的艺术背景和创意思维。Stable Diffusion使用了最新的深度学习技术，可以生成非常逼真的图像和视频，最大的特点是可以根据输入的参数生成高质量的图像和视频。使用Stable Diffusion需要一定的技术背景和计算机知识。设计人员可以基于具体需求和背景来选择不同的AIGC绘图工具。由于本文希望通过AIGC绘图工具提升UI界面设计创意，且使用者多为设计人员和创意工作者，因此本文选用Midjourney（下文简称MJ） 展开具体的应用分析。

2 UI界面设计现状分析

在UI界面设计的发展过程中也有人工智能发展的缩影：设计软件也随着版本迭代升级，提供一些插件和程序，如抠像、一键换背景、智能填充、自动排版等智能应用功能。在设计软件早期发展阶段，抠像、制作图形背景、采集图形素材和手动对齐排版都需要耗费设计人员巨大时间成本和学习成本。目前所使用的设计软件较之早期阶段，从技术上已提升了设计人员的操作效率。但由于行业内卷以及技术要求提升，对于设计效率又有了更高的要求。

另一方面，随着技术的进步、应用场景的拓展与用户的审美趣味的提升，对于UI界面设计也提出了更高的要求。设计人员需要掌握更多设计软件来实现综合的设计效果，例如界面布局（Sketh、XD） ，图形图像制作（PS、AI、SAI、Procreate） ，3D渲染（C4D、Blender） 。此外，技法易学，创意难新，设计人员需要在不断提升软件技法的同时寻求创意的突破。

提升效率和创意突破是UI界面设计实际应用中关注的重点和难点，设计师和从业人员也着力在这两方面寻求突破。因此本文认为，可借助AIGC绘图工具从文本到图像、自动绘图、自动渲染等功能来提高设计人员工作效率和提升创意趣味。

3 使用AIGC绘图工具辅助UI界面设计

3.1 AIGC绘图工具指令

不同的AIGC工具由于所使用的模型不同，指令（Prompt） 的形式也不相同，本文主要介绍MJ的指令。首先，使用MJ需要调用/imagine的命令，在/imagine命令后输入标准指令来生成图片。在AIGC聊天工具中可以理解人类的遣词造句，但MJ则需要指向性明确、明晰的词句。基本指令是由一段英文文字指令，由想法和标记（Tag） 构成；复杂指令是在基本指令基础上增加图像指令和参数，需按照图像指令、文字指令、参数的顺序输入指令。

文字指令：要生成图像的文本描述。文字指令可以非常简单。单个单词（甚至一个表情符号）会产生一个图像。非常短的指令将在很大程度上依赖于MJ的默认样式，因此更具描述性的指令更适合能够生成特别的设计图。然而，超长指令并不总是更好的。设计师需要专注于想要创造的主要概念。同时注意思考细节的重要性，因为没有在文字指令中标记的细节都将被随机分配。含糊其词是获得多样性的好方法，但可能无法获得想要的具体细节。

图像指令：将图像URL添加到提示中，以影响最终结果的样式和内容。图像URL总是位于提示的前面。使用图像指令，需要首先将图像添加到提示中，右键单击或长按图像，然后选择“复制图像地址”以获取图像的网址（URL） 。地址必须以.png、.gif或.jpg等扩展名结尾。添加图像地址后，添加任何其他文本和参数以完成指令。复杂指令中图像指令、文字指令、参数的顺序不可变。图像指令必须和文字指令同时出现才有效。使用复杂指令时，可通过图像权重参数--iw来调整提示的图像与文本部分的权重。当没有指定--iw时，将使用默认值。更高的--iw值意味着图像指令将对生成图产生更大的影响。

参数：更改图像的生成方式，位于指令的末尾。参数可以改变纵横比、模型、放大倍数等。不同的模型版本的参数标准和兼容性不同，本文使用的是MJ的V5版本。

3.2 AIGC辅助UI界面设计流程

UI界面设计流程通常为：设计参考、设计初稿、设计修改、设计定稿。在设计参考阶段，设计人员需要查找大量参考图，这个阶段需要1～2天。设计人员基于设计参考，完成初稿设计，这一阶段需要至少1天。而使用AIGC绘图工具直接生成设计图，设计人员再进行细节优化，可以极大缩短概念风格、设计初稿和设计定稿之间反复沟通的时间。两种设计流程对比如图1所示：

在UI设计稿初期，设计团队拿到的需求分析和任务书只是停留在纸面上的文字和数据，不够直观。此时设计人员通常需要出一些测试性的过程稿来做一个直观的评估，也就是先做几版设计稿，先有个大致参考再细化。如果按照一般设计流程需要设计人员从头设计、选风格、找参考、做布局，占据大量时间。所以这个阶段的工作可以交给人工智能来做。在这一阶段生成的所有过程稿都是用来给设计人员做参考的，不是真正意义的方案成果。但是在这一阶段，设计人员能在短时间内获得的基础信息越多，最终设计出来的成果质量也就越高。此外，对于缺乏经验的设计人员而言，这种设计方法提高了获取设计经验的速度。

3.3 AIGC辅助UI界面设计实例

3.3.1 界面效果图设计

使用AIGC绘图工具最重要的是编写清晰的指令，指令能够表达设计稿的内容。例如，设计教育类网站界面时，可首先将文字指令可设置为：beautiful web for education， ui， ux， ui/ux， website --stylize 500。这段指令中beautiful web for education是设计想法；UI、UX、website等标记使得指令更加清晰；--stylize 500为风格化参数。风格化参数在0～1 000，可调节风格化的程度，低stylize生成的图片与提示非常匹配，但艺术性不高；高stylize值创建的图片非常具有艺术性，但与提示词的关联较少。在本文案例中，选择中等风格化程度。MJ根据这段指令生成图2所示4张设计稿：

根据上文指令生成的设计稿中网站大图以人物为主，网站随机配色。可以通过增加标记来调整主图内容和网站配色：在原指令中增加颜色内容标记，增加颜色变量来提示主题颜色。beautiful web for education， campus， buildings， red， blue， yellow， ui， ux， ui/ux， website --stylize 500。指令调整后生成匹配效果图：以红、蓝、黄为主题色，有建筑物的教育类网站界面效果如图3所示。此外，可以利用--no参数来设置否定项，例如--no people参数规定设计稿中不出现人物。

MJ生成的图片质量可用于生成设计初稿和设计提案稿。在设计初稿阶段，设计团队可根据设计需求提炼关键词，并开展头脑风暴，整理出核心关键词作为指令标记，利用MJ快速出图获得灵感。同时，不断调整优化指令，输出与需求最符的设计草图，用于设计提案。

3.3.2 图标设计

图标是界面中的重要组成元素。本文中以设计教育类图标为例，因此将指令设置为：a set of icons for education website， white background， blue， red， yellow。这段指令中a set of icons for education website是设计想法，设定为一组教育类网站使用的图标；blue， red， yellow等标记指定了颜色组合；white background标记规定了生成的图标组背景为白色。白色背景更便于褪底处理。设计人员能够直接利用MJ的白色背景设计图，将图标褪底后直接运用在界面中。MJ根据以上指令生成图4所示的4组图标：

该指令下生成的图标都是默认圆形、扁平风格、面性的图标。可以通过形状标记，如square、triangle等来调整生成图标的形状；通过风格标记，如flat（扁平风格）、skeuomorphism（拟态风格）、Neumorphism（新拟态风格）等来调整生成风格；通过类型标记，如linear（线性）、planar（面性）等来规定生成线性还是面性的图标。另外，可以通过添加标签来指定图标内容，比如在原指令中可以添加book（书）、computer（电脑）、lab（实验室）等标记指定图标中所包含的元素。

3.3.3 产品图设计

产品图和网站页面上各种文章所用配图也是界面构成的一部分。符合网站内容的配图丰富了界面设计的整体效果。文本中以设计教育类产品的介绍图为例，将指令设置为：cover for maths course --ar 3：2。这段指令中cover for maths course是设计想法，设定为数学课程封面图；--ar 3：2为输出图片比例参数。AR为Aspect Ratio缩写，即画面比例，此参数用来控制画面比例。该指令中规定输出图画面长宽比例为3：2。在实际应用过程中，可以根据界面规定的比例尺寸，使用--ar参数设置好比例规则，所生成图无须后期再裁切调整，提高应用效率。MJ根据以上指令生成如图5所示的4张产品图。