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