热评 解决师Blue

从结果上来看,大部分UI辅助的都是图标应用的案例,可以反向推导一下,还可以应用到手机应用主题类型的UI上。 另外,如果可以产出引导页的设计,那么B端的使用是不是就不仅仅局限在在网页图标上,要知道,B端在单一场景下可以落地使用,但只是局部使用,真正B端应用广泛的视觉还是整个项目的插图系统,在设计具体的插图时,我们需要根据插图的内容、类型、价值以及应用场景等因素生成不同的元素的组合,合理的安排画面结构。

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如何落地?超多项目拆解之UI设计篇

收藏 192
点赞 52

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。