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

 约 6 分钟

写在前面:

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 平台的开放平台指南

clipboard.png

阅读 3.9k

推荐阅读
互联网杂货
用户专栏

关于互联网技术,产品,设计的一些译文和自己的看法

5 人关注
7 篇文章
专栏主页
目录