如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

Halo,这里是设计夹,今天继续分享「AI 工具 Midjourney」。 在上篇文章中,我们讲到了如何利用 MJ 生成多种风格的 APP 界面➡️,这次更进一步来讲讲Midjourney在B端设计中如何发挥作用! 注:由于没有做AI放大,示例图略微模糊。通过文本描述、图片描述两个 AI 方法,讲解在 Midjourney 中生成交互线框图、设计组件到 B 端页面的整个流程,如何助力 UI/UX 设计~ 一、文本描述 文本描述是 Midjourney 中最重要的出图逻辑,在输入框中输入「/image 文本描述」来生

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

Halo,这里是设计夹,今天继续分享「AI 工具 Midjourney」。

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

注:由于没有做AI放大,示例图略微模糊。

通过文本描述、图片描述两个 AI 方法,讲解在 Midjourney 中生成交互线框图、设计组件到 B 端页面的整个流程,如何助力 UI/UX 设计~

一、文本描述

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

1. 操作方法

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

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

「SaaS dashboard, UI, white background」

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

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

选择你觉得第 2 张图效果不错,还想看更多类似的图像,就可以点击 V2,再生成四个和第 2 张图相似的图像。

2. 使用分析

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

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

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

对于这种情况,为了能更快更好地控制输出效果,我们就可以使用下面要讲到的图片描述来 AI 创作。

二、图片描述

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

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

1. 使用方法

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

2. 加入参数

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

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

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

三、组件设计

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

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

1. 扁平组件系统

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

2. 古驰风格按钮

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

3. 立体按钮

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

4. 低保真线框按钮

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

5. 像素风格按钮

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

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

6. HUD

关键词:「circular HUD interface」

如何用Midjourney生成B端产品页面?收下这份AI关键词总结!

最后

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

相关资讯

AI绘画案例实操!B端视觉如何用 Midjourney 辅助设计?

翻看最近的朋友圈,似乎人人都在玩 AI 绘画、和 Chat GPT 聊天,AIGC 的发展速度异常惊人。 在校大学生们纷纷感叹到“还没毕业就已经失业了”,“对于插画师来说,简直就是二向箔降维打击”...... 这个焦虑确实是存在的,对处于底层的插画师、原画师、场景设计师等职业来说,专业能力不够出众,本身在行业里的竞争性就差,能给到公司的价值也相对较低,那公司层面希望利益和效率最大化,能够使用 AI 绘画的话确实是替代底层设计师的不二选择。 对于做用户体验设计的我们来说,视觉表达只是表现层的具象设计,那就像是货架商品

手把手教程!如何用AIGC完成B端视觉设计?

一、前言 人工智能的崭新概念正在逐渐改变我们对设计的认识和实践方式。在这个数字化时代,AI 不再仅仅是一种辅助工具,它已经成为设计师的得力助手,能够提供更高效、更智能的设计方案。在 B 端设计视觉中,AI 的应用为我们开辟了一条通向更优质设计的道路,本文将深入探讨如何借助 AI 技术,辅助设计师完成 B 端设计视觉。无论你是刚刚踏入设计领域的小白,还是经验丰富的资深设计师,都可以利用 AI 工具来提升设计效率、优化视觉效果。 更多AIGC应用案例:二、3D 视觉 banner 设计 在 B 端项目中,公司通常希望展

腾讯云AI落地实战!如何用 Stable Diffusion 完成B端图标设计?

导语:现今,许多 B 端设计师在日常设计中难免会遇到各种运营 3D banner 设计需求。在设计过程中,他们不仅需要费尽心思构思各种造型,还要不断进行重复渲染,而有时渲染结果也难以令人满意。本文旨在介绍一种基于 Stable Diffusion 混合 AI 的 B 端 3D Banner 设计方法和流程,可供任何对该领域感兴趣的人进行实验,创作出各类 B 端模型。 更多AI落地实践:一、部署 Stable Diffusion 流程 本地安装 stable Diffusion 本地安装教程:()(来源:B 站秋葉