用AI绘制成套UI设计稿！10分钟搞定3版方案
AI 的热度一直居高不下，AI 产出的图像、文本在经过设计师、内容创作者的完善与修改后，被应用在更多的场景中。即使面对更要求秩序感、更注重业务需求与用户体验的 UI 设计，AI 人工智能也能提供越来越多的帮助，让设计师的工作变得更简单、更快、更轻松！本文将介绍如何将 AI 技术应用于 UI 设计流程中，以及这种结合对业务和团队的价值。
首先要明确想让 AI 帮助完成 UI 设计整个流程中的哪些环节。如 Midjourney 那样直接产出完成度极高、略微修改就可以使用的图像不太现实。我们可以给绘画作品分类，规定风格、流派、类型，但无法给 UI 设计设定类似的规范。
从方案到最终成稿交付，环节中各个功能的设置、按钮的设计、交互的形式、动效的安排，都需要结合业务需求、考虑用户体验，具有极强的不确定性，不同类型产品之间也存在很大的差异。
如果我们尝试用 Midjourney 等绘图工具生成，画出来的东西只能看看布局、框架、情绪板，有时候还会画出一些过于炫酷，实际上根本没办法落地的效果。
所以目标是，让 AI 帮我们完成前中期的页面结构探索、框架搭建，并提供部分可参考的组件。
这次还是选择专注做“AI 生成 UI”的「即时 AI」工具，不仅能根据文字描述生成可编辑的 APP/Web 设计稿，还上线了“生成整套 APP/Web 界面”的新功能，妥妥满足快速出整套设计参考的需求。
「即时 AI」官网：https://jsai.cc/ai/create
先简单试一下“生成整套页面”的效果，选生成速度更快的 JS-UIbotics 模型。
输入描述语：生成一个出行 APP
等待几十秒就得到了如下 4 个页面：
-
首页：金刚位包含了多种出行方式，还展示了天气情况；
-
酒店预订：可以根据入住城市、时间查找房源，下面还有推荐的酒店；
-
行程列表：展示了推荐路线、用户评价、热门旅游目的地
-
行程详情：体现推荐路线的基本信息和亮点
简单输入一行字就能让 AI 根据“出行 APP”这个主题生成多个有关联的页面，比我自己用组件库搭建页面还快得多，又省去了绞尽脑汁思考包含哪些模块、具体都什么内容的时间。
同样的关键词再点几次【开始创作】，多套参考方案轻松到手。
而且这些都是可二次编辑的设计稿源文件，给甲方和领导看过方案、收集到反馈后，还可以在此基础上继续修改完善，减少前期方案探索的时间精力浪费。
用过 AI 绘画工具的都知道，需求描述的越详细，AI 生成的作品越细节，使用「即时 AI」这款文字生成 UI 设计稿的工具也是一样。
用即时 AI 生成简单方案，完成初期的设计沟通并收集到足够反馈后，节省下来的时间可以继续细化描述语，控制 AI 生成每个单页的内容与结构，提供更贴近目标方案、修改成本更低的设计初稿。
这次用的是风格与内容结构更多样的 JS-Inno 模型，以生成阅读 APP 为例：
生成一个阅读 APP，要求包括登录页、首页、阅读页、书籍详情页、我的页，共 5 个页面，蓝色主题：
登录页中登录方式包括手机号登录、微信登录
首页中包含推荐书籍、热门书籍等
阅读页中展示阅读器及阅读器操作按钮
书籍详情页中示例书籍为余华的《第七天》
我的页中展示阅读历史、订单、阅读数据统计等内容
虽然 JS-Inno 这个模型绘制的设计稿样式比较简单，但内容足够丰富，且可控性非常强。按照这个逻辑又试了几套关键词，页面数量、页面主题、页面内具体包含什么内容，都是可控的。
简单来说，只要以结构化的方式、足够详细地描述你的需求，即时 AI 就能一步步做出你想要的设计参考。
如即时 AI 这类可以生成整套逻辑相关 UI 页面的 AI 设计工具，对设计团队也有着巨大的帮助。
创意参考：AI 设计工具能够利用智能算法快速生成多样化的页面结构与布局，激发设计师的灵感，拓展创意的可能性。
辅助沟通：AI 能在项目初期提供多样参考，帮助团队成员高效沟通、确定方向。
效率提升：即时 AI 提供的不仅仅是一个参考、一个示例、一个只能看看而已的图片，它生成的是多张逻辑相关、可编辑、分层结构清晰、主题色彩可控的页面，使用 JS-UIbotics 模型创作的页面还包含了部分原型设计。总的来说，是一个完整度很高的参考方案。
总而言之，与 Midjourney 等工具直接提供图像素材不同，AI 在 UI 设计领域的应用更多是对流程的优化、对现有团队协作效率的提升。让 UI 和 UX 设计师们可以将更多精力放在研究用户和研究业务上，去提升我们解决问题、给出合理方案的能力，这些才是最重要也最核心的。
「即时 AI」官网：https://jsai.cc/ai/create
扫码进群
转载时请连同下方内容一起转发
请与该公众号联系获取内容授权
长按二维码 轻松关注
微信公众号：i58UXD
58同城用户体验设计中心
