UI设计师如何使用 Midjourney ?
文本到图像的人工智能工具,如Midjourney、Dalle-2和Stable Diffusion,可以从纯文本生成图像。这些天来,互联网上到处都是人工智能生成的图像,但问题是,”文本到图像工具可以用于UI设计吗?”
在这篇文章中,我们将看到人工智能工具如何处理常规的UI任务,如创建:
- UI 界面
- App 图标
- 产品图标
- Logos
- 吉祥物
为了使我们的分析更加具体,我们将为一个特定的产品类型(食品交付应用程序)生成UI资产。
免责声明:本文并不试图说服你使用AI工具。它是一个纯粹的实验,展示了人工智能工具的能力,以及它们可以生成哪些UI资产。
对Midjourney的快速介绍Midjourney是一个在线文本到图像工具。要使用Midjourney,你需要加入Discord。访问https://www.midjourney.com/,点击加入测试版,按照说明创建你的账户。

一旦你这样做了,你就可以加入任何带有 “新手-“前缀的频道,并开始通过键入来生成图像。
/imagine [what you want to generate]

UI 界面
在与人工智能工具合作时,我们需要做的最重要的事情是编写清晰的提示语。提示是一个文本字符串,你提交给人工智能工具,以便它能为你生成一个图像。提示应该清楚地说明你想看到什么。
你越是清楚地表达你的意图,你就会从人工智能中得到更多相关的结果。
在写提示时,想一想你将如何向一个实际的人描述你的设计,并写下一个确切的句子。把这个句子变成标记(用逗号分隔的短语)。
标记化的格式对Midjourney来说更好,因为它可以帮助你修剪所有不必要的单词,同时保留基本的上下文信息。
例如,在一个食品交付应用程序的背景下,标记化的提示可能是:
/imagine high-quality UI design, food delivery mobile app, trending
on Dribbble, Behance

默认情况下,Midjourney会生成四个选项供你选择。你可以使用U[数字]命令来提升选项的比例。让我们看看第一个设计的升级版会是什么样子。

如果你把升级版和以前的版本进行比较,你可能会注意到,Midjourney不仅增加了图像的大小和质量,而且还稍微修改了布局。例如,升格后的版本在屏幕的左上角没有红色按钮。
你可能注意到该工具生成的图像中有两个重要问题:胡言乱语的文字和损坏的食物预览图像。不幸的是,这些问题不仅与UI屏幕有关,而且与Midjourney生成的许多种类的图像有关。
我们的第一次拍摄并不完美,所以你可能想知道如何修改我们的提示以达到更好的效果。值得一提的是,编写提示语没有最佳策略。你需要用不同的提示语进行实验,以找到一个最佳解决方案。这就是为什么你应该以至少尝试几次为目标,然后再想出一个体面的输出。
让我们修改一下我们的提示语,看看工具对它有什么反应。这次我们将提到 “Figma”,因为我们很可能想在设计工具中使用这些资产。
/imagine food delivery app, user interface, Figma, Behance, HQ, 4K, clean UI

让我们看看第一个设计的放大版会是什么样子。

这个版本看起来更像是我们可以在设计中使用的东西。该布局有一个清晰的元素视觉层次。
让我们用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

第三个方案看起来很有希望。让我们把它放大,看看更多的细节。

你可以看到,Midjourney产生的结果,即使在第三次尝试之后,如果没有人类设计师的完善,也不能使用。然而,在设计过程的早期阶段,这种原始输出可能非常有帮助,因为它可以作为一种视觉灵感。例如,创建一个由人工智能生成的图像的情绪板,并将其作为视觉设计师创造适当的视觉语言的参考,是比较容易的。
同样重要的是,我们在UI设计中使用了一个非常普遍的提示。如果我们想看到一个特定的屏幕(如餐厅搜索页面),我们应该在提示中明确指定它作为一个标记,这样系统就能给我们一个更相关的结果。
画面
图像是用于产品各个部分的照片和插图。图像对于用户体验来说是不可或缺的,因为它向用户传达了基本信息,并设定了正确的氛围。在产品设计过程中,寻找正确的图像可能是一个挑战,所以让我们看看Midjourney是否能够帮助我们解决这个问题。
APP图标
一个应用程序的图标是一个简单但非常强大的元素,因为它传达了应用程序的理念,并给用户创造了第一印象。甚至在用户开始使用一个产品之前,图标就是他们首先看到的东西,它的工艺水平直接影响到用户对产品的看法。
由于我们正在设计一个移动应用程序,我们需要清楚地说明 “iOS应用程序 “这一标记,以及提到我们希望看到高质量的视觉资产(标记 “高分辨率 “和 “高质量”)。因为我们的应用程序是关于食品配送的,我们可能想提到一种特殊的食物(”汉堡”)。
/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 2

Midjourney生成了实体图像,但它们有一个主要的缺点 – 它们被放置在一个黑暗的背景上,这可能是一个问题,因为它需要额外的工作来从背景中提取一个物体。但我们可以使用一个简单的技巧–要求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的伟大之处在于,你可以要求该工具生成特定风格的图像。谈到标志设计,我们可以遵循著名平面设计师的风格,如索尔-巴斯,他因设计《迷魂记》(由阿尔弗雷德-希区柯克导演)等电影的海报而闻名。

这里是Midjourney为一个提示所创造的东西:
/imagine minimal logo of a burger, graphic style of Saul Bass

Midjourney确实使用了索尔-巴斯风格的一些元素,如字体和配色,但最终的结果却不像他作品中的东西。
吉祥物
吉祥物是用来代表一个企业的图形对象。一个精心设计的吉祥物可以帮助人们记住一个品牌并传达某种情绪。让我们要求Midjourney为一家食品递送公司生成一个吉祥物的形象,提到一种特定的风格(日本)。
/imagine simple mascot for a food delivery company, Japanese style

Midjourney产生了几个不错的吉祥物的例子。但只有一个例子可以用最小的修改来使用(第四个选项)。
Midjourney可以取代UI设计师吗?
没有,至少现在没有。这些工具产生的输出结果非常粗糙,往往需要设计者进行完善。Midjourney也非常依赖于提示(它所提供的输出质量可以极大地依赖于你所提供的提示)。
这是否意味着这个工具在设计师的工具包中没有地位?在产品设计过程的早期阶段,例如构思和视觉探索阶段,这个工具是有益的。Midjourney对于moodboarding特别有用。它可以帮助一个团队在承诺采用一种特定的风格之前,对大量的视觉风格进行比较。
翻译:云瑞设计
原文:https://uxplanet.org/