主页 >  滚动>正文
使用Midjourney进行UI设计
时间 : 2023-03-30 11:06:23   来源 : 森设

Midjourney、Dalle-2 和 Stable Diffusion 等文本到图像 AI 工具可以从纯文本生成图像。现在互联网上充斥着人工智能生成的图像,但问题是,“文本转图像工具可以用于 UI 设计吗?”


(资料图片)

在本文中,我们将了解 AI 工具如何处理常规 UI 任务,例如创建:

用户界面画面应用图标产品图片吉祥物

Midjourney 简介Midjourney 是一种在线文本转图像工具。要使用 Midjourney,您需要加入 Discord。

完成后,您可以加入前缀为“

newbies-”

的任何频道,并通过键入开始生成图像

用户界面画面

我们在使用 AI 工具时最需要做的就是编写清晰的提示。提示是您提交给 AI 工具的文本字符串,以便它可以为您生成图像。提示应清楚地指定您要查看的内容。

编写提示时,请考虑如何向真实的人描述您的设计并写下准确的句子。将这句话变成标记(用逗号分隔的短短语)。

例如,在送餐应用程序的上下文中,标记化提示可能是:

/imagine high-quality UI design, food delivery mobile app, trendingon Dribbble, Behance

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

如果将放大版本与之前的版本进行比较,您可能会注意到 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

这是我们的提示

/imagine Food delivery app, mobile app,user interface, Figma, HQ, 4K, clean UI -- q 2

第三种选择看起来很有希望。让我们放大它以查看更多细节。

您可以看到,即使经过第三次尝试,Midjourney 生成的结果也无法在没有人类设计师改进的情况下使用。然而,这种原始输出在设计过程的早期阶段可能非常有用,因为它可以提供视觉灵感。例如,创建 AI 生成图像的情绪板并将其用作视觉设计师创建适当视觉语言的参考相对容易。

同样重要的是,我们使用了非常通用的 UI 设计提示。如果我们想看到一个特定的屏幕(比如餐厅搜索页面),我们应该在提示中明确指定它作为令牌,以便系统可以为我们提供更相关的结果。

意象

图像是产品各个部分中使用的照片和插图。图像是用户体验不可或缺的一部分,因为它向用户传达基本信息并设定正确的心情。在产品设计过程中找到合适的图像可能具有挑战性,所以让我们看看 Midjourney 是否可以帮助我们解决这个问题。

应用程序图标

应用程序图标是一个简单但非常强大的元素,因为它传达了应用程序的全部内容,并为用户创造了第一印象。甚至在用户开始使用产品之前,图标就是他们首先看到的,其工艺水平直接影响用户对产品的看法。

由于我们正在设计移动应用程序,因此我们需要明确指定令牌“iOS 应用程序”,并提及我们希望看到高质量的视觉资产(令牌“高分辨率”和“高质量”)。因为我们的应用程序是关于送餐的,所以我们可能想提及一种特定类型的食物(“汉堡”)。

/imagine icon for iOS app in high resolution, burger, high quality, HQ -- q2

如您所见,Midjourney 生成了一组超逼真的图标。让我们升级第二个选项。

Midjourney 用于图标的风格很棒,但它可能不适用于实际项目,因为许多设计师更喜欢使用极简主义图标。让我们使用稍微不同的提示再试一次。我们需要提及“极简主义”和“扁平化设计”等标记,以向 AI 发出我们希望看到简单图标的信号。

/imagine icon for iOS app in high resolution, burger,high quality, minimalism, flat design -- q2

现在输出看起来像是我们可以在真实项目中使用的东西。让我们升级第一个选项。

产品图片

产品图片是我们将在产品页面上显示的图片。由于我们设计了一个食品订购应用程序,因此我们的图像将是食品的照片或插图。让我们让 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 -- q2

第一张图片看起来很棒;让我们升级它。

现在,我们需要做的就是从这张图片中删除背景。为此,我们可以使用像 Remove.bg 这样的在线服务。将图像上传到 removeb.bg 并下载即用型视觉资产。

吉祥物

吉祥物是用于代表企业的图形对象。精心设计的吉祥物可以帮助人们记住品牌并传达某种情绪。让我们让 Midjourney 为一家提及特定风格(日语)的食品配送公司生成吉祥物图像。

/想象一个简单的日式食品配送公司吉祥物送餐公司,日式

Midjourney 生成了一些不错的吉祥物示例。但是只有一个例子可以用最少的修改(第四种选择)。

Midjourney 能否取代 UI 设计师?

不,至少现在不是。工具生成的输出非常粗糙,通常需要设计人员进行细化。Midjourney 也非常依赖提示(它提供的输出质量可能在很大程度上取决于您提供的提示)。

这是否意味着该工具在设计师的工具包中没有位置?不会。该工具在产品设计过程的早期阶段可能会有所帮助,例如构思和视觉探索。中途对于情绪板特别有用。它可以帮助团队在确定一种特定风格之前比较多种视觉风格。

标签:

相关文章

X 关闭

X 关闭