07｜人机交互：在流程和对话中交互的新范式

你好，我是产品二姐。

上节课，我们通过“场景扫描->场景聚焦”解决了一个单点问题，这节课，我们深入场景来解决一类问题：将非结构化数据转换为结构化数据，从而构建“文本数据提取小助手”这一类产品。我会把这节课的重点放在AI产品中的人机交互设计部分。

“人机交互”听起来简单，其实在AI产品中，可以拆分出三个重点。

重点一：如何利用人类反馈让AI产品变得可控？这类产品的一个特点是AI与用户之间的交互类似“勤务兵”与“将军”的关系，我会通过案例，告诉你怎么让AI完成枯燥的执行工作，用户完成决策性工作。

重点二：如何通过对话、可视化工作流，让人机交互变得更自然？我会为你呈现设计文本数据提取小助手交互原型的过程，同时说明AI在交互方面带来的一些变化，掌握将图形界面融于对话的方法。

重点三：如何成为一个懂交互的AI产品经理？AI产品和互联网产品的交互大不相同。我会和你分享自己做产品交互设计的三个套路。

• 首先是要掌握图形化思维、信息架构，作为设计的第一性原理。

• 其次是向创新的AI产品，而不是垄断型的AI产品学习。

• 最后，在实际操作中，要先设计用户旅程，再做原型图设计。

话不多说，我们直接开始。

利用人类反馈让AI产品变得可控

上一节的产品小样展示给客户后，随即就给了我们更多的材料，希望汇总成表格。比如下面两篇文章。

文章1：2020年全国煤矿事故十大典型案例
文章2：2021年全国矿山事故十大典型案例

下图是这两篇文章中的节选段落，你可以看到每个案例里都有固定的几项：时间、地点、发生主体、死亡人数、发生原因等。

对于这个材料，客户的诉求是将上述文章公布的事故案例按照表格整理出来。

这个诉求并不难实现，你可能会用以下思路写提示词。

“给你一篇文章，文章内容是安全事故描述，以csv的格式输出每次事故发生的时间、地点、责任主体、死亡人数、发生原因、主要教训”。

但这并不是一个产品经理的思路，而是一个会使用AI工具生成报告的用户思路。从产品角度，我们需要写出更具“泛化能力”的提示词。做到不管什么样的文章，要提取什么样的要素，提示词都可以适配。

我们的提示词会这样写：

## Task:
给定一段非结构化文本，并使用csv格式将其转换为组织良好的表格格式。


## Step：
1. 识别文本中提到的主要实体、属性或类别，并将它们用作csv格式的列名。
2. 从文本中提取相关信息并填充csv每行中的相应值。
3. 确保数据在csv结构中准确表示并正确格式化。
4. 生成的csv文本需要完全体现原始文本中的内容。


## Format
直接输出csv文本，不要输出其他文字，不需要解释


## Input：
"
{网页内容}
"

小贴士：上述的提示词是依照OpenAI和Anthropic官方常见场景提示词范本的基础上修改的，你在工作中也可以以此为参考。
OpenAI 提示词示例：https://platform.openai.com/docs/examples
Anthropic提示词示例：https://docs.anthropic.com/en/prompt-library/library

我们把上述提示词输入模型后，得到下面的结果。

为便于阅读，以表格形式展示输出

这样的输出确实结构化了，不过客户觉得有些列并不需要，比如事故编号，事故类型。这就是“可控”的精髓：筛选。那现在，我们就需要在生成CSV前让客户指定提取内容。这就需要大模型在执行的过程中请求用户指点。所以，提示词应该分两步来写。

1. 让模型读取文章，自动给出建议的列名，让用户选择所需列名。

2. 按照用户选择的列名，提取相应信息，汇总为表格。

来看看我是怎么写这个提示词的。

第一步，给出建议的列名。（代码第八行）

## Task: 给定一段非结构化文本，并使用csv格式将其转换为组织良好的表格格式。 


## Step： 
1. 识别文本中提到的主要实体、属性或类别，并将它们用作csv格式的列名。 
2. 当你识别到列名的时候，输出列名，让用户确认。 


## Format 
直接输出列名，不要输出其他文字，不需要解释。


## Input：
{网页内容}

此时输出：

假设用户去掉了事故编号、事故类型这两项内容。

第二步，把客户的选择作为参数 {指定信息} 传入到第二步的提示词中，提取出相应信息，以CSV格式输出。

## Task:
给定一段非结构化文本和用户指定的关键字，使用csv格式将其转换为组织良好的表格格式。


## Step：
1. 根据客户指定列名，从文本中提取相关信息并填充csv每行中的相应值。
2. 确保数据在csv结构中准确表示并正确格式化。
3. 生成的csv文本需要完全体现原始文本中的内容。


## Format
直接输出csv文本，不要输出其他文字，不需要解释


## Input：
{
"指定列名":{指定信息}
"内容"：{网页内容}
}

这样处理之后输出的CSV就去掉了事故编号、事故类型这两项内容。

我们把上述的过程用一张图来展示：

这个过程虽然简单，但却契合了用户的两个诉求。

1. 让AI的执行变得可控，把不需要的内容“扼杀”在萌芽时期。在很多场景下，这种方法还可以将AI的幻觉也“扼杀”在早期。

2. 把用户从没有含金量的执行类工作（提取信息）解放出来。

我记得在ChatGPT刚刚出来的时候，人们都惊讶于Ta “长篇大论”的输出能力。但不久大家就发现，这个长篇大论可能在最开始的思路上就错了，或者某些局部需要修改。此时再想修改的时候就要费好大力气修改。这种“亡羊补牢”不仅消耗算力，也会消耗用户精力。

而现在AI产品已经过了被AI “惊艳”的阶段，回归理性。此时我们更需要通过“及时汇报->人类反馈”的方式让AI变得实用，这种关系就像是勤务兵与将军的关系。

我用一个漫画来对比“没有AI、AI初期和AI成熟期”这三个时代的人机交互需求变化。

你看，好的人机交互是人和机器的相互促进，而不是单一的机器完全由人指挥，也不是人类躺平不动任由机器执行，而是机器汇报->人类决策这样的模式。

按照这一模式，我们对这个产品进行各种功能扩增的时候，继续加入了很多这样的汇报->决策的环节。比如：

• 在生成详细报告前，让AI先给出大纲，然后人类修改后再给出最终结果。

• 在生成大纲前，让AI根据文章内容给出几个分析框架（比如5W2H、四象限分析法、对比法、时间轴等）建议，让人类选择后，再根据不同的框架给出大纲。

这样，我们单单将提示词拆分为多步骤，在步骤中间引入人来参与，就让产品具备了可控的执行力，这相当于训练好了产品的“里子”，接下来就要把产品“包装”一下呈现给用户，构建产品的“面子”。

如何通过对话、可视化工作流，让人机交互变得更自然？

很长一段时间，市面上大多数AI产品都以文字对话这一种形式存在，但人类是多感官动物，对单纯的文字对话会很快厌倦。想象一下，客户每次生成报告都需要输入一长串提示词，估计很快就会弃用这个产品了。

作为一个产品经理，在设计用户体验的时候，需要抛开所有的技术要求，考虑如何让用户最直观、最快地看到产品价值，即把用户需求用图形化的方式展示出来。

比如在这个产品中，用户需要把非结构化数据转换成结构化，我们用图形化展示就是这样的。

而同时呢，客户需要将这个工具融入到他们自己的通用小助手中，所以我给用户设计的产品低保真图就是这样的，将交互动作放进对话框里。

第一张图中，我们将“文本生成表格”作为一个常用工具列在对话框顶部，用户想要在对话时使用这个工具时，直接点击就可以，相当于“呼叫”助手出现。之后，助手就会提醒用户提供数据源，这里的数据源就直接以附件或者链接的方式提供给Agent就可以了。

在第二张图中，助手给出Ta自动总结的列名，作为建议列，并提示用户可以修改。这时如果让用户用文字来描述哪几列就不如让用户直接通过右键删除、增加来得快。 所以呢，这里以表格方式给到客户列名。

第三张图中，助手按照用户的需求生成了表格，那么这个表格可以下载使用了。

这个过程中，产品会将用户的注意力始终集中在这一个对话框里，而这个对话框可能是N个应用的入口，比如未来还可能有日程安排助手，文本合规检查助手。对于用户来说，就不用和很多个App交互了。

这种对话中有图形化的方式我把它称为GUI in LUI（即Graphic User Interface图形用户界面被套在Language User Interface 语言用户界面中）。想象一下，未来应用没有固定前端页面，而是将API返回的信息以合适的组件动态实时组装的形式交付给用户。人机交互更像人与人之间的沟通，有时候直接用对话，有时候需要画个图或者写个公式，有时候还需要演示动态效果。我认为这是大语言模型会在用户体验方面带来的改变之一。

更进一步，在最后生成表格的时候，我还建议将原有的转圈loading参考matrice 的产品换成下图这样，当用户看着这个画面的时候，甚至有种“检阅”的仪式感。

当然，这种交互方式目前还没有在应用中被广泛采纳，这正是技术革命早期的魅力，大家都在探索新的交互方式。除此之外，我再来分享我看到的另外一个案例。

在centauri-ai 这个产品里，用户是投资分析师，他们需要在过去几年的上市公司财报中提取相应内容，汇总并生产出一份总结陈述报告。这个流程可以分为：信息提取 ->信息转换-> 信息分析 -> 报告生成四个环节，在产品的每个环节都设计了人来参与的交互设计，从而达到稳定、可靠的输出。

比如在信息分析这一步骤，AI 产品会首先规划一个分析流程，并用流程图的方式表现，其中每个节点代表流程中的一个环节；用户可以选中某个节点进行增加、删除或者修改，之后就可以得到新的分析流程。

当然，AI产品的用户交互最终还是要根据用户的需求，使用场景，使用习惯来改变，但有两条原则永远不会改变。

1. 让效果呈现最直观，使用户最容易理解。

2. 让用户的学习路径最短，让产品价值最快给到客户。

如何成为一个懂交互的AI产品经理？

到这里，你可能会有所疑惑：二姐是如何收集到这些案例的？怎么我就没看到这些产品呢？在这里，我和大家分享我个人的交互设计能力提升的几个套路。

1. 打造基本功：建立图形化思维，掌握信息架构理论知识

图形化思维，信息架构用于人机交互设计中，简单来说就是每一个按钮、菜单、文字都应该是有组织、有顺序地排布，能让用户很快就理解。

比如下图是一个提供一站式模型训练服务的产品（为了说明概念，我省去了页面非必要元素）。

左边的菜单从上至下依次是：数据集->训练任务->模型管理，这个顺序的设计遵循了模型训练的步骤：准备数据->训练模型->模型管理。而菜单下半部分设置、个人管理不是用户频繁使用功能，且功能上不属于模型训练过程，因此和前三项菜单中间间隔较大距离区分。

作为一名产品经理，希望你能在这些细节上较真，带给用户最顺畅的体验。

2. 原型图设计：先设计用户旅程，再设计原型。

比如还是刚才一站式模型训练服务的产品，用户旅程是这样的，并且我在每个节点里列出用户要完成的核心任务。

当确定核心任务之后，页面上所有的元素的展示都是在帮助用户决策是否执行这个任务。比如步骤2中的核心任务是：选择哪几个数据集作为微调数据。那么，所有决定是否采纳这个数据集的信息都要暴露在数据集的列表里，比如采集时间段、数据集里的数据条数、数据集名称。

3. 借鉴他人之长：寻找AI时代的创新型的产品

在AI应用还没有出现“百花齐放”的时候，大部分人只能找到“一枝独秀”来参考做产品。比如当下大多数AI应用还停留在chat形式，就是因为大家在借鉴OpenAI 的ChatGPT这一枝独秀。

在这里我给大家推荐三个丰富的参考来源，他们就是百花齐放前的“花骨朵”，我之前和大家分享的示例部分就来源于此。

• 美国最大的天使投资机构Y Comibnator每年两季训练营的入选项目。他们会公布所有项目的官网、产品设计等。大家可以通过左侧的Batch选择最新入营项目一一来看，比如S24代表2024年Summer夏季营项目[参考1]。

• Product Hunt，商业化比较成熟的新产品打榜网站。主要以to C产品为主，目前有大量AI新品上线。

• Globe engineer，是两位AI应用独立开发者的网站。他们会通过demo的方式呈现自己心中的AI交互模式。

相对于“垄断型”产品，我更喜欢在这些“萌新”产品中学习。

以上三点是我在思考产品交互设计时的心得，更系统的学习大家也可以参考极客时间的《体验设计案例课》，我从中也收获颇多。

产品小结

课程最后，我们来总结06、07两节案例课的要点，我总结了一个顺口溜，看看是否能唤起你对过去两节课知识点的回顾呢？

1. 企业场景难找寻，一个框架来扫描，知识生产都渗透，比比性价哪个高。

2. 全面铺开不合适，单点切入更容易，提示工程出小样，据此收获真反馈。

3. 单个问题不算牛，一类场景才算强，AI还是小学生，人当将军ta当兵。

4. 视觉交互有变革，图形融入对话中，信息架构要清晰，原型设计旅程先。

你可以看到，在实战案例中，我没有单纯地讲述案例，而是以案例为始讲述构建AI产品的方法。希望课程既能授之以鱼，又能授之以渔，和你一起做出优秀的AI产品。在接下来的案例中，我仍然会遵循这个原则，讲述Agent技术在产品中的应用。

课后题

请你查看Y Comibnator2024夏季（S24)入选项目，把你觉得有意思产品在评论区分享给我们吧。

同时，大家也可以尝试像文中的案例一样，把Y Comibnator里的项目描述（非结构化文本数据）转化成表格形式（结构化数据），这样这个表格就可以成为随时翻阅的用户体验参考手册啦。

提示：先利用网页爬取工具提取所有的项目URL，再循环遍历每个URL地址对应的网页内容，把一个网页的信息通过提示词工程提取为结构化数据，然后保存为CSV文件即可。 这个过程会用到简单的python完成URL地址爬取、网页信息爬取的工作，对产品经理来说有点挑战。不过现在的大模型产品代码能力也很强，大家可以借助智谱的 ChatGLM 来编码，完成这个小小的挑战吧。

参考

1. Y Comibnator入选项目。

2. Globe engineer

3. Anthropic medical example

>>戳此加入课程交流群