随着AI工具的火爆，设计师肯定会非常关注，AI可以生成UI界面吗？现在市面上Midjourney、Dalle-2 和 Stable Diffusion 等文本到图像的 AI 工具可以从纯文本生成图像。目前互联网上充斥着人工智能生成的图像，但问题是，“文本转图像工具可以用于 UI 设计吗？”
在本文中，我们将了解 AI 工具如何处理常规 UI 任务，例如创建：用户界面画面，应用图标，产品图片，徽标LOGO，吉祥物。为了使我们的分析更加具体，我们将为特定产品类型（送餐应用）生成 UI 资产。需要注意的是：本文并不试图说服您使用 AI 工具。这是一个纯粹的实验，展示了 AI 工具的能力以及它们可以生成的 UI 资产。大家通过下文也可以看出来，UI现在生成的东西是很粗糙的。AI并不能代替设计师。Midjourney 简介Midjourney 是一种在线文本转图像工具。要使用 Midjourney，您需要加入 Discord。访问https://www.midjourney.com/，单击加入测试版并按照说明创建您的帐户。完成后，您可以加入前缀为“ newbies-”的任何频道，并通过键入开始生成图像。/imagine [你想生成什么]
Midjourney 的新手频道用户界面我们在使用 AI 工具时最需要做的就是编写清晰的提示。提示是您提交给 AI 工具的文本字符串，以便它可以为您生成图像。提示应清楚地指定您要查看的内容。你越清楚地表达你的意图，你从人工智能中获得的结果就越相关。编写提示时，请考虑如何向真实的人描述您的设计并写下准确的句子。将这句话变成标记（用逗号分隔的短短语）。标记化格式更适合 Midjourney，因为它可以帮助您删除所有不必要的单词，同时保留必要的上下文信息。例如，在送餐应用程序的上下文中，标记化提示可能是：/imagine high-quality UI design, food delivery mobile app, trending on Dribbble, Behance第一次为订餐应用程序设计 UI默认情况下，Midjourney 会生成四个选项供您选择。您可以使用命令U[number]升级选项。让我们看看第一个设计的升级版会是什么样子。
Midjourney 生成的第一个界面的升级版本如果将放大版本与之前的版本进行比较，您可能会注意到 Midjourney 不仅增加了图像的大小和质量，而且还略微修改了布局。例如，升级版在屏幕左上角没有红色按钮。您可能会注意到该工具生成的图像中存在两个重大问题：乱码文本和损坏的食物预览图像。不幸的是，这些问题不仅与 UI 屏幕相关，而且与 Midjourney 生成的多种图像相关。我们的第一次实验并不完美，所以您可能想知道如何修改我们的提示以获得更好的结果。值得一提的是，编写提示没有最佳策略。您需要尝试使用不同的令牌来找到最佳解决方案。这就是为什么在你想出一个像样的输出之前你应该至少尝试几次。让我们修改我们的提示，看看该工具将如何对其做出反应。这次我们会提到“Figma”，因为我们可能想使用设计工具中的资产。/imagine food delivery app, user interface, Figma, Behance, HQ, 4K, clean UI
Midjourney 生成的第一个界面的升级版本让我们看看第一个设计的升级版会是什么样子。
这个版本看起来更像是我们可以在设计中使用的东西。布局具有清晰的元素视觉层次结构。让我们使用 Midjourney 进行另一种 UI 设计。这次我们将删除标记“Dribbble”和“Behance”，只留下“Figma”，但还添加了一个参数“—q 2”以提高图像质量。/imagine [what you want to generate] — q <number>
这是我写的命令
/imagine Food delivery app, mobile app, user interface, Figma, HQ, 4K, clean UI — q 2
第三次为订餐应用程序设计 UI第三种选择看起来很有希望。让我们放大它以查看更多细节。
第三种选择的升级版您可以看到，即使经过第三次尝试，Midjourney 生成的结果也无法在没有人类设计师改进的情况下使用。然而，这种原始输出在设计过程的早期阶段可能非常有用，因为它可以提供视觉灵感。例如，创建 AI 生成图像的情绪板并将其用作视觉设计师创建适当视觉语言的参考相对容易。同样重要的是，我们使用了非常通用的 UI 设计提示。如果我们想看到一个特定的屏幕（比如餐厅搜索页面），我们应该在提示中明确指定它作为令牌，以便系统可以为我们提供更相关的结果。图像图像是产品各个部分中使用的照片和插图。图像是用户体验不可或缺的一部分，因为它向用户传达基本信息并设定正确的心情。在产品设计过程中找到合适的图像可能具有挑战性，所以让我们看看 Midjourney 是否可以帮助我们解决这个问题。应用程序图标应用程序图标是一个简单但非常强大的元素，因为它传达了应用程序的全部内容，并为用户创造了第一印象。甚至在用户开始使用产品之前，图标就是他们首先看到的，其工艺水平直接影响用户对产品的看法。
由于我们正在设计一个移动应用程序，因此我们需要明确指定令牌“iOS 应用程序”，并提及我们希望看到高质量的视觉资产（token“高分辨率”和“高质量”）。因为我们的应用程序是关于送餐的，所以我们可能想提及一种特定类型的食物（“汉堡”）。
/imagine icon for iOS app in high resolution, burger, high quality, HQ — q 2
如您所见，Midjourney 生成了一组超逼真的图标。让我们升级第二个选项。
Midjourney 用于图标的风格很棒，但它可能不适用于实际项目，因为许多设计师更喜欢使用极简主义图标。让我们使用稍微不同的提示再试一次。我们需要提及“极简主义”和“扁平化设计”等标记，以向 AI 发出我们希望看到简单图标的信号。/imagine icon for iOS app in high resolution, burger, high quality, minimalism, flat design — q 2现在输出看起来像是我们可以在真实项目中使用的东西。让我们升级第一个选项。产品图片产品图片是我们将在产品页面上显示的图片。由于我们设计了一个食品订购应用程序，因此我们的图像将是食品的照片或插图。让我们让 Midjourney 为我们生成图像：/imagine burger, high quality picture, high resolution, HQ, 4K — q 2Midjourney 生成了实体图像，但它们有一个主要缺点——它们被放置在黑暗的背景上，这可能是一个问题，因为从背景中提取对象需要额外的工作。但我们可以使用一个简单的技巧——让 Midjourney 使用透明或白色背景：/imagine burger on a transparent background, high quality, high resolution, 4K — q 2第一张图片看起来很棒；让我们升级它。
现在，我们需要做的就是从这张图片中删除背景。为此，我们可以使用像 Remove.bg 这样的在线服务。将图像上传到 removeb.bg 并下载即用型视觉资产。
促销插画宣传插图是多功能的视觉资产，可以在应用程序内部或宣传网站上使用。让我们看看 Midjourney 能否创造出像样的插图。我们想传达我们的食物很美味的想法。所以我们提供的提示是：/imagine happy man eating a burger, high resolution, high quality illustration很酷的是，图像以不同的风格生成——从水彩画到高度逼真的照片插图。但很明显，Midjourney 很难将快乐与饮食结合起来。让我们放大第二张图片，看看放大后的版本是否会更好看。您可能会注意到 Midjourney 生成的图像的另一个问题——腿和手指的问题。该工具在生成人物图像时通常会添加一条额外的腿或手指。然而，在我们的示例中，该工具移除了手指并修改了人手，使其看起来像爪子。LOGO标识标志是品牌的核心元素。当涉及到标志设计时，我们必须确保其含义对客户来说是明确的，并且标志本身令人难忘。Midjourney 的妙处在于，您可以要求该工具生成特定风格的图像。在标志设计方面，我们可以借鉴著名平面设计师的风格，例如 Saul Bass，他以为 Vertigo（由阿尔弗雷德希区柯克执导）等电影设计海报而闻名。
使用命令：
/imagine minimal logo of a burger, graphic style of Saul BassMidjourney 确实使用了一些 Saul Bass 风格的元素，比如字体和配色方案，但最终的结果看起来不像他的作品。吉祥物吉祥物是用于代表企业的图形对象。精心设计的吉祥物可以帮助人们记住品牌并传达某种情绪。让我们让 Midjourney 为一家提及特定风格（日语）的食品配送公司生成吉祥物图像。/imagine simple mascot for a food delivery company, Japanese styleMidjourney 生成了一些不错的吉祥物示例。我觉得第四个是很不错的选择，可以在此基础上进行修改。Midjourney 能否取代 UI 设计师？不，至少现在不是。工具生成的输出非常粗糙，通常需要设计人员进行细化。Midjourney 也非常依赖提示（它提供的输出质量可能在很大程度上取决于您提供的提示）。这是否意味着该工具在设计师的工具包中没有位置？不会。该工具在产品设计过程的早期阶段可能会有所帮助，例如构思和视觉探索。中途对于情绪板特别有用。它可以帮助团队在确定一种特定风格之前比较多种视觉风格。原文：https://uxplanet.org/ui-design-using-midjourney▼往期精彩回顾▼Sketch反击！Figma文件可以导入到Sketch啦！视觉交互or产品思维？70%以上UI设计师缺的是这些…30个绝对有用的UI设计实用小技巧（第一辑）UI设计师，这5类界面千万别忘了做啊~给UI/UX设计师的ChatGPT完全使用指南2023年第二期课程报名开始提升UI设计师核心竞争力↓↓长按二维码咨询老师↓↓
相关文章
