在过去的三年里：广泛调研并验证了产品设计师如何利用生成性 AI 技术提升设计工作流程的效率和准确性

时间：2026-07-25 07:53:02 编辑：袖梨来源：一聚教程网

在过去的三年里，广泛研究并测试了产品设计师如何使用生成性 AI 技术来提高设计工作流程的效率和准确性

在过去的三年里，广泛研究并测试了产品设计师如何使用生成性 AI 技术来提高设计工作流程的效率和准确性。

尽管我们还处在初步阶段，设计师们必须在今天就将 AI 整合到我们的设计过程中。这种整合将使我们能够更高效、更精确地工作。

市面上常见的 AI 工具有 ChatGPT、Gemini、Midjourney 等，这些工具展示了人工智能技术的关键特性。此外，每天都有许多新工具发布。

除了这些新的 AI 工具之外，我们还有一些最初并非 AI 的工具，如 Figma 和 Miro。这些工具已经开始添加 AI 功能，现在我们可以用它们来更好地工作。

在本文中，我将向你展示如何使用 FigJam AI 作为一种高效的 AI 流程图制作工具来创建流程图。

设计师们怎么说？“停止移动矩形，投资于创造力。”

这正是我想向你展示的。

什么是 FigJam AI？FigJam AI 是 Figma 添加到 FigJam 中的 AI 工具。它可以帮助你聚类信息、生成设计思维工作坊、组织信息、总结信息等。

查看我关于 FigJam AI 的文章，了解这个 AI 功能的更详细介绍。

使用 Figjam AI 进行更好设计协作的逐步介绍^[1]
增强设计团队工作流程与 Figjam AI^[2]

在设计师移动矩形之前，现在他们必须详细写出他们想要什么当我向我的学生展示如何使用 AI 时，我解释的第一个概念之一就是告诉 AI 你想要什么是很重要的。如果不这样做，你将不会得到你想要的结果。

这强调了与传统工作流程的显著区别。

通常，我们不会从明确的最终解决方案开始；相反，我们会实验、调整设计、移动矩形，并在过程中逐步完善我们的愿景。然而，AI 需要从一开始就提供精确的指示。

在我展示的示例中，你可以很好地感受到这一点。在过程中，我对提示做了小的更改，你可以看到它们如何影响结果，以及为什么明确指定你想要什么是这个过程的关键。

需要注意的是：AI 模型也会影响结果，但这些示例显示提示必须准确。

从文本生成流程图我进行了几次使用 Figjam AI 的测试，以下是我认为最有助于理解这个过程的三个测试。我从简单的提示开始，逐渐转向更复杂的方法。

测试1：顺利流程我从在网上商店购买T恤的简单流程开始，看看AI是否可以从中生成完整的流程图。

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。- 选择尺码和颜色。- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。- 确认订单。
只创建这个流程。不要添加其他内容。

这是结果：

结果测试1

•你可以在Figma中查看流程^[3]。•从Figma社区复制文件^[4]。

我的笔记

FigJam AI准确地创建了我所要求的。AI通过消除手动调整“矩形”的需要，使创建过程更加高效，从而简化了图表的创建。

测试2：包含一个错误的流程在第二个测试中，我想看看AI是否可以在流程中添加一个条件，以处理某个环节出现错误的情况。

为此，我在流程中添加了用户添加错误促销代码的情况。

提示是相同的，但我添加了这一行：“考虑错误情况：‘促销代码无效。’”

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。- 选择尺码和颜色。- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。- 确认订单。
考虑错误情况：促销代码无效。
只创建这个流程。不要添加其他内容。

这是结果：

结果测试2

•你可以在Figma中查看流程^[5]。•从Figma社区复制文件^[6]。

我的笔记

Figjam AI准确地完成了任务，并在流程图中添加了错误情况。

测试3：包含三个错误的流程图下一步是看看我是否可以在提示中添加三个错误情况，以及AI是否能理解它们。

我在提示中添加了这些错误情况：

•促销代码无效。•颜色缺货。•支付被拒绝。

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。- 选择尺码和颜色。- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。- 确认订单。
考虑以下错误情况：- 促销代码无效。- 颜色缺货。- 支付被拒绝。
只创建这个流程。不要添加其他内容。

这是结果：

结果测试3

•你可以在Figma中查看流程^[7]。•从Figma社区复制文件^[8]。

我的笔记

Figjam AI 完成了任务，但存在一些问题：

•所有错误情况都被添加到流程的末尾，使其难以理解。•视觉效果混乱，线条交错且杂乱。你可以在图中看到它的样子。•错误情况“支付被拒绝？”是负面的，所以如果答案是“否”，支付是成功的。我不喜欢这样，因为这可能会让人困惑。写“支付是否被批准？”会更好，所以“是”意味着成功。•如果支付被拒绝，AI 建议联系客户支持。这是可以的，但也许你想显示错误消息并写上“使用其他支付方式”，因此在解决方案方面也需要更精确。

改进后的提示：为了避免手动更改，我想通过编写更好的提示来测试AI的能力。我的目标是看看改进后的提示能否正确处理所有错误情况。

我做了以下更改：

•我将错误情况写成问题。•我将问题添加到步骤附近，而不是末尾。•我向AI助手解释了每个情况下我希望发生的具体内容。

这是提示：

像产品设计师一样，为在电子商务商店购买T恤的过程创建流程图：
- 访问主页。- 选择T恤类别。- 筛选和排序。- 选择一件T恤。询问“颜色有货吗？”如果是，继续下一步。如果不是，写上“通过电子邮件通知我。”- 加入购物车。- 查看购物车。- 结账。- 填写运输和支付信息。- 用户添加促销代码。询问“促销代码有效吗？”如果是，继续下一步。如果不是，写上“促销代码无效”，并连接到步骤“用户添加促销代码。”- 确认订单。询问“支付被批准了吗？”如果是，下一步是“完成”。如果不是，写上“联系客户支持。”
只创建这个流程。不要添加其他内容。

这是结果：

结果测试3改进后

你可以在Figma中查看流程^[9]。

我的笔记

•所有错误情况都正确地添加了。•AI助手完全按照我的要求完成了任务。•流程图更易读且易于理解。

测试的关键见解•如果流程简单，提示编写会更容易；当涉及复杂流程时，你需要花更多时间来编写。•提示的清晰度会带来更好的结果。你的文字指令越详细和清晰，AI生成所需流程图的准确性就越高，从而减少修改的需求。•通过各种方式编写提示来进行试验，以找到与AI沟通的最有效方法，尤其是针对复杂的情况。•对于错误情况，最好将问题写成肯定的形式，这样“是”会引导到正确的步骤。•显示聊天如何继续。如果你展示了一个错误情况，请准确解释你希望在“肯定”结果和否定结果下发生的事情。•你也可以生成顺利路径，单独创建错误情况，然后将它们粘贴到流程中。•使用AI创建流程图是很棒的，但有时手动调整图表的部分比花大量时间编写完美的AI提示更快。

总结在本文中，我向你展示了如何使用 FigJam AI 作为AI流程图工具来创建流程图和图表。

我展示了我使用该工具进行的三个测试。第一个是顺利流程图，第二个是包含一个错误情况的流程图。

然后，我们看了一个更复杂的包含三个错误情况的流程图。我分享了AI没有完全理解我第一次提示的内容，所以我需要重新编写提示，最终得到了我想要的结果。

在文章的结尾，我分享了一些从这个过程中了解到的关键见解。

每个设计师都需要的用于创建用户流程的最佳 ChatGPT 插件使用 Whimsical ChatGPT 插件创建用户流程^[10]

如何轻松创建用户流程创建一个清晰易懂的用户流程可能是一个非常困难的任务。让我们看看一些帮助你完成这项任务的方法…… uxdesign.cc^[11]

从这里开始设计更好^[12]

感谢阅读本文。我希望这篇文章能帮助你了解如何使用 FigJam AI 创建流程图。请随意与朋友或团队成员分享，如果你有任何问题，请告诉我。

更多信息本文由三人行AI翻译整理自：https://medium.com/design-bootcamp/ai-flowchart-c141502cb661，如对你有帮助，请帮忙点赞、转发、关注，谢谢。

References[1] 使用 Figjam AI 进行更好设计协作的逐步介绍: uxplanet.org
[2] 增强设计团队工作流程与 Figjam AI: uxplanet.org
[3] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A2&t=KtWc8T4asdmqu1fk-1
[4] 从Figma社区复制文件: https://www.figma.com/community/file/1351924642365998144/3-prompts-for-creating-flowcharts-with-figjam-ai
[5] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A26&t=ttLTFJslqwducAwK-1
[6] 从Figma社区复制文件: https://www.figma.com/community/file/1351924642365998144/3-prompts-for-creating-flowcharts-with-figjam-ai
[7] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A57&t=KtWc8T4asdmqu1fk-1
[8] 从Figma社区复制文件: https://www.figma.com/community/file/1351924642365998144/3-prompts-for-creating-flowcharts-with-figjam-ai
[9] 你可以在Figma中查看流程: https://www.figma.com/file/FCUqaNHP0xgDlsW4ZQoalb/AI-flowchart-generator%3A-A-Step-by-Step-Guide-to-Creating-Your-First-AI-Flowchart-with-Figjam-AI?type=whiteboard&node-id=1%3A96&t=KtWc8T4asdmqu1fk-1
[10] 使用 Whimsical ChatGPT 插件创建用户流程: https://uxplanet.org
[11] uxdesign.cc: https://uxdesign.cc
[12] 从这里开始设计更好: #

推荐专题

最新下载

热门教程

在过去的三年里：广泛调研并验证了产品设计师如何利用生成性 AI 技术提升设计工作流程的效率和准确性

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程