前言
最近OpenAi 的火爆,越来越多的行业开始尝试将ChatGPT接入到日常工作流中,利用AI写文档写报告、通过接入GPT的API来实现智能问答的智能客服、利用Tome做ppt的商务演讲。在UI/UX领域也不例外,Midjourney的出现,给UI/UX设计师们带来了福音,其快速出图能力大大提高了设计师出初稿效率;其充满想象力的画面大大扩宽了设计师思路的边界;Ai多领域专精的特点成为设计师跨领域作战的利器。那么UI/UX设计师们,如何利用Midjourney赋能UI/UX设计,我总结了以下几个方面:
01. 确定界面载体
UI/UX接触的硬件界面载体较多。
在C端领域常见的有:手机、电脑、平板电脑、watch端…
在B端领域除了电脑端外,还有LED大屏、HMI车机系统等…
A.电脑端
常见界面类型有网页设计与客户端设计。以网页端为例,Midjourney绘制的网页,包含LOGO、导航栏、Banner位、主商品,且各模块之间的间距比较规整,乍一看美观性也足够。在原型阶段,可以作为结构参考
魔法咒语:
【Prompt】An e-commerce website selling aromatherapy products with a minimalist design featuringa white background, deep green and forest color scheme, and illustrations of plants andleaves for a relaxed and soothing atmosphere, ui website design
B.手机端
在移动端设计领域Midjuorney可以做到的,包括不限于ICON、App UI、宣传/运营类插图、Logo、IP吉祥物… 下文有展开。
以常见app界面为例:
魔法咒语:
【Prompt】and deep green healing color scheme, ios app ui, An e-commerce app selling plant essential oils with minimalist design, interface design
C.平板端
与电脑端、手机端的展现的形式类似。
魔法咒语:
【Prompt】 a Tablet Ul anbout an e-commerce website selling aromatherapy products with aminimalist design featuring a white background , deep green and forest color scheme, andillustrations of plants and leaves for a relaxed and soothing atmosphere, tablet ui design
D.手表端
与电脑端、手机端的展现的形式类似。
魔法咒语:
【Prompt】an iwatch app ui about an app for fitness exercise, watchos
E.大屏端
可视化大屏使用Midjourney输出时,由于国内外对界面的设计感不太一致。所以选择垫图的方式,能更好的出效果。实际工作中,大屏的设计与布局更受限于具体需求,AI的图仅可以作为一定的样式参考。
魔法咒语:
【Prompt】A data dashboard for smart cities, featuring data visualization, data visualization bigscreen,Ul/UX.and a high-tech feel–ar 16:9
F.HMI车载端
车载HMI更多也是作为一个视觉效果的呈现。具体应用场景暂时还比较有限
魔法咒语:
【Prompt】Automotive HMI Concept Design for Electric Vehicle, car hmi design, ui, ux
02. 指定界面类型
UI设计师的日常界面中,有多种内容需要进行设计。以移动端界面为例,一个App,涉及App Icon、启动页、界面、Banner设计、活动页/海报、IP吉祥物、应用Icon图标等多种类型。
A. App图标
Midjourney能生成多种类型的图标。App图标、应用图标,扁平、轻拟物、拟物风、游戏风…
魔法咒语:
【Prompt】 Audio player app icon, minimal, pastel, colours, bright
魔法咒语:
【Prompt】face,minimalistic,white background squared with round edges mobile app logo design, flat vector app icon of a cute shiba inu
B.Banner
Banner的应用有两种。可以让Midjourney生成整张的Banner画面,只需设置好需要的ar比例。也可以让Midjourney生成主要的视觉配图,然后自己手动扩充背景。两种方法都需手动添加Banner中的文案Slogan。
- 生成整张Banner视觉
魔法咒语:
【Prompt】A group of people and a van at the beach for holidat, Holiday home.rock, sunshine. white cloud, Plant, super detailed, soft light, super high quality, saturated contrast, Flat illustration, Waterrcolorillustration.Golden ratio composition –ar 21:9
- 生成部分视觉元素
魔法咒语:
【Prompt】A gift box filled with gold coins and diamonds, high quality, minimalismtrending on dribbble, flat Illustration
C.启动页
启动页的设计,不宜过于复杂。常见的是简单的插图配上App的名字与Slogan文案。由于Midjourney无法控制想要生成的文字,所以还是利用Midjouney生成背景干净的插图,后期手动配上文案Slogan。
- 常规型
魔法咒语:
【Prompt】 There is a car in the middle of the screen, the car is blus, with a city in the background anda clean white background surrounding them, popmart toys, 3d icon clay rende
- 纯色干净的背景,方便后期处理
- 插图作为画面一部分,不占据整个画幅。
- 插画型
魔法咒语:
【Prompt】 A cool sports car is running on the highway, Motorway::2, colorful, Big scene::2, Watercololeffect, Surrounded by clouds, Ul/U illustration, Futuristic city, 8k, photorealistic, intricatedetail, insanely high detail, –ar 1:2
- 为了减少调整,在预留文案的位置 (比如底部中间处、底部中间处)需预留空位
- 比例设置1:2,接近竖屏手机的比例.
D.吉祥物
Midjourney无法完全控制同一个造型的多个方向、状态。所以更多把生成出来的吉祥物,作为建模的参考
魔法咒语:
【Prompt】a simple mascot for a cute cat running, cute, 3D, C4D, blender, studio lighting, OC redererpinterest, dribble, high detail, 8k
E.状态插图
这是Midjourney比较擅长的领域。如果想要控制生成出来的插图看起来一个系列。需尽量保持描述的prompt一致 (场景、造型、颜色) ,每次仅更改关键部分prompt.
魔法咒语:
【Prompt】a girl with hat in the road, in the front of a car, Behind it is the city, flat illustration, uiillustration, gui, minimalism, white background, bright color scheme
技巧:
1: 尽量描述详细,包括造型、背景、配色技巧
2: 大量生成,挑选合适的·技巧
3: 垫图,图生图
F.LOGO徽标
Midjourney制作LOGO时,Prompt需要描述足够精准。如果出现不想要的结果,可以通过 –no 命令进行控制
魔法咒语:
【Prompt】logo for a jazzy panda cafe with the text: “PAANDA“
03. 生成特定元素
UI中的界面常常需要添加特定的设计元素来装饰画面、解释画面。
-
出行相关产品
交通出行类,常需要3d小车、地图等元素,装饰界面。原来需要建模或平面软件中自绘,现在直接Midjourney生成使用。这种通常作为装饰类,造型要求不高。
魔法咒语:
【Prompt】3D Illustration of a car, Simple styling, Minimalism, c4d, blender
-
直播相关产品
直播秀场类,需要一格系列的礼物图标。这种系列性的,对造型、色彩、角度有比较高的统一性要求。通过Midjourney控制一致性描述,可初步达到。因为AI的造型上更有想象力,用于指导建模也很棒。
魔法咒语:
【Prompt】resolution 3d icon, one cartoon toy, 3d llustration, sleek, game props, pink, purple and yellow, duotone effect, black background, isometric, neon realistic,high quality,3d,c4d, oc render, super detail, best quality, super hd, 8k
-
会员相关产品
会员相关类,常需要用到勋章、卡片来代表等级身份。我们利用Midjourney快速生成,也可以后期再调整。如果要出来的效果更好把控,可以考虑垫图的方式。
魔法咒语:
【Prompt】Medal design, flat illustratior
04. 设定界面配色
配色是UI设计中极其重要的部分,选择正确的配色方案也可以帮助您的应用程序在市场上脱颖而出,并吸引更多的用户。
如果您想选择配色方案,可以考虑以下因素:颜色的情感效果,颜色的对比度和可读性,以及与品牌标识的一致性。
因此,在选择配色方案时,需要考虑多个因素,以确保最终结果是完美的。
A. 指定色调
根据产品的调性进行指定搭配,比如电商类,配色上会使用红色、橙色,比如出行类,可以考虑蓝色、绿色;影视类或者游戏类,考虑视觉冲击力,也可以使用暗黑配色..· 另外可以指定色彩搭配效果,比如渐变色、霓虹色…
魔法咒语:
【Prompt】Ul website Design of Sports car display, Landing page, Modern, Classy, Minimalistic,Trending white Color Palette on Dribble, High Resolution – ar 4:3
B. 描述氛围感
有时我们无法指定具体要的配色。可以告诉Ai,画面想要的具体氛围是怎样的。比如: 梦幻柔和的色彩调色板
魔法咒语:
【Prompt】Ul Design of Scented Candles, Landing page, Minimalistic, Elegant, Dreamy Pastel ColorPalette, High Resolution
05. 指定设计师风格
提到平面设计,会想到原研哉,提到建筑设计,会想到贝幸铭、扎哈·哈迪德,同样,在UI领域也有著名设计师,拥有独特的设计风格。
在Midjourney生图时,可以指定特定的设计师风格。当然,有时跨领域的设计,会有意想不到的效果。
A.UI领域设计师
活跃于dribbble、behance的一些UI设计大牛。
魔法咒语:
【Prompt】Ul Design ofA designer’s personal blog, Landing page, Minimalistic, Elegant, Rich in designsense, white and bluack Color, High Resolution, by Nguyen Le
B. 跨领域设计师
有时结合跨领域的设计风格,能碰撞出不一样的色彩。
魔法咒语:
【Prompt】Ul Design of A website showcasing the works of an anime/manga artist, Landing pageJapanese anime style, Classic Retro, Hayao Miyazaki’s animation style
总结
2023真可谓AIGC元年。而Midjourney、Stable Diffusion等工具的到来,就是设计师群体们的狂欢。整体体验下来,我们会发现,Ai绘图工具更偏向绘画创作类。对视觉基础较弱的纯UI类同学来说,Ai工具大大降低了视觉绘制的门槛。只要描述足够准确,成品图已可达商用水准。而对于视觉本职的设计同学来说,AI作为工具,极大的辅助了创作,无论是将其作为思维拓展,或是造型配色思路。
Midjourney进入V5版本之后,Bug内容大大改善。现在AI有点类似进入了大爆炸时期,一周一版本已不罕见。或许在不久的将来,AIGC将成为设计师们人手必备的工具了,犹如Figma。所以用起来,纳入工作流,助力工作吧!