AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图2

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图3

近一年 AI 技术不断发展,在产出的内容质量逐步提高的同时,AI 也开始支持生成更多形式、适用于更多设计场景的素材。不仅是图像还有可编辑的 UI 设计稿,最近还发现 AI 可以生成自带网页动画设计的设计稿了。今天就和大家一起看看「即时 AI」的这个生成网页的新功能实际效果如何,以及如何应用在我们的工作流程中。希望本文能对大家有所帮助! 先说句题外话,我是在尝试用 AI 生成 UI 设计稿时发现的「即时 AI」,当时还只能生成移动端设计稿。一个月过去,不仅支持生成 Web 页面,还迭代了一个新版本,生成质量明显提升,今天主要带大家体验的就是这个新版本。

「即时 AI」网站直达:http://mtw.so/5TJ7l5

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图4

首先,根据常见的业务场景选定两个主题,如:官网首页、产品详情页。 从以往的经验看,AI 能为 UI 设计提供较好的布局和结构参考,对于官网首页、产品页这些注重信息展示且结构灵活多样的页面,AI 的表现应该能更好。 ### 生成官网首页 接下来,细化文字描述。
  • 描述语:旅游网站官网首页,包含热门旅游线路推荐、当季景点推荐、旅游咨询、客户评价、我们的团队等。

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图5即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图6

图标、文本的匹配度还可以提升,但整体效果不错,文字描述中提到的模块都有提到,还根据旅游主题增加了一些相关内容。

生成产品详情页

再来试试产品详情页,最近 Vision Pro 非常火,试试以 VR 头显为主题生成一个产品详情页。
  • 描述语:一款 VR 头显的产品详情页,包含产品参数、价格、购买方式、相关产品推荐等模块。

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图7即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图8

尝试生成了一次,效果很令人惊喜!比旅游网站的主题发挥的更好(也许是 AI 可参考的素材更多),不仅补全且丰富了产品介绍,而且提供了不同的布局和组件样式。如果真的要做 VR 头显设备的详情页,将 AI 产出的设计稿中的产品参数、价格、品牌 logo 等略作修改,已经能达到可用状态了。

自定义主题色+精准生成暗色模式

这两个功能点是算是半偶然发现的。使用过程中发现 AI 每次生成的 Web 设计稿,主题色虽然都是蓝色系但具体的色值不同。看了下预设描述语,发现有这样的关键词【主题色#A5D63F,深色模式】。 即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图9即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图10 使用这个参考描述语试了一下,确实可以生成指定主题的 4 张深色模式设计稿。按照这个格式,输入任意 HEX 色值,可以稳定控制 AI 生成我们常用主题色的网页设计稿,实用性更高了!

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图11即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图12

复制链接到 PC 端打开:http://mtw.so/5TJ7l5


即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图13

研究了一下,这个功能不需要输入特定描述词,只要使用「即时 AI」的 JS-UIbotics 模型生成 Web 设计稿,就可以自带全套网页动画

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图14即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图15

实测效果如下,滚动页面查看,各个模块衔接顺畅,整体动画效果非常丝滑。

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图16即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图17

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图18即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图19

操作也格外简单,选中「即时 AI」生成的设计稿,右上角点击【发布网页】就可以一键发布上线,生成可以在线查看的网页,而且带全套动画。

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图20

这个功能实在是太实用了,从生成设计稿、到发布上线、再到展示动画效果,只需要在最开始输入一句描述,再点击一个发布按钮。就能帮设计师省下绘制初稿的时间、帮前端省去手写代码还原页面的时间,直接得到一个可以在线查看的自带动画的网页。 如果后续能进一步开放这个“一键发布上线”的功能,且设计稿都能高度还原的话,完全可以帮设计师们省去反复走查的时间。

即时·AI 新能力速览 | 一句话让 AI 生成自带全套动画的 Web 设计稿 - 图21

总的来说,「即时AI」这次更新的功能确实让人非常惊喜。

AI 能生成可编辑 Web 设计稿在预料之中,但效果之精美很出人意料。此外,主题色、暗色模式可通过输入描述语控制,大幅提高了AI 生成的可控性与 AI 设计稿的实用性。而且在我看来“提升可控性”是所有 AI 设计工具的发展趋势,现在可以控制颜色样式,以后也许就能控制使用特定组件库,甚至让 AI 用企业/团队自己的设计系统完成创作。 “一键发布网页且高度还原动画效果”这个功能和「即时AI」放在一起效果确实很令人惊艳,进一步扩展了 AI 工具的使用场景,在“设计原型动效”、“预览线上效果”这两个重要环节为设计师们提供了更简便的方式。如果在他们的设计工具「即时设计」里面使用,应该能发挥出更大的价值,期待即时设计后续的动作。 希望今天这篇文章能对你有所帮助,对 AI 生成自带网页动画 Web 设计稿感兴趣的同学们,一定要去试试!

「即时 AI」网站直达:http://mtw.so/5TJ7l5