AI工具火爆,能否用于UI设计?以送餐应用为例展开探讨
由于AI工具变得极为火爆,设计师们必然会予以高度关注,那AI究竟能不能去生成UI界面呢?当下在市面上,像Dalle - 2这类文本到图像的AI工具能够从单纯的文本去生成图像。当前互联网之中到处都是人工智能所生成的图像,然而所存在的问题就是,“文本转图像工具能否被运用到UI设计当中呢?”
对于本文,我们会知晓 AI 工具,怎样去处理常规 UI 任务,像创建用户界面画面,制作应用图标,生成产品图片,打造徽标 LOGO,塑造吉祥物 。
为了让我们的分析变得更为具体,我们会针对特定的产品类型,也就是送餐应用,去生成UI资产。
要留意的是:此文并非打算去说服您运用AI工具。这是一回单纯的实验。旨在展现AI工具的能力以及它们能够生成的UI资产。从下文大家也能够瞧出来。眼下UI生成的事物是颇为粗糙的。AI不能够替代设计师。
简介
它属于针对在线文本转变成为图像的工具,若要运用它,你得进行加入的操作,去采取访问的行为,点击加入那个测试版本,而后依照说明来创建属于你的账户 。
完成之后,您能够加入前缀是“ -”的任意频道,并且通过键入去开始生成图像。
/
你想生成什么
的新手频道
用户界面
使用AI工具的过程当中需要做的事情里面最关键的要数编写清晰的提示,提示是递交给AI工具的文本字符串,借助它能够生成图像,所编写的提示应当清晰地指明要查看的内容 。
你越清楚地表达你的意图,你从人工智能中获得的结果就越相关。
编写提示,考虑咋向真实之人描述你的设计,写下准确句子,将这话变成标记,注意别逗号间有拖沓之感且语句简短,用逗号分隔短短语
由于它能够协助您去除全部多余无用的单词,还可留存必要的上下文具体信息,所以标记化格式更为适宜 。
例如,在送餐应用程序的上下文中,标记化提示可能是:
设想一下,高质量的用户界面设计,用于美食 Delivery 的移动应用程序,在 Dribbble 上成为热门趋势,在 Behance 上也是如此。
第一次为订餐应用程序设计 UI
默认情况下, 会生成四个选项供您选择。您可以使用命令
U[number]
升级选项。让我们看看第一个设计的升级版会是什么样子。
生成的第一个界面的升级版本
若是把放大之后版本与先前已有的版本作对照,您或许会留意得出来,不但图像的尺寸以及质量得以增添,并且它的布局也稍有变动,比如说,升级版于屏幕左下角不存在红色按钮。
您极有可能会留意到,该工具生成的图像里,存在着两个极为重大的问题,分别是:乱码文本,以及损坏的食物预览图像。令人遗憾的是,这些问题,不但与 UI 屏幕有所关联,而且还与生成的多种图像存在着关联。
第一场实验于我们而言并非尽善尽美了,故而您会不会寻思着怎样去调整我们所给出的提示从而获取更不错的成效呢。有个事儿得提一下,编写那个提示并无堪称最好的策略哟。您得试着采用多种多样不同样式的令牌去寻觅到堪称最佳之解决办法呀。这便是为何在您琢磨出一个还算得上像样子的产出以前,您起码得去尝试上几回的缘由所在了。
我们将要进行对我们提示的修改,去查看该工具会怎样针对此作出反应,这次我们会提及“Figma”这款信息详情,是由于我们也许想要运用设计工具里诸多资产中的相关内容。
设想一下,有一款食品配送应用程序,其用户界面,在Figma以及Behance上展示,具备高质量,呈现于4K画面并且有着简洁的用户界面。

生成的第一个界面的升级版本
让我们看看第一个设计的升级版会是什么样子。
这个版本,看上去更像是那种,我们能够于设计里运用的物件。其布局,有着明晰的元素视觉层次架构。
容我们运用 开展另外一种 用户界面设计 此次我们会去除标记“”以及“” 仅留存“Figma” 然而还增添了一项参数“—q 2” 用以提升图像品质 。
请想象,生成你企望生成之物,后面那一部分是减号连同紧跟着下的q 。
这是我写的命令
设想一下,外卖应用程序,移动应用程序,用户界面,在Figma里,高清画质,4K分辨率,设计简洁的用户界面——问题2
第三次为订餐应用程序设计 UI
第三种选择看起来很有希望。让我们放大它以查看更多细节。
第三种选择的升级版
您能够瞧见,哪怕经历了第三次的尝试,所生成的成果在没有人类设计师予以改进的情形下依旧无法得以运用。可是,这般原始的输出于设计进程的早期阶段或许极为有用,缘由在于它能够给予视觉灵感。举例来说,去创建AI生成图像的情绪板,并且把它用作视觉设计师构建恰当视觉语言的参考是相对简便的 。
同样关键的是,我们运用了极为通用的 UI 设计提示。要是我们期望看到某一特定屏幕,像是餐厅搜索页面这般的,那我们应当在提示里确切指定其作为令牌,如此一来系统便能为我们给出更具相关性的结果。
图像
各产品部分中所运用的照片以及插图便是图像,图像属于用户体验里不可缺少的一部分,缘由在于它给用户传递基本信息并且营造正确的心情,在产品设计进程中寻觅合适的图像兴许具备挑战性,故而让我们瞧瞧是否能够助力我们把这个问题给解决掉 。
应用程序图标
应用程序图标,是个简单却极为强大的元素,它传达了应用程序的所有内容,还为用户塑造了第一印象。甚至在用户开启使用产品前,图标就是他们率先瞧见的,其工艺水准直接左右用户对产品的观点。
鉴于我们正着手设计一款移动应用程序,故而我们得确切指定令牌“iOS 应用程序”,还要提及我们盼望见到高质量的视觉资产(令牌“高分辨率”以及“高质量”)。因我们的应用程序是围绕送餐展开的,所以我们或许会想提及某一特定类型的食物(“汉堡”)。
想象一下,用于iOS应用程序的图标,具有高分辨率,是汉堡形状,高质量,高画质,高质量图像质量系数为2 。
如您所见, 生成了一组超逼真的图标。让我们升级第二个选项。
图标所用到的那种风格,相当不错啦,然而呢,它或许不太适用于实际开展的项目哟,这是由于好多设计师更钟情践行运用那种极简主义的图标呀,一起来借助稍微有点不一样的提示再度尝试一回嘛,我们得把“极简主义”以及“扁平化设计”等这类标记给提及出来呀,从而朝着 AI 传达出我们期望看到呈现出简单样式图标的信号哇。
如今输出呈现出好似我们能够于实际项目里运用之物的样子。我们来将首个选项予以升级 。
产品图片
显示在产品页面上的图片是我们的产品图片,因为我们设计了一个食品订购应用程序,所以我们的图像会是食品的照片或者插图,咱们让为自己来生成图像 。

设想一下汉堡,具备高质量画面,拥有高分辨率效果,属于高清品质,呈现4K画质,其质量等级为2
原本生成了实体图像,然而它们存在着一个主要的缺点,那就是这些图像被放置在了非常黑暗的背景上面,而这种情况有可能会成为一个问题,原因在于从这样的背景当中去提取对象是需要进行额外的工作的。不过呢,我们能够去使用一种简单的技巧,也就是让其使用透明的或者白色的背景 。
第一张图片看起来很棒;让我们升级它。
此时此刻,我们所要去做的便是从这张经由特定处理的呈现视觉内容的图片里去除背景,针对达成此项任务,我们能够借助诸如.bg这类提供网络服务的平台,把存有图像数据的文件上传至.bg平台,而后获取并下载那种经过处理的、直接可用于特定场景的视觉资产。
促销插画
能够于应用程序内部或者宣传网站之上予以使用的宣传插图,是具备多种功能的视觉资产。我们来瞧瞧,是不是能够创作出还算像样的插图。我们期望传达我们所提供的食物味道极其美妙这样的想法。所以我们给出的提示是:
令人觉得很酷的一点在于,图像会以不一样的风格进行生成,这其中涵盖了从水彩画风格一直到高度逼真的照片插图风格。然而非常明显的是,要把快乐跟饮食相互结合起来是存在困难的。我们来对第二张图片实施放大操作,看看放大之后的版本是不是会更具观赏性。
您也许会留意到,生成的图像存在另一个问题,即腿和手指方面的问题。这个工具在生成人物图像的时候,常常会添加上一条额外的腿或者手指。然而,在我们所举的例子当中,这个工具把手指给移除了,还对人手进行了修改,让其看上去如同爪子 。
LOGO标识
品牌的核心元素是标志,当进行标志设计时,我们得保证其含义对客户而言是清晰明确的。并且,标志自身要让人难以忘怀。其妙处在于,您能够要求该工具生成特定风格的图像。在标志设计领域,我们能够借鉴知名平面设计师的风格。比如说,Saul Bass ,他因(由阿尔弗雷德希区柯克执导)等电影设计海报而声名远扬。
使用命令:
确实运用了些许 Saul Bass 风格的元素,比如说字体以及配色方案,然而最终呈现出来的结果看上去并不似他的作品。
吉祥物
由图形对象构成,是用于当作企业代表的吉祥物。得以记住品牌,且能够传达某种情绪,靠的是精心设计的吉祥物。现在要为一家提及特定风格,也就是日语风格的食品配送公司,生成吉祥物图像 。
有一些不错的吉祥物示例被生成了,我认为第四个是相当不错的可供选择之物,能够在这个基础之上予以修改 。
能否取代 UI 设计师?
不,起码于当下而言并非如此。工具所产出的输出极为粗糙,一般来讲是需要设计人员去进行细化处理的。而且它还相当依赖提示,其给出的输出质量很有可能在极大程度上取决于您所提供的提示 。
这难道就表明此项工具于设计师的工具包之中不存在位置么?并非如此。该工具在产品设计历程的伊始阶段或许会具备一定助力,比如说构思以及视觉探索方面。在进程中途对情绪板尤为有用。它能够协助团队于确定某一特定风格之前对多种视觉风格予以比较。


欢迎 你 发表评论: