［译］Facebook Messenger 聊天机器人的交互操作全攻略

---

写在前面：

Medium 上5min阅读时间的文章，讲的是在fb messenger 平台开发聊天机器人需要遵守的交互规则，被作者有趣的画风吸引，拿着积灰的数位板临摹了一下。不忍直视的话可以拉到文末查看作者的画风;p
聊天机器人应该算是人工智能和深度学习方面的一个应用，不仅仅是fb messenger，另外如slack, google去年年底出的Allo 甚至是微信都有应用这种对话式的场景模式。而随着人工智能还有机器学习的大热,这方面的应用相信也会更成熟，相信也会有更复杂交互模式出现.

---

原文地址 Facebook Messenger 聊天机器人的交互操作全攻略

---

译文部分：

当给网页或者移动端设计产品时，我们通常都会使用到一些固定的交互方式和界面元素，例如文本块，表格，按钮，复选框，还有开关按钮。而在设计聊天机器人的时候，这些界面元素就有些不一样了。

所以，如果你想设计一款聊天机器人，除了需要头脑风暴机器人能干什么之外，也需要冷静下来好好考虑开发聊天机器人所要求的一些设计规则。
下面我想总结一下在Facebook Messenger 平台设计一个聊天机器人所需要的聊天元素。

在文章末尾，你会看到一个关于Facebook Messenger bot 中所有交互元素的总结。

欢迎页

用户第一眼看到你的聊天机器人将会是一个欢迎页，欢迎页中你可以用不超过160字符的文字来介绍你的聊天机器人。

最好在这个页面中设置一些用户所期待的内容，也需要描述一些聊天机器人的主要功能。

用户一旦点击了“开始”按钮，你的机器人和用户的交互就开始了: 试图将设计的交互体验具体化，列出具体功能和下一步操作来鼓励用户去操作。

欢迎页最能展示你的聊天机器人的一些基础操作，关机子，或者是一些用户可以随时提问的协议等等。适用按钮也可以添加更多的功能结构。

你也可以更个性化你的聊天机器人，例如通过用户的个人输入—例如名字或者所在地—去给用户匹配正确的语言或者时间。

消息

你的聊天机器人可以使用好几种聊天类型：文本，文件，照片，适配和语音等富媒体。所有附件都可以被用户直接下载，或者也可以提供下载链接。

你也可以发送一些结构化消息帮助用户完成任务，获取信息或者回复用户的疑惑。按钮中的文字控制在20个字符以内（包括空格）

注意Facebook Messager 不支持只向用户提问模式，因为用户的回答往往不可控。所以需要给每个问题提供单选或多选的答案。
如果你想要更高级的聊天方式，可以使用通用模板来实现。通用模板可以将文本，照片和按钮结合起来。在通用模板中照片的长宽比为 1.91 : 1。如果你想发送多个类似消息可以使用连续模式。

导航页（固定菜单）

另一个防止用户聊着天而找不到目的的元素就是固定菜单。固定菜单能随时有效，也应该包含用户常用的功能操作。它是你的聊天机器人的功能清单的入口集合。

固定菜单能够随时被用户唤起。

模板

fb messenger 平台有一些很方便简单的模板，这些模板和现实中的一些应用很像：餐厅菜单 ，贸易清单，航班中的值机提醒清单，航班状态更新的表单等等..

按钮

按钮提供用户选择权，同时也引导用户到某个具体操作。设计时一般由如下按钮类型：

• URL 按钮。url按钮会跳出Messager 之外。一般建议少用。而使用更多在fb messenger里面进行交互的按钮 购买按钮。

• 购买按钮会弹出messenger原生的结账对话框，可以让用户快速下单 分享按钮。 分享按钮则会调出messenger

• 原生的分享弹窗，可以将聊天机器人分享给任何一个fb好友

• 网页浏览模式（webview） ，有些格式信息在messenger内部无法有效查看，webview则提供了一种解决方式。Webview 支持 HTML CSS,和 Javascript。可以让一些内容看起来就像原生应用里一样

• 快速回复按钮 快速回复按钮被激活后则不可再点击。这一特殊类型按钮可以获取到用户的地理位置。你也可以在快读回复按钮中添加图片

在下面的小技巧涂鸦中，你可以找到所有交互方式。欢迎在你设计的聊天机器人中使用！
更多关于每个元素的细节以及技术技巧可以访问 facebook messenger 平台的开放平台指南