AI在线 AI在线

工作效率超高!我让AI帮我做UI设计了!

AI 盛行,现如今任何人通过一些简单的学习,都可以使用 AI 轻易生成好看的插画、元素,设计师的价值好像一夜之间变得一文不值。真实情况是什么呢? 我们拿一个需求举例,这个需求要求我们做一个摇钱树的主视觉,并且可以领取红包,先看看交互:可以看到最主要的其实就是中间这个摇钱树了,要是按照以前的设计路径要搞定这个摇钱树,要么就是绘制,要么用 C4D 建模渲染。 时长肯定都是半天甚至一天以上了,现在呢? Midjourney、Stable Diffusion,AI 一键就能生成,10 分钟我生成了这么多(AI 你不要太离谱

工作效率超高!我让AI帮我做UI设计了!

AI 盛行,现如今任何人通过一些简单的学习,都可以使用 AI 轻易生成好看的插画、元素,设计师的价值好像一夜之间变得一文不值。真实情况是什么呢?

我们拿一个需求举例,这个需求要求我们做一个摇钱树的主视觉,并且可以领取红包,先看看交互:

工作效率超高!我让AI帮我做UI设计了!

可以看到最主要的其实就是中间这个摇钱树了,要是按照以前的设计路径要搞定这个摇钱树,要么就是绘制,要么用 C4D 建模渲染。

时长肯定都是半天甚至一天以上了,现在呢?

Midjourney、Stable Diffusion,AI 一键就能生成,10 分钟我生成了这么多(AI 你不要太离谱):

工作效率超高!我让AI帮我做UI设计了!

生成了这么多,我们需要先挑选一个合适的出来,那怎么挑呢,这里考验的就是大家的审美能力和对需求的理解能力了。

我们肯定得有几个筛选维度:

风格符合 造型符合 细节完善 元素符合 光影符合

更多AI 的落地案例分享:

一、风格符合

一般这种需求都有很强的运营属性,为了激发用户的参与度,往往视觉氛围比较热烈,所以采用一些高饱和和 3d 质感的风格比较多,我们也往这个方向去挑选,一些 2d 扁平画风的直接就可以 pass 掉:

工作效率超高!我让AI帮我做UI设计了!

二、造型符合

这里主要就是审美了,怎么从这么多里面挑一个比较不错的出来呢?

工作效率超高!我让AI帮我做UI设计了!

饱满度:

我们挑选的时候一定要注重元素的饱满度,比如下面这种就是不行的:

工作效率超高!我让AI帮我做UI设计了!

三、元素颜色符合

我们也可以从组成元素的协调性和颜色丰富度上面去做筛选,比如下面两个摇钱树造型都相对比较饱满,但是左图的树叶很单薄、锋锐、像是纸钱,这不是很符合我们的设计审美;右图呢就是颜色整体基本只有一个黄色,色彩配比上会比较单调。

工作效率超高!我让AI帮我做UI设计了!

四、光影立体

还有一个点我们采用的素材,立体度一定要够,这样才能出视觉优秀的图,像下面的两张图,左图的光影整体看过去没有明显的亮面和暗面,缺乏对比。就会比较平。相对的右图就有明显的明暗对比,就会显得立体很多。

工作效率超高!我让AI帮我做UI设计了!

最后我们选定了这一个素材,比较符合我们的预期,(其实也有点不是很完美)。

工作效率超高!我让AI帮我做UI设计了!

我们把他放到页面中看看:

工作效率超高!我让AI帮我做UI设计了!

放是放进去了,那要怎么落地呢?

背景是怎样?按钮是怎样?配色是怎样?是不是有人又要麻瓜了?

这一步就提现设计师的重要性了,为了满足项目不是单单会 AI 生图就可以,最重要的是要保证项目的落地!

我们来发动一下专业技能!

第一步:首先是基础配色!

我们可以用主体元素的同类色颜色去延展。

首先我们的元素主色先提出来:

工作效率超高!我让AI帮我做UI设计了!

这样我们就得轻易得到了两个颜色,把他们用以铺设画面中:

工作效率超高!我让AI帮我做UI设计了!

主色用以铺色整个背景,而点缀色就可以用在按钮这类比较小的部分上面。这样的配色不会有多出彩,但是也不会出错,非常的稳。

第二步:光影!

有了大色调,但是不是太生了点。

为了让画面更生动,富有冲击力,那我们就需要光影的加入去塑造画面!

首先可以给画面设置一个光源。

光源应该设置在哪呢?

看下我们的现在的画面,主元素是黄色,背景色也是黄色的,就会让我们的摇钱树没有那么突出。

所以,我们可以把光源设置在元素的正后方,让更亮的颜色来把主体元素衬托凸显出来!

工作效率超高!我让AI帮我做UI设计了!

可以看到我们加了光影之后主体元素得到很好的突出!

我们刚才只是加了光源,属于是对亮部的调整;

那相对应的我们也要对暗部进行调整,让暗部更暗一些,从而加强整体画面的明暗对比,并且要加入色相的变化,比如我们亮部的光源是往柠檬黄去偏移了色相,暗部就可以往橙红色去偏移色相:

工作效率超高!我让AI帮我做UI设计了!

这样子的话我们整个画面的颜色就丰富了一层,多了一种颜色变化。但是还都是暖色,暗部的话还是希望尽量冷一些,让画面有冷暖对比才是最好的。

所以我们可以在暗部再加一种颜色:

工作效率超高!我让AI帮我做UI设计了!

把这几种颜色铺设到画面中去:

工作效率超高!我让AI帮我做UI设计了!

可以看到,我们加入了光影之后,不仅对比加强了,画面的配色也更丰富多彩了;所以其实,我们加入光影的同时,其实也是再丰富配色。这两个是相辅相成的。如果我们只加入光影而不考虑颜色变化的话,就还是会保持很单调配色。我们看下不考虑色相变化的样子是什么样的:

工作效率超高!我让AI帮我做UI设计了!

这种就很不好看,暗部颜色也很脏。

第三步:融合!

到这里我们的画面的大感觉就差不多定性了,剩下一些主体的和光影的融合,让画面更整体自然。

工作效率超高!我让AI帮我做UI设计了!

调整方法:

(1)利用颜色减淡提亮

直接复制一层主元素,改成颜色减淡模式,透明度 23%

工作效率超高!我让AI帮我做UI设计了!

(2)叠加模式调色

新建一个图层,叠加模式,适用高明度的红色去涂抹暗部:

工作效率超高!我让AI帮我做UI设计了!

(3)给主体边缘打光

新建图层,滤色模式,在主体和光源衔接的地方涂抹亮色:

工作效率超高!我让AI帮我做UI设计了!

来对比一下融入前和融入后的区别:

工作效率超高!我让AI帮我做UI设计了!

融入后颜色更好看,光影也更符合画面的光影规律了!

第四步:丰富背景细节

目前背景我们只做了颜色光影的变化,有些空,我们可以加入一些景物或光线,以丰富画面的细节。

工作效率超高!我让AI帮我做UI设计了!

我们的画面现在就比较丰富好看了对不。

最后我们来加入 UI 模块,整体看下效果:

工作效率超高!我让AI帮我做UI设计了!

完成!

整个流程下来,可以看到 AI 确实很好用,可以很快地输出很多方向和素材,但在整个项目流程中其实只占了很小的一部分,前期的筛选能力考验设计师的审美,后期的调整、背景的融入、细节的优化、UI 界面的设计考验设计师的专业技能,整个都还是需要设计师去亲力亲为才能保证高视觉品质的去落地需求。

所以大家大可不必去焦虑,打铁还需自身硬,把自己的专业做好,AI 的出现只会成为你快速进步的工具,让你实现可以用更短的时间,输出质量更高的作品,而不会成为你焦虑的原因!

相关资讯

AIGC如何赋能UI设计?5篇简短教程帮你快速入门!

本篇文章主要是AIGC在图标设计上的一个应用,希望对大家有所帮助。 更多落地教程:一、Midjourney 生成 APP 活动弹窗1. 花瓣网找参考图,处理不必要的元素 这个弹窗设计我尝试了很多方法,发现还是需要垫图才能生成符合我想要的效果,所以这个方法还是得去找参考图才行,以下这张图来自花瓣网。 用 ps 处理下文字,别偷懒~(百度直接搜“花瓣网”即可,然后搜索“弹窗设计”)。尝试了图生文功能,这里没能如愿生成合适的,不过也给了我写关键词的灵感,突然发现图生文还可以这样用,牛~2. 关键词描述并垫图生成 然后我开
7/16/2023 6:45:04 AM
言川Artie

大厂落地实战!如何用Stable Diffusion完成B端和C端图标设计?

伴随着 AIGC 异常火爆,各种各样的 AI 工具如雨后春笋般涌现,除了各位设计师知道的 Midjourney(以下简称“MJ”),同样还有十分亮眼的 Stable Diffusion。 所以今天我们主要教大家如何使用 Stable Diffusion(以下简称“SD”)来进行 B 端图标和 C 端图标的创作,充分将 AIGC 灵活的运用在项目的工作流程之中。 往期AIGC 生成图标干货:一、B 端图标 那首先我们先来看看 B 端图标,有哪些特点?从上图可以发现主要特点为:立体块面感、轻科技、材质多为毛玻璃、光泽金
7/24/2023 6:44:22 AM
团队ASAK设计

如何用AI生成设计稿?实战案例演示来了!(上)

从 3 月 ChatGPT 火热以来,发现它能够通过文字生成代码,并进一步渲染成页面,展现出了解决部分 UI、UX、测试和前端工作的能力。所以零零散散地进行了一些关于 Design To Code、AI 生成页面、动效等方面的学习与尝试。在本文中,我将在工作业务脱敏的基础上,梳理这些想法。目的之一是进行总结,其二是遇到一些疑问点,希望有机会与大家相互沟通学习。 本篇内容主要讨论如何用 AI 生成设计稿,以及如何在实际项目开发流程中运用,同时设计、开发组件在其中扮演很重要的角色。(全文预计 6 分钟) 更多AI实战案
12/16/2023 8:51:32 AM
糊涂的工蜂

8大实战案例!AIGC在网易落地项目中的运用

AIGC 全称 AI Generated Content,是利用人工智能技术来生成内容,AIGC 绘画属于 AIGC 的分支。 近半年,以 Midjourney 和 Stable Diffusion 为代表的 AIGC 绘画迎来爆发式发展,掀起了一场生产力革命。Midjourney 和 Stable Diffusion 强大的创造力和无与伦比的高效性,使设计师通过它们提升生产力成为了必然。然而 Midjourney 和 Stable Diffusion 作为开放性工具,本身具有随机性与不可控性,很多设计师很难在工作
4/11/2023 8:12:11 AM
团队ASAK设计

AI有哪些设计应用场景?来看腾讯高手的7000字超全总结!

一、背景 最近 AI 创作内容火爆网络,让我们看到 AI 在设计上充满想象力的未来。关于 AI 在设计上应用的探索由来已久,从早几年的智能广告素材,智能 Logo 再到如今的 AIGC,AI 的成长突飞猛进。本文尝试梳理 AI 目前在设计领域应用的最新进展,展望设计行业在 AI 技术影响下可能发生的变革。 更多AI落地干货:二、AI 与设计相关的最新技术 1. 自动化内容生成(AIGC) 从文本-图像、文本-视频、文本-3D 模型到智能字体、智能文本,AI 在各类内容的创造上已经突飞猛进,强大到让人惊叹地步。 ①
4/20/2023 8:42:31 AM
团队ISUX

AIGC如何应用到工作中?我做了3个实战案例!

本文主要通过在工作中使用Midjourney绘图的3个实际案例,来解析AIGC的落地流程。 更多AI落地实战项目:
4/21/2023 7:00:40 AM
栗子的设计笔记

AIGC落地实战!「什么值得买」如何用Midjourney提高设计效率?

写在前面 早在今年 2 月份,我们就通过 Midjourney 辅助设计,上线了专题 「从入门到行家-单板滑雪篇」。一开始上线还是比较忐忑的,因为对于 AI 的探索大家都刚刚起步,害怕通过 AI 生产的专题会遭到用户的反感。但后续得到数据验证,并未影响线上效果,并且还能大大提升团队的工作效率。自此,正式开启了值得买 UED 的 AIGC 探索之旅。 随着 AIGC 持续火热,值得买 UED 团队也一直在探索如何使用 AIGC 能力辅助设计团队快速落地日常项目。我们边探索边实践的过程中,目前找到比较好的应用场景主要有
4/27/2023 7:37:09 AM
值得买UED

AI时代产品设计会如何发展?大厂高手提出了8个猜想!

作为工业设计师出身,本就很喜欢创新产品和畅想未来。以下这 8 个关于 AI 产品 & 设计工作的猜想,来源于我最近阅读的各种资料和书籍的观点总结。猜想仅为个人推论,希望对你有启发而非误导。如不认同,欢迎留言讨论。 关于最新的AI落地应用案例:猜想一:逆向生成源文件的能力将增强 现在设计师已经可以使用 Midjourney 等 AI 制图工具快速生成各种设计作品,包括商品包装、家居产品、服装等成型方案:但是这些设计作品依旧停留在视觉效果图层面,距离直接商用和批量生产还差在源文件生成、打样、调整等环节上。未来从 AI
5/12/2023 7:55:36 AM
Ant Design 元尧

AI绘画如何落地?教你四步操作搞定运营设计!

本文总结了4个操作,帮你快速用AI搞定运营设计。 四步操作法,快速出运营设计! 这个操作就是快,不用我们花时间去想关键词怎么写、怎么描述,就非常的快。我们卷一点,别人用 AI 需要 1 小时出需求图,我们只需要 10~20 分钟,我比较追求方法论,方法对了,你的时间就比别人宝贵 2 倍甚至更多。但是这个方法也是有缺点的,就是太受自己手中素材的影响了,问题不大,来具体看看怎么玩吧: 1. 四步操作法的工作流程 实际工作中我们肯定是先接到需求文档之后在进行后续的工作安排,从需求分析开始到设计出稿结束,这里的需求分析我就
5/13/2023 12:33:28 AM
言川Artie

AIGC如何在商业项目中使用?来看6年独立设计师的深度分析!

一、AI 绘画的发展趋势 在大学期间,小哈读的是建筑专业,梦想一直是成为一名建筑设计师,但是在毕业半年后我就离开了建筑设计行业。现在的我是一名独立设计师、插画师,从 2018 年到 2023 年,我合作过很多客户。我喜欢画漫画,出版过个人漫画绘本《创作力的形状》,同时还开设了插画、三维、IP 设计培训的课程。对于我来说,变化一直在发生。 而关于 AIGC, 从 2018 年的“鲁班”,到 2022 年出现的小众 AI 工具,再到 2023 年初,Midjourney、chatGPT 等工具引发了大众的目光,科技以我
5/16/2023 1:25:17 AM
张小哈

AI绘画落地实战!如何用 Midjourney 快速搞定主视觉海报设计?

前言 从几个月前 AIGC 的兴起到现在,各行各业已经有许多团队将之运用在工作流程当中。 其中,Midjourney 的到来,不仅在一定程度上提升了设计师们的工作效率,也为设计师提供了更多设计方式上的可能性。 其快速出图的特点帮助设计师节省了设计初稿的时间,可圈可点的画面构图与光影关系又给设计师带来许多灵感与参考。 那么,到底该如何运用 Midjourney 来帮助我们将一个项目落地呢?本文将以一个大型活动的主视觉设计案例,解析如何利用 Midjourney,来帮助我们从最初的构思到最后项目落地。 更多案例:一、项
6/1/2023 7:34:56 AM
团队ASAK设计

UI/UX设计师如何用好Midjourney?我总结了5个方面!

虽然AI的爆火,越来越多的行业都在尝试着接入AI到工作流中。利用ChatGPT写文档产品、接入GPT的API智能回答的客服、利用Tome做ppt的商务…UI/UX也不例外。Midjourney的出现,其快速出图能力大大提高了设计师出初稿效率;其充满想象力的画面大大扩宽了设计师思路的边界;其多领域专精的特点成为设计师跨领域作战的利器。UI/UX利用Midjourney赋能设计,可以从以下5个方面着手:
5/1/2023 9:04:58 AM
LenHart

Galileo 1.0 公测开放!一键生成高保真UI设计,可导入Figma 编辑

大家好,我是花生~ 一年前我向大家介绍过一款 AI 设计工具 Galileo,它是首批提出 “Text to UI” 概念的产品之一,可以根据文本生成高质量的 UI 设计原型,不过产品一直以来都是内测状态,所以使用范围不是很广。最近 Galileo 推出了新的 Galileo 1.0 模型,并对所有人开发测试,今天我们就一起来看看新模型的效果如何。 相关推荐:Galileo 1.0 Galileo AI 官网: Galileo 目前主要有两大功能,通过文本生成 UI 设计和通过图像生成 UI 设计。官网的 Exp
2/19/2024 1:01:10 AM
夏花生

产品+AI如何设计?大厂高手总结了这3种方案!

一、前言 当我们一次次被 AI 技术带来的变革所惊艳,当 ChatGPT 一次次宣布其能力已经突破了人类的想象,你是否注意到现有产品与 AI 融合的新趋势?值得注意的是,新技术的出现也一定带来了新的交互体验。本文将以多种产品场景为例,梳理 PC 端多种主流的 AI 融合形态,希望能给大家带来启发。二、多元场景下的主流 AI 形态 目前主流 AI 产品有如下 3 种主要形态,分别为沉浸式的 AI 智能体(Agent)、伴随式的 AI 副驾驶(Co-pilot)、嵌入式的 AI 场景化嵌入(Embedding)。这 3
9/13/2024 1:19:22 AM
团队百度MEUX

如何用Stable diffusion三步搞定场景定制化?来看58的经验总结!

随着人工智能的逐渐发展,越来越多的 AI 工具也一窝蜂的涌现出来。 在众多的 AI 利器当中 Midjourney(简称 MJ)和 Stable diffusion(简称 SD)两款软件在图片的效果呈现上表现尤为突出,虽然 MJ 能够通过描述关键词来对图像进行调整,但总觉得跟脑海里设想的那张图还差一点意思,不能完全的符合心里预期。 迫于这个原因我们将经历投入到 SD 的学习当中,在学习的过程中发现 SD 的操作界面对设计师来说比较友好,操作界面更类似于一款软件的操作界面,感觉是在学习一门技术(可能是总用绘图软件做图
7/28/2023 5:06:10 AM
团队58UXD

轻松又高效!阿里高手如何用AI绘画完成大促设计?

自从 Disco Diffusion 在 Github 开源后,AIGC 能力进入快速发展期,随后各类 AI 工具的发布使相关领域都产生了不小的研究和应用浪潮。同时基于 Stable Diffusion 的快速迭代则使 AI 在「电商行业」的应用逐步扩大。 本篇以大促会场设计为例,介绍我们设计师如何在营销活动设计中,构建 AI 工作流与多元化的 AIGC 能力应用,来一起一探究竟吧~ 更多AIGC应用范例:一、大促会场设计中的AIGC 应用思路 1. 选择合适的工具 考虑到和「会场设计」强主题/强氛围画面的相关性,
7/28/2023 6:09:48 AM

如何用AI完成甲方需求?实战案例来了!

AI 设计=牛! AI 作为还在进步的智能工具,其功能不是万能的,对于每个使用过的用户来说也是早有体会了,所以如何高效的将 AI 辅助应用于设计呢,那就是看项目内容是否切合 AI 擅长的部分。 这不最近来了一个新需求,需要做一组周年 H5,每个界面要求就是简约,清新,并有一个主体元素点缀。 好嘛,这不是撞到 AI 的心巴上了吗,AI 对单体元素的生成调试已经比较成熟了,再加上简单的背景装饰和渲染就能完成。 先上完成图:以上的 H5 页面主体元素全部由 AI 生成,是不是很 6,但是 AI 一开始生成的元素图片是这样
10/16/2023 1:06:17 AM
菜心¹

AI 产品体验设计的 8 个重要突破

编者按:AI 还在快速的进化,但是再强的 AI 都得服务于人。 AI 的用户界面将会往哪个方向发展? 有哪些发展趋势是值得关注的?
2/14/2025 6:08:01 AM
Patrick Morgan
  • 1