# 【教程】MJ生成UI设计元素
消耗0碎片

 

06c7dd1a-5a79-4e87-a7d9-6cb39b516b8e.jpg


作者:言川Artie



AI 绘画在工作中的流程


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


同样,在使用 AI 工具时,我们的工作流程并没有发生改变,改变的只是我们出图的效率以及效果,比如我们在经过分析和找到参考后,我们进行设计时,会花费大量的时间进行设计。


而现在,AI 绘画完全可以帮助我们进行设计,我们只需要进行关键词的调试,即可短时间做出不错的设计,我预计可以提升大概 60%-70%的设计时间(这里还只是保守估计)。


往期教程:


6114d496-f13c-4649-a2d3-552728422054.jpg


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


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


918aee28-007e-4ba1-8136-edd68e402d34.jpg


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


二、引导页设计


医疗 app——扁平插画风格


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


1. 需求分析


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


b0775d64-5c0b-4d81-b9e2-7bbbc6a71d7a.jpg


2. 参考借鉴


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


0cd205f4-65b0-42ae-ac81-ef1c98bf5a7b.jpg


3. 关键词描述


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


6de4b4cf-f057-4a2a-ba06-6c264bd2e07a.jpg


4. Midjourney 生成的图片


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


5f090cdb-8e3d-4aa9-a1c1-2092f65ec119.jpg


5. 应用项目中的效果


27d2378c-03ac-4365-ab45-62fa07b9001d.jpg


三、勋章设计


成就勋章设计


这里我得到的需求是做一个娱乐 app 的勋章设计,元素需要丰富、质感华丽、情感传达热烈、体型饱满、勋章精致。


得到需求后我们去拆解相关信息,然后根据整理的信息去找到类似的参考,这里我根据找到的风格直接用 Midjourney 的“喂图”功能,然后输入需求相关的关键词并组合,如下:


1. 需求分析


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


5e4981f3-a7cf-4ba8-adc3-e28381698d24.jpg


2. 参考借鉴


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


ac50d690-6440-4eaf-89a6-6d850b9e2f6b.jpg


3. 关键词描述


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


08290259-18dc-4e63-a993-8c2ed8f892c6.jpg


完整关键词: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 生成的图片


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


1ee2cbd4-58b1-4dab-806e-8e995b08e0ab.jpg


5. 应用项目中的效果


0d956842-8839-410f-84ac-19c9a8da2f1c.jpg




写在最后


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


祝大家生活愉快!