［譯］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 平臺的開放平臺指南