技术圈首页 程序员 解决方案 聚合短信
APP下载 注册
首页 文章详情

用AI绘制成套UI设计稿！10分钟搞定3版方案

三分设 | 8 2023-10-12 23:22 0 0 0
UniSMS (合一短信)


点击 ▲ 三分设 关注，和 10 万设计师一起成长

三分设 x 58UXD

正文共：2113 字 22 图 预计阅读时间：8 分钟



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 个页面：

  1. 首页：金刚位包含了多种出行方式，还展示了天气情况；

  2. 酒店预订：可以根据入住城市、时间查找房源，下面还有推荐的酒店；

  1. 行程列表：展示了推荐路线、用户评价、热门旅游目的地
  2. 行程详情：体现推荐路线的基本信息和亮点

简单输入一行字就能让 AI 根据“出行 APP”这个主题生成多个有关联的页面，比我自己用组件库搭建页面还快得多，又省去了绞尽脑汁思考包含哪些模块、具体都什么内容的时间。

同样的关键词再点几次【开始创作】，多套参考方案轻松到手。


而且这些都是可二次编辑的设计稿源文件，给甲方和领导看过方案、收集到反馈后，还可以在此基础上继续修改完善，减少前期方案探索的时间精力浪费。




用过 AI 绘画工具的都知道，需求描述的越详细，AI 生成的作品越细节，使用「即时 AI」这款文字生成 UI 设计稿的工具也是一样。

用即时 AI 生成简单方案，完成初期的设计沟通并收集到足够反馈后，节省下来的时间可以继续细化描述语，控制 AI 生成每个单页的内容与结构，提供更贴近目标方案、修改成本更低的设计初稿。

这次用的是风格与内容结构更多样的 JS-Inno 模型，以生成阅读 APP 为例：

生成一个阅读 APP，要求包括登录页、首页、阅读页、书籍详情页、我的页，共 5 个页面，蓝色主题：
  1. 登录页中登录方式包括手机号登录、微信登录
  2. 首页中包含推荐书籍、热门书籍等
  3. 阅读页中展示阅读器及阅读器操作按钮
  4. 书籍详情页中示例书籍为余华的《第七天》
  5. 我的页中展示阅读历史、订单、阅读数据统计等内容


虽然 JS-Inno 这个模型绘制的设计稿样式比较简单，但内容足够丰富，且可控性非常强。按照这个逻辑又试了几套关键词，页面数量、页面主题、页面内具体包含什么内容，都是可控的。

简单来说，只要以结构化的方式、足够详细地描述你的需求，即时 AI 就能一步步做出你想要的设计参考。



如即时 AI 这类可以生成整套逻辑相关 UI 页面的 AI 设计工具，对设计团队也有着巨大的帮助。

创意参考：AI 设计工具能够利用智能算法快速生成多样化的页面结构与布局，激发设计师的灵感，拓展创意的可能性。

辅助沟通：AI 能在项目初期提供多样参考，帮助团队成员高效沟通、确定方向。

效率提升：即时 AI 提供的不仅仅是一个参考、一个示例、一个只能看看而已的图片，它生成的是多张逻辑相关、可编辑、分层结构清晰、主题色彩可控的页面，使用 JS-UIbotics 模型创作的页面还包含了部分原型设计。总的来说，是一个完整度很高的参考方案。

总而言之，与 Midjourney 等工具直接提供图像素材不同，AI 在 UI 设计领域的应用更多是对流程的优化、对现有团队协作效率的提升。让 UI 和 UX 设计师们可以将更多精力放在研究用户和研究业务上，去提升我们解决问题、给出合理方案的能力，这些才是最重要也最核心的。

「即时 AI」官网：https://jsai.cc/ai/create


- END -


我们相信设计师和创造者一样是思想家

一个开放的共创学习型产品设计社区
助力全球 1 亿设计师成长

欢迎添加 ⭐️  星标 · 获取每天推荐知识分享
每天阅读充电 · 养成终身学习
「资讯」「文章」「活动」「招聘」「课程」

创新 / 成长 / 共创 / 公益
所有平台赞助
将用于社区建设和反馈社区粉丝
期待与更多优秀产品设计师一起成长
👇👇👇
扫码进群
全年助力设友建立设计知识体系
「体系化知识研讨」
「书籍共读」「职场讨论」「活动交流」
分享设计/管理/职场/心得，定期直播，答疑解惑
免费加入 · 特约邀请


↓↓↓点开『阅读原文』，关注星球资料库
good-icon 0
赞
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter
    三分设
    三分设
    736
    文章
    0
    获赞
    UniSMS (合一短信) NEW

    相关文章推荐

    plat-ensure-img