使用 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学研大本营》,加入读者群文章来源:https://www.toymoban.com/news/detail-523915.html
访问【IT今日热榜】,发现每日技术热点文章来源地址https://www.toymoban.com/news/detail-523915.html
到了这里,关于AIGC时代,用Midjourney设计UI,跟“灵魂画手”说拜拜的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!