想想第一次制作网页设计还是十年前的事情了。网页的制作工具经历了Photoshop,sketch,figma,再到现在的AI直接生成。

这些工具的变迁,也是科技的变迁。从最开始的用Photoshop来制作网页,非常繁琐的手动标注页面,人工切图。到sketch开始自动化标注切图。还记得2017年的时候组织翻译的原子设计,然后慢慢的UI工作流开始越来越组件化,UI设计工具也把组件化整合到了工具中。

再后来就是AIGC兴起,界面设计工具再一次变迁。

最近的设计工具基本全面在拥抱AIGC,但是对于UI设计来说,这条路并不好走。一开始大家会延续文生图的思路,都是走文字一键生成页面的模式,但是对于大部分的真实产品工作流,UI设计是一个需要结合产品,原型,用户调研,每一步都需要数据支撑很严谨的事情。

跟文生图的那几个工具类似,便捷还是可控是每个产品都需要思考的关键点,一边是人人都可以快速学会使用的midjourney。另一边开源的 stable diffusion 深入到了各个细分的工作流之中。

AIGC让人人都是UI设计师还是让现在的UI设计师解放生产力,是两条不同的解决方案。而这两种不同的解决方案代表的产品目前有:

1、文字直接生成页面

国内的代表产品是即时设计,国外的是uizards,但是目前免费可用的只有即时AI。文字直接生成页面的方式基本上完全颠覆了过去的工作流,也是目前最快速生成页面的方式,最新的即时AI生成一个页面只需要30s。

2、AIGC完善界面设计工作流

最近的代表就是figma的AI设计工作流,很好的把现在的AI的功能结合到了现有的产品里,而且这个工作流从创意到最后前端代码都有涵盖。在figma发布他们自己的AI之前就已经有很多搭载在其中的AI插件了,这一次figma把这些插件全部都整合在一起了。我们还能在里面看到今年年初拿到融资的设计白板类AI工具fabrie的影子。

因为figma的AI还没有真正的发布,下面的案例是用即时AI的最新功能测试的。

  一键生成时尚网站

这次使用的工具是即时最新推出的web页面的生成功能。目前免费,每天有20次的体验次数。

体验网址:https://js.design/ai

官方介绍:「即时 AI」能力进阶!自带网页动画,30s 生成更精致的 Web 设计稿!

官方文档:https://fyze31atzb.feishu.cn/wiki/GNCTwKHmyinCMIkN8e5c18E0nvg

Prompt:类似vogue官网页面,简洁,大胆的设计风格,黑白主题。

模型选择:JS-UIbotics,这个模型的生成速度明显加快,只需30s,并且组件化的规范程度也更好。

点击生成页面后,只需30s,就可以得到四个不同样式的网页。

说实话这次生成的页面还挺惊喜的,几乎可以直接用了,无论是图片,文字还有布局都没有什么问题。

现在开始感受到甲方爸爸和老板们的快乐和痛苦了。我发现很难选择,选择太多也是坏事。生成好的页面可以点击编辑来修改里面的内容。你可以把自己的产品图片和文字替换上去。

作为一个看效果的demo,我暂时不对里面的内容进行修改,到这一步已经足够了。

到这个阶段还可以直接生成所有人可以预览的网页链接。选择你要发布的页面然后点击发布网页即可。发布后如果还需要修改内容,还可以继续更新页面。我选择了第一个生成进行发布,大家可以直接扫码查看效果。

网页的动效我录了个小视频,非常的顺畅,这也是惊喜的地方。

关闭
观看更多
更多
退出全屏

视频加载失败,请刷新页面再试

刷新

可控页面颜色

AI的文生图领域一直以来有个挺大的问题,就是无法生成准确的色值。Midjourney 和 stable diffusion 都是如此。但是对于设计师来说颜色的控制又特别的重要,尤其是UI设计师。

这次的即时AI把主题色也加进去了,可以直接通过描述词来控制页面是深色模式还是暗色模式,以及设定主题色的具体色值。

下面这个页面就是试图生成主题色是#A5D63F,深色模式的时尚网站。

可以看到 icon 按钮以及链接文字都变成了主题色。

当我们点击编辑后,可以看到颜色样式里的主题色已经被系统的设置好。

点击编辑颜色可以看到色值就是提示词里写的 #A5D63F

并且可以一键替换主题色,效果如下。

关闭
观看更多
更多
退出全屏

视频加载失败,请刷新页面再试

刷新

生成式UI的应用场景和未来

优点:

对于没有UI设计经验的普通人极大的降低了使用门槛,简化了设计流程,同时提升了速度。并且目前的效果已经基本可以直接拿去用了,生成页面的设计效果要好于不少初级的UI设计师。

人群:使用的人还是需要了解UI的专有名词,比如深色模式之类的,纯小白用户并不适用。程序员和产品经理

的群体会更适合,我的周围的程序员朋友也非常喜欢这类产品。

对于专业的UI设计师来说,复杂的页面还需要调整,不过也节省了不少时间。我能想到的应用场景其实主要在老板经常要求的一天出高保真页面。现在可能几分钟就可以实现。

如果单纯用现在工具满足设计师实际工作的角度来说,针对性的插件或者即将发布的 figma AI 可能会更符合设计师们的需要。但是如果往长远去想,UI设计这个工作也不过才出现和普及十年左右的时间,最近的一批基本上是依托于移动互联网的热潮下的。我们现在使用的网页也好,APP也好,都是因为技术的局限无法跟机器自然的交流而存在的。

而在大语言模型的冲击下,人类跟机器的交互会越来越接近自然的人与人的交互,那么下一代的界面的UI是什么?以及是否还有现在意义上的UI?其实都是一个问题。在没有人知道答案的情况下,颠覆性的创新反而可能是更正确的选择。

同时AIGC带来的工作流的改变也会直接影响设计师,产品经理,这些职业职能范围的变化。其实这点在前几年已经发生,如果产品设计的流程被工具极大的简化了,那么可能从产品到设计再到前端只需要一个人,产品团队的人数会大大的减少,而产品迭代的速度会大幅的加快。

过去的半年,视觉设计的工作流已经被颠覆了,接下来要轮到UI设计了。