惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog RSS Feed
J
Java Code Geeks
C
Check Point Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Google DeepMind News
Google DeepMind News
阮一峰的网络日志
阮一峰的网络日志
Engineering at Meta
Engineering at Meta
Blog — PlanetScale
Blog — PlanetScale
D
Docker
H
Hackread – Cybersecurity News, Data Breaches, AI and More
月光博客
月光博客
I
InfoQ
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
A
About on SuperTechFans
L
LangChain Blog
腾讯CDC
Y
Y Combinator Blog
MongoDB | Blog
MongoDB | Blog
Vercel News
Vercel News
MyScale Blog
MyScale Blog
博客园 - Franky
IT之家
IT之家
博客园_首页

博客园 - 且行且思

Win11 家庭版 远程桌面连接-突然发生身份验证错误,(错误代码: 0x800706be) — 通过添加windows凭证解决 Cesium 加载 3dtiles ,实现球体旋转、模型定位 Tomcat服务自动关闭 , 定时检查并重启 用echarts打造会转的立体饼图 BaseMetas Fileview在线文件预览解决方案 ECharts GL | 3D 地图区域高度设置 物联网智慧平台 蚂蚁地理空间数据可视化 - 基于 WebGL 的开源大规模地理空间数据可视分析引擎。 主流开源JS地图框架选择 kk-anti-reptile 是适用于基于 spring-boot 开发的分布式系统的开源反爬虫接口防刷组件。 NProgress 给 Vue 路由切换加个 “假” 进度条提升用户体验 一个watch让页面卡成PPT? 只会 !important 改 UI? Vue 深度选择器解法 JAVA 对于class文件反编译,CFR 通常能产生最完整的代码。 免费白嫖Claude 4小技巧 Jmeter压测工具入门篇 性能工具之 JMeter 快速入门 高并发压力测试工具清单 Nginx 单机多实例负载均衡 IntelliJ IDEA 中 Shared Build Process Heap Size 的重要性与配置 微信小程序实现流式传输(打字机效果)
用AI辅助设计登录页
且行且思 · 2025-10-23 · via 博客园 - 且行且思

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