明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

用AI辅助设计登录页

Posted on 2025-10-23 10:43  且行且思  阅读(4)  评论(0)    收藏  举报

UI设计中登录页属于不可或缺的页面,也是结构相对简单的页面,往往需要占据较大空间的插画支撑,这就给AI生图较大的发挥空间。

图片

工具介绍: 

图片


pinterest   https://www.pinterest.com/    国外图片灵感库
huaban     https://huaban.com/    国内设计灵感库
gemini      https://gemini.google.com  国外豆包,用于文生图、图生图,生成视频
豆包         https://www.doubao.com/  国内工具,提供文生图和修图能力
星流 AI    https://www.xingliu.art/ 用于处理图片:高清放大、去除背景、局部调整


操作步骤

1、设定场景和风格,如果没有灵感我们也通过询问AI得到启发

2、找参考图,场景、风格

3、使用AI生成大致效果

4、微调细节,处理一些不理想的细节

5、使用图片搭建登录页效果

6、尝试把图片变成动画,由于视频目前无法做局部二次编辑,我们需要消耗更多的资源,用此需要在保证前面步骤生成的内容足够好的前提下,才开始做这个工作。

 

需求分析

 

系统名称:鞋业生产全生命周期管理系统

 

内容设定:生产车间,办公,流水线,女士鞋

 

风格设定:等距场景,低几何体

 

实践过程

 

1、设定场景和风格

 

这个案例涉及到鞋业的生产,那么通过一个简易的生产流程场景,就能比较具象地表达全生命周期这样一个过程。

 

以“场景科技生产线”为关键词,在pinterest可以搜到以下的参考内容:

图片

 

1、经过筛选,选定了以下主体和风格

 

 

图片

 

2、借助豆包或者gemini合并两张图片,在此过程可能需要经过若干次重试,直到大体内容达到满意的效果。

图片

 

3、然后就是不断的微调过程,与AI不断互动调整,以下是跟豆包不断交流调整的过程。

图片

 

4、画面调的差不多了,就上传到星流AI中高清放大;为了得到更加纯净的背景色,我还使用了“去背景”功能。

图片

 

5、将去除背景的主体放到Photoshop里进行编辑,保留主体的底部阴影,导出一张没有透明背景的png图片,就可以进行登录页面的制作了;如果还打算继续把图片处理成视频,则可以加个纯色背景后导出。

图片

 

6、导出的图片放到Figma原型工程,看看登录页面效果,貌似还可以。

图片

 

7、通过豆包或gemini的veo3,就可以快速将图片变成视频

图片

 

8、视频放到登录页面中,并加了个保险,如果浏览器不支持就还是用回原本的图片,最后效果如下。

640