AI视觉创作

为什么AI做的UI总有一股塑料感?这6个问题是关键!

完整内容
为什么AI做的UI总有一股塑料感?这6个问题是关键!

一、全文速览图

为什么AI做的UI总有一股塑料感?这6个问题是关键!

相信很多同学现在都听过一个词叫“AI 味”,即使用 VibeCoding 生成出来的界面一看就是 AI 做出来的塑料质感,毫无特色,如果要作为正式设计产物的话显然是不合格的。

所以今天的主题,就要解释 VibeCoding 中的 AI 味究竟是什么。

二、AI 味儿的正确定义

当我们进行 VibeCoding 开发程序时,AI 会自己完成前端界面样式的设计并开发出来。而这个界面的样式就是 AI 味的来源。

为什么AI做的UI总有一股塑料感?这6个问题是关键!

虽然我们能识别 AI 味,但很难讲清楚什么才叫 AI 味,如果不能清晰定义它的特征,你也就不知道应该怎么优化它。

所以下面我们把 AI 做的前端界面设计问题做个总结:

二、问题 1:规范错误

第一个问题就是规范问题,比如顶部状态栏、底部导航栏的尺寸位置是错的,或使用的字体、字号不对,按钮的尺寸不符合移动端的标准等等。

AI 设计移动端界面是以网页设计的标准模拟出来的,并没有把相关规范准确应用进去,如果没在提示词中进行严格的指定,那么设计出来的结果就只是 “看起来像 App” 的响应式网页而已。

为什么AI做的UI总有一股塑料感?这6个问题是关键!
为什么AI做的UI总有一股塑料感?这6个问题是关键!

三、问题 2:圆角泛滥

第二个问题就是圆角问题,桌面端网页做圆角因为画布大造成的问题就比较小,但在移动端屏幕中,圆角的感知是被放大的。如果出现了很多大圆角,且圆角各不相同,对视觉的负面影响就会加大。

为什么AI做的UI总有一股塑料感?这6个问题是关键!
为什么AI做的UI总有一股塑料感?这6个问题是关键!

四、问题 3:字体滥用

第三个字体问题也很突出,移动端设计不是不能用别的字体,但通常会很克制,只在必要的情况下使用。而 AI 生成界面时就并没有这种顾虑,表现得非常随意。

而这并不是问题的核心痛点,真正的痛点是 AI 把英文的排版逻辑和字体参数套在中文上的。尤其是大标题的应用,以苹方为主的中文字体的粗体笔画都很细,没办法像 Helvetica 有粗壮的笔画去形成有效的视觉重心。所以专业的设计案例中是会避免这类问题的,这也是中文应用很少使用苹果官方布局规范的原因。

为什么AI做的UI总有一股塑料感?这6个问题是关键!

五、问题 4:效果乱用

这里的效果指视觉效果,包括描边、渐变、投影、背景模糊等等。AI 在缺乏有效风格引导的情况下会刻意添加这些效果,所以会形成过度的设计,视觉观感并不好。

为什么AI做的UI总有一股塑料感?这6个问题是关键!
为什么AI做的UI总有一股塑料感?这6个问题是关键!

六、问题 5:配图塑料

还有一点就是配图的问题,这一直是 UI 设计最大的痛点之一,想要做好配图靠的不是技巧而是认知、审美、经验这些比较抽象的要素的组合。而 AI 填充配图虽然能根据场景去找素材或是直接给你生成,但效果依旧很有限,即使最优秀的生图工具也能让你一眼看出来这是 AI。

AI 感的界面叠加 AI 图,看起来就越没有“活人感”,那就是一个 Fake App,可以说配图就是现阶段最不应该让 AI 参与的环节。

为什么AI做的UI总有一股塑料感?这6个问题是关键!
为什么AI做的UI总有一股塑料感?这6个问题是关键!
为什么AI做的UI总有一股塑料感?这6个问题是关键!

七、问题 6:动效失调

最后一点是很多新手或非专业设计师完全没意识到的问题,那就是动效应用是错误的。不管 iOS 还是安卓,页面之间的跳转有接近公约的模式,比如底部导航之间跳转是无效果的,进入内页会使用左右推动叠加的模式。

但 AI 会比较随机去生成动效,虽然整体操作起来可能感觉完整不少,但错的就是错的,只会让你在感觉不错的同时又“总觉得哪里不对”。

为什么AI做的UI总有一股塑料感?这6个问题是关键!

以上几点就是 AI 味形成的核心原因,这不是 AI 模型设计水平的问题,即使设计效果最好的 Claude 或 OpenAI 也无法避免这些错误,它们只是用了一定专业的设计方法在输出错误的设计而已。

用一句话总结 AI 的界面设计效果就是:

一个初级设计师・按英文网页设计的标准・过度设计・中文的移动端界面

八、结尾

时间关系这篇分享聚焦在定义 AI 味上。而更重要的是如何减少或解决 AI 味,这部分就放到后面的更新里了。

提前强调一点,就是不管我们怎么做测试,想要解决这个问题都需要你掌握 UI 相关的设计基础,去介入设计细节的决策,只靠 Skill 和提示词是远远不够的。

我们下篇再贱~

资料附件

当前教程暂无附件。