另一份给大家的个人网站
深圳/UI设计师/30天前/391浏览
版权
另一份给大家的个人网站
开局一张图，拆解AI全流程个人网站的制作
这是我趁工作之余做的一份测试，起初之余只是一张图片，通过AI技术将图片优化，然后再AI做视频，最后用codex进行代码实现，下面跟大家分享一下过程（由于这个只在本地部署，没必要上传github，所以只能够给大家截图了）：
当然，在分享之前，先看下实际效果（动图只是简单展示下交互的丝滑）
下面是具体的步骤展示：
用AI简单做一个素材图，然后对图片进行处理，不拘泥于AI软件，自己习惯哪个用哪个，下面是最终的效果图：
但其实我的建议更偏向于做简单的一个视觉场景
- 一方面是加载负担的问题（因为后期如果想要分享给其他人查看的话，加载负担是绕不开的一个事情，对方的网络情况谁都说不准是好是坏），
- 另一方面就是各种情况下的可控性（元素多的情况下，就需要考虑的因素也更多，比如是否会抢占自己的项目展示，因为个人网站的本质目的就是为了展示自己所做的项目）
言归正传，接下来很简单，用AI视频软件去做动态效果，我使用的是seedance模型
这里最重要的是要收尾帧衔接，其实我的测试版视频是有瑕疵的
然后就可以在这之上去给codex下指令，做交互，重点在于怎么去形容自己的交互形式，然后进行不断的更改，优化
至于说交互层面，我觉得这个就要看各自的想法，该怎么实现就怎么形容就好，但我的理解好的交互一定是丝滑的，不会有任何繁杂和卡顿的效果肯定是首位
这个办法不仅适用于我们当前的使用场景，还可以发散一下思维，比如做一个主体物的眼神跟随鼠标悬停注视的效果，或者一些简单的沉浸式交互场景，都是可以的，他们的解决原理都是这样子
这次分享的就这么多了，其实我觉得最重要的还是要看设计师的思维，毕竟好的设计从来都不是技术的各种堆砌，而是对设计师思维的考验
3
举报
声明
2
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
你可能喜欢
相关收藏夹
登录注册
3登录即可同步推荐记录哦
2登录即可加入我的收藏
评论登录即可评论想法
分享分享