如何根据原型图设计ui，ui原型图制作

关于AIGC已经有很多讨论，但让我们从实际的角度来看看共享。在这篇文章中，作者结合现实例子来分享如何使用AIGC创建界面以及如何使用AIGC帮助优化。我们来看看这篇文章的总结吧。

我们的行业不尊重传统，只尊重创新。

“AI会取代我们吗？”这个问题我们最后留着，开始学习如何使用AIGC来创建界面并指导优化。

使用人工智能创建界面有四种主要工具。 Chat GPT、Figma（线框设计器插件）、Real Time Design（实时AI）、文心一言（为无法使用AI Chat GPT的同学提供的备份解决方案）。

1.将UI设计与AIGC的基本原则相结合虽然UI设计的目标是创建直观、易于使用和有吸引力的用户界面，但AIGC是人工智能技术生成的文本、图像和音频或视频的集成。内容。两者结合可以显着提升用户体验和交互效率。

下面是对一些“UI设计原则”和“AIGC”结合的理论分析。

1. AIGC一致性和风格化原则：UI设计强调颜色、字体、布局等界面元素的一致性。 Fusion：AIGC 可以生成符合您的应用程序风格的图像或文本。例如，如果您的应用程序的UI 风格是简约的，AI 可以生成简洁、统一的图像或文本内容，以确保风格的一致性。提示：可以使用Stable Diffusion训练模型、MidJourney（Seed、Tune）、闻心一言、Chat GPT结合Context来解决一致性问题。

2、反馈与互动AIGC原则：及时反馈是提升用户体验的关键。 Fusion：使用AIGC 实时生成反馈内容。例如，在在线教育平台中，当学生提交答案时，人工智能会立即生成个性化的反馈和建议，以改善学习体验。提示：您还可以尝试将“Chat GPT”API 接口集成到您的产品中。该解决方案也常用于各大教育应用。

3、简洁智能AIGC原则：UI设计应简化用户交互，易于用户理解和使用。融合：AIGC自动生成用户可能感兴趣的内容，减少用户的搜索和选择时间。例如，在新闻应用中，AI可以根据用户的阅读历史和偏好智能推荐相关新闻，简化用户查找感兴趣内容的过程。举个例子：最流行的是抖音，这是一个电子商务平台，它利用用户的观看历史、喜欢/不喜欢、观看时间等数据来推荐视频，并通过搜索、访问和购买来推荐他们喜欢的产品。还。这种推荐机制可以帮助用户发现与他们过去浏览过的内容相似的产品，从而提高用户保留率。

4.可用性和适应性AIGC原则：UI设计必须考虑不同用户的可用性需求。融合：AIGC可以生成适应不同用户的内容。例如，对于有视觉障碍的用户，AI可以根据用户的阅读习惯将文本内容转换为音频，并调整字体大小和对比度，使内容更易于阅读。示例：Safari浏览器翻译阅读、虎嗅、36kr文字调整等。本质是考虑弱势群体，让产品更有温度。

5. 吸引力和创造力AIGC 原则：UI 设计应该抓住用户的注意力并提供愉快的用户体验。集成：AIGC 可以根据用户兴趣生成富有创意和吸引力的内容，例如个性化图形设计和视频内容，从而提高用户参与度和满意度。举个例子：在AIGC的支持下，很多企业制作了大量视觉效果爆炸的宣传视频，同时AIGC也参与了相应的视频，尤其是去年的双11。我们看到与AIGC结合我们得到了更高效、更丰富、更标准的设计，但是“更标准的设计”是好事还是坏事呢？

2、使用AIGC生成界面：操作指南这次分享一个APP的案例，它是一个工具类产品，首先我们的思路是“定义——发散——重组——原型——测试——修改”。

1.使用“聊天GPT经典”和“文心一阳”提出最简单的提问方式：角色扮演——问题申诉-提出需要答案的问题。

文轩：作为一名资深的交互设计师，如果我现在想做一个工具类产品，这个app的主要功能是“发送快递和确认快递”，具体应该怎么做？

接下来，看看“聊天GPT经典”和“文心一言”的答案，并根据它们的共同焦点缩小关键词范围。

从照片中可以看出，“文心一言”在第一个答案上效果并不好，直到第二个答案上我们才梳理出了具体的功能模块。

聊天GPT 经典：

主要功能：发送快递（输入发货和收货地址、选择快递公司、获取报价、安排取件等）、确认快递（快递跟踪、状态更新通知等）。 ）。附加功能：历史查询、费用估算、用户评分系统、常用地址存储等。文鑫的话：

核心功能：登录注册模块、邮件检查模块、个人信息管理模块、消息通知模块、帮助与反馈模块。

“文心一言”这里的回答比较规范，但我的问题是“主要功能是发快递和确认快递”，而且只有“聊天”，所以我理解并认为“聊天GPT”更好在这方面。 GPT”重点关注这一点。

2. 有了答案后，您可以利用“基于文本的人工智能”的力量将其与上下文联系起来，详细回答并直接绘制原型图和信息架构。

文轩：“根据上面的回答，请帮我画一下这个app的线框图和信息架构。”

信息架构：

GPT Classic 聊天：主页、发送快递、检查快递、记录、配置。文心一言：登录注册页面、首页、发货页面、验货页面、个人信息页面、消息通知页面、帮助与反馈页面。事实上，“聊天GPT”在这里似乎更明显，显示了5个页面过渡，而“文心一言”则更详细地显示了7个页面过渡。这个环节我们先参考竞品“顺丰、菜鸟、丰巢”看看他们的布局结构。

可以看到它基本都是以“4”为主，但问题是最初的App只要满足产品的核心功能就可以使用，所以我把“App权益和生活服务”的细节去掉了。最后选择底部区域为“首页、快递、我的”。

3. 现在构建详情页的问题已经清楚了，开始使用另外两个AI工具构建详情页：Figma（线框设计器插件）和real-time design（实时AI）。

同样，我们首先使用Chat GPT Classic 和文心一言的功能来了解上下文并构建布局框架。

覆盖：

文轩：“根据这些，请帮我设计一下这个应用的首页布局。”

“聊天GPT经典”：

上部区域：Logo、应用名称、图标、登录主要功能区域：快递发送、快递查询快捷服务：提供“历史记录”、“费用估算”、“常用地址”等快捷服务。底部导航栏：首页，用快递给我发一句“心声”：

顶部区域：客户评价、标识主要功能区域：特快专递、特快确认特色服务：采购、跑腿、广告推荐底部导航栏：首页、特快专递、我的我们整理这些信息并将其与竞争产品相结合。其功能结构可以大致概括如下。

顶部区域：特色Logo 主要功能区域：快件发送、查看快件信息区：快件信息底部导航栏：首页、快件发送、我的使用线框设计插件（免费）、实时AI（20次免费）整理这些信息每天）''。

文选：“是一个快递和确认的工具应用程序。首页分为四个区域。顶部区域显示鲜明的标志，主要功能区是快递和确认。显示两个功能，信息区域显示物流信息（包括未提货；“包裹、提货、配送状态”），底部导航栏有三种状态。

当翻译成英语时，可以将Wireframe Designer 视为“用于发送和检查包的工具应用程序”。首页分为四个区域，顶部区域显示您自己的标志，主功能区显示两个功能：发送和检查包裹，信息区域显示以下：物流信息，底部导航栏有三种状态。 ”

你可以看看前面提到的“线框设计插件，实时AI”的生成状态，并再次与“竞品”结合，得到最终的布局。

这里“发送到我的”的方法是一样的，这里就不详细解释了，我们直接看一下效果。

4. AIGC必须使用“PS/Figma和Mid Journey”三个工具来构建大型视觉屏幕。

首先找到“中间旅程”或者使用“定制”方法。

文爽：“你现在是‘中途’专家了。”现在需要使用“中途”来生成大数据屏幕。背景包括地球元素。使提示成为相应的“提示”。

（这里之所以“聊天GPT”是“提示”的形式，是因为它是以代码的形式发送的，可以通过点击“复制代码”直接复制）

当然，这个命令是不可编辑的，所以这不是我们想要的，所以我们必须通过其他方式查询它。

文轩：“你现在已经是‘中游’高手了。”我想生成一个与“数据大屏”相关的图像，但是我应该输入什么相关的“提示”？

经过详细的解释，你会看到他提供了确切的“提示”。

“我们设计了一个现代风格的数据大屏，用于商业销售分析。以蓝色和白色为主色调，包括折线图、饼图和地图。大屏包括销售趋势、区域销售、产品类别的分布和比例界面简洁，科技含量高。

这样，你就对主视觉和形式参考有了一个大概的了解，但是当然你不能把这个外观用作真正的项目，它只是用作视觉参考，所以画出实际可以应用的效果.我会继续这样做。

您可以在“Chat GPT”路线的关键字之前编写和绘制分析。

“中国地球、HUD、FUI、数据可视化、3D渲染、C4D、Dennis Schaefer、未来主义、artstation、Behance、全景、屏幕是蓝色的-ar 16:9”

这种效果用作背景时看起来更好，因此在“PS/Figma”上绘制必要的形状以达到最终效果（PS/Figma中的绘制过程将被省略）。事实上，完全使用人工智能来生成背景花了相当多的时间，但随着我们继续尝试，我们发现了许多有趣的技术。

我前面提到的“定义——发散——重组——原型——测试——修改”其实是罗子雄先生在接受采访时说的。 “发散（看竞品）、探索可能性和组合（产品、设计重组）”、最小原型、测试（与周围的人、目标客户进行测试）、定量评估（用户（或者说用户能找到自己想要的东西）、用户必须尝试多种可能性。始终寻求改变并找到满意的答案。

3. AIGC UI设计发展趋势分析当前趋势和未来发展方向。

我们讨论AIGC 如何继续影响和改变UI 设计领域。

对于“AIGC UI设计发展趋势”，你可以先问“聊GPT”，看他如何回答。

文选《透析：AIGC UI设计发展趋势及未来UI设计师应如何应对》

“Chat GPT”的两个答案有一些共同点：“提高创造力”和“更令人满意的用户体验”，这也是设计师应该具备的两件事。发展趋势正朝着更加个性化、高效化、智能化、以用户为中心的方向发展。

UI设计其实离不开交互设计。只有了解你的用户，你才能创造出真正伟大的产品。随着人工智能的出现，这似乎是标准答案，但这是设计上的错误。无论“城市”、“包豪斯”以及当前的各种课程无疑都告诉我们，设计师仍然需要“以人为本的方式体验生活”。生活本身就是设计的开始，设计归根结底是对生活的陈述。

“短期内，人工智能更有可能改变工作的性质，而不是完全取代它们。”

4.总结当你真正使用“AI”工具时，“中途”、“稳定扩散”、“聊天GPT”似乎都是合理的标准答案，但设计的本质并不合理。合理有助于实现标准化和规范化。一致性，但真正影响我们核心的必须是设计的表达和对生活的洞察。

设计是将问题转化为可能性的艺术。虽然本质上是一个旨在解决问题的过程，但它也是一种以人为中心的创新方法，将人类的需求、技术的可能性和商业成功的要求融为一体，产生更有温度的创造。正如理查德·格雷夫所说，“设计是信息和理解之间的中介。”

那么，“人工智能会取代我们吗？”这个问题有答案吗？

本文最初由@文兴无大头发表于《人人都是产品经理》，未经许可不得转载。

标题图片由Unsplash 根据CC0 协议提供

人人产品经理平台仅提供信息存储空间服务。