AIGC如何落地?超多项目拆解之UI设计篇

一、AI 绘画在工作中的流程 在 UI 设计工作中,我们都会用到相同的工作流程,首先接到产品给到的需求,然后我们会进行需求的分析,根据分析去找合适的参考,之后进行我们的初稿设计。 同样,在使用 AI 工具时,我们的工作流程并没有发生改变,改变的只是我们出图的效率以及效果,比如我们在经过分析和找到参考后,我们进行设计时,会花费大量的时间进行设计。而现在,AI 绘画完全可以帮助我们进行设计,我们只需要进行关键词的调试,即可短时间做出不错的设计,我预计可以提升大概 60%-70%的设计时间(这里还只是保守估计)。 往期教

AIGC如何落地?超多项目拆解之UI设计篇

AIGC如何落地?超多项目拆解之UI设计篇

一、AI 绘画在工作中的流程

在 UI 设计工作中,我们都会用到相同的工作流程,首先接到产品给到的需求,然后我们会进行需求的分析,根据分析去找合适的参考,之后进行我们的初稿设计。

同样,在使用 AI 工具时,我们的工作流程并没有发生改变,改变的只是我们出图的效率以及效果,比如我们在经过分析和找到参考后,我们进行设计时,会花费大量的时间进行设计。而现在,AI 绘画完全可以帮助我们进行设计,我们只需要进行关键词的调试,即可短时间做出不错的设计,我预计可以提升大概 60%-70%的设计时间(这里还只是保守估计)。

往期教程:

AIGC如何落地?超多项目拆解之UI设计篇

而且,我们进行初稿设计后,会经历令设计师感到非常痛苦的设计评审,公司的大佬们都会指点江山般的给你提出设计意见(我就是!!),然后你可能经历 1 稿、2 稿、3 稿.....

我们可以利用 AI 绘画来辅助设计工作。例如,在评审之前,我们可以使用 AI 生成五种设计方案(可以更多,嘿嘿),供评审大佬们选择.......(狗头保命)

AIGC如何落地?超多项目拆解之UI设计篇

废话不多说,接下来为大家展示用 AI 创作一些可落地的工作参考:

二、引导页设计

医疗 app——扁平插画风格

这里我们以一个“医疗 app”为例子,我们接到的需求是做一组医疗 app 的引导页设计,需要使用扁平插画的设计风格,然后我们去找到合适的参考,根据参考出的特性进行关键词的描述,提炼关键词并进行 prompt 组合。

1. 需求分析

医疗 app 引导页设计,风格:扁平插画风格

AIGC如何落地?超多项目拆解之UI设计篇

2. 参考借鉴

去花瓣、站酷、behance 上找到合适的参考,我们根据参考的图片来描述关键词,比如画面人物之间的动作描述。

AIGC如何落地?超多项目拆解之UI设计篇

3. 关键词描述

我们按照 midjourney 的词组顺序来描述,这里我按照第一张参考图的动作来进行描述

AIGC如何落地?超多项目拆解之UI设计篇

4. Midjourney 生成的图片

可以看到,midjourney 生成的图片颜色并不能保持统一,不过这个问题不大,我们只需要选取合适的图片,然后后期用 PS 等工具稍微修饰一下即可了。

AIGC如何落地?超多项目拆解之UI设计篇

5. 应用项目中的效果

AIGC如何落地?超多项目拆解之UI设计篇

三、勋章设计

成就勋章设计

这里我得到的需求是做一个娱乐 app 的勋章设计,元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。得到需求后我们去拆解相关信息,然后根据整理的信息去找到类似的参考,这里我根据找到的风格直接用 Midjourney 的“喂图”功能,然后输入需求相关的关键词并组合,如下:

1. 需求分析

娱乐 app 的勋章设计,元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。

AIGC如何落地?超多项目拆解之UI设计篇

2. 参考借鉴

参考来自花瓣,这种风格就是比较适合我们需求的设计,所以我们这里借鉴一下,把图片喂给 Midjourney。

AIGC如何落地?超多项目拆解之UI设计篇

3. 关键词描述

喂图之后还需要输入我们根据需求整理的关键词,把这些关键词和图片链接一起发送给 midjourney。

AIGC如何落地?超多项目拆解之UI设计篇

完整关键词:A shining badge with wings, Star, Badge logo, UI Design, Front view, Stereo, Bright. Black background, Digital illustration, Popular on Dribbble, noword, hyper detail, 4k --v 4

4. Midjourney 生成的图片

这里生成的细节并不好,主要是中间标志区域,会出现变形的问题,不过问题不大,我们是设计师,后期调整一下,调整吃力的我们就多跑几组图片即可。

AIGC如何落地?超多项目拆解之UI设计篇

5. 应用项目中的效果

AIGC如何落地?超多项目拆解之UI设计篇

四、闪屏页设计

淘宝闪屏页设计

这里我得到的需求是做一个淘宝 app 的闪屏页:设计一个具有亲和力和活力的大男孩形象,站在露营场景中弹吉他,搭配舒适、美观、吸引人的色彩和文案设计,以展示休闲娱乐和自然风光的美好。

1. 需求分析

我们分析需求的确定相应的元素,如露营场地,大男孩,弹吉他。

AIGC如何落地?超多项目拆解之UI设计篇

2. 参考借鉴

去素材网上参考一下,然后整理出素材图片,根据参考的图片得出相应的关键词。

AIGC如何落地?超多项目拆解之UI设计篇

3. 关键词描述

我们按照 midjourney 的词组顺序来描述,这里我按照第一张参考图的动作来进行描述

AIGC如何落地?超多项目拆解之UI设计篇

完整关键词:laughing child, symmetrical portrait, clear features, wearing a hat, rural summer, picnic, playing guitar, camping, tent, grass, flying a kite, hills, green, nature, poster, masterpiece, best quality, Pixar style 3d character, octane rendering, Hayao Miyazaki --ar 9:16 --niji

4. Midjourney 生成的图片

有些图片比较夸张了,不过问题不大,我们经过多跑图,进行筛选就好啦,这是个体力活....

AIGC如何落地?超多项目拆解之UI设计篇

5. 应用项目中的效果

AIGC如何落地?超多项目拆解之UI设计篇

五、直播礼物元素

3D 小元素设计

这里我得到的需求是做一个直播礼物的小元素,元素需要丰富、质感华丽、情感传达热烈、体型饱满。得到需求后我们去拆解相关信息,然后根据整理的信息去找到类似的参考,这里我根据找到的风格直接用 Midjourney 的“喂图”功能,然后输入需求相关的关键词并组合,如下:

1. 需求分析

娱乐 app 的勋章设计,元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。

AIGC如何落地?超多项目拆解之UI设计篇

2. 参考借鉴

参考来自花瓣,这种风格就是比较适合我们需求的设计,所以我们这里借鉴一下,把图片喂给 Midjourney。

AIGC如何落地?超多项目拆解之UI设计篇

3. 关键词描述

喂图之后还需要输入我们根据需求整理的关键词,把这些关键词和图片链接一起发送给 midjourney。

AIGC如何落地?超多项目拆解之UI设计篇

4. Midjourney 生成的图片

同样我们需要多跑几组关键词,才会有相对满意的图片,这里的风格主要受到喂图片的影响,多试试几次,然后找到合适的,后期处理一下吧。

AIGC如何落地?超多项目拆解之UI设计篇

5. 应用项目中的效果

AIGC如何落地?超多项目拆解之UI设计篇

六、B 端网页设计

b 端图标设计

这里我得到的需求是做一个 B 端网页设计:设计一个符合 UI 规范和标准、能够清晰传达出现代科技感并与产品整体视觉风格相符的网页图标,提升用户品牌认知和体验。

1. 需求分析

这类需求在 b 端中很常见,科技风的图标,符合品牌调性。

AIGC如何落地?超多项目拆解之UI设计篇

2. 参考借鉴

参考来自花瓣,这种风格就是比较适合我们需求的设计,所以我们这里借鉴一下,这里需要喂图控制下色调和视角,然后把图片喂给 Midjourney。

AIGC如何落地?超多项目拆解之UI设计篇

3. 关键词描述

喂图之后输入细节关键词,让关键词控制主体样式,这类图标的渲染器用 oc 渲染器,参考国外网站的风格就没啥问题了。

AIGC如何落地?超多项目拆解之UI设计篇

完整关键词:B2B 3D scenes, an operation center icon, white and blue, frosted glass, transparent technology sense, industrial design, isometric view, light gray background with simple linear detail, studio lighting, 3d, c4d, blender, OCrenderer, pinterest, dribbble, high detail, 8k --v 4

4. Midjourney 生成的图片

这类图标生成的图大部分没啥问题,细节稍微修修改就能用了,重要是细节是不是我们需要的,改细节的方式还是通过关键词控制即可。

AIGC如何落地?超多项目拆解之UI设计篇

5. 应用项目中的效果

AIGC如何落地?超多项目拆解之UI设计篇

写在最后

以上就是本期为大家分享的商业案例,我们可以将 AI 视作一个工具,为自己的工作带来增效,而无需感到恐慌和被替代的担忧。祝大家生活愉快!

本次教学分享到此结束,如果您有任何问题,可以与我私信联系:

相关资讯

AIGC落地实战!有赞如何用Midjourney提高设计效率?

一、项目背景 设计界总是一波未平一波又起,从区块链到元宇宙,这轮风开始吹到 AIGC,什么是 AIGC?AIGC 全称(AI Generated Content)是一种新型的内容创作方式。越来越多数字内容工作过程中,创作者需要不断地学习探索和创新,以满足不断变化的市场需求。(本篇文章只聚焦设计内容生成方向,不展开 ChatGPT 辅助研究能力) 二、AI 在有赞增长实验室实际设计业务中的应用探索 M2L 增长实验室(Marketing To Leads)包含了公域营销(增长工程、广告投放、渠道拓展)、内容营销(内容

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

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

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

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