在过去的三年里,广泛研究并测试了产品设计师如何利用天生性 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] 从这里开始设计更好: #