速来!手把手教你用AI完成UI界面设计

晨星技术说

晨星技术小课堂第二季

谭同学

- 联想晨星用户体验设计师

-【晨星小课堂】讲师

通过简单、清晰的语言描述就能够用几十秒自动生成一组可编辑的UI界面，AIGC对于UI设计师而言已经逐步发展成了帮助我们高效地进行设计的“好帮手”。

之前AIGC所生成的内容，更多的集中在文字、图片、视频、音频等领域，而现在AI已经“进化”到能够快速生成UI设计稿了，这是AI和具体职业结合地更加垂直的应用。

下面，我们将对比两款AIGC设计工具，来看看“AI设计师”的能力边界。

即时AI

先说说一款国内的产品——即时AI。它是一款适合新手的国产云端设计工具，与国外的一些云端设计软件相比，它不需要开VPN，且页面完全使用中文。

01

两种算法模型，各有所长

即时AI目前有两大生成模型，JS-INNO和JS-UIbotics，对应不同设计需求，在生成AI前，需要选择对应的生成模型。

两者的侧重有所不同，可以说各有所长，适合不同的需求。

- JS-INNO模型

在简单的文字描述下，它能够生成的AI内容丰富、风格多样，但是缺点在于排版随意，缺乏细节，可用性不高，只能当做提供设计灵感与思路时使用。

- JS-UIbotics模型

JS-UIbotics模型生成的设计页面拥有更规范的布局、组件、图标、字体、结构功能。梳理清晰、形成初始UI稿，再通过简单的二次编辑，可快速组合页面元素，产出可用页面。

尝试了两种算法模型后，我们发现对于想要用AI来辅助UI界面设计的情况，更推荐使用JS-UIbotics模型，它所输出的界面布局更规范，结构功能更清晰，能够大致搭建界面框架，节约后续设计的时间。

02

以“文”成图，效果如何？

能够通过文本描述自动生成界面是目前该软件的最大特点，与ChatGPT一样，在使用时需要掌握一些技巧和方法，文字的描述目前支持随机输入与自定义两种模式。

- 随机输入

在文字输入区“/”或点击左下角骰子图标，获取文字描述灵感。

- 自定义文字输入

分为两类结构：概括型、明细型

1）概括型描述结构：主题描述+页面类型

比如，我们输入：生成信息科技公司官网APP的首页，就会自动生成如下的界面。

2）明细型描述结构：主题描述+页面类型+布局+模块内容，同样是科技公司APP的首页，我们可以选择如下的表述方式。

如：生成信息科技公司官网APP的首页，首页内容以介绍公司为主，包括技术、产品、解决方案、领域、事迹、合作客户等模块。

对比上述两种输入方式，我们可以发现明细型所输出的内容更符合我们的需求。对于AI来说，提示词是与他们沟通的桥梁，我们要尽可能地用清晰、精准、言简意赅的方式描述需求，才能让AI快速且准确地识别我们的需求。

当然，目前在当前AI功能的限制下，画板大小、页面风格、插图、图标等内容暂不支持自定义。所以，我们要注意：

① 文本输入时，需要编写重点，尽量不要描述功能；

②描述模块、内容，字数过多时模型会忽略多余的内容，对于否定句，模型理解能力价差，描述时需要排除“没有”“不要”等词语使用，文字描述越简单清晰，模型理解就更好。

下面是官方说明中我认为最重要的几张提示图，希望给大家参考：

综合使用下来，我们的评价是：虽然它投入使用不久，但它的表现已接近初级UI设计师的水平，依旧有许多进步的空间，且对于手稿生成原型、图生图的功能尚未开放，但相信等待到所有功能上线后，它能够有效地减轻设计师的工作量。

UIzard

UIzard是一款由韩国开发的在线无代码AI软件开发工具。

与上一款软件相比，它可以自动将用户的手绘草图转换成对应的UI设计元素，并提供相应的交互效果和动画效果。支持屏幕截图转换为可编辑的设计等。

① 通过扫描的方式，将手绘的原型草图自动转化为UI

通过这种方式，我们可以更快地创建和修改UI，节省时间和成本、提高设计效率。

② 同时，它也支持将UI自动转化成原型草图

可快速生成可编辑交互原型，更方便对界面进行优化调整，提高交互设计效率、易于迭代和修改。

③ 屏幕截图也可以自动转换为可编辑的设计

设计师可以快速获得所需的素材并对其进行编辑和修改，减少繁琐的画图时间，提高工作效率。

④ 使用AI，一键替换设计风格

在短时间内获得不同类型的设计方案，避免重新设计风格，节省时间和精力。给设计师提供更多的思路，客户也可以更快速地确定自己想要的风格。

⑤ 它也可以和即时AI一样，通过简单文本描述的方式自动生成用户界面

设计师可快速将设计意图传达给相关人员。节省大量时间来创建设计原型。为设计者提供灵感和多样化的设计思路。

UIzard的功能已经十分完备，但它仍然存在一些不足之处，比如：

1.对于复杂的手绘草图或者非标准的设计元素，UIzard可能无法准确识别和转换，并需要进行后续的手动调整；

2. 在UIzard中，一些高级功能和调整选项需要用户具备一定的UI设计知识和经验才能灵活运用，对于新手用户来说可能需要一些时间和实践。

3. UIzard目前是基于云端平台的，需要稳定的网络连接和较快的数据传输速度。同时，如果上传较多的手绘草图会占用较大的存储空间。

总的来说，UIzard是一款非常实用的UI设计工具，而且通过官方提供的指导视频能够快速上手，对于拥有一定UI设计经验的设计师而言，它是一款能够帮助我们快速提高工作效率的平台工具。

对于一名UI设计师而言，我试用了多款AI工具来辅助设计，这些工具大多能够完成一些初级工作，甚至可以在短时间内生成大量的设计稿，极大地提高了设计效率。

但与此同时，我也深切地感受到了UI设计的难点不在于生成界面，而是在于页面之间的跳转、元素及上下文之间的逻辑关系，如何为客户提供更好地使用体验。

作为面向UI设计领域的AI设计工具还有很多技术难关需要被攻克，比如用户研究与体验设计、创意设计及细节处理方面，这些问题需要设计师针对性的进行补充，以实现更好的设计效果。

在未来，AI需要更懂用户思维，更具备创新能力，由此，AI在未来的发展趋势将会更加智能化和自动化。

而对于产品经理、UI初级入门设计师而言，用AI设计工具做原型，或者创作一个参考的基础页面为后面的排版设计起引导作用等还是能够带来极大地便利性的。

（* 部分图片来自网络，侵删）

欢迎提问

亲，看了上述的内容是否你是否对AIGC对于UI设计工作的价值有了大致的理解呢？

还有什么关于本文的问题,欢迎在评论区留下您的问题~