AIGC时代，用Midjourney设计UI，跟“灵魂画手”说拜拜

使用 Midjourney 进行 UI 设计

微信搜索关注《Python学研大本营》，加入读者群，分享更多精彩

引言

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

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

• 用户界面画面

• 应用程序图标

• 产品图片

• 标志

• 吉祥物

为了使分析更加具体，我们将为一个特定的产品类型，送餐应用程序，生成UI物料。

简介

Midjourney是一个在线文本转图像工具。要使用 Midjourney，你需要加入 Discord。访问https://www.midjourney.com/，点击加入测试版并按照说明创建你的账户：

Midjourney主页

完成后，你可以加入前缀为“ newbies-（新手-）”的任何频道，并通过输入提示生成图像。

/imagine [what you want to generate]

Midjourney的新手频道

用户界面

在使用AI工具时，最需要做的就是编写清晰的提示。提示是提交给AI工具的文本字符串，以便它可以为你生成图像。提示应该清楚地说明你想看到的内容。

编写提示时，需要将AI当作真实的人来描述设计，并准确描述。

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

/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

第二次为送餐应用程序设计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

第三次为订餐应用程序设计UI

第三个方案看起来很不错。把它放大，查看更多的细节。

第三种方案的放大界面

虽然经过三次尝试，Midjourney 生成的结果看起来还是不错的。这种原始输出在设计过程的早期阶段可能非常有用，因为它可以提供视觉灵感。例如，创建AI生成图像的moodboarding并将其用作视觉设计师创建适当视觉语言的参考是相对容易的。

同样重要的是，我们在UI设计中使用了非常通用的提示。如果想得到特定的画面（如餐厅搜索页面），应该在提示中明确指定它作为标记，这样系统就能输出更相关的结果。

图片

图片是产品各个部分中使用的照片和插图。图片是用户体验不可或缺的一部分，因为它向用户传达了重要的信息。在产品设计过程中找到合适的图片非常具有挑战性，接下来看看 Midjourney 是否可以解决这个问题。

应用程序图标

应用程序图标是一个简单但非常重要的元素，因为它传达了应用程序的理念，并为用户留下了第一印象。甚至在用户开始使用产品之前，图标就是他们首先看到的东西，它的工艺水平直接影响用户对产品的看法。

由于我们正在设计一个移动应用程序，因此需要清楚地说明 “iOS app ”这一标记，以及提到我们希望看到高质量的视觉物料（标记 “高分辨率”和 “高质量”）。因为我们的应用程序是关于送餐的，所以我们可能想提及一种特定的食物（“汉堡”）。

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

第一次为订餐应用程序设计图标

如图所示，Midjourney生成了一组超逼真的图标。让我们对第二个选项进行放大。

第二个选项的放大版

Midjourney 用于生成的图标风格很棒，但它可能不适用于实际项目，因为许多设计师更喜欢使用极简主义图标。因此使用稍微不同的提示再试一次，需要提及“极简主义”和“扁平化设计”等关键词。

/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生成了实体图像，但有一个主要缺点，背景太暗了。这是一个问题，因为从暗色背景中提取对象需要额外的工作。因此可以使用一个简单的技巧——让Midjourney使用透明或白色背景：

/imagine burger on a transparent background, high quality, 
high resolution, 4K -- q 2

Midjourney在透明背景上生成的汉堡图像

放大第一张汉堡图片查看细节。

第一张汉堡图片的放大版

现在需要做的是去除该图像的背景。为此可以使用像Remove.bg这样的在线服务。将图像上传到 removeb.bg并下载即用型视觉物料。

使用Remove.bg删除背景

宣传插图

宣传插图是多功能的视觉物料，可以在应用程序内部或宣传网站上使用。看看Midjourney能否创造出像样的插图。我们想传达的理念是，食物很美味，所以提供的提示是：

/imagine happy man eating a burger, high resolution, high quality illustration

送餐应用程序的宣传插图

这些图像是以不同的风格生成的——从水彩画到高度逼真的照片插图。显而易见，Midjourney很难将快乐与饮食结合起来。放大第二张图片查看细节，看看放大后的版本是否会更好看。

第二张图片的放大版

现在会注意到Midjourney生成的图像的另一个问题——腿和手指的问题。该工具在生成人物图像时通常会添加一条额外的腿或手指。然而，在我们的示例中，该工具移除了手指并且修改了人手，使其看起来像爪子。

标志

标志是品牌的核心元素。当涉及到标志设计时，必须确保其含义对客户来说是明确的，并且标志本身是令人难忘的。Midjourney的妙处在于可以要求该工具生成特定风格的图像。在标志设计方面，可以借鉴著名平面设计师的风格，例如Saul Bass，他凭借为Vertigo（由Alfred Hitchcock执导）等电影设计海报而闻名。

Saul Bass设计的电影海报

以下是 Midjourney 由提示创建的内容：

/imagine minimal logo of a burger, graphic style of Saul Bass

要求Midjourey以Saul Bass的风格为外卖应用程序创建标识

Midjourney确实使用了一些Saul Bass风格的元素，比如字体和配色方案，但最终的结果看起来不像他的作品。

吉祥物

吉祥物是用于代表企业的图形对象。精心设计的吉祥物可以帮助人们记住品牌并传达某种情绪。接下来要求Midjourney为一家食品配送公司生成一个具有特定风格（日系风）的吉祥物图像。

/imagine simple mascot for a food delivery company, Japanese style

要求Midjourey为送餐应用生成吉祥物

Midjourney生成了一些不错的吉祥物示例。第四个选项更好一些，就使用它了。

Midjourney能否取代UI设计师？

不，至少现在不能。这些工具生成的输出结果非常粗糙，通常需要设计人员进行完善。Midjourney 也非常依赖提示，它所提供的输出质量在很大程度上取决于提示。

这是否意味着AI工具对设计师不重要呢？不会。在产品设计过程的早期阶段，例如构思和视觉探索阶段，AI工具是有益的。Midjourney对于确定风格特别有用。它可以帮助一个团队在确定采用一种特定的风格之前，对大量的视觉风格进行比较。

推荐书单

《Python从入门到精通（第2版）》

《Python从入门到精通（第2版）》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用Python进行程序开发应该掌握的各方面技术。全书共分23章，包括初识Python、Python语言基础、运算符与表达式、流程控制语句、列表和元组、字典和集合、字符串、Python中使用正则表达式、函数、面向对象程序设计、模块、异常处理及程序调试、文件及目录操作、操作数据库、GUI界面编程、Pygame游戏编程、网络爬虫开发、使用进程和线程、网络编程、Web编程、Flask框架、e起去旅行网站、AI图像识别工具等内容。所有知识都结合具体实例进行介绍，涉及的程序代码都给出了详细的注释，读者可轻松领会Python程序开发的精髓，快速提升开发技能。除此之外，该书还附配了243集高清教学微视频及PPT电子教案。

《Python从入门到精通（第2版）》【摘要 书评 试读】- 京东图书京东JD.COM图书频道为您提供《Python从入门到精通（第2版）》在线选购，本书作者：明日科技，出版社：清华大学出版社。买图书，到京东。网购图书，享受最低优惠折扣!https://item.jd.com/13284890.html

精彩回顾

《16 个必知必会的 Python 技巧，助你高效编程》

《餐厅数据一网打尽，用Python采集并分析TripAdvisor》

《得来全不费功夫，使用Python爬虫自动采集Cookies、URL等网页数据》

《Pandas大显身手，数据分析更轻松》

《GPT-4已来，Python API使用最新版GPT》

《震撼来袭，GPT-4全解读》

微信搜索关注《Python学研大本营》，加入读者群

访问【IT今日热榜】，发现每日技术热点