如何用Midjourney生成B端产品UI界面

在上篇文章中，我们讲到了如何利用MJ生成多种风格的APP界面➡️，这次更进一步来讲讲Midjourney在B端设计中如何发挥作用！

  文本描述

文本描述是Midjourney中最重要的出图逻辑，在输入框中输入「/image+文本描述」来生成图像。

操作方法

如果我们想要生成一个B端界面，首先要清楚B端产品有哪些关键词可以使用。

先试着在Midjourney中输入一条简单的prompt提示：「SaaS dashboard」，就能得到一个深色的B端界面效果。

比如现在更流行简约浅色的B端设计风格，我们可以在prompt提示中加入“白色背景”描述，生成更加简约和流行的B端界面：

「SaaS dashboard, UI, white background」

当然除了深色和白色，还可以继续尝试其他颜色，例如你负责的产品主色是紫色，想得到一个主题色为紫色的深色B端界面，使用这段提示：

「SaaS dashboard, UI, purplr, black, white background, frontal」

Midjourney会根据关键词提示默认给出4张图像，图像下面有2行按钮，通过这些按钮能进一步控制生成的图像效果。

第一行的U是Upscale，代表放大图像提升细节，数字代表对应的图像U1, U2, U3, U4。

第二行的V是Variation，代表在基础上发生变化，数字表示对应的图像 V1, V2, V3, V4 。

使用分析

文本描述虽然操作起来很便捷，但对于刚使用Midjourney的小伙伴来说容易导致两个问题：

一是无法准确描述出想要生成的图像需要哪些关键词提示；二是输入了很多关键词提示，但生成的图像和预想的效果不一致。

对于一段关键词提示，可能调整两个字的前后顺序或者增删某一个字，都会对生成的结果产生很大的影响，从而导致产生很多废稿。

  图片描述

Midjourney中的图片描述可以理解为以图生图。

把找到的设计参考图上传到Midjourney中，得到一个专属的链接，再使用「参考图链接+文本描述」的方式生成图像。

使用方法

例如我想得到一个带有交互流程的UI界面图，先把找好的素材图上传到Midjourney中。

在Midjourney中复制参考图的链接再加上文字提示：「参考图链接+node UI」，就能得到和参考图很类似的设计图。

如果想要纯正面、扁平效果的设计流程图，可以继续调整文字提示：「参考图链接+flat UI, node UI, frontal」

如果想要手绘风格、黑白风格的交互设计图，在文字提示中加入：「参考图链接+node UI, drawing style, frontal, black and white, flat UI,  2D, no shadow」

加入参数

Midjourney生成的图默认是正方形，如果想得到其他比例的图，需要在文字描述中加入特定的参数来做到这一点：「--aspect」或「--ar」

比例为9:16的设计图，使用提示：

「参考图链接+node UI, black and white --ar 9:16」

或者16:9的图「参考图链接+node UI, --ar 16:9」

  组件设计

Midjourney的作用不同于设计软件，利用AI能在几秒钟内得到很有创造力的图像，这些设计图能为后面的设计提供更多灵感。

除了生成整张的设计图，还可以扩宽思路，利用AI输出多种风格的设计组件，探索更多设计风格的可能性。

扁平组件系统

关键词：「UI kit, flat design, outline, --ar 16:9」

古驰风格按钮

关键词：「UI components, button, Gucci, --ar 16:9」

立体按钮

关键词：「UI components, button, concrete, --ar 16:9」

低保真线框按钮

关键词：「UI components, button, drawing, outline, --ar 16:9」

像素风格按钮

关键词：「UI components, button, pixel art, --ar 16:9」

HUD

关键词：「circular HUD interface」

最后

通过对于AI出图的持续探索能发现，Midjourney在UI/UX设计中能发挥的作用上限很高。小到一个图标、组件，大到整个页面、产品，都能为我们带来意想不到的创意灵感。

希望对大家有所启发，请记得把文章转发到你的朋友圈，点个在看，咱们一起加油吧！